（著者：サイボウズ 三宅 智子）
概要
メールの既読チェックと同じく、kintoneでも例えばお知らせアプリなどで、通知先のユーザーが確認してくれたかどうかチェックしたいと思うことはありませんか？
本記事では、ボタンを生成してお知らせアプリで既読チェックをするカスタマイズを解説します。
完成イメージ
出来上がりはこのようになります。ユーザーが確認/Notedボタンをクリックすると、そのユーザー名が別フィールドに記録され、既読チェックができます。
今回はおまけ要素として、日英両方のユーザーに対応します。
主なカスタマイズ内容は以下です。
- お知らせが公開されたら、確認ボタンを表示する
- ユーザーが確認ボタンをクリックすると、そのユーザー名を別フィールドに記録する
- ユーザーが確認ボタンをクリックすると、既読済みのユーザー数を別フィールドに記録する
- 日本語/英語に対応する
まずkintoneアプリを作成して、そこにJavaScriptカスタマイズを加えていきます。
では、開発していきましょう！
kintoneのアプリ作成
今回は既読チェックカスタマイズということで、お知らせアプリを作成します。
- 以下のフィールドを配置したお知らせアプリを作成してください。（大文字/小文字にご注意ください）
詳細なアプリの作成方法はこちらのヘルプ（アプリをはじめから作成する）をご参照ください。
フィールドの種類 フィールド名 フィールドコード ユーザー選択 確認済みユーザー Noted_Users 数値 確認済み数 Count スペース ー Button (要素IDを指します)
上記以外のフィールドは、こちらのアプリ構成を参考にして設定してください。
（赤枠内は、必須項目です。）
- 次に、以下の通りプロセス管理を設定します。
詳細な設定方法はこちらのヘルプ（プロセス管理を設定する）をご参照ください。
- 今回英語ユーザーにも対応したいので、設定します。英語の箇所を以下の通りに設定してください。
詳細な設定方法はこちらのヘルプ（言語ごとの名称を設定する）をご参照ください。
これで一旦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でアプリをカスタマイズする）をご参照ください。
動作確認
設定が完了したら、最後に動作確認をしましょう。
今回は、日本語と英語に対応できていることを確認するため、画面表示がそれぞれの言語設定になっているユーザーでログインして動作を確認します。
言語設定を変更したい場合は、画面の言語を切り替えるや、タイムゾーンを切り替えるをご参照ください。
- サンプルデータを登録して、日本語利用ユーザーで、「公開する」ボタンをクリックしてプロセスを進めます。
- 「確認」ボタンをクリックします。
確認ボタンを押したユーザー名とカウントが記録されます。
また、「確認」ボタンも消えるようになっています。
- 次は英語ユーザーでkintoneにログインし直して、英語表記のチェックを行います。
注意書きやボタンの言語が変わっていることを確認しましょう。
「Noted」ボタンをクリックします。
そうすると、またユーザー名とカウントが変更されることを確認します。
これで動作確認も完了です！お疲れ様でした。
サンプルコードの解説
簡単にサンプルコードのポイント解説を行います。
可変なものはcommon変数にまとめる
フィールドコードなど可変なものはcommon変数にまとめて、メンテしやすいようにしておきます。
因みに、ES6からオブジェクトのキーも変数にそのまま指定できるようになっています。
ユーザーの言語設定による日英の出し分け
cybozu.com上のユーザーの言語設定によって、注釈やボタン文言の日英出し分けを行なっている部分です。この書き方は覚えておきましょう。
条件(三項)演算子を使っています。
ボタンの表示/非表示判定
プロセスが「公開」/「Published」のもの、かつログインユーザーが未読の場合のみ「確認」/「Noted」ボタンを表示するように制御しています。
おわりに
いかがでしたでしょうか？既読チェックのカスタマイズ、応用すれば色んな場面で使えると思うので、ぜひ工夫してみてください。
「下書き」から「公開」にプロセスを進めるのを忘れることが多いようであれば、レコード作成時に次のステータスに進めるかどうかを聞く
ダイアログを出してプロセスを進められるようにアレンジしてもいいかもしれません！
注意事項
- 上記のカスタマイズは、PCのみで動作します。
- 日本語と英語ユーザー両方に対応しています。
- 同時リクエストが過多になることにより、kintoneへの負荷が高まる可能性があります。
- 同レコードの同時編集により、レコードが更新できない場合があります。
- ユーザーフィールドに多くのユーザー情報が登録されることにより、画面描写が遅延する場合があります。
本Tipsは、2018年10月時点の kintone と Google Chrome で確認したものになります。
kintone・カスタマイズ初心者です。
アプリ作成が完了後のJavaScriptカスタマイズを加える所で躓いてしまいました。
①notedButton.jsをコピーしメモ帳でJavaScriptファイルを作成しました。
②各URLをコピーし貼り付け、Github URLの内容をコピーしメモ帳で .cssで保存したものを添付しました。設定はこちらの通りです。
ご教授いただければ幸いです。
ブラウザの開発者ツールのコンソールなどからエラーが出ている場合、下記のようにエラーメッセージを記載してください。
ブラウザの開発者ツールの確認方法はこちらを参考してください。
※エラー画面で共有したほうが分かりやすい場合は、スクリーンショットなどをご活用ください。
(例)
エラーが出ている場所：kintoneのレコード詳細画面
エラー内容：ブラウザの開発者ツールのコンソールから下記エラーが出ます。
"Uncaught SyntaxError: Unexpected end of input"
動作を確認した環境の情報を記載してください。
(例)
---
また、こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
もしも、JavaScriptカスタマイズ方法に関する不明点や技術的な問題・疑問であれば、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
cybozu developer network 運営事務局 様
ご連絡いただき、ありがとうございました。
すみません、フォーム設定を間違えていたため設定しなおし無事PC画面で動き出しました！
同じ項目なので２点追加で質問です。他の質問者と重複したらすみません。
①モバイル版で「確認ボタン」をだすためには、カスタマイズ設定をどうしたらよいでしょうか。
②通知先の人が「確認ボタン」を押すと、レコードが更新されて、確認するたびに通知が入ります。
通知を受け取らないためには下記の設定を変更すれば可能でしょうか。
cybozu developer network 運営事務局 様
続けて質問です。
「確認ボタン」はブラウザによって表示されないのですが、設定項目があればご教授ください。
microsoft edge では表示
Internet Explorerでは非表示でした。
> ②通知先の人が「確認ボタン」を押すと、レコードが更新されて、確認するたびに通知が入ります。
ES5形式への書き直し方などわからないことがあれば、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
cybozu developer network 運営事務局様
ご回答いただき、ありがとうございます！
今後はコミュニティへ訪問してみます。理解が追い付かず、ご迷惑をおかけしました。
お世話になります
レコードにて「確認ボタン」を押した後、
誰かがレコードを更新した場合に再度確認ボタンが表示されるという理解なのでしょうか？現状確認ボタンを押した後レコードが変更になっても
再度ボタンが表示されることはありません。コンソールにエラーなし
どうぞよろしくお願いいたします。
青山昌司 様
お世話になっております。cybozu developer network 運営でございます。
こちらのカスタマイズは、一度確認ボタンを押した後、レコードを編集しても再度確認ボタンは表示されないようになっています。
そのような挙動にしたい場合は、レコード更新時に、確認ボタンを押したユーザー（Noted_Usersフィールド）を空にするなどの変更が必要になります。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
試してみてわからないなど、記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。
よろしくお願い致します。
お世話になっております。
注意事項に『大量のユーザーでのご利用はお控えください。』と記載がありますが、
大量とは何ユーザーぐらいまで対応可能でしょうか。
ご教授のほどよろしくお願いいたします。
hiroaki 様
お世話になっております。cybozu developer network 運営でございます。
大変恐縮ですが、本カスタマイズの対応可能なユーザー数は、現時点では未検証です。
また、アプリ設計の違いによる影響もあるため、仕様としてご案内することができかねます。
ご期待に添えず、申し訳ございません。
どうぞよろしくお願いいたします。
cybozu developer network 運営様
ご回答ありがとうございます。
未検証ということで承知いたしました。
自己検証してみます。