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

みなさんは kintone カスタマイズのモバイル対応、どうされていますか？

kintone では PC 用、スマートフォン用それぞれに JavaScript ファイルを設定することにより、デバイスごとに処理を分けることができます。

ただ、ファイルを分けてしまうとメンテナンスの手間も増えますし、できれば同じファイルを使いたいですよね。

しかし、kintone については URL も発生イベントもデバイスによって異なりますし、全く同じコードを使用することはできません。

デバイスの壁が取り払われつつある今、PC とモバイルで反映するコードを分けるのは冗長な気がしますし、私が今まで開発したプラグインは、PC とモバイルで同じ javascript ファイルを適用するように設定しています。

今回はリソースを共有するために不可欠な、モバイル判定の私なりの方法を紹介します。

モバイルを判定する関数

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

/**
 * 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 つの方法で判定するように設定しています。 引数にイベントタイプ(kintone.events.on の第一引数に指定する配列)を指定できるようにしていますが、未指定でも動きます。 実際に呼び出す際は以下のように使います。

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 になるわけではなく、kintone.app 以下の各関数の返値が null になります。これを利用して判定を行っています。

ただ使っていて、これではうまく判定できない場合が何度かありました。

モバイル版では URL が変化するので、それを利用した以下のような判定の方が良いかもしれません。

!!location.pathname.match(/^\/k\/m/);

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

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

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

基本的にはこのプロパティを使って判定をすることができますが、JavaScript の適用範囲と完全に連動しているわけではないようです。

Chrome の開発者ツールを使っていただくと分かりますが、ウィンドウサイズを ipad mini にした状態で、モバイル版 kintone にアクセスしcybozu.data.IS_MOBILE_DEVICEを参照すると、

cybozu.data.IS_MOBILE_DEVICE;
false;

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

公式に明言されている API でもないので、使わないのが無難のようです。

最後に

みなさんの kintone カスタマイズのお役に立てれば幸いです！

最後まで読んでいただきありがとうございました。