jQuery Mobile フレームワークという JavaScript ライブラリーを使用すると、Web サイトのモバイル版を容易に作成することができ、既存の Web ページをタッチ対応の Web サイトやアプリケーションに変換することができます。jQuery Mobile フレームワークにより、ユーザーが Web ブラウザーからタッチ対応のアプリケーションに直接接続できるようになるため、モバイル端末やタブレット端末でのモバイル・アプリケーションの使用方法や配布方法が変わることは明らかです。モバイル・アプリケーションを開発するための選択肢は他にもありますが、jQuery Mobile を使用する場合の手法が他と異なる点は、多様なモバイル・プラットフォームが対象になることです。

スマートフォンやタブレット端末は急速に普及しており、開発者は jQuery Mobile フレームワークを使用することによってモバイル Web エクスペリエンスに対する要求の増大に対応することができます。モバイル Web エクスペリエンスを提供するためには、Web 開発者や Web デザイナーの新たなスキル・セットが必要になります。2010年の Nielsen の予測では、アメリカ人の 2 人に 1 人はスマートフォンを持つようになるとされており (そのブログについては「参考文献」のリンクを参照)、これは 2008年の 10 人に 1 人という数字と比べて大幅な増加です。また 2011年 6月の AMI-Partners の予測では、「従業員が 1 人から 1000 人の間の企業でタブレット端末が採用される割合は 2015年までに 1,000 パーセント増加する」とされています (この予測資料全体については「参考文献」のリンクを参照)。このように採用率が高まると、モバイル Web エクスペリエンスを作成できる Web 開発者や Web デザイナーへの要求が大きく高まります。jQuery Mobile フレームワークは、モバイル Web エクスペリエンスを作成するための優れたソリューションであり、このフレームワークを使用すると、モバイル Web サイトの開発期間が短縮され、多様なモバイル・プラットフォームがサポートされるようになります。

落とし穴とソリューション

jQuery Mobile フレームワークは Web ページのモバイル版やタブレット版を作成するための優れたソリューションですが、Web サイトのコンテンツには必ず特定のデータ・ロール属性を追加する必要があります。稀に、これらの属性を HTML マークアップに追加することができず、モバイル Web サイトを別に作成しなければならない場合もあります。しかしこの記事では、先を見越した計画によって、jQuery Mobile フレームワークと CSS 3 (Cascading Style Sheets version 3) のメディア・クエリーとを組み合わせることで、どのようにしてユーザー機器に応じたデザインの作成およびレイアウトの決定が可能になるのかを説明します。この記事の目的は、ユーザー機器に応じた動的な対応が可能な単一の Web サイトを作成することです。そのために、この作成するサイトではユーザー機器の画面解像度に応じた適切なレイアウトの表示を行います。

ユーザー機器に対応するデザインというのは、ユーザー機器の画面解像度に応じたデザインということです。これはつまり、ユーザーが Web ページをモバイル端末で表示する場合も、タブレット端末で表示する場合も、デスクトップ端末で表示する場合も、Web ページのデザインが機器に適切に対応し、その機器の画面解像度に応じた特定のレイアウトで表示される、ということです。jQuery Mobile フレームワークを使用すると、Web サイトのモバイル版を素早く容易に作成することができるものの、現状では (そしておそらく将来的にも) 本質的にユーザー機器の画面解像度に動的に対応することはできません。実際、jQuery Mobile の Web サイトには、従来あった Media Query Helper Classes 機能がベータ版では非推奨となり、最新バージョンでは削除されたと書かれています。jQuery Mobile フレームワークの開発者達は、代わりに CSS3 のメディア・クエリーを使用することを実際に推奨しています。CSS3 のメディア・クエリーと jQuery Mobile フレームワークとを組み合わせることで、モバイル環境、タブレット環境、デスクトップ環境に対応して調整されるデザインを実現することができます。実際、jQuery Mobile フレームワークのドキュメントは jQuery Mobile フレームワークと CSS3 のメディア・クエリーとを組み合わせて使用しており、そのドキュメント自体がユーザー機器に対応して調整されるデザインとなっています。実はそのドキュメントは画面解像度に応じて調整される点で、この記事で作成するサンプルと非常によく似ています。

