Tip:
Highlight text to annotate it
X
前回までのレッスンで、アプリケーションの
ユーザビリティを改良してきましたが、
モバイルで使うにはまだ十分とはいえません。
タブレットデバイスでアプリケーションが どのように表示されるか見てみましょう。
ツールバーのデバイスプレビューボタンを使うと
違ったフォームファクターでの
アプリケーションの見え方がわかります。
例えば、タブレット縦モードでは、 横スクロールします。
スマートフォンモードでは 横スクロールすることと、
ページのいくつかのコンテンツは ユーザーサイトからは見えていないことがわかります。
これを修正するために、
アプリケーションのテーマを
Londonテーマに変更します。
Londonテーマはレスポンシブなテーマであり、
フォームファクター毎に 別々の画面を実装することなく
デスクトップとモバイルデバイスで動作する 画面を簡単に実装することができます。
アプリケーションのベーステーマをChicagoから Londonへ変更します。
最初に気づくのは、変更がとても容易で エラーも起こらずパブリッシュできることです。
もうひとつ重要なことは、
ページのコンテンツがフォームファクターに適応し、
横スクロールの必要がなくなったことです。
そして、例えば新しい従業員を作成する アクションもこのフォームファクターに適応し、
スマートフォンではアイコンで表示され、
タブレットの縦モードではスペースを持ち リンクのテキストが表示されます。
これらフォームファクターの両方で メニューは表示されていません。
メニューはこのオプションの下に隠されています。
ここを押すと右からスライドし、 メニューのオプションが表示されます。
このコンテナーのサイズを変更します。
前回のレッスンで変更したのですが、今は Londonテーマではうまく動作していません。
グリッドの12カラムにサイズを変更し、
まずブラウザで確認します。
アプリケーションをタブレットデバイスで プレビューすると、
ブラウザでこのプレビューモードが表示されますが、 実際のアプリケーションではありません。
このタブレットフレームは実際はブラウザに表示されますが、 ブラウザ上ででテストを行うことができます。
アプリケーションを変更すると、
タブレット縦モードですべてが表示され、
横スクロールは無くなり、
大きなボタンがタッチデバイスでの 使いやすさを向上させています。
スマートフォンでの表示を見ると、
ボタンと入力欄が一番上に配置され、 データを入力しやすくしています。
このフォームファクターに適したリンクを用いることで、
テキストのリンクが必要なくなり、
すべてが美しく配置されています。
メニューのオプションは右からスライドします。
デスクトップモードに戻ると
すべてがまだそこにあります。
これで、アプリケーションの ユーザビリティを向上させました。
レスポンシブアプリケーションを作成することで 一歩前進しました。
アプリケーションは違った フォームファクターに適応しています。
最後に、アプリケーションのルックアンドフィールを 会社のブランドに合わせてカスタマイズします。
戻ってアプリケーションを変更し、
Londonテーマをカスタマイズします。
スタイルシートを開くと、
スタイルシートにリンクがあり、
クリックするとツールが開き、
Londonテーマをカスタマイズすることができます。
ここではアプリケーションのロゴを直接選び、 カスタマイズを行います。
選択したロゴが適用され、更なるカスタマイズ、
例えばメインカラーの変更なども行えます。
ヘッダーの背景をブルーにしたり フォントを変更したりできます。
アプリケーションカスタマイズに必要なことは、
CSSを選択して内容をコピーし、
アプリケーションにペーストして適用することです。
テーマをカスタマイズしCSSをペーストします。
これで、タブレットデバイスでもスマートフォンでも デスクトップでも動作するアプリケーションができました。
パブリッシュして動作を確認します。
アプリケーションには、ブランドイメージが表示され、
すべてが望ましい位置に配置され、 入力欄はトップに順番に配置されています。
タブレットでもデスクトップでも カスタマイズがされています。
最後に、
このLondonテーマについてのより詳細な情報と 使い方については、
アプリケーションに戻り、テーマのここを 表示します。
Londonタブを選択するとベーステーマタブがあり
別のリンクがあるのでクリックすると、
同じツールにリンクし、
Londonテーマについての総合的なドキュメントを みることができます。
このドキュメントは、Londonテーマがどのように 動作するか、
既存のスタイルを適用して、異なるフォームファクターに 対して微調整するか、を含みます。
最後に、アプリケーションで一般的に 使われるパターンのリストをお見せします。
これらのパターンのソースを入手して実装方法 についての情報を得ることもできます。
以上でレッスンを終了いたします。