Monaca Docs
検索…
メモ帳アプリ
Monaca バックエンド API を使用するメモ帳アプリを作成します。

デモ

テスト環境
  • Android 9.0
  • iOS 12.2

事前準備

バックエンドを新規にセットアップして、プロジェクトに紐付けする必要があります。新規プロジェクトの作成後、 パート 3 : Monaca バックエンドのセットアップ 記載の内容に従い、バックエンドとプロジェクトの紐付け処理を行います。
バックエンドを作成した後、次のように、Memo コレクションを作成します。
JavaScript からのアイテム追加を許可する にチェックを入れます。ReadWrite オプションは必要ありません。バックエンドの作成方法の詳細は、バックエンド管理パネル をご確認ください。

ファイル構成

ファイル
説明
index.html
スタート画面のページ
js/app.js
アプリ内の処理を記述した JavaScript ファイル

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

  • jQuery Mobile

HTML の解説

このサンプルアプリの UI には、jQuery Mobile を使います。jQuery Mobile では複数のページを、1 つの HTML ファイル内にまとめて記述できます。このアプリでは、例えば、ログイン画面と登録画面の両方を index.html に定義しています。各ページは、 data-role 属性が page と指定されている div タグを使用して、定義します。このように、 data-role 属性を使用して、 div タグ ごとに役割を決定できます。 data-role には、他にも、headercontentlistview などの値を指定できます。jQuery Mobile のタグ定義とコンポーネントについては、 jQuery Mobile デモ に詳細がありますので、こちらをご確認ください。
次の記述 ( HTML の 内 ) は、バックエンド メモ帳アプリのログイン画面になります ( ユーザー登録が済んでいる場合 )。
1
<body>
2
<!-- Login Page -->
3
<div data-role="page" id="LoginPage">
4
<header data-role="header" data-position="fixed">
5
<h1>Monaca Memo</h1>
6
</header>
7
<section data-role="content">
8
<h1>Sign in</h1>
9
Email:
10
<input type="text" id="login_email">
11
Password:
12
<input type="password" id="login_password">
13
New to Monaca Memo?
14
<a href="#RegisterPage" data-role="button" data-mini="true" data-inline="true" data-theme="b">Register</a>
15
<a href="#" id="LoginBtn" data-role="button" data-inline="false" data-theme="b">Login</a>
16
</section>
17
</div>
18
...
19
</body>
Copied!
次の記述 ( HTML の 内 ) は、バックエンド メモ帳アプリのユーザー登録画面になります。
1
...
2
<!-- Register Page -->
3
<div data-role="page" id="RegisterPage">
4
<header data-role="header" data-position="fixed">
5
<h1>Monaca Memo</h1>
6
</header>
7
<section data-role="content">
8
<h1>Sign up</h1>
9
Email:
10
<input type="text" id="reg_email">
11
Password:
12
<input type="password" id="reg_password">
13
<a href="#" id="RegisterBtn" data-role="button" data-inline="false" data-theme="b">Register</a>
14
</section>
15
</div>
16
...
Copied!

JavaScript の解説

このアプリは、7 つの機能を実装しています。 ログインログアウトユーザー登録メモ追加メモ編集メモ削除メモ閲覧 です。

新規ユーザー登録

onRegisterBtn() は、ユーザー登録ページ で Register ボタンを押したときに呼ばれる関数です。monaca.cloud.User.register() 関数の引数として、入力された emailpassword が使われます。この関数を使用して、 Monaca バックエンドにユーザーを登録できます。登録が成功した場合、ユーザーは自動的にログイン済みの状態になります。ユーザー登録時の JavaScript コードを次に記します。
1
function onRegisterBtn()
2
{
3
var email = $("#reg_email").val();
4
var password = $("#reg_password").val();
5
6
MC.User.register(email, password)
7
.done(function()
8
{
9
console.log('Registration is success!');
10
})
11
.fail(function(err)
12
{
13
console.log(err.text);
14
console.log('Registration failed!');
15
});
16
}
Copied!

ログイン と コレクションデータの取得

Loginボタンを押したときに、 onLoginBtn() を呼び出します。この関数では、 monaca.cloud.User.login() ( Monaca バックエンド API ) を使用して、既存ユーザーのログインを行います。Monaca バックエンド内にユーザーが存在する場合には、 getMemoList() 関数を使用して、そのユーザーに紐づけされているメモの一覧ページにリダイレクトします。 getMemoList() 関数内では、monaca.cloud.Collection().findMine() 関数を使用して、対象のユーザーのメモの一覧を取得します。この例では、Memo コレクションがすでに作成されていることを前提として、解説を進めます。メモは、動的に、一覧ページ中の TopListView に追加されます。この機能の JavaScript コードを次に記します。
1
function onLoginBtn()
2
{
3
var email = $("#login_email").val();
4
var password = $("#login_password").val();
5
6
MC.User.login(email, password)
7
.done(function()
8
{
9
console.log('Login is success!');
10
getMemoList();
11
$.mobile.change('#ListPage');
12
})
13
.fail(function(err)
14
{
15
console.log(err.message);
16
alert('Login failed!');
17
});
18
}
19
20
function getMemoList()
21
{
22
console.log('Refresh List');
23
var memo = MC.Collection("Memo");
24
memo.findMine()
25
.done(function(items, totalItems)
26
{
27
$("#ListPage #TopListView").empty();
28
var list = items.items;
29
30
for (var i in list)
31
{
32
var memo = list[i];
33
var d = new Date(memo._createdAt);
34
var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
35
$li = $("<li><a href='javascript:onShowLink(\"" + memo._id + "\",\"" + memo.title + "\",\"" + memo.content + "\")' class='show'><h3></h3><p></p></a><a href='javascript:onDeleteBtn(\"" + memo._id + "\")' class='delete'>Delete</a></li>");
36
$li.find("h3").text(date);
37
$li.find("p").text(memo.title);
38
$("#TopListView").prepend($li);
39
}
40
if (list.length == 0) {
41
$li = $("<li>No memo found</li>");
42
$("#TopListView").prepend($li);
43
}
44
$("#ListPage #TopListView").listview("refresh");
45
})
46
.fail(function(err){ alert('failed to find the collection' + err.text); return null; });
47
}
Copied!