CSS はバージョン 2.1 から、メディア・タイプを使用することで機器に対応したコーディングを行えるようになっています。メディア･タイプの一般的な使用方法は、Web ページをデスクトップ・コンピューターの画面に表示するためのスタイルシートと、Web ページを印刷するためのスタイルシートとを別々に定義する、というものです。CSS3 ではメディア・クエリーを導入することで、機器に対応したコーディング手段の概念を一歩進めています。メディア・クエリーを使用すると、Web ページと通信している機器のタイプを判断することができ、その Web ページを表示している機器の物理的な性質を開発者が判断することもできます。リスト 1 では画面解像度に応じてモバイル機器とタブレット機器専用のスタイルシートを提供しているように、メディア・クエリーは機器専用のスタイルシートを提供するための一般的な手段となっていることは、言うまでもありません。

<link 
  rel="stylesheet" 
  type="text/css" 
  media="screen and (max-device-width: 799px)" 
  href="mobile-tablet.css" />

この例の media 属性には、メディア・タイプの値 (screen に設定されています) とメディア・クエリー (括弧で囲まれています) が含まれています。このメディア・クエリーは、ユーザーが現在使用している機器の画面解像度が 799 ピクセル以下であるかどうかを調べています。799 ピクセル以下である場合には、このモバイル/タブレット用スタイルシートが使用され、799 ピクセルを上回る場合には、このスタイルシートは使用されません。1 つの Web ページに複数のスタイルシートへのリンクを含め、それぞれのスタイルシートに独自のメディア・クエリーを含めることで、いくらでも多くの解像度に応じた Web ページをレンダリングすることができます。私が見たところ、解像度に基づくスタイルシートの数として最も一般的な数は 3 つのようです。1 つはモバイル機器とタブレット機器用、もう 1 つは低解像度のデスクトップ・モニター用、そして最後の 1 つは高解像度のデスクトップ・モニター用です。リスト 1 のコードを使用する場合、解像度が 799 ピクセル以下の機器はすべて、このスタイルシートを使用することになります。つまりこの例は、1 つのスタイルシートでモバイル機器とタブレット機器に対応し、別のスタイルシートでデスクトップ・コンピューターに対応する完璧な例として最適です。

また、1 つのスタイルシートの CSS の中で複数のメディア・クエリーを直接使用することもできます。リスト 2 は一連のナビゲーション項目に使用される CSS クラスの例を示しています。後ほど、こうしたナビゲーション項目を作成します。画面の横方向の解像度が 800 ピクセル以上の場合、ナビゲーションの幅は 300 ピクセルに設定されます。画面解像度が 799 ピクセル以下の場合にはナビゲーションの幅が 100% に設定されます。

@media all and (min-width: 800px) {
  #nav {
    width: 300px;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
}

メディア・クエリーに関して、ここまで述べたのとは別の優れた点の 1 つは、最近の Web ブラウザーで Web ページを表示する場合、そのページにリスト 2 の CSS と HTML 要素が含まれていると、その Web ページが実際にブラウザーのサイズに対応できることです。つまりブラウザーの幅が 799 ピクセル以下に設定されている場合にはナビゲーションの幅が 100% になり、ブラウザーの幅が 800 ピクセル以上の場合にはナビゲーションの幅が 300 ピクセルに設定されます。

上に戻る

機器に応じて調整する

メディア・クエリーは Web ページに適用する CSS を判断するための一種の条件文です。メディア・クエリーを jQuery Mobile フレームワークと組み合わせることで、強力なモバイル Web サイトを作成できる一方、デスクトップ用レイアウトも別途保持することができます。jQuery Mobile フレームワークを単独で使用する場合も、タッチ対応の Web サイトを素早く容易に作成することができます。jQuery Mobile フレームワークには大量のコンポーネントが用意されており、それらを使用することによってボタン、ツールバー、ダイアログ・ボックス、リスト・ビュー、等々を容易に追加することができます。しかし Web ページのレイアウト言語としては、やはり CSS が優れています。幸いなことに、この記事で先ほど説明したように CSS3 にはメディア・クエリーが導入されており、開発者が機器の解像度に応じて Web ページのレイアウトを調整できるようになっています。

