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カスタマイズのお役に立てれば幸いです! 最後まで読んでいただきありがとうございました。

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

KintoneからChatworkのユーザ一覧を取得する
2021-9-15

KintoneからChatworkのユーザ一覧を取得する

JavaScriptKintone
TypeScriptで楽天ブックス書籍検索APIを使う📚
2021-9-13

TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptJavaScript
【kintone】Webフォントを適用する
2021-9-8

【kintone】Webフォントを適用する

KintoneJavaScript
アクセス権限のないアプリにJavaScriptからだけアクセスを許可する方法
2021-9-3

アクセス権限のないアプリにJavaScriptからだけアクセスを許可する方法

KintoneJavaScript
【Kintone】フィールドの入力制限・可否を変更する
2021-9-2

【Kintone】フィールドの入力制限・可否を変更する

KintoneJavaScript

最新の記事

特定のHTML要素のclassListを全て削除(リセット)する方法
2021-10-14

特定のHTML要素のclassListを全て削除(リセット)する方法

JavaScript
KintoneからChatworkのユーザ一覧を取得する
2021-9-15

KintoneからChatworkのユーザ一覧を取得する

JavaScriptKintone
TypeScriptで楽天ブックス書籍検索APIを使う📚
2021-9-13

TypeScriptで楽天ブックス書籍検索APIを使う📚

TypeScriptJavaScript
【kintone】Webフォントを適用する
2021-9-8

【kintone】Webフォントを適用する

KintoneJavaScript
KintoneからChatworkにメッセージを送る
2021-9-6

KintoneからChatworkにメッセージを送る

JavaScript