メモ帳アプリ

検索…
メモ帳アプリ
Monaca バックエンド API を使用するメモ帳アプリを作成します。
デモ
​​
プロジェクトをインポート​
テスト環境
Android 9.0
iOS 12.2
事前準備
バックエンドを新規にセットアップして、プロジェクトに紐付けする必要があります。新規プロジェクトの作成後、 パート 3 : Monaca バックエンドのセットアップ 記載の内容に従い、バックエンドとプロジェクトの紐付け処理を行います。
バックエンドを作成した後、次のように、Memo コレクションを作成します。
JavaScript からのアイテム追加を許可する にチェックを入れます。Read と Write オプションは必要ありません。バックエンドの作成方法の詳細は、バックエンド管理パネル をご確認ください。
ファイル構成
ファイル
説明
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 には、他にも、header、content、listview などの値を指定できます。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() 関数の引数として、入力された email と password が使われます。この関数を使用して、 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() を呼び出します。次に、ページ上で入力された title と content の値を、 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!