ユーザーエクスペリエンスの改善 (ガイド付きプロジェクト Light)
ステップ 4: ユーザーエクスペリエンスを改善する
アプリケーションのデザインとユーザーのエクスペリエンスについて考えてみましょう。改善できるところはどこですか?
ボタンを見ると、テキストが余計だということに気付くかもしれません。背景色がライトの状態を示しているので、ライトが現在オンかオフかは明らかにわかります。
ユーザーにボタンのテキストを表示する必要があるでしょうか?
画面上のボタンの位置はユーザーエクスペリエンス (UX) に影響を及ぼすでしょうか? また、画面全体がタップ可能であれば、アプリケーションがさらに使いやすくなると思いませんか?
ボタンからテキストを削除し、ボタンを画面全体に広げるのが良いかもしれません。この方法なら、ユーザーが画面のどこをタップしてもライトをオンまたはオフにできます。高品質なアプリケーションを作成するには、細部にまで気を配り、直観的でシンプルかつ強力な UI を作成するように努める必要があります。この例では、ユーザーは画面上のどこかをタップすれば背景色を変更できるとある程度予想できるでしょう。
始めに、ボタンのサイズを画面全体に広がるように変更する必要があります。
1.Interface Builder でボタンを選択します。
2.ボタンの左上と右下の角をドラッグして、ボタンが白いビュー全体を占めるように拡大します。
3.ボタンのタイトルテキストを削除します。
ボタンのタップ可能な領域は期待どおりに機能しますが、キャンバス上には白いビューのみが存在しているように見えます。
4.updateUI()
内のボタンのタイトルを変更するコード行を削除します。
func updateUI() { if lightOn { view.backgroundColor = .white } else { view.backgroundColor = .black } }
この変更後のデザインでは、アプリケーションの使用中にボタンのプロパティを変更する必要がありません。この変更により、プロジェクトの最初に作成したアウトレットは不要になりました。
開発者はコードをできるだけクリーンにしておく必要がありますから、ボタンと IBOutlet
の間の接続を削除します。
1.Interface Builder でボタンを選択します。
2.[Connections (接続)] インスペクターを開きます。
このインスペクターには、特定のオブジェクトに接続されているすべてのイベントとアウトレットが表示されます。
3.ボタンは buttonPressed:
アクションと lightButton
アウトレットに接続されています。
4.アウトレットの横にある [X] をクリックして、この接続を削除します。
lightButton とストーリーボード上のボタンの間の接続を削除したので、@IBOutlet の横の円は塗りつぶされなくなりました。
これで、lightButton
の宣言を安全に削除できます。
1.アプリケーションをビルドして実行し、デザインの改良をテストします。
画面上の任意の場所をタップまたはクリックして背景色を変更できるようになっています。
2.if-else ステートメントの両方の行が同じアクション (backgroundColor
の設定) を行っているので、代わりに 3 項演算子を使用して updateUI()
メソッドをすっきりさせます。
func updateUI() { view.backgroundColor = lightOn ? .white : .black }
3.もう一度アプリケーションをビルドして実行し、3 項演算子が意図したとおりに動作することを確認します。
3 項演算子のしくみを復習するには、「Swift の基礎」の「フローの制御について」単元を参照してください。
必要であればソリューションのチェック
こちらが Light プロジェクトの全ファイルです。自分が設定したストーリーボードと比較してみてください。
プロジェクトのまとめ
フラッシュライトのように画面をオン/オフにするアプリケーションの作成に成功しました。また、アプリケーションのデザインをシンプルにして、UX を改善するためにボタンタイトルを削除し、タップ可能な領域を画面全体に広げました。Swift の知識が限られていても、手順を追ってコード行を記述し、ドキュメントを参照してこのプロジェクトを完了しました。
Xcode の操作や Interface Builder の使用は難しかったですか? もしそうであれば、Xcode と Interface Builder について詳しく説明している前の単元を復習することをお勧めします。
学習の継続
ここでは、iOS アプリケーション開発を簡単に紹介しました。Xcode と Interface Builder について、また、アプリケーション作成に使用する環境について学習し、「Swift の基礎」モジュールの基本的な Swift の概念についても学習しました。初めてのアプリケーションも作成しましたね。
次にすべきことは何でしょうか? 次のようにして学習を続けることができます。
- この入門モジュールは『App Development with Swift (Swift を使用したアプリケーション開発)』に基づいています。iOS 開発の包括的な概要については、この iBook を入手してください。この iBook では、Swift 構文をさらに学習し、より複雑なアプリケーションの作成を行うことができます。
- Swift の包括的なドキュメントと参考資料については、『Swift Language Guide (Swift 言語ガイド)』を参照してください。
- 開発者は、仲間、助言者、コミュニティの助けを借りてスキルを強化できます。「Using Swift」コミュニティフォーラムに参加して、他の開発者と交流します。地域の Swift 開発者の交流会を探すこともできます。
- アイデアを基にアプリケーションを開発するには、どうすればよいでしょうか? Apple の Worldwide Developers Conference (WWDC) 2018 の「I Have this Idea for an App (アプリケーションのアイデアがあります)」をご覧ください。これは、アプリケーションを概念から現実にするための 1 時間のセッションです。
- Apple のデザインに合わせてアプリケーションをデザインするにはどうすればよいでしょうか? Apple プラットフォームとの統一感のあるアプリケーションのデザインについては、『Human Interface Guidelines (iOS ヒューマンインターフェースガイドライン)』を参照してください。
- Apple はアプリケーションを誰もが使用できるものにするように尽力しています。幅広いユーザーが使いやすいアプリケーションを作成するというミッションを理解するには、「Accessibility for Developers (開発者向けアクセシビリティ)」と「Build Apps for the World (世界に向けたアプリケーションの作成)」を参照してください。
動画やドキュメントなどのその他のリソースについては、「Apple Developer (Apple 開発者)」を参照してください。