cybozu developer network

カテゴリー内の他の記事

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
まめ

記事通りのカスタマイズを適用したところ、前/次のページに遷移した時に、データがどんどん増殖してしまいました。。

23行目に「$('#customized-view table').remove();」を追加することで解決できました!(「// ページネーションしたときに表示しているレコードをクリアする」の部分は不要になります)

Avatar
cybozu Development team

まめ 様
お世話になっております。cybozu developer network 運営でございます。

フィードバックをいただき、ありがとうございます。
ご指摘の内容を社内にフィードバックし、記事の修正を検討します。

今後ともよろしくお願いいたします。

サインインしてコメントを残してください。