jQuery Mobile フレームワークを使用することで、機器に応じて調整されるレイアウトを作成することができます。この記事では、一連のナビゲーション項目と 1 つのグリッドを含む単純な例を使用します。ナビゲーション項目とグリッドのレイアウトは画面解像度に応じて変わります。Web ページ上で jQuery Mobile フレームワークが動作する前に、まず jQuery Mobile フレームワークと関連付けられた JavaScript ファイルと CSS を Web ページに組み込む必要があります (リスト 3 を参照)。

<link rel="stylesheet" 
  href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

jQuery Mobile フレームワークには、ナビゲーション項目の表示に使用する listview コンポーネントが含まれています。リスト・ビューを作成するためには、ナビゲーション・リストの ul 要素に、listview という値を持つ data-role 属性を単純に追加します。また jQuery Mobile フレームワークには複数列のグリッド・レイアウトを作成するための便利なツールもいくつか含まれています。リスト 4 には 2 行 3 列のグリッドが含まれていますが、このグリッドは ui-grid-b クラス、ui-block-a クラス、ui-bar クラスを組み合わせて使用することで作成されています。jQuery Mobile フレームワークに含まれるコンポーネントについての詳細は「参考文献」を参照してください。

<div data-role="content">
    <ul id="nav" data-role="listview" data-inset="true">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
    </ul>
    
    <div id="grid" class="ui-grid-b">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
    </div>
</div>

一部のクラス名の最後に文字が追加されています。これらはテーマに関連する文字であり、jQuery Mobile フレームワークはこれらの文字を使用してコンポーネントのレンダリングに使用するテーマを判断します。jQuery Mobile フレームワークへのテーマ設定に関して詳しく学ぶためには、「参考文献」に挙げた関連記事を読んでください。

これで Web ページを作成できたので、ユーザー機器の画面解像度に応じて動的に調整されるレイアウトを CSS3 を使用して作成することができます。その方法は簡単です。単純に、この記事で先ほど学んだメディア・クエリーを使用して画面解像度を判断し、シナリオごとに特定の対応をする CSS を作成すればよいのです。リスト 5 では、画面解像度が 800 ピクセル以上かどうかを調べるメディア・クエリーと、画面解像度が 799 ピクセル以下かどうかを調べるメディア・クエリーを使用しています。最初のメディア・クエリーでは float によってナビゲーションとグリッドを左に寄せ、高解像度の画面で表示スペースが広い場合にはナビゲーションとグリッドとが隣り合って表示されるようにしています。2 番目のメディア・クエリーには float はなく、ナビゲーションとグリッドの幅を 100% に設定しています。こうすることで最終的にナビゲーションをグリッドの上に配置し、スマートフォンやタブレットなどの画面解像度が低い機器に対応しています。

@media all and (min-width: 800px) {
  #nav {
    width: 300px;
    float: left;
    margin-right: 20px;
  }
  #grid {
    width: 450px;
    float: left;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
  #grid {
    width: 100%;
  }
}

機器の解像度が高い場合は図 1 のようにナビゲーションとグリッドが隣り合って表示されます。

機器の解像度が低い場合は図 2 のように表示されます。

