2019年5月のアップデート版 kintone で、スマートフォン用一覧画面をカスタマイズしてみた

Moment.js はメンテナンスモードになり、日付処理できる代替ライブラリへの移行が推奨されています。
代替ライブラリのひとつ Luxon については、kintone カスタマイズでの導入方法の紹介記事があります。

Index

• はじめに
• アップデートでできるようになったこと
• 完成イメージ
• カスタマイズの適用
• プログラム
• おわりに

はじめに

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. 一覧（カスタマイズビュー）の追加

一覧追加の詳細は「一覧を設定する」をご参照ください。

1. アプリの設定画面を開き、[一覧]タブを選択します。
2. [＋]ボタンをクリックします。
3. 追加する一覧の設定を行います。次のように設定します。
   
   
   

   項目名	値
   一覧名	任意の値を入力します。 今回は「カスタマイズビュー」とします。
   レコード形式の表示形式	「カスタマイズ」を選択します。
   一覧を表示する範囲	「PC版とモバイル版で表示する」を選択します。
   一覧ID	一覧のビューIDです。 カスタマイズファイルで利用するので、控えておいてください。
   ページネーションを表示する	チェックします。
   HTML	後述の「HTML」の内容を貼り付けてください。

4. 左上の[保存]ボタンをクリックして、一覧を追加します。

手順3. カスタマイズの適用

1. アプリの設定画面を開き、[設定]タブを選択します。
2. カスタマイズ/サービス連携の [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ファイル	なし

3. 左上の[保存]ボタンをクリックして、カスタマイズを適用します。

プログラム

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 で確認したものになります。