Guided Project—Light
このレッスンでは、XcodeとInterface Builderの基礎を学びました。プロジェクトを構築することで、これらのツールに関する知識を適用します。
このガイド付きプロジェクトの終わりまでに、ユーザーがボタンをタップするたびに画面を黒から白に変更し、再び戻るライトというアプリを作成します。ライトを正常に構築するには、Xcodeドキュメントを使用し、ブレークポイントを設定し、アウトレットとアクションを作成する必要があります。
このプロジェクトでは、Swift言語に比較的慣れているにもかかわらず、いくつかのコードを変更する必要があります。プロジェクトのコード固有の部分に苦労しても落胆しないでください。続けてください!
パート1 - ボタンとアクションを作成する
前のレッスンで使用したシングルビューアプリケーションテンプレートを使用して、新しいXcodeプロジェクトを作成します。プロジェクトに「ライト」という名前を付けます。プロジェクトを構築して実行すると、ユーザーが操作するものは何もないことに気付くでしょう。あなたはすぐにそれを変えるでしょう。
プロジェクトナビゲーターでMain.storyboardを選択して、Interface Builderでストーリーボードを開きます。
p.96
Xcodeによって作成された初期インターフェイスには、ViewControllerのインスタンスが含まれています。ViewControllerはUIViewControllerのサブクラスで、シングルビューアプリケーションテンプレートの一部として事前に定義されており、プロジェクトナビゲーターにリストされています。
「Document Outline button 」ボタンを表示。押すとMain.storyboardで定義されているすべてのビューコントローラーを表示します。
ドキュメントアウトラインビューでユーティリティ領域の上部に、この特定のビューコントローラがViewController型であることを確認して UIViewControllerを選択し、Identity inspector buttonをクリックします。
p.97
シミュレーターを使用している場合は、キャンバスの下部にある「名前を付けて表示」ボタンを使用してキャンバスのサイズを調整します。キャンバスのサイズをiPhone 8の設定に設定し、Xcodeツールバーの左端にあるドロップダウンメニューからiPhone 8シミュレーターを選択します。
このプロジェクトに自分のデバイスを使用している場合、ビューコントローラーのサイズが画面のサイズと同じではない可能性があります。キャンバスの下部にある「名前を付けて表示」ボタンを使用して、デバイスに合わせてキャンバスのサイズを調整しますが、縦向きのままにします。
ビューコントローラのビューを選択し、Attributes inspector を選択します。
これにより、任意のインターフェイス要素の属性をカスタマイズできます。
このビューの背景色はすでに白に設定されています。これは起動時にアプリの望ましい状態なので、今すぐ何も変更する必要はありません。
次に、ビューの背景色を変更するために使用されるボタンを追加し、ライトのオンとオフをシミュレートします。ユーティリティパネルの右下隅にあるオブジェクトライブラリを探します。前のレッスンで学んだように、このライブラリには、ストーリーボードに追加できる一般的なオブジェクトのリストが含まれています。リストをスクロールするか、ライブラリ領域の下部にある検索フィルタを使用してください。
p.98
ライブラリ内の「ボタン」オブジェクトを見つけて、ビューの上にドラッグします。カーソルを放すと、ドキュメントアウトラインにボタンがサブビューとして追加されたことを示す必要があります。
p.99
ボタンをビューの左上隅に移動します。マージンアライメントガイドは、オブジェクトを正しい位置にスナップするのに役立ちます。
XcodeワークスペースをInterface Builderと対応するコードの2つの部分に分割する assistant editor buttonをクリックしたとき、
ボタンをクリックまたはタップしたときに実行するアクションを与える必要があります。
p.100
次に、ViewControllerクラス定義内の利用可能な領域にボタンをControlキーを押しながらドラッグ(または右クリック)します。ドラッグすると、ボタンから青い線が伸び、カーソルの下に青い水平バーが表示され、接続を作成する有効な場所を示します。マウスカーソルを放すと、アウトレットを作成するか、アクションを定義するように求められます。「接続」の値を「アクション」に変更し、「名前」を「buttonPressed」に設定します。「接続」ボタンを押すと、ボタンがタップされるたびに呼び出される新しいメソッドがXcodeに作成されます。buttonPressed(_:)メソッドの直前に@IBActionキーワードに気付くかもしれません。@IBActionは、ストーリーボードのビジュアル要素と関数の間に関係を作成できることをXcodeに通知します。
p.101
アプリをビルドして実行します。buttonPressed(_:)メソッド内に実行するコードがないため、ボタンを押すと何も起こりません。メソッドが呼び出されていることを確認するには、メソッド定義内にブレークポイントを配置できます。ボタンを押すと、ブレークポイントがトリガーされます。
アクションが正しく機能していることを確認したので、背景色を変更するコードを追加できます。先に進む前にブレークポイントを削除してください。
パート2 - 背景を変更する
ライトが点灯している場合(つまり、背景色が白の場合)、ライトをオフにする必要があります。それ以外の場合は、ライトが消灯している場合(背景が黒の場合)、ライトをオンにする必要があります。「The light is on」というステートメントはtrueまたはfalseのステートメントであるため、ブール値を使用して背景色を変更する方法を決定することは理にかなっています。
ViewControllerクラス定義の上部付近で、画面が白い背景で始まるため、lightOnという変数を作成し、初期値をtrueに設定します
var lightOn = true
ボタンをタップするたびに、値はtrueからfalse、またはfalseからtrueに変わるはずです。buttonPressed(_:)メソッドはタップが実行されるたびに呼び出されるので、そこで変更を加えてください。
“@IBAction func buttonPressed(_ sender: AnyObject) {
lightOn = !lightOn
}
値が変更された後、新しい値を使用して背景色を変更する方法を決定できます。ライトが消灯することになっている場合は、黒に変更してください。または、オンになっているはずの場合は、白に変更してください。この論理は、単純な if-statemen を使用して書くことができます
“@IBAction func buttonPressed(_ sender: AnyObject) {
lightOn = !lightOn
if lightOn {
view.backgroundColor = .white
} else {
view.backgroundColor = .black
}
}
これは小さなアプリにとって小さな変更です。このパターンはこの本全体で持続し、ビューを更新するコードがすべて1つのメソッドに含まれている場合、インターフェイスの問題をデバッグする方がはるかに簡単になります。
パート3 - ボタンのテキストを更新する
これで、ビューの背景色を変更するボタンを正常に設定できましたが、ボタンテキストのタイトルはライトの状態に関係なく同じままです。現時点では、新しく作成したボタンをコードで参照する方法はありません。まず、ボタンにコンセントを作成する必要があります。Controlキーを押しながら、Interface Builderのボタンをエディタ領域のビューコントローラーの定義の上部にある空のスペースにドラッグします。ポップオーバーで、接続でアウトレットが選択されていることを確認し、[名前]フィールドに「lightButton」と入力します。
ポップオーバーメニューは次のようになります。[接続]をクリックします。
先ほどのレッスンで学んだように、アウトレットのこれらの詳細を左から右に見ることができます。
・円 — 塗りつぶされた円は、コンセントが接続されていることを示します。プロパティが何も接続されていない場合、円は空になります。
・@IBOutlet — このキーワードは、この行のプロパティがアウトレットであることをXcodeに通知します。
・Var lightButton — これは「lightButton」というプロパティを宣言します。
・UIButton! - プロパティのタイプはUIButton!です。感嘆符は、このプロパティにアクセスしようとしてコンセントが接続されていない場合、プログラムがクラッシュすることを警告します。次のユニットでオプションについて学ぶとき、感嘆符についてもっと学びます。
アウトレットを作成したら、ボタンをプログラムで変更できるようになりました。まず、ボタンのタイトルを更新するための適切な場所と、ボタンを実行するための適切なアクションを見つけることから始めます。
buttonPressed(_:)メソッドの最初の行にブレークポイントを追加し、アプリをビルドして実行します。予想通り、ボタンを押して色を変更すると、対応するアクションbuttonPressed(_:)が実行されます。しかし、ブレークポイントを追加したので、ブレークポイントで行を実行する前にコードは一時停止します。
p.104
Step over" buttonをクリックして最初の行を実行します。これで、updateUI()メソッドを実行する直前にアプリが一時停止します
Step into" button をクリックします。
これで、アプリはupdateUIの最初の行を実行する直前に一時停止されます。
少し時間を取って、updateUI()メソッドの本文を読んでみてください。Swiftは非常に読みやすいプログラミング言語であるため、「ライトが点灯している場合、ビューの背景色は白でなければならないか、そうでなければビューの背景色は黒である必要があります」と言うように行を解釈することができます。
p.105
では、ボタンのタイトルをどのように決定すべきかを考えてみましょう。ライトが点灯している場合は、ボタンのタイトルが「オフ」と表示されるか、ボタンのタイトルが「オン」と表示されます。
ボタンのタイトルをビューの背景色と同様の方法で更新する必要があるのは理にかなっています。これで、updateUI()メソッドでテキストを更新する合理的な場所が見つかりました。しかし、そうするための実際の機能は何ですか?先ほど学習したように、Xcodeのドキュメントはいつでもサポートできます。だから、何かわからないときはいつでも、文書で答えを探すのは良い習慣です。
lightButtonのタイトルを設定する方法については、まず、そのタイプのUIButtonに関するドキュメントを読んでください。Xcodeメニューからウィンドウ>「ドキュメントとAPIリファレンス」を使用して、ドキュメントに直接アクセスできます。これにより、ドキュメントビューアで別のウィンドウが開きます。
ドキュメント検索フィールドにUIButtonの入力を開始します。自動補完はすぐにオプションを提案します。メニューにUIButtonが表示されたらすぐに、先に進んで選択してください。
p.106
シンボルセクションまでスクロールして、「ボタンの設定」というリストを見つけます。そこには、タイトルを設定する関数があります: func setTitle(String?, for: UIControlState)。
関数名をクリックすると、その定義とそのパラメータのリストが表示されます。最初のパラメータは目的のテキストで、2番目のパラメータはUIControlStateです。UIControlStateは、ボタンがアイドル状態の場合、ユーザーがタップし始めた場合、またはボタンが無効になっている場合など、ボタンのさまざまな潜在的な状態を表します。宣言セクションのUIControlStateをクリックします。
この新しいシンボルのリストでは、ドキュメントでは、有効になっていて画面上でアイドル状態になっているときのボタンの状態に対応する通常の定数を定義しています。これはボタンのタイトルを設定するための正しい状態です。
p.108
updateUI() メソッドに関する新しい知識があれば、先ほど追加したブレークポイントを削除し、メソッドを次のように調整できます。
“func updateUI() {
if lightOn {
view.backgroundColor = .white
lightButton.setTitle("Off", for: .normal)
} else {
view.backgroundColor = .black
lightButton.setTitle("On", for: .normal)
}
}
アプリをビルドして実行します。ボタンをクリックまたはタップすると、背景色とボタンのテキストの両方が変更されるようになりました。しかし、バグがあります。ボタンをクリックする前に、テキストにはまだ「オン」や「オフ」ではなく「ボタン」と表示されます。この問題を解決するためにコードを更新するにはどうすればよいですか?
プロジェクトには、ボタンのテキストがライトのオンまたはオフの状態であるupdateUI()と一致することを確認するコードがすでに持っています。ビューが最初に読み込まれたときに呼び出すだけで、ユーザーが最初にボタンをタップしたときではなく、ビューが表示されたときにボタンが更新されます。viewDidLoad() 関数でセットアップコードを実行できます。viewDidLoad() 関数は、View Controller サブクラスで定義されており、View Controller が画面に表示される準備が整ったときに呼び出されます。
次のコードに示すように、このメソッド内でupdateUI()を呼び出します。
p.109
まず、画面を埋めるためにボタンのサイズを変更する必要があります。Interface Builderでボタンを選択し、左上隅と右下隅をドラッグして、ボタンを伸ばして白いビュー全体を覆います。
ボタンのタイトルテキストを削除します。ボタンのタップ可能な領域は期待どおりに機能しますが、キャンバスに白いビューのみが存在するかのように表示されます。
アプリを再度ビルドして実行してください。起動時に、ボタンのテキストに「オフ」と表示されるはずです。
パート4 - ユーザーエクスペリエンスの向上
あなたは動作するアプリを持っています。それは素晴らしいスタートです。では、そのデザインと、ユーザーがアプリをどのように体験するかについて少し考えてみてください。改善できる点は何ですか?
p.110
ボタンを見ると、テキストが無関係に感じることに気付くかもしれません。ライトが現在点灯しているかオフになっているかは明らかです。背景色がそれを示しています。ユーザーはテキストを見る必要がありますか?
ボタンが画面のどこにあるかは重要ですか?そして、ほとんどの画面がタップできないのは少し奇妙ではありませんか?
ボタンからテキストを削除し、ボタンを画面全体を埋める方が良いかもしれません。そうすれば、ユーザーは画面上の任意の場所をタップして、ライトのオンとオフを切り替えることができます。アプリを構築する上で重要な部分は、細部を考慮し、直感的でシンプルで強力なユーザーインターフェイスを構築しようとすることです。この場合、ユーザーが画面上の任意の場所をタップして背景色を切り替えることができるのは理にかなっています。
テキストがなくなると、ボタンのタイトルを変更するupdateUI()のコード行を削除できます。
“func updateUI() {
if lightOn {
view.backgroundColor = .white
} else {
view.backgroundColor = .black
}
}
この更新されたデザインでは、誰かがアプリを使用している間、ボタンのプロパティを変更する必要はありません。つまり、プロジェクトの開始時に作成したアウトレットは不要になったということです。開発者として、コードをできるだけクリーンに保ちたいので、IBOutletをクリアすることをお勧めします。
まず、ボタンとコンセントの間の接続を切断します。これを行うには、Interface Builderでボタンを選択します。
次に、Connectionsインスペクタを表示します
ここでは、特定のオブジェクトに接続されているすべてのイベントとアウトレットを見ることができます。この場合、ボタンがボタン押されたアクションとライトボタンのコンセントに結びついていることがわかります。コンセントの横にある「X」をクリックして取り外します。
p.111
lightButtonに接続されたオブジェクトがなくなったため、@IBOutletの横にある小さな円は入力されなくなりました。
lightButtonの宣言を削除しても安全になりました。最後にもう一度アプリをビルドして実行し、新しいデザインの改善をテストします。これで、画面上の任意の場所をタップまたはクリックして背景色を変更できるはずです。
if-elseステートメントの両方の行が同じことをするため(backgroundColorを設定する)、if-elseステートメントの代わりに三項を使用すると、updateUI()メソッドはよりきれいに見えるかもしれません。
アプリケーションをもう一度ビルドして実行し、三項演算子が意図したとおりに動作することを確認します。
p.112
まとめ
ボタンをタップするだけで画面を黒から白に変更し、戻るアプリを正常に作成しました。懐中電灯のようなものです。アプリのデザインも簡素化し、ボタンのタイトルを削除し、タップ可能な領域で画面を埋めることで、ユーザーエクスペリエンスを向上させるための意識的な決定を下しました。Swiftの知識は限られていますが、コードをステップスルーし、ドキュメントを参照してこのプロジェクトを完了することができました。
Xcodeを操作したり、Interface Builderを使用したりするのは難しいと感じましたか?もしそうなら、それらをより詳細に議論した以前のセクションを再検討することをお勧めします。次のユニットに進むときは、開発者ドキュメントを手元に置いておくことを忘れないでください。開発者は、使用するツールやリソースと同じくらい良いです。
p.113
要約
素晴らしい仕事です!この入門ユニットが完成したので、Xcode、Interface Builder、アプリのビルドに使用する環境、およびいくつかの基本的なSwiftの概念について学びました。また、最初のアプリも構築しました!
次のレッスンでは、iOSアプリを構築するために必要な重要なインフラストラクチャを提供するUIKitのビューとコントロールと、コース全体でより複雑なアプリを構築するための基盤となるより多くのSwiftの概念について学びます。
この記事が気に入ったらサポートをしてみませんか？