特集記事：jQuery Mobile
第1回 jQuery Mobile 使用する環境を整える
JavaScriptライブラリの一種である jQuery Mobile ですが、モバイルフレームワークとしてスマートフォンサイト制作で利用されることが多くなってきました。ここでは jQuery Mobile を使用する環境を構築する手順を解説します。
第2回 jQuery Mobile ページ遷移の仕組み
jQuery Mobile ではページ遷移に Ajax というブラウザ内で非同期通信を行う仕組みを採用しています。Ajax ではページの必要な部分だけを入れ替えることができ、デスクトップPCに比べて処理能力や回線速度に劣るモバイル端末でも軽快なページ閲覧が可能になります。
第3回 jQuery Mobile １つのHTMLファイルに複数ページを記述する
jQuery Mobile では１つのHTMLファイルに複数のページを含めることができます。１回で複数ページのダウンロードが済むため効率的になる場合もありますが、閲覧しないページも含まれるとかえって無駄になってしまう場合もありますので状況により使い分けましょう。
第4回 jQuery Mobile ページを構成するUI要素(ウィジェット)の指定方法
jQuery Mobile では、HTML要素が Webページ上でどのような役割を持っているか HTML5のデータ属性を使って指定します。そしてそれらの要素に対してオプションを指定するデータ属性やスタイルを適用するクラスを指定することによりページを制作していきます。
第5回 jQuery Mobile ウィジェットにオプションを指定するデータ属性
jQuery Mobile では、HTML5のデータ属性を使ってウィジェットにスタイルを適用したり、さまざまな設定をします。これらのデータ属性はオプションであり、すべて省略可能です。この記事では各ウィジェットで使用可能なデータ属性の一覧を示します。
第6回 jQuery Mobile ウィジェットにスタイルを指定するクラス
jQuery Mobile ではウィジェットにスタイルを適用するクラスが用意されています。どのウィジェットにも共通で使えるクラスと、ボタンなど特定のウィジェットに使うクラスがあります。この記事ではjQuery Mobile で用意されているクラスの一覧を示します。
第7回 jQuery Mobile テーマの基本的な仕組み
jQuery Mobile でのデザインを決めるテーマとスウォッチについて、基本的な仕組みと利用方法を解説します。またカスタムテーマの作成とテーマのスタイルを適用しない方法についても簡単に解説します。
第8回 jQuery Mobile 提供されているアイコン
jQuery Mobile では数多くのアイコンを提供しており、簡単な指定で使えるようになっています。画像形式もSVGとPNGの２種類を使い分ける仕様になっており使い勝手が向上しています。この記事では全アイコンリストと指定方法の概要を示します。
第9回 jQuery Mobile ボタンを設置する
ボタンを設置するには a要素、button要素、input要素のいずれかを使います。jQuery Mobile ではそれらのボタンに適切なスタイルを適用し表示してくれます。この記事では基本的なボタンの設置からスタイルをカスタマイズする方法を解説します。
第10回 jQuery Mobile アイコンをボタンに表示する
jQuery Mobile ではバージョン 1.4 時点で 50種類のアイコンが提供されています。それらのアイコンは簡単な指定でボタンに表示できるようになっています。この記事ではボタンにアイコンを表示する方法を解説します。
第11回 jQuery Mobile ヘッダーを設置する
jQuery Mobile のヘッダーは、左右にボタンの表示エリアを確保し自動的に配置してくれたり、戻るボタンを付加してくれる便利な機能があります。この記事ではヘッダーにボタンを設置する方法と固定ヘッダーにする方法を解説します。
第12回 jQuery Mobile フッターを設置する
jQuery Mobile のフッターは、機能はヘッダーに似ていますが、より柔軟な使い方ができるように作られています。そのためボタンの設置方法も微妙に違います。この記事ではフッターにボタンを設置する方法と固定フッターにする方法を解説します。
第13回 jQuery Mobile ナビゲーションバーを設置する
jQuery Mobile のナビゲーションバーは、リスト内のアンカーリンクが自動的にボタンになりグリッドレイアウトで等間隔に並びます。アクティブボタンも自動で表示してくれますので、簡単な記述でページを切り替えるナビゲーションが実現できます。
第14回 jQuery Mobile タブを設置する
タブウィジェットは、タブをタップするとコンテンツ内容だけが切り替わるUI要素で、狭い画面領域では有利に働きます。また最初にコンテンツをすべて読み込んでいるため、切り替え時にサーバーとの通信は発生せずレスポンスの良い表示が可能です。
第15回 jQuery Mobile 基本的なリストを設置する
リストはWebページの多くのところで使われます。jQuery Mobile ではリストを簡単に作成できるよう、リストビューウィジェットに対して自動的にスタイルを適用し、さまざまなオプションも用意しています。この記事では基本的なリストの設置方法を解説します。
第16回 jQuery Mobile 分類リストと分割リストを設置する
jQuery Mobile のリストビューでは、リストの中に区切りのタイトルを挿入しアイテムを分類することができます。また１つのアイテムに２つのリンクを設けると、アイコンに２つ目のリンクが設定されます。この記事では分類リストと分割リストについて解説します。
第17回 jQuery Mobile さまざまなスタイルのリスト例
jQuery Mobile のリストビューウィジェットは、オプションを指定することによりさまざまなスタイルのリストを作成することができます。この記事ではそれらのオプションを指定したリストの作成方法を解説します。
第18回 jQuery Mobile ダイアログを設置する
ダイアログは何かユーザーにメッセージを伝えるときや、必要なアクションをとってもらうときに有効な手段です。jQuery Mobile ではアンカーリンクにデータ属性を指定するだけで、リンク先をダイアログとして表示させることができます。
第19回 jQuery Mobile ポップアップを設置する基本
ポップアップウィジェットは同じページ内のコンテンツブロックを、ポップアップウィンドウでオーバーレイさせて表示する機能です。ツールチップや写真の拡大表示でよく使われます。この記事では設置方法の基本とオプション指定について解説します。
第20回 jQuery Mobile ポップアップの利用例
ポップアップウィジェットは単純なメッセージの表示だけでなく、たくさんの使い道がある大変便利な機能です。この記事では具体的な利用例として、ポップアップメニューとダイアログの作成、そして写真をポップアップで拡大表示する方法を紹介します。
第21回 jQuery Mobile パネルを設置する
パネルウィジェットはメニューやリストが画面の右や左からスライドして出てくるUI要素です。左右それぞれにパネルを設置することも可能です。ポップアップやダイアログと違い、ページをスクロールしてもパネルを固定表示しておくことができます。
第22回 jQuery Mobile 開閉式コンテンツを設置する
開閉式コンテンツ(Collapsible Widget)は、タイトルをタップするとコンテンツが開いたり閉じたりする UI要素です。スマートフォンサイトでは折りたたみメニューとしてよく利用されています。この記事では基本的な設置方法とオプション指定を解説します。
第23回 jQuery Mobile アコーディオン式コンテンツを設置する
アコーディオン式コンテンツ(Collapsibleset Widget)は、開閉式コンテンツを複数設置してグループ化し、タップしたコンテンツだけが開き他のコンテンツは自動的に閉じるUI要素です。スマートフォンサイトではアコーディオンメニューとしてよく利用されています。
第24回 jQuery Mobile レスポンシブテーブルを設置する
jQuery Mobile ではテーブルウィジェットとして、画面サイズに応じてレイアウトや表示項目を調整するレスポンシブテーブルを用意しています。レスポンシブテーブルにはリフローモードとカラムトグルモードの２種類があり、その設置方法を解説します。
第25回 jQuery Mobile フォームを設置する基本
Webサイトでは注文フォームやお問い合わせフォームなどを設置することが多いのですが、さまざまなフォーム部品を作成しレイアウトするのは結構大変です。jQuery Mobile ではそれらのUI要素をきれいに整形してくれます。
第26回 jQuery Mobile テキスト入力を設置する
この記事ではフォーム部品の基本となるテキスト入力を jQuery Mobile で設置する方法を解説します。input要素に「type="text"」などを指定したテキストボックスと textarea要素を使うテキストエリアの設置方法を解説します。
第27回 jQuery Mobile 検索ボックスを設置する
大規模サイトになると、サイト内検索フォームの設置は必須となります。全体を見通しにくいスマートフォンサイトでも、検索ボックスはいち早く求める情報にたどりつく手段となります。この記事では jQuery Mobile での検索ボックスの設置方法を解説します。
第28回 jQuery Mobile チェックボックスを設置する
チェックボックスは、オプション選択などをユーザーにしてもらうためのフォーム部品です。jQuery Mobile ではチェックボックスのタップ領域を大きくして、スマートフォンでもタップしやすいデザインにしています。
第29回 jQuery Mobile ラジオボタンを設置する
ラジオボタンは、複数の項目から１つだけをユーザーに選択してもらうためのフォーム部品です。jQuery Mobile ではチェックボックス同様、ラジオボタンのタップ領域を大きくして、スマートフォンでもタップしやすいデザインにしています。
第30回 jQuery Mobile フリップスイッチを設置する
オン/オフの切り替えなどに使われるフリップスイッチは、タップかスワイプすることでスイッチを切り替えることができるタッチデバイス向けのフォーム部品です。jQuery Mobile でフリップスイッチを実装する２種類の方法を解説します。
第31回 jQuery Mobile スライダーを設置する
スライダーは、ある範囲内の値をハンドルをドラッグすることによってユーザーに設定してもらうためのフォーム部品です。jQuery Mobile では範囲内の１つの値を設定するスライダーと、両端の２つの値を設定するレンジスライダーがあります。
第32回 jQuery Mobile セレクトメニューを設置する
セレクトメニューはリストの中から項目を選択するフォーム部品ですが、OS によって UI が違っています。jQuery Mobile では OS の UI を利用するセレクトメニューの他に、独自の UI を提供するカスタムセレクトメニューがあります。
第33回 jQuery Mobile イベントの概要とイベントリスト
jQuery Mobile ではさまざまなタイミングで発生するカスタムイベントを用意しています。この記事では jQuery Mobile でイベントを利用するための基本的事項と、用意しているイベントのリストを示します。
第34回 jQuery Mobile ページイベントの種類・発生タイミングと利用例
ページロード時や遷移時に発生するページイベントは、jQuery Mobile のイベントの中で最も重要です。種類も多くバージョンによって頻繁に仕様が変わるので理解するのがたいへんですが、現時点での種類と発生タイミングを整理してみます。
第35回 jQuery Mobile サイト全体の動作を規定するグローバル設定
jQuery Mobile では、グローバル設定と呼ばれるサイト全体の動作を規定するためのパラメータが用意されています。この記事ではグローバル設定にはどんな項目があるかと、その変更方法について解説します。
第36回 jQuery Mobile ウィジェットのオプションを JavaScriptで設定する
jQuery Mobile ではウィジェットのスタイルや振る舞いを規定するためにさまざまなオプションを設定しますが、データ属性やクラスを付加するのではなく、JavaScript で設定する方法について解説します。
第37回 jQuery Mobile ThemeRollerでカスタムテーマを作成する
jQuery Mobile のデフォルトテーマをそのまま使っても品質の良い Webサイトを制作することはできますが、オリジナリティを考えるとテーマのカスタマイズは必要です。jQuery Mobile では簡単にテーマを作成できるツール「ThemeRoller」が用意されています。
第38回 jQuery Mobile オリジナルアイコンを組み込む
jQuery Mobile にはデフォルトのアイコンセットが用意されていますが、自分のサイトに適したものがない場合もあります。自分で作成したオリジナルアイコンを組み込み、デフォルトアイコンと同じように扱えるようにしてみます。
第39回 jQuery Mobile デフォルトアイコンを拡張する
jQuery Mobile のデフォルトアイコンセットに Font Awesome ライブラリをベースにしたアイコンを拡張できます。デフォルトの50種に加え、Font Awesomeの369種類のアイコンが jQuery Mobile の書式で使えるようになります。
第40回 jQuery Mobile グリッドレイアウトで要素を均等に配置する
jQuery Mobile にはグリッドレイアウトという機能があり、要素を均等に横並びに配置することができます。複数行のグリッドも構成できるため、ボタンや写真などを格子状に並べることもできます。
第41回 jQuery Mobile フルスクリーンモードを設定する
jQuery Mobile ではヘッダーとフッターを固定表示し、重要なナビゲーションなどを常に表示しておくことができます。しかし写真など画面一杯に表示したいコンテンツでは固定表示は邪魔になるので、フルスクリーンモードを設定して表示領域を拡げます。
第42回 jQuery Mobile 戻るボタンの一括設定と独自の戻るボタン
jQuery Mobile ではデータ属性を指定することにより戻るボタンを設置することができますが、サイトのすべてのページに戻るボタンを設置したい場合はJavaScriptで一括設定すると便利です。また独自の戻るボタンも設置できますのでその方法も解説します。
