# TODO管理 アプリ
TODO 一覧に、TODO を追加するアプリです。
## デモ
[プロジェクトをインポート](https://monaca.mobi/ja/directimport?pid=62995cb4e78885b32556d9b7)
**テスト環境**
* Android 11.0
* iOS 14.3
## ファイル構成
| ファイル | 説明 |
| ---------------- | ------------------------ |
| `index.html` | スタート画面のページ |
| `css/styles.css` | アプリで使用する css ファイル |
| `js/app.js` | アプリで使用する JavaScript ファイル |
## 必要な JS/CSS コンポーネント
* `jQuery Mobile`
## 必要な Cordova プラグイン
* `Camera`
## HTML の解説
HTML の \ 内の記述は、次のとおりです。
```markup
```
このサンプルでは、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 デモ](http://jquerymobile.com/demos/1.2.0/) をご確認ください。
## JavaScript の解説
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 = "![](" + camera_url + ")
";
}
if (monaca.isIOS) {
img_tag = "![](" + window.WkWebView.convertFilePath(camera_url) + ")
";
}
}
$.mobile.changePage($("#list-page"));
$("#todo-list").append("" + img_tag + "" + title + "
" + body + "
")
$("#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` 変数に代入しています。
```javascript
var title = $("#todo-title").val();
```
`14～19` 行目で、取得した値を読み取り、`title`、`body`、`img_tag` 変数に、それぞれ代入しています。次に、`$.mobile.changePage` 関数を使用して、次のページに遷移し、一覧に行を追加しています。最後に、一覧を再描画し、プログラムを終了します。
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ja.docs.monaca.io/sampleapp/samples/todo.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.