jQuery Mobileを試してみました
初めまして。4月からアシアルに入社した志田と申します。
大学院時代は、グループウェアと呼ばれる複数人で知識共有するシステムをメインに研究・開発を行ってきました。
みなさん、どうぞよろしくお願いいたします。
さて、今回はjQuery Mobileを使って簡単なブログページを作ってみたいと思います。
今回は、手元にAndroid端末であるIS03があるので、IS03の標準ブラウザで表示しながら説明していきます。
ブログ記入画面
まず、ブログ記入画面を作ってみます。
ここがトップで、リストをクリックすると
ページ内の各ページにジャンプします。
このトップページから各ページは、実は1つのHTMLファイルの中にすべて書かれています。
別ページのように見えていますが、ページ内リンクで実現しています。
各ページを表しているのが、divタグにつけられた data-role="page" というクラスです。このdata-roleが、そのボックスが何なのか（ページなのか、リストなのか…）を表します。
たとえば、次のソースの1番はじめのdivボックスを見てください。data-roleがpageとなっているので、このボックスが1ページを表しています。
ulタグには、listviewというdata-roleがつけられています。
「新しいエントリ」には、list-driverというdata-roleがつけられています。
「本文」「日付」等はリンク先が「#move-title」といったページ内リンクになっており、それらをクリックするとidがmove-titleであるdivボックスにジャンプします。
data-themeを決める ことで、画面のデザインもすぐに変更することができます。
<div data-role="page" data-theme="e" id="jqm-home">
<div data-role="header">
<h1>Diary</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="e">
<li data-role="list-divider">新しいエントリ</li>
<li><a href="#move-title">タイトル：<span id="title_text"></span></a></li>
<li><a href="#move-body">本文：<div style="margin-left:20px;" id="body_text"></div></a></li>
<li><a href="#move-date">日付：<span id="date_text"></span></a></li>
</ul>
<input type="submit" value="この内容で日記を書く" data-role="button" />
</div>
</div>
<div id="move-title" data-role="page" data-theme="e">
<div data-role="header">
<h1>タイトル</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<lavel for="name">
<input type="text" name="title" id="title" /></label>
</div>
<a href="#jqm-home" data-role="button" data-inline="true">キャンセル</a>
<a href="#jqm-home" data-role="button" data-theme="e" data-inline="true" onClick="inputAdd('title')">決定</a>
</div>
</div>
<div id="move-body" data-role="page" data-theme="e">
<div data-role="header">
<h1>本文</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textarea">
<textarea cols="40" rows="10" name="body" id="body"></textarea>
</label>
</div>
<a href="#jqm-home" data-role="button" data-inline="true">キャンセル</a>
<a href="#jqm-home" data-role="button" data-theme="e" data-inline="true" onClick="inputAdd('body')">決定</a>
</div>
</div>
<div id="move-date" data-role="page" data-theme="e">
<div data-role="header">
<h1>日付</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="date">Date Input:</label>
<input type="date" name="date" id="date" value="" />
</div>
<a href="#jqm-home" data-role="button" data-inline="true">キャンセル</a>
<a href="#jqm-home" data-role="button" data-theme="e" data-inline="true" onClick="inputAdd('date')">決定</a>
</div>
</div>
カレンダーはdatepicker.mobileというものがgithubで公開されているので、そちらを利用させていただきました。
トップページから各ページ内ページにジャンプし、フォームに必要事項を記入します。
送信される のは、一見別のページに書かれたフォーム内容のように見えますが、一つのHTMLに書かれたひとつのフォームの内容になっています。
この、1つのHTMLで複数ページを遷移するように見せるというのが、jQuery Mobileのひとつの魅力ではないでしょうか。
一覧画面
PHP等で記入内容をDBに登録したら、一覧となるページを表示します。
DBからブログ記事の一覧を取得するなどして、トップページと同様にlistviewで表示を行います。
トップページはひとつのフォームを各ページに分けたような見た目にしたかったために、リンクはすべて#付きのページ内リンクになっていました。
一覧ページから詳細ページに切り替わるような、別のHTMLへ遷移させる場合は、jQuery Mobileがローディング画面を出してくれます。
このAjaxローディング画面を無効にしたい場合は、jQueryを読み込んだ直後、jQuery Mobileを読み込む直前に
<script>
$( document ).bind( "mobileinit", function(){
$.mobile.ajaxFormsEnabled = false;
});
</script>
このように、ajaxFormsEnabledをfalseにしないといけないようです。
2011.06.24 追記
みたけんさんからのコメントより、Beta1からはajaxFormsEnabledが削除されたとのことで、ajaxEnabledを使うほうが良いとのことです。
コメントありがとうございました！
今回は、jQuery Mobileでのページ作成について触れました。
まだjQuery Mobileにはバグも多く、実機で入力ができなかったり、datepickerが複数表示されるなど、疑問の残る点もあります。ですが、非常に簡単な記述で美しいページや、ダイナミックな表示をしてくれるということがわかると思います。
スマートフォンが流行していますので、是非サイト設計に取り入れていきたいですね！
