TODO管理 アプリ

検索…
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-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 コードを解説します。
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!
addTodoPicture と addTodo の 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 行目で、取得した値を読み取り、title、body、img_tag 変数に、それぞれ代入しています。次に、$.mobile.changePage 関数を使用して、次のページに遷移し、一覧に行を追加しています。最後に、一覧を再描画し、プログラムを終了します。
最終更新 6mo ago
リンクのコピー