# メモ帳アプリ
localStorage を使用して、メモ帳アプリを作成するサンプルアプリです。
## デモ
[プロジェクトをインポート](https://monaca.mobi/ja/directimport?pid=62996175e788857b1f7f7f46)
**テスト環境**
* Android 11.0
* iOS 14.3
## ファイル構成
| ファイル | 説明 |
| ------------ | --------------------------------------- |
| `index.html` | スタート/ホーム画面のページ |
| `js/memo.js` | localStorage 内のデータを処理する JavaScript ファイル |
| `js/app.js` | アプリ内でさまざまな処理を行う JavaScript ファイル |
## 必要な JS/CSS コンポーネント
* `jQuery`
* `jQuery Mobile`
## HTML の解説
### index.html
このサンプルアプリのユーザーインターフェイスには、jQuery Mobile を使用しています。jQuery Mobile では、複数のページを 1 つの HTML ファイル内にまとめて記述できます。このアプリでも、 index.html 内に、すべてのページ ( トップページ、メモ追加ページ、詳細ページ ) を定義しています。`div` タグの `data-role` 属性に、`page` を指定して、ページを定義します。jQuery Mobile では、このように、 `data-role` 属性を使用して、各タグの役割を設定します。 `data-role` には、他にも、`header`、`content`、`listview` などを設定できます。jQuery Mobile のタグとコンポーネントに関しては、 [jQuery Mobile Demo ( 英語ページ )](http://demos.jquerymobile.com/) をご確認ください。
`index.html` ファイル内のホーム画面の設定は、以下になります。
```markup
...
```
このホーム画面から、メモの追加、閲覧、削除を行えます。
`index.html` ファイル内のメモの追加と保存画面の設定は、以下になります。
```markup
...
...
```
この画面から、メモの追加と保存を行えます。
`index.html` ファイル内の各メモの詳細を閲覧する画面の設定は、以下になります。
```markup
...
```
この画面から、各メモの詳細を閲覧できます。
## JavaScript の解説
### app.js
`app.js` は、アプリ内のさまざまな処理を行う JavaScript ファイルです。
アプリを起動すると `initTopPage()` 関数を直ちに呼び出します。この関数を使用して、トップページ ( ホーム画面のページ ) の初期化を行います。ここでの初期化処理とは、保存されているメモを取得して、一覧で表示することです ( 取得処理は、`memo.js` ファイル内で定義されている `getMemoList()` 関数を経由して行われます )。アプリの初回起動時など、既存のメモがない場合には、「 `No memo found` 」 が表示されます 。
この関数のソースコードを次に記します。
```javascript
...
///// Initialize top page
function initTopPage() {
$("#TopListView").empty();
var list = getMemoList();
for (var i in list) {
var memo = list[i];
var d = new Date(memo.time);
var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
$li = $("Delete");
$li.data("id", memo.id);
$li.find("h3").text(date);
$li.find("p").text(memo.text);
$("#TopListView").prepend($li);
}
if (list.length == 0) {
$li = $("No memo found");
$("#TopListView").prepend($li);
}
$("#TopListView").listview("refresh"); // Call refresh after manipulating list
}
...
```
トップページ上で `+Add`ボタンをクリックすると、Add Memo ( メモ追加 ) ページを表示します。メモを入力して `Save`ボタンをクリックすると `onSaveBtn()` 関数を呼び出します。この関数内に記述された `addMemo()` 関数 ( `memo.js` ファイルで定義 ) を経由して、localStorage に入力テキストが保存されます。そして、更新されたメモの一覧をトップページ上に表示します。この関数のソースコードを次に記します。
```javascript
///// Save memo and return to top page
function onSaveBtn() {
var text = $("#Memo").val();
if (text != '') {
// Save to local storage
addMemo(text);
// Clear form
$("#Memo").val("");
// Initialize top page
initTopPage();
}
$.mobile.changePage("#TopPage", { reverse: true });
}
```
トップページ上で一覧上のアイテムをクリックすると、 `onShowLink()` 関数 ( `memo.js` ファイルで定義 ) を呼び出します。この関数を使用して、選択したアイテムの詳細閲覧ページとタイトル ( または、内容 ) を表示します。
この関数のソースコードを次に記します。
```javascript
///// Move to detail page
function onShowLink() {
var $li = $(this).parent();
var memoTitle = $li.find("h3").text();
var memoHtml = $li.find("p").html().replace(/\n/g, "
");
$("#ShowPage h1").text(memoTitle);
$("#ShowPage p").html(memoHtml);
$.mobile.changePage("#ShowPage");
}
```
トップページ上で、各アイテムの右端に表示された delete アイコンをクリックすると、一覧上のアイテムを削除できます。アイコンをクリックすると、 `onDeleteLink()` 関数を呼び出します。この関数を使用して、削除を続行するかユーザーに確認するメッセージを表示します。`OK`をクリックすると、`deleteMemo()` 関数 ( `memo.js` ファイルで定義 ) を経由して、localStorage から選択したアイテムを削除します。そして、更新したメモの一覧を、トップページ上に表示します。
この関数のソースコードを次に記します。
```javascript
///// Delete memo
function onDeleteLink() {
if (!confirm("Are you sure to delete this memo?")) {
return;
}
var $li = $(this).parent();
var id = $li.data("id");
deleteMemo(id);
initTopPage();
// Return to top
$.mobile.changePage("#TopPage", { reverse: true });
}
```
### memo.js
`memo.js` ファイルは、localStorage に対する一連のデータ処理を行う JavaScript ファイルです。このファイル内で、次の 4 つの関数を定義しています。
1. `getMemoList()`: localStorage に保存されたメモの一覧を取得します。
2. `saveMemoList()`: メモの一覧を localStorage に保存します。
3. `AddMemo()`: 新規のメモを一覧に追加して、localStorageに新規の一覧を保存します。このとき、 `saveMemoList()`関数を使用します。
4. `deleteMemo()`: メモの一覧から指定されたメモを削除して、localStorageに削除後の一覧を保存します。このとき、 `saveMemoList()`関数を使用します。
---
# 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/memo_application.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.