代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。
はじめに
2019年春、スマートフォン用 kintone が大幅リニューアルされました。
API 更新情報(4月版・5月版)でもお伝えしていますが、このリニューアルにともなって、スマートフォン用の kintone JavaScript API も強化されています。
この記事では、アップデートでとくに注目したい「スマートフォン用レコード一覧画面の表示後イベントで record プロパティを取得できる」機能を利用して、レコードの値を使って条件付き書式を行うカスタマイズを紹介します。
アップデートでできるようになったこと
2019年4月と5月のアップデートでとくに注目したい点は、「スマートフォン用のレコード一覧画面の表示後イベント(mobile.app.record.index.show)で record プロパティが取得できる」です。
本アップデート前のコード
これまでのスマートフォン用 API には、レコード一覧画面の表示したときの event
オブジェクトに record
プロパティがなく、レコードを一括取得する REST API を使ってレコード一覧を取得していました。
そのため、PC用と同じカスタマイズをするときは、「PC用なら event.records
を使い、スマートフォン用なら REST API を呼ぶ」といった分岐が必要でした。
本アップデート後のコード
しかし、今回のアップデートで、スマートフォン用にも event.records
が追加されるため、レコード情報の処理を次のようにまとめられます。
※ 2019年4月のアップデートで「レコード一覧の表示形式が『表形式』」、5月のアップデートで「レコード一覧の表示形式が『カスタマイズ』」で event.records
が利用可能です。
完成イメージ
タスクを管理するアプリで、締切日に応じて「締切日」フィールドに色を付けるカスタマイズです。
ファイルアイコンをクリックすると、そのレコードのレコード詳細画面へ遷移します。
このカスタマイズでは、カスタマイズビューを利用しています。
また、Cybozu CDN で公開されている以下のライブラリを利用しています。
- jQuery
https://js.cybozu.com/jquery/3.3.1/jquery.min.js - Moment.js
https://js.cybozu.com/momentjs/2.10.3/moment-with-locales.min.js - Font Awesome
https://js.cybozu.com/font-awesome/v4.7.0/css/font-awesome.min.css
カスタマイズの適用
手順1. kintone アプリの追加
kintone アプリストア にある「To Do」アプリを利用します。
手順2. 一覧(カスタマイズビュー)の追加
一覧追加の詳細は「一覧を設定する」をご参照ください。
- アプリの設定画面を開き、[一覧]タブを選択します。
- [+]ボタンをクリックします。
- 追加する一覧の設定を行います。次のように設定します。
項目名 値 一覧名 任意の値を入力します。
今回は「カスタマイズビュー」とします。レコード形式の表示形式 「カスタマイズ」を選択します。 一覧を表示する範囲 「PC版とモバイル版で表示する」を選択します。 一覧ID 一覧のビューIDです。
カスタマイズファイルで利用するので、控えておいてください。ページネーションを表示する チェックします。 HTML 後述の「HTML」の内容を貼り付けてください。 - 左上の[保存]ボタンをクリックして、一覧を追加します。
手順3. カスタマイズの適用
- アプリの設定画面を開き、[設定]タブを選択します。
- カスタマイズ/サービス連携の [JavaScript / CSSでカスタマイズ]を選択します。
カスタマイズの設定を行います。次のように設定します。
項目名 値 適用範囲 「すべてのユーザーに適用」を選択します。 PC用のJavaScriptファイル PC用にも適用したい場合は、以下の順でリンクまたはファイルを追加してください。 - https://js.cybozu.com/jquery/3.3.1/jquery.min.js
- https://js.cybozu.com/momentjs/2.10.3/moment-with-locales.min.js
- カスタマイズファイル(customize.js)
詳細は後述の「ソースコード(customize.js)」をご参照ください。
スマートフォン用のJavaScriptファイル 以下の順でリンクまたはファイルを追加してください。 - https://js.cybozu.com/jquery/3.3.1/jquery.min.js
- https://js.cybozu.com/momentjs/2.10.3/moment-with-locales.min.js
- カスタマイズファイル(customize.js)
詳細は後述の「ソースコード(customize.js)」をご参照ください。
PC用のCSSファイル なし - 左上の[保存]ボタンをクリックして、カスタマイズを適用します。
プログラム
HTML
カスタマイズビューに設定する HTML です。
ソースコード(customize.js)
締切日に応じて「締切日」フィールドに色を付けるスクリプトファイルです。
※ 14行目の「{YOUR_CUSTOM_VIEW_ID}
」を、「手順2. 一覧(カスタマイズビュー)」の追加で控えた一覧IDに変更してください。
カスタマイズのポイント
- 45行目
PC用かスマートフォン用かを区別することなく、event.records
のレコード情報を利用しています。 - 54行目〜57行目
ファイルアイコンをクリックするとレコード詳細画面に遷移できるよう、リンク先を設定します。
PC用とスマートフォン用でレコード詳細画面の URL が異なります。
そのため、event.type
を利用してURLを使い分けます。 - 69〜78行目
現在の日付と締切日を比較し、3日以内なら赤色、7日以内なら黄色に「締切日」フィールドの背景色を変更します。
日付の比較には、かんたんに日付を操作できる Moment.js を利用しています。
おわりに
スマートフォン用 kintone のリニューアルにより UIの機能追加や改善が行われたことで、スマートフォンでの kintone の利用機会も増えるかと思います。
これまで「PC用と JavaScript API の仕様が違うから、スマートフォン用のカスタマイズは面倒だな…」と思われていた方も、この機会にぜひ、スマートフォン用のカスタマイズに挑戦してみてください。
このTipsは、2019年5月版 kintone で確認したものになります。
記事通りのカスタマイズを適用したところ、前/次のページに遷移した時に、データがどんどん増殖してしまいました。。
23行目に「$('#customized-view table').remove();」を追加することで解決できました!(「// ページネーションしたときに表示しているレコードをクリアする」の部分は不要になります)
まめ 様
お世話になっております。cybozu developer network 運営でございます。
フィードバックをいただき、ありがとうございます。
ご指摘の内容を社内にフィードバックし、記事の修正を検討します。
今後ともよろしくお願いいたします。