ログアウト処理

monaca.cloud.User.logout() 関数を使用して、ユーザーのログアウトを行います。ユーザーが正常にログアウトできた場合、ログインページにリダイレクトされます。
1
function onLogoutBtn()
2
{
3
MC.User.logout()
4
.done(function()
5
{
6
console.log('Logout is success!');
7
$.mobile.changePage('#LoginPage');
8
})
9
.fail(function(err)
10
{
11
console.log(err.message);
12
alert('Logout failed!');
13
});
14
}
Copied!

メモの追加

追加ページ上で Save ボタンを押したときに、onSaveBtn() を呼び出します。次に、ページ上で入力された titlecontent の値を、 addMemo() 関数に渡します。
この関数では、 monaca.cloud.Collection().insert() ( Monaca バックエンド API ) を使用して、 Memo コレクションに、コレクションアイテムを挿入します。
1
function onSaveBtn()
2
{
3
var title = $("#title").val();
4
var content = $("#content").val();
5
if (title != '')
6
{
7
addMemo(title,content);
8
}
9
}
10
11
function addMemo(title,content) {
12
var memo = MC.Collection("Memo");
13
14
memo.insert({ title: title, content: content})
15
.done(function(insertedItem)
16
{
17
console.log('Insert is success!');
18
$("#title").val("");
19
$("#content").val("");
20
//display a dialog stating that the inserting is success
21
$( "#okDialog_add" ).popup("open", {positionTo: "origin"}).click(function(event)
22
{
23
event.stopPropagation();
24
event.preventDefault();
25
getMemoList();
26
$.mobile.changePage('#ListPage');
27
});
28
})
29
.fail(function(err){ console.log('Insert failed!');})
30
}
Copied!

メモの更新

monaca.cloud.Collection().findMine() 関数を使用して、更新対象のメモを見つけ、更新を行います。ここでは、コレクションアイテムの _id プロパティは既知のものとします。次に、 monaca.cloud.collectionItem.update() を呼び出して、 Memo コレクション中の対象アイテムを更新します。
1
function onEditBtn()
2
{
3
var title = $("#title_show").text();
4
var content = $("#content_show").text();
5
$("#title_edit").val(title);
6
$("#content_edit").text(content);
7
$.mobile.changePage("#EditPage");
8
}
9
10
function onUpdateBtn()
11
{
12
var new_title = $("#title_edit").val();
13
var new_content = $("#content_edit").val();
14
var id = currentMemoID;
15
if (new_title != '') {
16
editMemo(id, new_title, new_content);
17
}
18
}
19
20
function editMemo(id, new_title, new_content){
21
var memo = MC.Collection("Memo");
22
memo.findMine(MC.Criteria("_id==?", [id]))
23
.done(function(items, totalItems)
24
{
25
items.items[0].title = new_title;
26
items.items[0].content = new_content;
27
items.items[0].update()
28
.done(function(updatedItem)
29
{
30
console.log('Updating is success!');
31
//display a dialog stating that the updating is success
32
$( "#okDialog_edit" ).popup("open", {positionTo: "origin"}).click(function(event)
33
{
34
event.stopPropagation();
35
event.preventDefault();
36
getMemoList();
37
location.href='#ListPage';
38
});
39
})
40
.fail(function(err){ console.log(JSON.stringify(err)); return null; });
41
})
42
.fail(function(err){ console.log(JSON.stringify(err)); return null; });
43
}
Copied!

メモの削除

メモの更新と同じように、 monaca.cloud.Collection().findMine() 関数を使用して、コレクションアイテムを取得します。次に、 monaca.cloud.collectionItem.delete() 関数を使用して、メモを削除します。
1
function onDeleteBtn(id)
2
{
3
currentMemoID = id;
4
$( "#yesNoDialog_delete" ).popup("open", {positionTo: "origin"})
5
}
6
7
function deleteMemo()
8
{
9
var memo = MC.Collection("Memo");
10
memo.findMine(MC.Criteria("_id==?", [currentMemoID]))
11
.done(function(items, totalItems)
12
{
13
items.items[0].delete();
14
console.log('The memo is deleted!');
15
getMemoList();
16
$.mobile.changePage("#ListPage");
17
})
18
.fail(function(err){ console.log(JSON.stringify(err)); return null; });
19
}
Copied!
最終更新 2mo ago