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 の 内 ) は、バックエンド メモ帳アプリのログイン画面になります ( ユーザー登録が済んでいる場合 )。
<body>
<!-- Login Page -->
<div data-role="page" id="LoginPage">
<header data-role="header" data-position="fixed">
<h1>Monaca Memo</h1>
</header>
<section data-role="content">
<h1>Sign in</h1>
Email:
<input type="text" id="login_email">
Password:
<input type="password" id="login_password">
New to Monaca Memo?
<a href="#RegisterPage" data-role="button" data-mini="true" data-inline="true" data-theme="b">Register</a>
<a href="#" id="LoginBtn" data-role="button" data-inline="false" data-theme="b">Login</a>
</section>
</div>
...
</body>
次の記述 ( HTML の 内 ) は、バックエンド メモ帳アプリのユーザー登録画面になります。
...
<!-- Register Page -->
<div data-role="page" id="RegisterPage">
<header data-role="header" data-position="fixed">
<h1>Monaca Memo</h1>
</header>
<section data-role="content">
<h1>Sign up</h1>
Email:
<input type="text" id="reg_email">
Password:
<input type="password" id="reg_password">
<a href="#" id="RegisterBtn" data-role="button" data-inline="false" data-theme="b">Register</a>
</section>
</div>
...

JavaScript の解説

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

新規ユーザー登録

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

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

Loginボタンを押したときに、 onLoginBtn() を呼び出します。この関数では、 monaca.cloud.User.login() ( Monaca バックエンド API ) を使用して、既存ユーザーのログインを行います。Monaca バックエンド内にユーザーが存在する場合には、 getMemoList() 関数を使用して、そのユーザーに紐づけされているメモの一覧ページにリダイレクトします。 getMemoList() 関数内では、monaca.cloud.Collection().findMine() 関数を使用して、対象のユーザーのメモの一覧を取得します。この例では、Memo コレクションがすでに作成されていることを前提として、解説を進めます。メモは、動的に、一覧ページ中の TopListView に追加されます。この機能の JavaScript コードを次に記します。
function onLoginBtn()
{
var email = $("#login_email").val();
var password = $("#login_password").val();
MC.User.login(email, password)
.done(function()
{
console.log('Login is success!');
getMemoList();
$.mobile.change('#ListPage');
})
.fail(function(err)
{
console.log(err.message);
alert('Login failed!');
});
}
function getMemoList()
{
console.log('Refresh List');
var memo = MC.Collection("Memo");
memo.findMine()
.done(function(items, totalItems)
{
$("#ListPage #TopListView").empty();
var list = items.items;
for (var i in list)
{
var memo = list[i];
var d = new Date(memo._createdAt);
var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
$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>");
$li.find("h3").text(date);
$li.find("p").text(memo.title);
$("#TopListView").prepend($li);
}
if (list.length == 0) {
$li = $("<li>No memo found</li>");
$("#TopListView").prepend($li);
}
$("#ListPage #TopListView").listview("refresh");
})
.fail(function(err){ alert('failed to find the collection' + err.text); return null; });
}

ログアウト処理

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

メモの追加

追加ページ上で Save ボタンを押したときに、onSaveBtn() を呼び出します。次に、ページ上で入力された titlecontent の値を、 addMemo() 関数に渡します。
この関数では、 monaca.cloud.Collection().insert() ( Monaca バックエンド API ) を使用して、 Memo コレクションに、コレクションアイテムを挿入します。
function onSaveBtn()
{
var title = $("#title").val();
var content = $("#content").val();
if (title != '')
{
addMemo(title,content);
}
}
function addMemo(title,content) {
var memo = MC.Collection("Memo");
memo.insert({ title: title, content: content})
.done(function(insertedItem)
{
console.log('Insert is success!');
$("#title").val("");
$("#content").val("");
//display a dialog stating that the inserting is success
$( "#okDialog_add" ).popup("open", {positionTo: "origin"}).click(function(event)
{
event.stopPropagation();
event.preventDefault();
getMemoList();
$.mobile.changePage('#ListPage');
});
})
.fail(function(err){ console.log('Insert failed!');})
}

メモの更新

monaca.cloud.Collection().findMine() 関数を使用して、更新対象のメモを見つけ、更新を行います。ここでは、コレクションアイテムの _id プロパティは既知のものとします。次に、 monaca.cloud.collectionItem.update() を呼び出して、 Memo コレクション中の対象アイテムを更新します。
function onEditBtn()
{
var title = $("#title_show").text();
var content = $("#content_show").text();
$("#title_edit").val(title);
$("#content_edit").text(content);
$.mobile.changePage("#EditPage");
}
function onUpdateBtn()
{
var new_title = $("#title_edit").val();
var new_content = $("#content_edit").val();
var id = currentMemoID;
if (new_title != '') {
editMemo(id, new_title, new_content);
}
}
function editMemo(id, new_title, new_content){
var memo = MC.Collection("Memo");
memo.findMine(MC.Criteria("_id==?", [id]))
.done(function(items, totalItems)
{
items.items[0].title = new_title;
items.items[0].content = new_content;
items.items[0].update()
.done(function(updatedItem)
{
console.log('Updating is success!');
//display a dialog stating that the updating is success
$( "#okDialog_edit" ).popup("open", {positionTo: "origin"}).click(function(event)
{
event.stopPropagation();
event.preventDefault();
getMemoList();
location.href='#ListPage';
});
})
.fail(function(err){ console.log(JSON.stringify(err)); return null; });
})
.fail(function(err){ console.log(JSON.stringify(err)); return null; });
}

メモの削除

メモの更新と同じように、 monaca.cloud.Collection().findMine() 関数を使用して、コレクションアイテムを取得します。次に、 monaca.cloud.collectionItem.delete() 関数を使用して、メモを削除します。
function onDeleteBtn(id)
{
currentMemoID = id;
$( "#yesNoDialog_delete" ).popup("open", {positionTo: "origin"})
}
function deleteMemo()
{
var memo = MC.Collection("Memo");
memo.findMine(MC.Criteria("_id==?", [currentMemoID]))
.done(function(items, totalItems)
{
items.items[0].delete();
console.log('The memo is deleted!');
getMemoList();
$.mobile.changePage("#ListPage");
})
.fail(function(err){ console.log(JSON.stringify(err)); return null; });
}