allWebクリエイター塾　受講の評価、感想、講義内容を綴ったブログ: jQuery Mobile ページを用意しよう

前回同様に、jQuery Mobile 入門基礎講座を受講した内容をまとめていきます。
まずはベースとなるHTMLファイルを読み込みます。

ここでのポイントは
• viewportの設定
言わずものがなここはここは表示の拡大縮小の設定です。

<meta name="viewport" content="width=device-width, initial-scale=1  minimum-scale=1, maximum-scale=1, user-sacalable=no">

width=device-widthはデバイス本来の幅で表示されますが横にした時にはスームされたように拡大されてしまします。initial-scale=1で拡大しない様に1倍に指定することで拡大されますなるのを防ぎます。
minimum-scale、maximum-scaleはユーザーがピンチイン、ピンチアウトで縮小、拡大できる可能範囲を指定します。今回は縮小、拡大を1倍なので固定した事になります。user-scalableユーザーはによる拡大縮小を可能にするか禁止するかの指定になります。

上記の記述は基本的にユーザーに寄る拡大縮小がしない指定ですが、ピンチインピンチアウトできなのはユーザーにとって不親切かなと思いますが、これはデバイスによっても違うため実機で検証しないとと思います。とりあえず今回はこれで指定完了。

・jQuery mobileを読込みます。

前日にわたしは張り切って、http://jquerymobile.com/download/よりファイルを一式ダウンロードしたのですが、このページの中ほどにある、

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

これを記述してOKの用です。
自らのサーバーにアップロードして利用する方法でも問題ないですが、CDNを利用する方が簡単ですし、バージョンアップに対応する事を考えると断然こちらだという事です。

これで、QeryMobileが使える！わけではなさそうです。
QeryMobileのお作法に則った形式での記述が必要なようです。

では、その記述は。。。

<!DOCTYPE html> <html lang="ja"> 
<head> 
<metacharset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>サンプル</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1>タイトル 
</div> 
<div data-role="content">コンテンツ</div> 
<div data-role="footer"> 
<h4>フッター</h4> 
</div>  
</div>
</body> 
</html>

お作法：「data-role」でそれぞれの要素を指定します data-role="page"を指定したタグの中に、data-role="header"やdata-role="content"指定のタグを使ってタイトルやコンテンツの内容を書くと、それに従って画面にレイアウトされた状態で表示されます。

html5の記述なので、sectionやarticleでもよさそうです。今回はdivで記述していきます。

複数ページでの作成でもいいのですが、 jQuery Mobileでは「data-role属性がpageである要素」が1つのページと見なされます。

今回は1ファイルの中に複数ページを表す方法で記述していきます。 2ページ目3ページ目にはヘッダにdata-add-back-btn="true"を入れて入れると自動的に「backボタン」を配置する事ができます。「back」をテキストにしたい時はdata-back-btn-text="戻る"　を足します。