Monacaとニフクラ mobile backendを使って勤怠管理アプリを作ろう【ハンズオンスライド】

# ベースアプリについて

---

ハンズオンのベースアプリはMonacaプロジェクトのインポートより取得できます。

[出退勤アプリ](https://monaca.mobi/ja/directimport?pid=60055980e7888528044e803a)

---

# 1. 認証機能を実装する

---

### index.html について

index.htmlは一番初めに読み込まれるHTMLファイルです。ここではOnsen UIのタブバーを読み込んでいます。初期設定は `active` 要素で指定されている通り、home.htmlを表示します。

---

```html
<ons-toolbar>
  <div class="center">出退勤管理</div>
</ons-toolbar>
<ons-page>
  <ons-tabbar swipeable position="auto" id="tabbar">
    <ons-tab page="home.html" label="出退勤" icon="home, material:md-home" active>
    </ons-tab>
    <ons-tab page="history.html" label="履歴" icon="history">
    </ons-tab>
    <ons-tab page="config.html" label="設定" icon="md-settings">
    </ons-tab>
  </ons-tabbar>
</ons-page>  
```

---

### home.html

では最初に読み込まれるhome.htmlについてです。HTMLは出退勤時に押すボタンを表示しているのと、ほかに出勤ボタンを押した同僚の人たちを表示します。

---

```html
<div style="text-align: center; padding-top: 3em">
  <p>
    <!-- 現在時刻を表示します -->
    <strong>現在時刻：<span id="time"></span></strong>
  </p>
  <p>
    <!-- あなたの名前が出ます -->
    <strong><span id="name"></span>さん（ログイン中）</strong>
  </p>
  <!-- 出退勤時に押すボタンです -->
  <ons-button id="record">出勤を記録する</ons-button>
  <p>
    <ons-list>
      <ons-list-header>出勤中のみなさん</ons-list-header>
      <!-- 出勤中の人たちを表示 -->
      <span id="workers">
      </span>
    </ons-list>
  </p>
</div>
```

---

### history.html

自分の出退勤履歴を表示する画面です。こちらもJavaScriptは実装時に説明します。

---

```html
<p style="padding-top: 5em">
  <ons-list>
    <ons-list-header>履歴（勤務時間）</ons-list-header>
    <span id="records"></span>
  </ons-list>
</p>
```

---

### config.html

名前を設定する画面です。

---

```html
<div style="text-align: center; margin-top: 5em;">
  <strong>名前を入力してください</strong>
  <p>
    <ons-input id="name" modifier="underbar" placeholder="出勤花子" required float></ons-input>
  </p>
  <p>
    <ons-button id="save">確定</ons-button>
  </p>
</div>
```

---

## mBaaSの設定について

ニフクラ mobile backendの設定について解説します。まずアカウントはすでに持っているという前提で進めていきます。その際、アプリケーションキーとクライアントキーが取得できるはずです。そのキーを `js/app.js` に書き込みます。

---

```javascript
// ↓ アプリケーションキーとクライアントキーをそれぞれ書き換えてください
const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
window.ncmb = new NCMB(applicationKey, clientKey);
```

---

### 匿名認証の設定

今回はIDやパスワードを使わない、匿名認証を利用します。管理画面の `アプリ設定 > 基本` の中にある匿名設定を有効にして保存します。

---

### 管理アカウントの作成

データへのアクセス制限を設けるため、管理者アカウントを作成します。会員管理へ移動して、ロールの作成を選びます。新しいロールとして `admin` を作成します。adminというロールが作成されたら、新しい会員を作成します。ID/パスワードが自由に決めてください。

---

## 認証状態の判定

最初に表示されるのは home.html なので、ここで認証判定を行うのがよさそうです。この判定はログアウト処理や履歴管理表示した後も実行したいので、 `ons.getScriptPage().onShow` に実装するのがよいでしょう。この関数は画面が表示される度に呼び出されます。

---


最初、次のようになっているはずです。この `1. ログインしていなければ、名前を登録する画面に遷移します` の下に処理を書いていきます。

---

```javascript
// この画面が表示される度に実行されます
ons.getScriptPage().onShow = async function(e) {
  const page = this;
  // 1. ログインしていなければ、名前を登録する画面に遷移します
  // 現在時刻を表示する処理
  callTimer(page);
  // 出退勤ボタンのラベル変更
  changeStatus(page);
  // 他の働いている人たちの一覧表示
  showWorkerList(page);
}
```

---

### ログイン状態を判別する

ログイン状態の判別は、NCMBの会員管理機能を使って `ncmb.User.getCurrentUser()` を取得して行います。これが空の場合、認証されていません。認証されていない場合は `config.html` に遷移します。 `setActiveTab(2)` はOnsen UIのタブバーの指定です（一番左が0で次が1になります）。

---

ログインしている場合は、名前を `#name` に表示します。名前は `user.get('name')` で取得できます。なお、nameは今回指定している名称で、皆さんが自由に決められます。
以下のコードを `1. ログインしていなければ、名前を登録する画面に遷移します` の下に記述してください。

---

```javascript
// ログインユーザを取得します
const user = ncmb.User.getCurrentUser();
if (!user) {
  // ログインしていないので config.html に遷移する
  document.querySelector('#tabbar').setActiveTab(2);
  return;
}
page.querySelector('#name').innerHTML = user.get('name');
```

---

### ログインする

次に config.html の実装に移ります。ここでは名前を決めてもらい、それを匿名認証した後のユーザー名として使います。

---

確定ボタンを押した際のイベントは `ons.getScriptPage().onInit` に実装するのが基本です（onShowに実装するとイベントが何度も呼ばれるようになってしまいます）。

---

現在は以下のようになっています。ここは修正を加える必要はありません。

```javascript
// この画面が表示された時、一度だけ呼ばれるイベント
ons.getScriptPage().onInit = function() {
  // すでにログインしている場合には名前を表示する
  show.bind(this)();
  // 確定ボタンを押した際の処理
  this.querySelector('#save').onclick = saveUser.bind(this);
}
```

---

`show` 関数は次のようになっています。ここも修正を加える必要はありません。

```javascript
function show() {
  const user = ncmb.User.getCurrentUser()
  if (user) {
    this.querySelector('#name').value = user.get('name');
  }
}
```

---


### 確定ボタンを押した際の処理

確定ボタンを押した時のイベントは `saveUser` になります。コードは次のようになります。大事なのは入力された名前（name）を `createUser` に送っていることです。その結果が正常に終了したら、タブを一番初めの home.html に戻します。

---

```javascript
// 確定ボタンを押した時の処理
async function saveUser(e) {
  try {
    e.preventDefault();
    const name = this.querySelector('#name').value;
    if (name && name.trim() === '') {
      ons.notification.alert('名前を入力してください');
      return;
    }
    await createUser(name);
    document.querySelector('#tabbar').setActiveTab(0);
  } catch (e) {
    console.log(e);
  }
}
```

---

`createUser` の処理は次のようになります。 `ncmb.User.loginAsAnonymous()` は匿名認証を行う処理です。この一行だけで匿名認証が完了します。

---

```javascript
async function createUser(name) {
  // 匿名認証実行
  await ncmb.User.loginAsAnonymous();
  // ログインしているユーザ情報を取得
  const user = ncmb.User.getCurrentUser();
  // ACLを設定
  const acl = new ncmb.Acl;
  acl
    .setPublicReadAccess(true) // 全体読み込み可能
    .setUserWriteAccess(user, true); // ユーザ自身は書き込み可能
  // 更新
  await user
    .set('name', name)     // 入力された名前
    .set('working', false) // 勤務中のフラグ。デフォルトはfalse
    .set('acl', acl)       // ACL
    .update();             // 更新処理
}
```

---

匿名認証が完了すれば、 `ncmb.User.getCurrentUser()` でユーザー情報が取得できます。このユーザーはデフォルトで次のようなACLになっています。

- ユーザー自身のみ読み書き可能

---

これでは、ほかの従業員から名前を見ることができませんので、ACLを次のように更新します。

- 全体から読み込み可能（ユーザー自身含む）
- ユーザー自身は書き込み可能

そして入力された名前を `name` として、さらに勤務中かどうかのフラグ `working` をデフォルト falseとして適用し、保存します。

---

## データの保存と表示処理の実装について

---

## home.htmlでの処理について

前回までで認証処理が終わって、home.htmlに戻ってくるところまで完了しました。今回は出勤（または退勤）ボタンを押して、それをログとしてmBaaSに記録する流れを作ります。

---

まず、home.htmlを初期化する処理を作成します。これはすでに記述してありますが、出退勤ボタンを押した際のイベントを設定しています。

---

```javascript
// 初期化時（一回だけ）実行されます
ons.getScriptPage().onInit = async function(e) {
  // 出退勤ボタンを押した際のイベント処理です
  this.querySelector('#record').onclick = record.bind(this);
}
```

---

こちらもすでに記述されていますが、home.htmlを表示した際に毎回実行される処理です。

```javascript
// この画面が表示される度に実行されます
ons.getScriptPage().onShow = async function(e) {
  const page = this;
  // 1. ログインしていなければ、名前を登録する画面に遷移します
  // ログインユーザを取得します（第1回目に記述した内容）
  const user = ncmb.User.getCurrentUser();
  if (!user) {
    // ログインしていないので config.html に遷移する
    document.querySelector('#tabbar').setActiveTab(2);
    return;
  }
  page.querySelector('#name').innerHTML = user.get('name');

  // 現在時刻を表示する処理
  callTimer(page);
  // 出退勤ボタンのラベル変更
  changeStatus(page);
  // 他の働いている人たちの一覧表示
  showWorkerList(page);
}

// タイマーで時間を更新します
function callTimer(page) {
  setInterval(() => {
    const d = new Date;
    page.querySelector('#time').innerHTML = d.toLocaleString();
  }, 1000);
}
```

---

この処理の中で行われている `changeStatus` 、 `showWorkerList` について後ほど確認します（`callTimer` は上記に記載済みです）。

---

## 出退勤ボタンを押した際のイベントを作成する

まず出退勤ボタンを押した際のイベント、recordについて記述します。7と8番の関数については前述の初期状態での処理と同じものです。

---

```javascript
async function record(e) {
  try {
    e.preventDefault();

    // 1. 変数を準備する

    // 2. ACLを準備する

    // 3. データストアのデータを準備する
    
    // 4. 退勤の場合は勤務時間を記録する

    // 5. 保存する

    // 6. 出退勤状態を逆転する

    // 7. ステータスを変更する
    changeStatus(this);
    // 8. 勤務中の人リストを更新する
    showWorkerList(this);
  } catch (e) {
    console.log(e);
  }
}
```

---

### 1. 変数を準備する

---

必要な変数は次の通りです。

- 現在時刻
- ログインユーザ
- 勤務中かどうかのフラグ

---

これらを次のように準備します。

```javascript
// 現在時刻
const time = new Date;
// ログインユーザ
const user = ncmb.User.getCurrentUser();
// 勤務中かどうかのフラグ
const working = user.get('working');
```

---

### 2. ACLを準備する

---

ログインユーザの時と同じく、保存データに対するACLも設定します。今回は、ユーザ自身にも書き込み権限を付与しつつ、管理者ロール（グループ）からも読み書き可能とします。adminロールは管理画面で作成したものです。

---

```javascript
const acl = new ncmb.Acl;
acl
  .setUserReadAccess(user, true)
  .setUserWriteAccess(user, true)
  .setRoleReadAccess('admin', true)
  .setRoleWriteAccess('admin', true);
```

---

### 3. データストアのデータを準備する

---

データストアは `ncmb.DataStore('クラス名')` で指定します。クラス名、は好きな名前を指定できます。データストアを `new` とすることで、インスタンス（データストアの行相当）が生成されます。

---

データストアのインスタンスについては `set('カラム名', '値')` の形式で自由にデータを設定できます。userはユーザオブジェクト、timeは時間、workingは真偽値になります。

---

```javascript
const Record = ncmb.DataStore('Record');
const record = new Record;
record
  .set('user', user)
  .set('acl', acl)
  .set('time', time)
  .set('working', !working);
```
---

### 4. 退勤の場合は勤務時間を記録する

---

退勤する場合、勤務時間を記録しておきます。処理は下記のコードを参考にしてください。rangeはミリ秒単位の数字になります。出勤時には逆に現在時刻をユーザのデータとして入れておきます。

---

```javascript
if (working) {
  // 働いていたら、勤務時間を記録する
  const range = time.getTime() - new Date(user.get('workingStartTime')).getTime();
  record
    .set('workingTime', range);
} else {
  // 仕事の開始時間を記録しておく
  user.set('workingStartTime', time);
}
```

---

### 5. 保存する

---

保存処理は `save` メソッドです。新規保存時は `save` 、更新時は `update` になります。これでデータストアにデータが送信されます。

```javascript
await record.save();
```

---

### 6. 出退勤状態を逆転する

---

ユーザ自身は現在のステータスを出勤、退勤を逆転させます。こちらはすでにデータがありますので、`update` メソッドで更新します。

```javascript
await user.set('working', !working).update();
```

---

### 7. ステータスを変更する

---

ステータスを更新する `changeStatus` 関数は初期表示の際にも行っています。ここでまとめて解説します。この処理はユーザの勤務状態を取得し、それを画面に反映しています。勤務状態は `user.get('working')` で取得できます。

---

changeStatus関数を下記のように変更してください。

```javascript
function changeStatus(page) {
  // ログインユーザを取得し、その出退勤状態を判別します
  const user = ncmb.User.getCurrentUser();
  const working = user.get('working');
  page.querySelector('#record').innerHTML = `${working ? '退勤' : '出勤'}を記録する`;
}
```

---

### 8. 勤務中の人リストを更新する

---

勤務しているほかの人たちを取得する `showWorkerList` 関数についてです。これはユーザデータを検索するのですが、 `ncmb.User` の後に条件を追加して検索できます。

---

今回はイコール（=）条件である `equalTo` メソッドを使って、勤務中のフラグが立っている人たちを検索しています。その結果は `#workers` の中にOnsen UIのリストとして書き出しています。`showWorkerList` 関数を次のように書き直してください。

---

```javascript
// 他の働いている人たちの一覧表示を行う関数
async function showWorkerList(page) {
  // ユーザデータを検索
  const workers = await ncmb.User
    .equalTo('working', true) // 勤務中フラグが立っている人のみ
    .limit(1000) // 最大1,000件としています
    .fetchAll();
  // 取得された結果を #workers に反映
  page.querySelector('#workers').innerHTML = workers
    .map(w => `<ons-list-item>${w.get('name')}さん</ons-list-item>`)
    .join('');
}
```

---

### record関数について

---

record関数の内容は次のようになります。参考にしてください。

```javascript
async function record(e) {
  try {
    e.preventDefault();

    // 1. 変数を準備する
    const time = new Date;
    const user = ncmb.User.getCurrentUser();
    const working = user.get('working');

    // 2. ACLを準備する
    const acl = new ncmb.Acl;
    acl
      .setUserReadAccess(user, true)
      .setUserWriteAccess(user, true)
      .setRoleReadAccess('admin', true)
      .setRoleWriteAccess('admin', true);
    
    // 3. データストアのデータを準備する
    const Record = ncmb.DataStore('Record');
    const record = new Record;
    record
      .set('user', user)
      .set('acl', acl)
      .set('time', time)
      .set('working', !working);
    
    // 4. 退勤の場合は勤務時間を記録する
    if (working) {
      // 働いていたら、勤務時間を記録する
      const range = time.getTime() - new Date(user.get('workingStartTime')).getTime();
      record
        .set('workingTime', range);
    } else {
      // 仕事の開始時間を記録しておく
      user.set('workingStartTime', time);
    }

    // 5. 保存する
    await record.save();
    // 6. 出退勤状態を逆転する
    await user.set('working', !working).update();
    // 7. ステータスを変更する
    changeStatus(page);
    // 8. 勤務中の人リストを更新する
    showWorkerList(page);
  } catch (e) {
    console.log(e);
  }
}
```

---

## 履歴の表示

---

ではhistory.htmlに移動します。この画面では Record クラスに保存されているデータを取得して、画面に表示します。ここでは、画面を表示した際に使うのがよさそうなので、 onShow イベントを使います。

---

最初、次のように書かれているはずです。 `#records` に書き出す部分はOnsen UIの処理なので、コードを参照してください。

---

```javascript
ons.getScriptPage().onShow = async function(e) {
  // Recordクラスを検索


  // データを #records に書き出し
  // toTime関数は時間をフォーマットして書き出しているだけです。下記参照
  this.querySelector('#records').innerHTML = records
    .map(r => `<ons-list-item>
      <span class="list-item__title">
        ${toTime(r.get('workingTime'))}
      </span>
      <span class="list-item__subtitle">
        ${new Date(r.get('time').iso).toLocaleString()}より
      </span>
    </ons-list-item>`)
    .join('');
}
```

---

### Recordクラスを検索

---

Recordクラスの検索は次のように書きます。ここで知って欲しいのは、誰のデータが欲しいのか指定していないことです。この状態で検索したとしても、自分のデータしか返ってきません。mBaaSのACL（アクセス制限）によって、誰が読み込みできるのか指定しています。

---

Recordクラスへの保存時に、自分とadminロールを持ったユーザーしか読み書きできないように指定したのを覚えているでしょうか。その結果、ほかのユーザーからは読み込みできないデータになっていますので、誰のデータという指定をしなくても問題なく運用できます。

---

下記処理を書き加えてください。勤務時間の履歴として表示されるはずです。

```javascript
// Recordクラスを検索
const records = await ncmb.DataStore('Record')
  .limit(100)                  // 最大100件
  .order('createDate', true)   // 新しいものを上に
  .equalTo('working', false)   // 勤務中フラグが立っていないものを対象
  .exists('workingTime')       // workingTimeが入力されているもの
  .fetchAll();                 // 全データを取得
```

---


## バックアップの目的

---

業務システムではデータを締めて更新できないようにするということがよく行われます。経理や人事などバックオフィス系でよく行われる処理です。これによって過去データが改ざんできないようにしたり、保全が可能になります。

---

今回はそこまで厳しくありませんが、勤務データをデータストアからファイルストアへ移しておくことで、いつでも参照できるデータとして役立てられるようになるでしょう。

---

## スクリプト機能を利用する

---

データストアからファイルストアへデータをコピーする処理を、mBaaSのスクリプト処理で実現します。mBaaSにはタイマー機能はありませんが、Google Apps Scriptや社内のサーバなどから定期的に呼び出せば、自動的にバックアップが作成される仕組みです。

---

まず `csv.js` というファイルを作成します。初期の内容は次のスライドのようにします。これはスクリプト機能の基本形になります。

---

```js
const NCMB = require('ncmb');

module.exports = async function(req, res) {
  try {
    // 1. mBaaSの初期化処理

     // 2. 管理者ユーザーでログイン

    // 3. 変数の準備
    // 処理対象の日付
    const d = req.query.date ? new Date(req.query.date) : new Date;
    // 処理対象の日付の00:00を取得
    const startDate = new Date(`${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()} 00:00:00 UTC+0900`);
    // 処理対象の日付の次の日（00:00）を取得
    const endDate = new Date(`${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate() + 1} 00:00:00 UTC+0900`);
    // 保存するファイル名を、日付を元に設定
    const fileName = `working-${startDate.getFullYear()}-${startDate.getMonth() + 1}-${startDate.getDate()}.csv`;
    d.setDate(d.getDate() + 1);

    // 4. データストアの検索

    // 5. CSV化

    // 6. ファイルストアへの保存

    // 7. 処理完了
    res.send('Uploaded');
  } catch (err) {
    // エラー
    res.send(JSON.stringify(err));
  }
}
```

---

### 1. mBaaSの初期化処理

---

Monacaアプリと同じように、まず最初にmBaaSを初期化します。アプリケーションキーとクライアントキーを書き換えてください。

```js
const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
const ncmb = new NCMB(applicationKey, clientKey);
```

---

### 2. 管理者ユーザーでログイン

---

管理ユーザは第1回目の記事で作成してもらったユーザになります。ユーザ名とパスワードをそれぞれ書き換えてください。

```js
await ncmb.User.login('ADMIN_USER_NAME', 'ADMIN_PASSWORD');
```

---

### 3. 変数の準備

---

今回必要な変数は次の4つになります。それぞれ日付（d）を基本としています。dはクエリパラメータのdateで変更できます（デフォルトは今日の日付です）。こちらは記述済みです。

---

```js
- d  
処理対象の日付
- startDate  
処理対象の日付の00:00
- endDate  
処理対象の日付の次の日（00:00）
- fileName  
保存するファイル名。日付を元に設定
```

---

### 4. データストアの検索

---

データストアのクラス、Recordを検索します。 `include` を使うと、別なデータストアのクラスデータ（ポインタ）を一緒に取得できます。そして対象データを createDate の処理対象日以上と、処理対象日の次の日未満の2つで絞り込みます。

---

```js
const ary = await ncmb.DataStore('Record')
  // ユーザデータも一緒に取得します
  .include('user')
  // 勤務時間が入っているものだけ
  .equalTo('working', false)
  // 処理対象日時（00:00）以上
  .greaterThanOrEqualTo('createDate', startDate)
  // 処理対象日時の次の日（00:00）未満
  .lessThan('createDate', endDate)
  // 最大1000件（mBaaSの最大取得件数）
  .limit(1000)
  .fetchAll();
```

---

### 5. CSV化

---

取得したデータをCSV化します。そのために、必要なデータを配列に入れていきます。mBaaSではデータの取得は `get` メソッドを使います。また、日付は直接日付データが入っていません。 `{"_type": "Date", "iso": (日付)}` という形になっていますので注意してください。

---

```js
const csv = [];
const columns = ['objectId', 'time', 'name', 'startAt', 'endAt'];
csv.push(columns.map(c => `"${c}"`).join("\t"));
for (let row of ary) {
  const params = [
    row.get('objectId'),
    row.get('time').iso,
    Object.keys(row.get('user')).length > 0 ? row.get('user').name.replace(/"/g, '""') : '',
    new Date(row.get('time').iso).toLocaleString(),
    new Date(new Date(row.get('time').iso).getTime() + row.get('workingTime')).toLocaleString()
  ];
  csv.push('"' + params.join("\"\t\"") + '"');
}
```

---

### 6. ファイルストアへの保存

---

CSVのデータができあがったら、ファイルストアに書き込みます。Bufferを使って文字列をBufferにしたら、それをファイル名とともに `File.upload` メソッドに適用します。これでファイルストアへのアップロード処理が完了です。

---

```js
// 6. ファイルストアへの保存
const buf = Buffer.from(csv.join("\r\n"), 'UTF-8');
await ncmb.File.upload(fileName, buf);
```

---

完成版はMonacaプロジェクトの直下に `csv.js` として保存してあります。

---

## スクリプトをアップロードする

---

csv.js ができあがったら、ファイルを管理画面からアップロードしましょう。今回は次のように指定してください。

- メソッド  
GET
- ファイルの状態  
実行可能

---

ほかは元のままで大丈夫です。そしてアップロードするボタンを押します。しばらく（1分程度）待つと、実行可能になります。

---

## テストで実行する

---

では管理画面で実行してみます。スクリプトの一覧からcsv.jsを選んでください。

実行タブを選択して、Queryを `date=2020-09-10` とします。日付は今日の日付にしてください。

---

実行ボタンを押すと確認が出ますので、実行するボタンを押します。

処理がうまくいけば、ファイルストアに `working-2020-09-10.csv` といったCSVファイルが保存されているはずです。

---

## 定期実行について

もし自社内にサーバがあれば、次のようなコードでスクリプトを実行できます。これは Node.js で書いていますので、サーバ上にNode.jsやNCMBのJavaScript SDKが必要です。今回のハンズオンでは対象外としています。

---

```js
const NCMB = require('ncmb');

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
const ncmb = new NCMB(applicationKey, clientKey);

(async () => {
  const res = await ncmb.Script
    .query({date: '2020-09-10'}) // 日付は適当なものを指定してください
    .exec('GET', 'csv.js');
  console.log(res.body);
  // 処理がうまくいけば uploaded と出力されます
})();
```

---


定期実行については Google Apps Scriptのタイマートリガーと、Google Apps Script用のSDKを組み合わせても実現できます。

[Google Apps Scriptのトリガーを使ってスクリプトを自動テストする](https://blog.mbaas.nifcloud.com/entry/2020/05/14/115553)

---

## まとめ

---

今回のハンズオンでは次の4つの機能を利用しました。

1. 会員管理（匿名認証）
2. データストア（データの保存、検索）
3. ファイルストア（アップロード）
4. スクリプト