利用しているデバイスの判定

kintone では PC 用、スマートフォン用それぞれに JavaScript ファイルを設定でき、デバイスごとに処理を分けられます。ただ、ファイルを分けるとメンテナンスの手間が増えるため、できれば同じファイルを共有したいところです。

しかし、kintone は URL も発生イベント名も PC 版とモバイル版で異なり（例: app.record.edit.show と mobile.app.record.edit.show）、全く同じコードをそのまま使うことはできません。

この記事では、1 つの JavaScript ファイルを PC・モバイルで共有するための、実行環境（モバイル版かどうか）の判定方法を紹介します。

モバイルを判定する関数

以下のコードで判定が可能です。

/**
 * kintone javascript APIから実行環境を取得し、モバイル端末である場合はTrueを返却します
 *
 * 引数としてイベントタイプを設定することで、より安全なチェックを行います
 *
 * 判定の以下の優先順にしたがって実行されます
 *
 * 1. イベントタイプに指定がある場合はタイプ名から判定
 * 2. kintone javascript APIから、アプリIDを取得して判定
 *
 * @param { string } eventType イベントタイプ
 * @returns { boolean } 実行環境がモバイル端末である場合はtrue
 */
const isMobile = (eventType) => {
  if (eventType) {
    return /^mobile\./.test(eventType);
  }
  return kintone.app.getId() === null;
};

以下のようにワンライナーで書いてもいいですが、少し読みづらい気がします。

export const isMobile = (eventType) =>
  eventType ? /^mobile\./.test(eventType) : kintone.app.getId() === null;

関数の説明

2 つの方法で判定しています。引数にはイベント名（event.type）を渡せますが、未指定でも動作します。 実際に呼び出す際は以下のように使います。

kintone.events.on('event name', (event) => {
  if (isMobile(event.type)) {
    // モバイル版の処理
  } else {
    // PC版の処理
  }
});

/^mobile./.test(eventType)

モバイル版で発生するイベント名には全て mobile. が付いています。イベント名が分かる場合は、これを使うのが最も確実です。

kintone.app.getId() === null

モバイル版では kintone.app の代わりに kintone.mobile.app を使います。kintone.app 自体が null になるわけではなく、PC 版用の各関数が null を返すことを利用した判定です。

ただし、この方法ではうまく判定できない場合がありました（筆者の経験）。

モバイル版は URL が /k/m/ から始まるため、以下の判定のほうが安定する場合があります。

const isMobileUrl = /^\/k\/m\//.test(location.pathname);

ゲストスペース内のアプリなど URL が異なるケースは、動作を確認したうえで利用してください。

グローバル変数を使った方法について

kintone の各ページには、JavaScript API で使用するkintoneというグローバル変数の他に、cybozuというグローバル変数も存在します。

このcybozuを辿っていくと、cybozu.data.IS_MOBILE_DEVICEという、如何にもな名前のプロパティがあります。

名前からはモバイル判定に使えそうですが、このプロパティは「モバイル版の画面かどうか」とは一致しません。

Chrome の開発者ツールでデバイスを iPad mini に切り替えてモバイル版 kintone にアクセスし、cybozu.data.IS_MOBILE_DEVICE を参照すると、

cybozu.data.IS_MOBILE_DEVICE;
false;

上記のような残念な結果に。

公式にドキュメント化された API でもないため、判定には使わないのが無難です。

最後に

PC 版とモバイル版でコードを共有する場合は、イベント名（event.type）による判定を第一に、イベントのない場面では URL による判定を使うのがおすすめです。