掲示板アプリを作ってみよう【その1：画面の説明と認証まで】

document.addEventListener('DOMContentLoaded', e => {
  const applicationKey = '3a51faa420703796afeb6cba762d237aaa3135e5a5234fdaf5595409bb338849';
  const clientKey = 'ac2c30ebdf22d5856f1225952f42dbc10fd8a32a82c999e3ea5f0e7f64d80398';
  window.ncmb = new NCMB(applicationKey, clientKey);
});

<ons-navigator id="nav" page="list.html"></ons-navigator>

<ons-page>
  <ons-toolbar>
    <div class="center">掲示板</div>
    <div class="right">
      <ons-toolbar-button>
        <ons-icon icon="md-plus" id="open"></ons-icon>
      </ons-toolbar-button>
    </div>
  </ons-toolbar>
  <ons-list>
    <ons-list-header>スレッド一覧</ons-list-header>
    <span id="threads"></span>
  </ons-list>
  <ons-dialog direction="up">
    <div style="text-align: center;">
      <p>
        <ons-input id="title" modifier="underbar" placeholder="スレッドのタイトル" float></ons-input>
      </p>
      <p>
        <textarea class="textarea" id="body" cols="20" rows="3" placeholder="スレッドの説明"></textarea>
      </p>
      <p>
        <input type="file" id="image" accept="image/*" />
      </p>
      <p style="margin-top: 30px;">
        <ons-button id="add">スレッドを立てる</ons-button>
      </p>
    </div>
  </ons-dialog>
</ons-page>

<ons-page>
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center thread-title"></div>
  </ons-toolbar>
  <ons-card>
    <img class="caption" src="http://placehold.jp/100x100.png"/>
    <p class="thread-body"></p>
  </ons-card>
  <ons-list id="comments">
  </ons-list>
  <ons-fab position="bottom right" id="comment-button">
    <ons-icon icon="md-comment"></ons-icon>
  </ons-fab>
  <ons-dialog class="comment" direction="up">
    <div style="text-align: center;">
      <form id="comment-form">
        <p>
          <textarea class="textarea" id="body" cols="20" rows="3" placeholder="コメント"></textarea>
        </p>
        <p>
          <input type="file" id="image" accept="image/*" />
        </p>
        <p style="margin-top: 30px;">
          <ons-button id="add">コメントする</ons-button>
        </p>
      </form>
    </div>
  </ons-dialog>
  <ons-dialog class="image" direction="up">
    <div style="text-align: center;">
      <ons-card>
        <img src="" class="square-image" />
      </ons-card>
      <p style="margin-top: 30px;">
        <ons-button id="close">閉じる</ons-button>
      </p>
    </div>
  </ons-dialog>
</ons-page>

ons.ready(async () => {
  // ログインユーザを取得
  let user = ncmb.User.getCurrentUser();
  // userがある = ログインしている
  if (user) {
    try {
      // 適当なクラス（名称は何でもOK）の
      // 取得を試みて、セッションの有効性をチェック
      await ncmb.DataStore('Test').fetch();
    } catch (e) {
      // 失敗した場合はユーザデータを消す
      user = null;
    }
  }
  // 改めてユーザデータがない場合は匿名認証を実行
  if (!user) {
    user = await ncmb.User.loginAsAnonymous();
  }
  // 管理者グループを取得
  const role = await ncmb.Role.equalTo('roleName', 'admin').fetch();
  // 管理者グループの所属ユーザを取得
  const users = await role.fetchUser();
  // 自分がいればadminフラグを立てる
  window.admin = users.map(u => u.objectId).indexOf(user.objectId) > -1;
});