Ribbit.work

いろんな場面で利用出来るモバイル判定 - kintone

javascriptTypeScriptKintone

last modified date2021-7-1

publish date2021-6-18

こんにちはリビットです。

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

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

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

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

今回はリソースを共有するために不可欠な、モバイル判定の私なりの方法を紹介します。 kintoneがモバイル判定の関数を正式に用意しているわけではないので、kintoneのアップデート等で動かなくなる可能性がある点に注意してください。

モバイルを判定する関数

以下のコードで判定が可能です。TypeScriptで記述しているので、JavaScriptの場合は、 (eventType?: string)の部分を(eventType)に変更してください。

export const isMobile = (eventType?: string) => {
  if (eventType) {
    return eventType.includes('mobile.');
  }
  return cybozu?.data?.IS_MOBILE_DEVICE ?? !kintone.app.getId();
};

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

export const isMobile = (eventType?: string) =>
  eventType
    ? eventType.includes("mobile.")
    : cybozu?.data?.IS_MOBILE_DEVICE ?? !kintone.app.getId();

関数の説明

kintoneのアップデートで動かない可能性も考えて、3つの方法で判定するように設定しています。 引数にイベントタイプ(kintone.events.onの後ろに指定する配列)を指定できるようにしていますが、未指定でも動きます。 実際に呼び出す際は以下のように使います。

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

eventType.includes('mobile.')

モバイル版で発生したイベント名には全て"mobile."がついています。これを利用した判定をまず行うようにしています。

cybozu?.data?.IS_MOBILE_DEVICE

kintone上でjavascriptを使用する場合は、グローバル変数のkintoneから様々な関数を利用することができますが、cybozuというグローバル変数も存在します。この変数の中にモバイルを判定したプロパティを持っているので、それを使わせてもらう方法です。

使えますが使っていいとは言われていない(developer networkに記載されていない)ので、オプショナルチェイニング(?.)を使って、かつNull合体で別の判定式を用意しています。

!kintone.app.getId()

モバイル版ではkintone.appの代わりにkintone.mobile.appを使用すると思いますが、モバイル版でkintone.appがnullになるわけではなく、kintone.app以下の各関数の返値がnullになります。これを利用して判定を行っています。 ただ使っていて、これではうまく判定できない場合が何度かありました。 モバイル版ではURLが変化するので、それを利用した以下のような判定の方が良いかもしれません。

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

みなさんのkintoneカスタマイズのお役に立てれば幸いです! 最後まで読んでいただきありがとうございました。

この記事をシェア

この記事を読んだ方におすすめの記事

kuromoji.jsで形態素解析
2021-12-4

kuromoji.jsで形態素解析

TypeScriptJavaScript
レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】
2021-12-4

レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】

JavaScriptKintone
レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】
2021-11-29

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone
スライダーを使って数値を設定できるKintoneプラグイン【無料公開】
2021-11-26

スライダーを使って数値を設定できるKintoneプラグイン【無料公開】

KintoneJavaScriptTypeScript

最新の記事

kuromoji.jsで形態素解析
2021-12-4

kuromoji.jsで形態素解析

TypeScriptJavaScript
レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】
2021-12-4

レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】

JavaScriptKintone
レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】
2021-11-29

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone
スライダーを使って数値を設定できるKintoneプラグイン【無料公開】
2021-11-26

スライダーを使って数値を設定できるKintoneプラグイン【無料公開】

KintoneJavaScriptTypeScript