カテゴリー内の他の記事

お知らせアプリでレコードの既読チェックカスタマイズをしてみよう

フォローする

(著者:サイボウズ 三宅 智子)

Index

概要

メールの既読チェックと同じく、kintoneでも例えばお知らせアプリなどで、通知先のユーザーが確認してくれたかどうかチェックしたいと思うことはありませんか?
本記事では、ボタンを生成してお知らせアプリで既読チェックをするカスタマイズを解説します。

完成イメージ

出来上がりはこのようになります。ユーザーが確認/Notedボタンをクリックすると、そのユーザー名が別フィールドに記録され、既読チェックができます。
今回はおまけ要素として、日英両方のユーザーに対応します。

image.gif

主なカスタマイズ内容は以下です。

  • お知らせが公開されたら、確認ボタンを表示する
  • ユーザーが確認ボタンをクリックすると、そのユーザー名を別フィールドに記録する
  • ユーザーが確認ボタンをクリックすると、既読済みのユーザー数を別フィールドに記録する
  • 日本語/英語に対応する

まずkintoneアプリを作成して、そこにJavaScriptカスタマイズを加えていきます。
では、開発していきましょう!

kintoneのアプリ作成

今回は既読チェックカスタマイズということで、お知らせアプリを作成します。

  1. 以下のフィールドを配置したお知らせアプリを作成してください。(大文字/小文字にご注意ください)
    詳細なアプリの作成方法はこちらのヘルプ(アプリをはじめから作成する)をご参照ください。
     フィールドの種類  フィールド名  フィールドコード
    ユーザー選択 確認済みユーザー Noted_Users
    数値 確認済み数 Count
    スペース Button (要素IDを指します)

    上記以外のフィールドは、こちらのアプリ構成を参考にして設定してください。
    (赤枠内は、必須項目です。)
    form_setting.png

  2. 次に、以下の通りプロセス管理を設定します。
    詳細な設定方法はこちらのヘルプ(プロセス管理を設定する)をご参照ください。
    process_setting.png

  3. 今回英語ユーザーにも対応したいので、設定します。英語の箇所を以下の通りに設定してください。
    詳細な設定方法はこちらのヘルプ(言語ごとの名称を設定する)をご参照ください。
    language_setting.png

 これで一旦kintone側の下準備は完了です。

JavaScriptカスタマイズ

アプリ作成が完了したら、JavaScriptカスタマイズを加えていきます。
下のJavaScriptファイルをkintoneのお知らせアプリに適用します。

notedButton.js

既読チェック用のJavaScriptファイルです。
アプリ作成者の言語設定が英語の場合は、ステータスのフィールドコードが違うので、下記の通り6行目のコードを修正してください。

 修正前: statusCode: 'ステータス',
 修正後: statusCode: 'Status',

また、いくつかライブラリも使っているので、それらもkintoneに適用します。
notedButton.jsと併せて、PC用のJavaScript/CSSファイルに記述してください。

  • jQuery
    • https://js.cybozu.com/jquery/3.3.1/jquery.min.js
  • FontAwesome
    • https://js.cybozu.com/font-awesome/v4.7.0/css/font-awesome.min.css
  • 51-modern-default.css (こちらのGithub URLよりCSSファイルを作成してアップロード)

全てアップロードすると、以下のようになります。
アプリへのJavaScript/CSSファイルのアップロードの方法はこちらのヘルプ(JavaScriptやCSSでアプリをカスタマイズする)をご参照ください。

js_css_files.png

動作確認

設定が完了したら、最後に動作確認をしましょう。
今回は、日本語と英語に対応できていることを確認するため、画面表示がそれぞれの言語設定になっているユーザーでログインして動作を確認します。
言語設定を変更したい場合は、こちらのヘルプ(画面の言語や、タイムゾーンを切り替える)をご参照ください。

  1. サンプルデータを登録して、日本語利用ユーザーで、「公開する」ボタンをクリックしてプロセスを進めます。
    publish.png

  2. 「確認」ボタンをクリックします。
    Noted_Button.png

    確認ボタンを押したユーザー名とカウントが記録されます。
    また、「確認」ボタンも消えるようになっています。
    Check.png

  3. 次は英語ユーザーでkintoneにログインし直して、英語表記のチェックを行います。
    注意書きやボタンの言語が変わっていることを確認しましょう。
    「Noted」ボタンをクリックします。
    Noted_Button_English.png

    そうすると、またユーザー名とカウントが変更されることを確認します。
    Check_English.png

これで動作確認も完了です!お疲れ様でした。

サンプルコードの解説

簡単にサンプルコードのポイント解説を行います。

可変なものはcommon変数にまとめる

フィールドコードなど可変なものはcommon変数にまとめて、メンテしやすいようにしておきます。

因みに、ES6からオブジェクトのキーも変数にそのまま指定できるようになっています。

ユーザーの言語設定による日英の出し分け

cybozu.com上のユーザーの言語設定によって、注釈やボタン文言の日英出し分けを行なっている部分です。この書き方は覚えておきましょう。
条件(三項)演算子を使っています。

ボタンの表示/非表示判定

プロセスが「公開」/「Published」のもの、かつログインユーザーが未読の場合のみ「確認」/「Noted」ボタンを表示するように制御しています。

おわりに

いかがでしたでしょうか?既読チェックのカスタマイズ、応用すれば色んな場面で使えると思うので、ぜひ工夫してみてください。
「下書き」から「公開」にプロセスを進めるのを忘れることが多いようであれば、レコード作成時に次のステータスに進めるかどうかを聞く
ダイアログを出してプロセスを進められるようにアレンジしてもいいかもしれません!

注意事項

  • 上記のカスタマイズは、PCのみで動作します。
  • 日本語と英語ユーザー両方に対応しています。
  • 1. 同時リクエストが過多になることにより、kintoneへの負荷が高まる可能性があります。
    2. 同レコードの同時編集により、レコードが更新できない場合があります。
    3. ユーザーフィールドに大量のユーザー情報が登録されることにより、画面描写が遅延する場合があります。
    上記理由より、大量のユーザーでのご利用はお控えください。
  • サンプルコードは、ES6で書いています。
  • Internet Explorerは、ES6に未対応のため、動作しません。
    Internet Explorerをお使いの場合は、ES5に書き直してください。

本Tipsは、2018年10月時点の kintone と Google Chrome で確認したものになります。

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

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