Monaca Docs
検索…
TODO管理 アプリ
TODO 一覧に、TODO を追加するアプリです。

デモ

テスト環境
  • Android 11.0
  • iOS 14.3

ファイル構成

ファイル
説明
index.html
スタート画面のページ
css/styles.css
アプリで使用する css ファイル
js/app.js
アプリで使用する JavaScript ファイル

必要な JS/CSS コンポーネント

  • jQuery Mobile

必要な Cordova プラグイン

  • Camera

HTML の解説

HTML の <body> 内の記述は、次のとおりです。
1
<div data-role="page" id="list-page">
2
<div data-role="header" data-position="fixed">
3
<h1>Monaca TODO</h1>
4
<a href="#add-page" data-icon="add" class="ui-btn-right">Add</a>
5
</div>
6
<div data-role="content">
7
<ul data-role="listview" data-inset="true" id="todo-list"></ul>
8
</div>
9
</div>
10
<div data-role="page" id="add-page">
11
<div data-role="header">
12
<h1>Add TODO</h1>
13
</div>
14
<div data-role="content">
15
<input id="todo-title" type="text" placeholder="TODO Title">
16
<textarea id="todo-body" style="height: 8em" placeholder="Description"></textarea>
17
<input id="add-button" type="button" value="Save" onclick="addTodo()">
18
<input id="add-button" type="button" value="Picture And Save" onclick="addTodoPicture()" data-theme="b">
19
</div>
20
</div>
Copied!
このサンプルでは、jQuery Mobile を使用するため、HTML の記法もそれに従ったものとなります。 data-roledata-position など、data- で記述が始まる属性は、jQuery Mobile 特有のものです。
jQuery Mobile では、複数のページを、1 つの HTML ファイル内にまとめて記述できます。このアプリでも、メモ一覧画面とメモ追加画面の両方を、 index.html の中で定義しています。 data-rolepage となっている div タグが、1 ページを構成します。このように data-role 属性を使って、 div タグ 毎に、役割を決定できます。data-role には、他にも、headercontentlistview を指定できます。
jQuery Mobile のタグとコンポーネントについては、 jQuery Mobile デモ をご確認ください。

JavaScript の解説

JavaScript コードを解説します。
1
monaca.viewport({ width: 320 });
2
function addTodoPicture() {
3
navigator.camera.getPicture(addTodo,
4
function() {
5
alert("Failed to get camera.");
6
}, {
7
quality : 50,
8
destinationType : Camera.DestinationType.FILE_URI,
9
targetWidth : 100,
10
targetHeight : 100
11
});
12
};
13
function addTodo(camera_url) {
14
var title = $("#todo-title").val();
15
var body = $("#todo-body").val();
16
var img_tag = "";
17
if (camera_url) {
18
if (monaca.isAndroid) {
19
img_tag = "<img src='" + camera_url + "'>";
20
}
21
if (monaca.isIOS) {
22
img_tag = "<img src='" + window.WkWebView.convertFilePath(camera_url) + "'>";
23
}
24
}
25
$.mobile.changePage($("#list-page"));
26
$("#todo-list").append("<li>" + img_tag + "<h3>" + title + "</h3><p>" + body + "</p></li>")
27
$("#todo-list").listview('refresh');
28
};
Copied!
addTodoPictureaddTodo の 2 つの関数を定義しています。前者は写真撮影とデータの保存を行い、後者はデータの保存のみ行います ( コードを参照のこと )。
addTodoPicture 関数では、navigator.camera.getPicture 関数を使用して、写真撮影を行います。この関数 ( getPicture ) は、基本プラグイン提供のものです。カメラの起動・撮影に成功した場合、*addTodo 関数を実行し、失敗の場合には、警告メッセージを表示します。また、撮影オプションとして、画像サイズの指定および戻り値の型を指定しています。
addTodo 関数は、 camera_url を引数として取ります。navigator.camera.getPicture 関数を呼び出し、撮影が成功した場合、画像の参照先がこの引数に格納されています。
jQuery ライブラリー群を使用することにより、これらの関数内で DOM 操作を簡単に行えます。たとえば、次のコードでは、 todo-title の ID を持つ要素の値を取得して、 title 変数に代入しています。
1
var title = $("#todo-title").val();
Copied!
14~19 行目で、取得した値を読み取り、titlebodyimg_tag 変数に、それぞれ代入しています。次に、$.mobile.changePage 関数を使用して、次のページに遷移し、一覧に行を追加しています。最後に、一覧を再描画し、プログラムを終了します。
最終更新 2mo ago