jQueryMobileを使ったスマートフォンサイトの制作
HTMLとCSSさえ知っていればOK。
javascript、HTML5、CSS3の知識はほとんど必要ありません。
jQueryMobileを利用すれば簡単にできてしまいます。
11月18日RCバージョンからFinalバージョンになりました。
導入手順
1、jQueryMobile本家よりjavascriptファイルをzip形式でダウンロード。
http://jquerymobile.com/
※バージョンが頻繁に変わりますので最新版で。
必要なファイルは3つだけ。
・jquery-1.6.4.min.js
これはjQueryの本家よりダウンロードする必要あり。
http://jquery.com/
※こちらのバージョンは必ず1.6.4である必要があるので探してダウンロード。
現在jQueryの最新バージョンは1.7ですが、jQueryMobile1.0は1.6.4以降は非対応なので注意。1.1では1.7をサポートするそうです。
・jquery.mobile-1.0rc3.min.css
・jquery.mobile-1.0rc3.min.js
ダウンロードしたり、アップしたり面倒な場合はjQueryMobileサイト内ダウンロードページにある以下のような3行（3つ）の絶対パスをhead部分に貼り付けるだけでOKです。
※バージョンが頻繁に変わるので最新版を。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-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.0/jquery.mobile-1.0.min.js"></script>
準備するファイルはこの3つだけ。
基本的にはタグに様々な属性を追加することが主な作業となります。
属性を追加するだけでjavascriptが自動でスタイルシートや機能を反映してくれます。
もちろん自前のcssを使ってスタイルを反映させることもできます。
まずベースとなるのはdivタグの属性にdata-role=”page”を記述。
この部分が1ページ扱いとなる。
1つのHTMLファイルに複数のページを配置可能なところがjQueryMobileの大きな特徴でもあります。
1つのファイルに複数ページを配置することでサーバーとの通信状況が不安定なモバイルに非常に有効になります。
もちろん無理に1つのHTMLファイルに全ページを埋め込む必要はありません。
通常のリンクで他のHTMLファイルに飛ばしてもOK。
data-theme=”a”属性でテーマ（デザイン）が変更可能。
デフォルトはa～eまで。オリジナルを作ることも可能。
formパーツはデフォルトでスマフォ用に最適化されて表示されます。
aタグクリック時は自動的にトランジションがかかります。
デフォルトは右にスライドですが、
以下のようにいくつか用意されてます。
data-transition ページ切り替えエフェクト data-transition="slide" 右から左へ（デフォルト） data-transition="slideup" 下から上へ data-transition="slidedown" 上から下へ data-transition="pop" 真ん中からどーん data-transition="fade" うっすら徐々にあらわれる
基本的なHTMLは以下
HTMLファイルのbodyタグ内に以下を記述
※ベースとなる記述。
これだけで2ページのサイトが完成。
<!-- メインページ --> <div data-role="page" id="index" data-theme="d"> <!-- メインページのヘッダ --> <div data-role="header" data-theme="none"> <h1>SAMPLE CAFE</h1> </div><!-- /header --> <!-- メインページの内容。サブページへのボタン --> <div data-role="content"> <ul data-role="listview" data-theme="d" data-inset="true" data-dividertheme="b" id="main_nav"> <li><a href="#page1">ページ1</a></li> <li><a href="#page1">ページ2</a></li> <li><a href="#page1">ページ3</a></li> <li><a href="#page1">ページ4</a></li> <li><a href="#page1">ページ5</a></li> </ul> <h2>Welcome To SampleCafe</h2> </div><!-- /content --> <div data-role="footer" data-theme="b"> <h4>Footer</h4> </div><!-- /footer --> </div><!-- /page --> <!-- サブページ --> <div data-role="page" id="page1"> <!-- サブページのヘッダ --> <div data-role="header" data-theme="b"> <a data-icon="back" data-rel="back" data-transition="reverse">Back</a> <h1>ページ1</h1> <a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a></div> <!-- /header --> <!-- サブページの内容 --> <div data-role="content"> <p>サブページ1の内容</p> </div><!-- /content --> <div data-role="footer" data-theme="b"> <h4>Footer</h4> </div><!-- /footer --> </div><!-- /page -->
基本的にはタグに様々な属性を追加するだけでいろいろな見た目に変更可能。
head部分はHTML5で書きますので若干変更されました。
というか短縮されましたね。
DOCTYPE宣言はいたってシンプル。文字コード指定もcharset属性で書く形になりました。
またタグ記述のルールはXHTMLの形でもHTMLの形でもOKです。
終了タグなしのタグのスペース+スラッシュはどちらでもOK。XML文として解釈させたい場合はXHTMLのルールで、そうでなければHTML4・・・でOKということ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" />
スマフォのブラウザはデフォルトで幅980pxで表示されるため、
それを回避するためにスマフォサイトのHTMLファイルすべてのhead部分に以下を記述します。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="format-detection" content="telephone=no">
これで幅がその機種の画面の幅に自動で調整されます。
320pxが今のところ大多数です。
横向きにした場合は640pxになります。
通常スマフォサイトは幅の指定は行いません。
※cssで320pxという記述は行わないということ。ただし場所によっては使うことがあります。
デフォルトはウインドウの幅に対して100％なのであえて100％を記述する必要はありません。
2行目はサイト内に電話番号やそれに近い番号などがあると、機種によっては自動でリンクが貼られるため、それを回避するためのものです。
電話番号をクリックしたら電話をかけるようにするには、
<a href="tel:電話番号">電話番号</a>
と書くことで実現できますので、こちらで指定したほうがいいでしょう。
これはスマフォ、携帯のみ有効。
その他のmetaタグやtitleなどは以前とまったく同じです。
■スマフォサイト表示確認用のブラウザは・・・
Safariがおすすめです。
詳細はこちらの記事を参考にしてください。
特に重要な注意点
※その他たくさんあると思いますが・・・
1、jquerymobileの1.0はjquery本体のバージョン1.7はサポートしていない。
IEでは（見ないと思いますが・・・）表示すらされないという事態に陥ります。なので、本体のバージョンは上記にあるように必ず1.6.4を使用する必要がある。
※jquerymobileの1.1ではサポート予定とのこと。
2、他ページのアンカーへのリンクは使用できない。ページ内リンクも現実不可能。
例 access.html#map
jquerymobileでは＃は特別な意味を持ち、＃を使ってページ遷移をしているため。
3、問い合わせフォームで確認ボタンを押して確認画面が表示されるプログラムの場合、「戻る」を押すとフォーム内容がクリアされてしまう。
対応策：問い合わせページへのリンクはrel=”external”属性を追加する。
例 <a rel=”external” href=”・・・”>
※追記 なぜかこのexternalを指定すると、なぜかページ移動の挙動が不安定になる。
リンク先に飛ぶ⇒戻る⇒また同じページに行く⇒強制的に戻される・・・という事態が発生した。
今のところ原因不明、解決不能なので、しかたなくexternal属性はやめた。
4、通常のリンクではajaxが働き、次のページ以降はhead部分は読まないので注意が必要。
※スタイルシートは内部記述はNG。必ず外部化する。
あとは以下の日本語リファレンスサイトを見つついろいろと試してみてください。
http://dev.screw-axis.com/doc/jquery_mobile/
その他参考になるサイト
http://hisasann.com/housetect/2011/02/jquerymobile.html
jQueryMobileで検索すれば情報はたくさん出てきます。
参考までに自分が作ったもの
キックボクシングジム・パーフェクト超人工房⇒
jQueryMobile。いくつかの問題、課題はありそうだけど、実務レベルでも十分使えるレベルだと感じた。
記事の内容が近いもの:
- javascript使用したスマートフォンの判定（判別）
- png8を使ってWeb用画像の軽量化
- スマフォサイトをPCで表示確認するためのブラウザ
- スマートフォン（スマホ）Androidでのmp4再生のための作業録
- ブログ、その他よく使うCMSまとめ
- UTF-8使用時の注意点
- phpでスマートフォンの判別（判定）
- Photoshopでデザイン時の注意点（長方形とラインツール）
- メモ帳出し方いろいろ
- パーミッション（属性）の変更方法
