kintone.appとkintone.mobile.app、使い分ける必要ある？
こんにちはリビットです。
みなさんはkintone.appとkintone.mobile.appを正しく書き換えられていないがために、エラーが発生したことはありませんか？…私だけでしょうか？
僅かな違いのために、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用・スマートフォン用それぞれに以下のコードを反映します。
PC用のJavaScriptファイル
kintone.xApp = kintone.xApp || kintone.app;スマートフォン用のJavaScriptファイル
kintone.xApp = kintone.xApp || kintone.mobile.app;これだけ定義しておけば、各アプリに適用するjavascriptファイル上でkintone.appを使用したい場合に、代わりにkintone.xAppを呼び出すことで、デバイスに合わせて取得先を変えてくれます。
kintone.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カスタマイズのお役に立てれば幸いです！ 最後まで読んでいただきありがとうございました。