条件書式プラグインをモバイル対応してみた

kintone カスタマイズ
1

2020/10/11の定期メンテナンスで，モバイル版のフィールド要素取得APIが追加されました． 追加されたAPIを使って，新デザイン版 条件書式プラグインをモバイル対応してみました．

デモ

設定した条件書式がPCだけでなくモバイルでも反映されるようになります．

すぐにお試ししたい方は下記からダウンロードできます．
※元からkintoneに登録してある，「新デザイン版 条件書式プラグイン」とは別プラグインとしてインストールされます．設定の引き継ぎはできません．

conditionformat2-mobile.zip

コード

元コード

元となる「新デザイン版 条件書式プラグイン」のコードの取得方法，プラグインのパッケージング方法は下記を参考にしてください．

新デザイン版 条件書式プラグイン | サンプルプラグイン

変更点

モバイル化のために，「plugin-samples/examples/conditionformat2/manifest.json」の変更と「plugin-samples/examples/conditionformat2/js/mobile.js」の作成を行います．

「plugin-samples/examples/conditionformat2/manifest.json」の変更

"mobile"プロパティを追加します．

{
    ...
    "mobile": {
        "js": [
            "https://js.cybozu.com/momentjs/2.10.6/moment.min.js",
            "https://js.cybozu.com/jquery/2.1.4/jquery.min.js",
            "js/mobile.js"
        ],
        "css": [
        ]
    },
    ...
}

「plugin-samples/examples/conditionformat2/js/mobile.js」の作成

「plugin-samples/examples/conditionformat2/js/desktop.js」をコピーして，「plugin-samples/examples/conditionformat2/js/mobile.js」を作成します． PC版限定の記述をモバイル版に書き換えます．

  • 「kintone.app.getFieldElements()」を「kintone.mobile.app.getFieldElements()」に書き換え．
  • 「kintone.app.record.getFieldElement()」を「kintone.mobile.app.record.getFieldElement()」に書き換え．
  • 「‘app.record.index.show’」を「‘mobile.app.record.index.show’」に書き換え．
  • 「‘app.record.detail.show’」を「‘mobile.app.record.detail.show’」に書き換え．