Webデザイナーブログから学ぶホームページ制作

jQuery mobileとはモバイルデバイス（スマートフォンサイト、タブレットサイト）構築用のUIフレームワークのことです。
jQuery mobile用の「data-role」属性などを設定することでjavascriptやcssを細かく書かず、HTMLを用意するだけでスマートフォン向けのUI（ユーザインタフェース）が簡単に作成する事ができます。
また、「iPhone」「Android」「iPad」をはじめ、広範囲のプラットフォームに対応しています。

今回は、モバイルデバイス向けフレームワークjQuery mobileの解説をいたします。

jQuery mobileとは一言でいうと「スマートフォン向けフレームワーク」です。
jQuery mobile用の簡単なタグの記述でスマートフォン・タブレットに特化したサイトが簡単に作れるものです。
さまざまなデバイスに対して優れたユーザーインターフェイスを簡単に作成することができるJavaScriptライブラリのひとつです。

jQuery Mobileを利用すると、HTML5ベースのタグでページを記述するだけで、「iPhone」「Android」「iPad」などの各種スマートフォン・タブレットに対応したサイトが構築できます。

このように、たくさんのプラットフォームに対応しています。
スマートフォン・タブレットのみならず、パソコンのブラウザにも対応しています。

HTMLの要素に特定の属性やclass属性を追加していくことが基本なので、高度なコーディングやcssを書くことをしたくてもスマートフォンサイトが簡単に作成できます。
また、１つのHTMLファイルに複数のページを含めることができます。

余計なコードや複雑な構成ではない為、処理速度や表示速度は速いです。
jQuery mobileが利用されていないスマートフォンサイトですと動きを実装する為にJavaScriptをいくつも要素に入れることによって処理速度や表示速度が遅くなりますがjQuery mobileで構築されたサイトは全ての処理能力が早いです。

特定の属性やclass属性を追加していくことでダイアログや画像ボックス、ポップアップメニューのような複雑なポップアップを余計な作業なく作成することができる。
ページ遷移時のエフェクトなど、スライダーやアクションエフェクトも自由自在に適応できる。

・ページを切り替える多彩なエフェクト
・ツールバー・ナビゲーションバー・タブバー
・折り畳みコンテンツ
・グリッドレイアウト
・ダイアログボックス
・ポップアップ

jQuery Mobile ではボタン等に使う要素やスタイルが用意されています。
ボタンを設置するには a要素、button要素、input要素のいずれかを使います。
また、お問い合わせフォームなど設置するときに使われる部品やラベルに対しても自動的にスタイルを適用してくれます。

・フォーム
・ボタン
・リスト
・スライダー
・フリップスイッチ
・アニメーション
・検索ボックス ・テキスト入力
・チェックボックス
・ラジオボタン
・セレクトメニュー

jQuery Mobileの特徴の一つとして、クロスプラットフォーム対応（iOS、Android、Windows Phone、BlackBerry等）がされているので、クロスブラウザ対応でブラウザ間による表示の誤差をそれほど気にしなくてもよいです。
制作後のテスト検証でブラウザテストを行ってもさほどブラウザに対しての誤差がないためブラウザ対応への時間短縮ができる。

HTMLやCSS、JavaScriptは日々進化しています、jQuery Mobileはデザインが苦手な方にとってはインターフェイスも見さすく組み立てることができて利用者も増えていましたが、当初に比べたら今はあまり使われなくなってきましたね。
CSSでもフレームワークのBootstrapがでてきましたし、そのBootstrapも今は利用者が減ってきています。
jQuery Mobileは完全オリジナルのデザインが出来ないことがデメリットではあるのでデザイン性をもたせるサイト作りには向いていないですね。
また、大がかりなデザインを変更するためには、jQuery MobileのCSSを変更する必要があり、かなり手を加えないと難しいです。
わたしも当初は試しに使ってみましたがあまり人が作ったcssを触るのは苦手ですね。