スマートフォンサイトのためのjquerymobileの使い方

夏場ぐらいからどんどん増えてきているスマートフォンからのアクセス数
アクセス解析を見て、少しづつ対応しなくては、不安を感じているWeb担当者は多いのでは?
ということでjquerymobileを使って簡単にできるスマートフォンサイトの作り方を解説していきます。

公式サイト>
リファレンス>

まずは初期設定

jquerymobileの準備

jqueryを動かすのに必要なスタイルシートとjavascriptを読み込ませます。
下記のhtmlタグをhtml内部のheadの中に埋め込みます。

…
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
</head>
…

スマートフォンサイズに対応させる

今のままではホームページの大きさで表示されるのでスマートフォンに最適化された画面サイズに変更するようにmetaタグを入れます。

…
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>

これで準備は完了です。

簡単なサイトを製作します。

まずはページを作る

jquerymobileでは、一つのhtmlを読み込むだけで、何ページにも分かれているように表示ができます。
ということでページを作るタグです。

<div data-role="page" id="index">

</div>

data-role"page"
のdivで囲まれた部分のhtmlが一ページとして表示されます。

id="index"
でそのページのurlを指定してあげるような形です。
例えば、idで指定したページにいきたい場合は、

<li><a href="#index">TOPへ</a></li>

でそのページに飛ぶことができるようになります。

ヘッダー、フッター、コンテンツとページを分ける

ヘッダー

<div data-role="header" data-theme="d">
<h1>Geekz</h1>
</div>

data-roleに"header"と記述することでヘッダーのブロックができます。
data-theme="d"で初めから入っているデザインを使うことができます。
この場合はdパターンのデザインになっていますが、a~eまでのデザインを選ぶことができます。
フッター

<div data-role="footer" data-theme="d">
&copy;2012 geek
</div>

ヘッダー部分と同じように
data-role="footer"でフッターのブロックを作っています。
data-theme="d"でデザインを指定しています。
フッターは別のデザインなど、違うデザインを指定することももちろん可能です。
コンテンツ

<div data-role="content">

</div>

data-role="content"でコンテンツブロックが出来上がります。
ここにサイトの内容を追加していきます。

別ページを作る

会社概要とアクセスと問い合わせのページを作るとします。

<div data-role="page" id="office">
<div data-role="header" data-theme="d">
<h1>Geekz</h1>
</div>
<div data-role="content">
会社概要
</div>
<div data-role="footer" data-theme="d">
&copy;2012 geek
</div>
</div>

今までの内容とほとんど同じですね。
idの部分を違うようにしてindexページの/divの下に追加します。
同じようにアクセスページと問い合わせページを作ってみてください。

トップページへ戻る

現在の状態では別ページに行っても元のページに戻れません。

<a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a>

aタグのhref="#index"でトップページに戻ります。
data-icon="arrow-l" data-direction="reverse"でアイコンのデザインを指定しています。

トップページから別ページへのアクセス

indexのページのcontentの部分に

<div data-role="content">
<ul data-role="listview" data-theme="d">
<li><a href="#office">会社概要</a></li>
<li><a href="#access">アクセス</a></li>
<li><a href="#contact">問い合わせ</a></li>
</ul>
</div>

そのページへ飛ぶリンクを書います。
href="#office"
別ページの作成時、idの文字を入れることでその別ページに飛ぶことができます。

<div data-role="page" id="office">

これで、簡単なサイトの大枠ができあがりです。

最後にページ全体

ページ全体

<div data-role="page" id="index">
<div data-role="header" data-theme="d">
<h1>Geekz</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="d">
<li><a href="#office">会社概要</a></li>
<li><a href="#access">アクセス</a></li>
<li><a href="#contact">問い合わせ</a></li>
</ul>
</div>
<div data-role="footer" data-theme="d">
&copy;2012 geek
</div>
</div>
<div data-role="page" id="office">
<div data-role="header" data-theme="d">
<a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a>
<h1>Geekz</h1>
</div>
<div data-role="content">
会社概要
</div>
<div data-role="footer" data-theme="d">
&copy;2012 geek
</div>
</div>
<div data-role="page" id="access">
<div data-role="header" data-theme="d">
<a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a>
<h1>Geekz</h1>
</div>
<div data-role="content">
アクセス
</div>
<div data-role="footer" data-theme="d">
&copy;2012 geek
</div>
</div>
<div data-role="page" id="contact">
<div data-role="header" data-theme="d">
<a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a>
<h1>Geekz</h1>
</div>
<div data-role="content">
 お問い合わせ
</div>
<div data-role="footer" data-theme="d">
&copy;2012 geek
</div>
</div>

コメントする