スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

それでは早速、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
1つのHTMLに複数のコンテンツを用意し、JavaScriptで切り替えるのがjQuery Mobileで構築するスマートフォンサイトの基本構造のようです。但し、コンテンツサイズが大きくなる場合は、複数に分けたほうがよいでしょう。以下、ページ「foo」と「bar」の2ページ構成のサンプルです。

<!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タグを1つのページとして構築します。実際にスマートフォンで閲覧すると以下のとおりです。

「id=”foo”」や「id=”bar”」がページIDを示しており、アンカーリンクで遷移するわけです。つまり、「<a href="#bar">bar</a>」をクリックすると、以下のように「id=”bar”」のページに遷移します。

トップページから遷移すると、自動的にヘッダー左部分に「Back」ボタンがつくようです。

このように、jQuery Mobileを利用することで、少ないHTML5を記述するだけで、容易にスマートフォンサイト構築が可能です。
とりあえず、これだけの基礎知識だけでも、公式ドキュメントを参照しながらスマートフォンサイトを構築できそうです。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search