それでは早速、jQuery Mobileを使ってスマートフォンサイトの構築にチャレンジします。
フレームワークをダウンロード
jQuery Mobileを導入する方法ですが、非常に簡単で、公式サイトよりダウンロードしたCSSファイルとJSファイルを読み込むだけです。
まず、jQuery MobileはjQueryをベースとして動作するので、jQueryの最新版「jquery-1.5.2.min.js」を本サイトよりダウンロードします。
jQuery: The Write Less, Do More, JavaScript Library
同様にして、jQuery Mobileの最新版「jquery.mobile-1.0a4.1.min.js」と「jquery.mobile-1.0a4.1.min.css」をダウンロードします。
jQuery Mobile
ここで、ダウンロードするソースは圧縮版がいいでしょう。
近年、モバイル通信が高速化したとはいえ、光通信と比べるとまだまだ遅いです。スマートフォンサイトを構築するには、常にコンテンツの軽量化を考慮したほうがよいと思います。
フレームワークを組み込む
上で用意したファイルを読み込みます。基本的に、これだけでjQuery Mobileの組み込みは完了です。
<link rel="stylesheet" href="/css/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="/js/jquery.mobile-1.0a4.1.min.js"></script>
サンプルテスト
公式サイトにある、マルチページのサンプルを実行して、動作テストをしてみます。
jQuery Mobile: Demos and Documentation
１つのHTMLに複数のコンテンツを用意し、JavaScriptで切り替えるのがjQuery Mobileで構築するスマートフォンサイトの基本構造のようです。但し、コンテンツサイズが大きくなる場合は、複数に分けたほうがよいでしょう。以下、ページ「foo」と「bar」の２ページ構成のサンプルです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Sample</title> <link rel="stylesheet" href="/css/jquery.mobile-1.0a4.1.min.css" /> <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="/js/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!-- /header --> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p>View internal page called <a href="#bar">bar</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!-- /header --> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page.</p> <p><a href="#foo">Back to foo</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /header --> </div><!-- /page --> </body> </html>
HTML5でコーディングします。HTML5での拡張要素「data-role」を用いて「page」を指定することで、divタグを１つのページとして構築します。実際にスマートフォンで閲覧すると以下のとおりです。
「id=”foo”」や「id=”bar”」がページIDを示しており、アンカーリンクで遷移するわけです。つまり、「<a href="#bar">bar</a>」をクリックすると、以下のように「id=”bar”」のページに遷移します。
トップページから遷移すると、自動的にヘッダー左部分に「Back」ボタンがつくようです。
このように、jQuery Mobileを利用することで、少ないHTML5を記述するだけで、容易にスマートフォンサイト構築が可能です。
とりあえず、これだけの基礎知識だけでも、公式ドキュメントを参照しながらスマートフォンサイトを構築できそうです。
コメントする