もちろん、これは非常に単純な例ですが、jQuery Mobile フレームワークと CSS3 を使用すると、ユーザー機器に応じて調整されるレイアウトを作成するのがいかに容易であるかが、この例からわかります。この方法が持つ可能性は非常に期待の持てるものであり、あくまでもこの例は最初の足掛かりでしかありません。単純なデータ・ロール属性をいくつか HTML に追加することによって Web ページのモバイル版を作成することができ、CSS3 のメディア・クエリーを含めることにより、ユーザー機器の画面解像度に応じて Web ページのデザインを調整することができます。さらに、Web ページをデスクトップ・コンピューターに表示した場合に jQuery Mobile のテーマを変更することもできるため、高解像度の画面に表示される Web ページがモバイル用の Web ページのような表示になることはありません。必要なことは、メディア・クエリーを使用して、機器の画面が高解像度であるかどうかを確認することのみです。そしてそれらの jQuery Mobile コンポーネントの CSS を変更し、基本的にはそのテーマを作成するデフォルトのスタイルを上書きすればよいのです。

上に戻る

まとめ

ユーザー機器に応じて調整されるデザインの目的は、機器に最も適したレイアウトでデータを表示し、ユーザーフレンドリーな Web ページを実現することです。jQuery Mobile フレームワークと CSS3 とを組み合わせることで、各ユーザー機器に応じて調整するために使用できる強力なレイアウト・セットを作成することができます。

上に戻る

ダウンロード

ダウンロード形式について

参考文献

学ぶために

• Nielsen の予測資料、「Smartphones to Overtake Feature Phones in U.S. by 2011」の全体を読んでください。
  
  
• AMI-Partners の予測資料、「REPORT: SMB Adoption of Tablet Computers to Increase by 1,000 Percent by 2015」の全体を読んでください。
  
  
• jQuery Mobile フレームワークの最新ドキュメントを調べてください。
  
  
• jQuery Mobile フレームワークに用意された最新ボタン・アイコンの完全な一覧を見てください。
  
  
• jQuery Mobile のテーマについて学ぶために、Kris の記事、「Create custom jQuery mobile themes」(developerWorks、2011年11月) を読んでください。
  
  
• 同じく Kris の記事「Use the jQuery Mobile API for fine-grained custom control」」(developerWorks、2012年1月) を読み、グローバル・オプションを設定し、操作イベントにフックし、公開されたメソッドを使用することで jQuery Mobile を拡張する方法について学んでください。
  
  
• developerWorks の Mobile development ゾーンには、モバイル開発者のための多様なトピックに関するハウツー記事、評価コード、技術的展望などが豊富に用意されています。
  
  
• さまざまな IBM 製品や IT 業界のトピックに焦点を絞った developerWorks の Technical events and webcasts で最新情報を入手してください。
  
  
• 無料の developerWorks Live! briefing に参加して、IBM の製品およびツールについての情報や IT 業界の動向についての情報を迅速に把握してください。
  
  

製品や技術を入手するために

• jQuery Mobile の JavaScript ファイルと CSS ファイルをダウンロードし、参照してください。
  
  
• 皆さんに最適な方法で IBM 製品を評価してください。製品の試用版をダウンロードする方法、オンラインで製品を試す方法、クラウド環境で製品を使う方法、あるいは SOA Sandbox で数時間を費やし、サービス指向アーキテクチャーの効率的な実装方法を学ぶ方法などがあります。
  
  

議論するために

• developerWorks コミュニティーに参加してください。ここでは他の developerWorks ユーザーとのつながりを持てる他、開発者によるブログ、フォーラム、グループ、ウィキを調べることができます。
  
  

著者について

Kris Hadlock は、1996年から契約 Web 開発者および設計者として、SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、GoDaddy Software、Fire Mountain Gems などの企業のプロジェクトを手掛けてきました。著書には『Ajax for Web Application Developers』(Sams)、『The ActionScript Migration Guide』(New Riders) があります。また、コラムニストおよびライターとしても、Peachpit.com、InformIT.com、Practical Web Design magazine などの数々の Web サイトや設計関連の雑誌で活躍しています。彼は、フォームと関数の融合を専門とする Web 設計およびソフトウェア開発会社、www.studiosedition.com の創始者でもあります。

この記事を評価する

コメント

上に戻る

目次

• 落とし穴とソリューション
• 機器に応じて調整する
• まとめ
• ダウンロード
• 参考文献
• 著者について
• コメント