Monacaを使って何かアプリを作ってみたいと思っても、いざとなるとアイデアが出てこないかもしれません。また、最初から大きなアプリを作ろうと思うと、何から手を付けて良いのか分からないことでしょう。

そこで、この記事では手順を踏んで簡単なアプリを開発してみます。最初の一歩として、ぜひチャレンジしてみてください。

今回はNCMB(ニフクラmobile backend)と組み合わせて、掲示板アプリを開発します。記事は全部で2回に分けており、後半となる今回はスレッドの作成と閲覧、コメントの投稿などを開発します。

※仕様と認証を説明した前半はこちらです。
掲示板アプリを作ってみよう【その1:画面の説明と認証まで】

※ サンプルアプリのソースコードは、こちらです。
https://github.com/monaca-samples/forum-app

スレッドの作成

前回は認証まで完了しましたので、今回はスレッド一覧画面 list.html を開発します。

まず画面初期化時にイベントリスナーを追加します。

次に画面が表示された際のイベント処理です。ここではスレッド一覧を読み込みます。

スレッド一覧の表示について

showThread の実装についてです。まずスレッドの一覧を読み込みます。

getThreadはNCMBのThreadクラスからデータを取得します。

そして取得したスレッドを ons-list の中に出力します。

ユーザに削除権限があるかどうか判定してHTMLを返す deletable は、スレッド詳細画面でも使えるので js/app.js に記述してあります。

HTMLを描画したら、イベントリスナーを追加します。

今回は以下のイベントを追加しています。

  • スレッドをタップしたらスレッド詳細画面に遷移する
  • 画像をNCMBから読み込んで表示する
  • 削除アイコンをタップしたらスレッドを削除する

画像を読み込む処理はスレッド詳細でも利用するので js/app.js に定義してあります。

ここまでで画面の初期表示が完了します。

イベント処理

スレッド一覧におけるイベント処理は次の通りです。

  • ツールバーにある + ボタンをタップ
  • スレッド追加ボタンを押した時のイベント
  • スレッドをタップした際のイベント
  • 削除アイコンをタップした際のイベント

ツールバーにある + ボタンをタップ

これはスレッド追加用のダイアログを表示するだけです。

スレッド追加ボタンを押した時のイベント

これは入力された内容を取得して、NCMBにスレッドを登録します。コードのコメントを参照してください。

注意点としては、ACL(アクセス権限)として、誰でも読み込み可能としています。そしてadminグループに所属するユーザ、またはユーザ自身は編集、削除権限を付与しています。ファイル file がある場合は、それをNCMBのファイルストアにアップロードしています。これは ncmb.File.upload の1行だけで完了します。このファイルについてもACLで制御されています。データを登録した後はダイアログを非表示にして、スレッド詳細画面 thread.html に遷移しています。

スレッドをタップした際のイベント

スレッドをタップした際には、スレッドを追加した時と同様にスレッド詳細画面 thread.html に遷移しています。

削除アイコンをタップした際のイベント

削除アイコンをタップした際にはスレッドの削除処理を実行しています。この時、クラウド側でACLをチェックしていますので、不正ユーザが削除を実行しようと思っても権限がなければ削除できません。

スレッド詳細画面について

ここまででスレッド一覧画面が完成です。続いてスレッド詳細画面の実装を解説します。

画面初期化時のイベント

画面初期化時には以下のイベントを設定しています。

  • コメントダイアログ表示ボタンを押した時
  • コメントするボタンを押した時
  • 画像ダイアログの閉じるボタンを押した時

画面表示時のイベント

画面表示時には、前の画面から受け取ったスレッド情報を表示します。また、画像があれば追加表示したり、既存のコメントを一覧表示します。

コメント一覧の表示について

showComments の実装についてです。まずコメントの一覧を読み込みます。

getCommentsはNCMBのCommentクラスからデータを取得します。

そして取得したコメントを ons-list の中に出力します。

ユーザに削除権限があるかどうか判定してHTMLを返す deletable はすでに紹介した通り js/app.js に定義してあります。HTMLを描画したら、イベントリスナーを追加します。

今回は以下のイベントを追加しています。

  • 画像をNCMBから読み込んで表示する
  • 削除アイコンをタップしたらコメントを削除する

画像を読み込む関数 loadImage はすでに紹介済みです。 js/app.js に定義してあります。ここまでで画面の初期表示が完了します。

イベント処理

スレッド詳細におけるイベント処理は次の通りです。

  • コメントダイアログ表示ボタンを押した時
  • コメントするボタンを押した時
  • 画像ダイアログを閉じる時
  • 削除アイコンをクリックした時

コメントダイアログ表示ボタンを押した時

この時にはコメント入力用のダイアログを表示するだけです。

コメントするボタンを押した時

この時にはNCMBにコメントを追加します。実装内容はスレッドの時とほとんど変わりません。該当するスレッドを登録して、関連づけるのを忘れないでください。

画像ダイアログを閉じる時

この時には画像ダイアログを非表示にするだけです。

削除アイコンをクリックした時

削除アイコンをタップした際には該当データをCommentクラスから削除します。こちらもスレッドと同様にACL管理されていますので、不正ユーザによるデータ操作は防げますので安心してください。

ここまででスレッド詳細画面が完成となります。

まとめ

これで掲示板アプリが完成です。今回は次のような画面を持ったアプリを開発しました。

  • スレッド一覧画面
  • スレッド詳細画面

また、ニフクラ mobile backendの次の機能を利用しました。

  • 会員管理
    • 匿名認証
    • ロール(グループ)管理
  • データストア
    • Threadクラス
      • データ登録
      • データ削除
      • データ検索
    • Commentクラス
      • データ登録
      • データ削除
      • データ検索
  • ファイルストア
    • 画像登録
    • 画像取得

今回のデータの保存と取得、認証といった機能はどのようなアプリでも使える機能だと思います。今後のアプリ開発に応用してください。