kintone.appとkintone.mobile.app

kintone には PC 版とモバイル版があり、それぞれ URL が異なるなど、様々な違いがあります。

JavaScript カスタマイズについても同様で、PC 版、モバイル版それぞれに別のファイルを適用させることができるようになっています。

ただ、基本的なカスタマイズが共通であることが多いため、PC 版とモバイル版それぞれにほとんど同じ内容を適用させることが多いと思います。

僅かな違いのために、PC 版とモバイル版２つのソースコードをメンテナンスすることを煩わしく思っている方は多いのではないでしょうか。

今回はその違いの１つである、グローバル変数のふるまいを共通化する方法を紹介します。

この記事を読んでいただけば、あなたはもうkintone.appとkintone.mobile.appを使い分ける必要自体無くなると思います。

それぞれが持っているプロパティを調べる

まず PC 版とモバイル版、どのような違いがあるのかを調べてみます。

確認には以下のコードを使いました。kintone.appが持っている全てのプロパティの名前と型を表示することができます。 みなさんもご自身の kintone 上で、開発者ツールを開いて以下のコードを実行してみてください。

// PC版
Object.entries(kintone.app).map(([key, property]) => [key, typeof property]);
// モバイル版
Object.entries(kintone.mobile.app).map(([key, property]) => [key, typeof property]);

試しにアプリ内のレコード一覧で実行してみました。

// PC版
0: (2) ["getId", "function"]
1: (2) ["getQueryCondition", "function"]
2: (2) ["getQuery", "function"]
3: (2) ["getFieldElements", "function"]
4: (2) ["getHeaderSpaceElement", "function"]
5: (2) ["getHeaderMenuSpaceElement", "function"]
6: (2) ["getLookupTargetAppId", "function"]
7: (2) ["getRelatedRecordsTargetAppId", "function"]
8: (2) ["record", "object"]

// モバイル版
0: (2) ["getFieldElements", "function"]
1: (2) ["getHeaderSpaceElement", "function"]
2: (2) ["getId", "function"]
3: (2) ["getLookupTargetAppId", "function"]
4: (2) ["getQuery", "function"]
5: (2) ["getQueryCondition", "function"]
6: (2) ["getRelatedRecordsTargetAppId", "function"]
7: (2) ["record", "object"]

getHeaderMenuSpaceElementだけモバイル版にありませんでした。

恐らくですが、ほとんどの画面で同じ内容が出力されると思います。もちろん、kintone.app.getId()などの各関数を実行すると結果が変わりますが、少なくともそれぞれのオブジェクト直下のプロパティ名と型は同じであることが分かります。

つまり、今回のようないくつかの不一致のみ対応すれば、kintone.appであろうとkintone.mobile.appであろうと関係なく、以降のプロパティを呼び出すことができるということです。

解決方法

kintone 全体のカスタマイズからグローバル変数として定義する方法

もし直接 javascript ファイルを各アプリに反映するような運用をされている方は、kintone 全体のカスタマイズから、PC 用・スマートフォン用それぞれに以下のコードを反映します。

window.xApp = window.xApp ?? kintone.app;

window.xApp = window.xApp ?? kintone.mobile.app;

これだけ定義しておけば、各アプリに適用する javascript ファイル上でkintone.appを使用したい場合に、代わりにkintone.xAppを呼び出すことで、デバイスに合わせて取得先を変えてくれます。

xApp.getId(); // PC版でもモバイル版でも動く！！

ちなみに今回は便宜上グローバル変数であるkintoneのプロパティとして追加しましたが、この方法はガイドライン的には NG みたいです。独自に名前空間を定義して、そこに割り当てる方が無難だと思います。

関数を定義して、返値として取得する

別の記事でデバイスの判定方法を紹介しました。この判定を利用して、関数の返値として適切なオブジェクトを返す方法も利用できます。私は Node.js で kintone カスタマイズを行っているので、こちらの方法を採用しています。

// TypeScript(@kintone/dts-genの型定義を一部借りてます)
const getApp = (eventType?: string): typeof kintone.mobile.app | typeof kintone.app => {
  return isMobile(eventType) ? kintone.mobile.app : kintone.app;
};

// JavaScript
const getApp = (eventType) => {
  return isMobile(eventType) ? kintone.mobile.app : kintone.app;
};

実際に使用する場合は以下のように行います。

const xApp = getApp();
xApp.getId(); // PC版でもモバイル版でも動く！！

活用例

現在のレコードの取得・設定

// グローバル変数
const getCurrentRecord = () => kintone.xApp.record.get();
const setCurrentRecord = (record) => kintone.xApp.record.set(record);

// 関数
const getCurrentRecord = () => getApp().record.get();
const setCurrentRecord = (record) => getApp().record.set(record);

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