kintoneのmobile.app.~~~ を解決せよ

kintoneには、JavaScriptファイルを読み込んでカスタマイズできる機能があり、「PC用のJavaScriptファイル」、「スマートフォン用のJavaScriptファイル」 をそれぞれ取り込むことができるが、

![スクリーンショット 2021-12-10 20.13.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100494/8670914b-fdbd-f1aa-4f4c-9bcacb46fb7f.png)


**アプリ内のカスタマイズすべき設計仕様は、PCもスマートフォンもほぼ同じなので、ソースコードを一つ**にしたい。
※ファイルはそれぞれ2箇所読み込まなくてはいけないのは致し方ないが。


## うまく分岐してソースコードも一つに

:::note info
mobile.app ~~~ か そうでないかの判定、たったそれだけ
:::

[レコードの詳細画面を表示した後のイベント] (https://developer.cybozu.io/hc/ja/articles/201941984#step1)を例にすると、返ってくる ```event.type``` は次の2種類になる。

```javascript
app.record.create.show
mobile.app.record.create.show
```

なので、うまく判定してあげれば良い。


```javascript
event.type.indexOf('mobile.app') >= 0
```

## その他のイベントも console.logに書いちゃえ

[早見表](https://developer.cybozu.io/hc/ja/articles/202738940) を参考に色んなイベントを発火させ、```console.log``` へ。

```javascript
(function() {

  'use strict';
  
  // ---------------------------------------------------------------------------
  // レコード操作のイベント
  // ---------------------------------------------------------------------------
  const ev = [
    'app.record.index.show',
    'mobile.app.record.index.show',
    'app.record.detail.show',
    'mobile.app.record.detail.show',
    'app.record.index.edit.show',
    'app.record.create.show',
    'mobile.app.record.create.show',
    'app.record.edit.show',
    'mobile.app.record.edit.show',
    'app.record.print.show',
    'app.record.detail.delete.submit',
    'mobile.app.record.detail.delete.submit',
    'app.record.create.submit',
    'mobile.app.record.create.submit',
    'app.record.create.submit.success',
    'mobile.app.record.create.submit.success',
    'app.record.edit.submit',
    'mobile.app.record.edit.submit',
    'app.record.edit.submit.success',
    'mobile.app.record.edit.submit.success',
    'app.report.show',
    'mobile.app.report.show',
    'portal.show',
    'mobile.portal.show',
    'space.portal.show',
    'mobile.space.portal.show'
  ];
  kintone.events.on(ev, function(event) {

    if (checkEventType(event.type, 'mobile.app')){
      console.log('モバイルからだよーー');
    }
    if (checkEventType(event.type, 'record.index')){
      console.log('レコード一覧だよーー');
    }
    if (checkEventType(event.type, 'record.detail')){
      console.log('レコード詳細だよーー');
    }
    if (checkEventType(event.type, 'record.create')){
      console.log('レコード作成だよーー');
    }
    if (checkEventType(event.type, 'record.edit')){
      console.log('レコード編集だよーー');
    }
    if (checkEventType(event.type, 'print.show')){
      console.log('印刷表示画面からだよーー');
    }
    if (checkEventType(event.type, 'report.show')){
      console.log('グラフ表示画面からだよーー');
    }
    if (checkEventType(event.type, 'portal.show')){
      console.log('ポータル画面からだよーー');
    }
    if (checkEventType(event.type, 'space.show')){
      console.log('スペース画面からだよーー');
    }
    if (checkEventType(event.type, '.submit')){
      console.log('Submitしたよーー');
    }
    if (checkEventType(event.type, '.success')){
      console.log('サクセスしたよーー');
    }
    
    console.log(getAppInfo(event.type));
  });

  // ---------------------------------------------------------------------------  
  // イベントタイプに含まれる文字列から判定する
  // ---------------------------------------------------------------------------  
  const checkEventType = (type, key) => {
    return type.indexOf(key) >= 0;
  };

  // ---------------------------------------------------------------------------  
  // PCかスマートフォンかによってデータ取得を切り分ける
  // ---------------------------------------------------------------------------  
  const getAppInfo = (type) => {
    
    let data = {};

    if (checkEventType(type, 'mobile.app')){
      data.appId = kintone.mobile.app.getId();
      data.recId = kintone.mobile.app.record.getId();

    } else {
      data.appId = kintone.app.getId();
      data.recId = kintone.app.record.getId();
    }
    return data;
  };

})();

```

これで、ソースコードを一つにできそうだ。