TODO 一覧に、TODO を追加するアプリです。
デモ
プロジェクトをインポート
テスト環境
ファイル構成
必要な JS/CSS コンポーネント
必要な Cordova プラグイン
HTML の解説
HTML の <body> 内の記述は、次のとおりです。
<div data-role="page" id="list-page">
<div data-role="header" data-position="fixed">
<h1>Monaca TODO</h1>
<a href="#add-page" data-icon="add" class="ui-btn-right">Add</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="todo-list"></ul>
</div>
</div>
<div data-role="page" id="add-page">
<div data-role="header">
<h1>Add TODO</h1>
</div>
<div data-role="content">
<input id="todo-title" type="text" placeholder="TODO Title">
<textarea id="todo-body" style="height: 8em" placeholder="Description"></textarea>
<input id="add-button" type="button" value="Save" onclick="addTodo()">
<input id="add-button" type="button" value="Picture And Save" onclick="addTodoPicture()" data-theme="b">
</div>
</div>
このサンプルでは、jQuery Mobile を使用するため、HTML の記法もそれに従ったものとなります。 data-role、data-position など、data- で記述が始まる属性は、jQuery Mobile 特有のものです。
jQuery Mobile では、複数のページを、1 つの HTML ファイル内にまとめて記述できます。このアプリでも、メモ一覧画面とメモ追加画面の両方を、 index.html の中で定義しています。 data-role が page となっている div タグが、1 ページを構成します。このように data-role 属性を使って、 div タグ 毎に、役割を決定できます。data-role には、他にも、header、content、listview を指定できます。
jQuery Mobile のタグとコンポーネントについては、 jQuery Mobile デモ をご確認ください。
JavaScript の解説
JavaScript コードを解説します。
monaca.viewport({ width: 320 });
function addTodoPicture() {
navigator.camera.getPicture(addTodo,
function() {
alert("Failed to get camera.");
}, {
quality : 50,
destinationType : Camera.DestinationType.FILE_URI,
targetWidth : 100,
targetHeight : 100
});
};
function addTodo(camera_url) {
var title = $("#todo-title").val();
var body = $("#todo-body").val();
var img_tag = "";
if (camera_url) {
if (monaca.isAndroid) {
img_tag = "<img src='" + camera_url + "'>";
}
if (monaca.isIOS) {
img_tag = "<img src='" + window.WkWebView.convertFilePath(camera_url) + "'>";
}
}
$.mobile.changePage($("#list-page"));
$("#todo-list").append("<li>" + img_tag + "<h3>" + title + "</h3><p>" + body + "</p></li>")
$("#todo-list").listview('refresh');
};
addTodoPicture と addTodo の 2 つの関数を定義しています。前者は写真撮影とデータの保存を行い、後者はデータの保存のみ行います ( コードを参照のこと )。
addTodoPicture 関数では、navigator.camera.getPicture 関数を使用して、写真撮影を行います。この関数 ( getPicture ) は、基本プラグイン提供のものです。カメラの起動・撮影に成功した場合、*addTodo 関数を実行し、失敗の場合には、警告メッセージを表示します。また、撮影オプションとして、画像サイズの指定および戻り値の型を指定しています。
addTodo 関数は、 camera_url を引数として取ります。navigator.camera.getPicture 関数を呼び出し、撮影が成功した場合、画像の参照先がこの引数に格納されています。
jQuery ライブラリー群を使用することにより、これらの関数内で DOM 操作を簡単に行えます。たとえば、次のコードでは、 todo-title の ID を持つ要素の値を取得して、 title 変数に代入しています。
var title = $("#todo-title").val();
14～19 行目で、取得した値を読み取り、title、body、img_tag 変数に、それぞれ代入しています。次に、$.mobile.changePage 関数を使用して、次のページに遷移し、一覧に行を追加しています。最後に、一覧を再描画し、プログラムを終了します。
