cybozu developer network

カテゴリー内の他の記事

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

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

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のみで動作します。
  • 日本語と英語ユーザー両方に対応しています。
  • 同時リクエストが過多になることにより、kintoneへの負荷が高まる可能性があります。
  • 同レコードの同時編集により、レコードが更新できない場合があります。
  • ユーザーフィールドに多くのユーザー情報が登録されることにより、画面描写が遅延する場合があります。

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

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

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

Avatar
ohara

kintone・カスタマイズ初心者です。

アプリ作成が完了後のJavaScriptカスタマイズを加える所で躓いてしまいました。

①notedButton.jsをコピーしメモ帳でJavaScriptファイルを作成しました。

②各URLをコピーし貼り付け、Github URLの内容をコピーしメモ帳で .cssで保存したものを添付しました。設定はこちらの通りです。

ご教授いただければ幸いです。

Avatar
cybozu Development team
ohara様
 
お世話になっております。cybozu developer network 運営事務局です。
 
> アプリ作成が完了後のJavaScriptカスタマイズを加える所で躓いてしまいました。
 
こちら、どのように躓いているのか具体的にお知らせいただけますでしょうか。
合わせて、下記のようにエラー情報や再現条件などお知らせください。
 
エラー情報

ブラウザの開発者ツールのコンソールなどからエラーが出ている場合、下記のようにエラーメッセージを記載してください。
ブラウザの開発者ツールの確認方法はこちらを参考してください。

※エラー画面で共有したほうが分かりやすい場合は、スクリーンショットなどをご活用ください。

(例)
エラーが出ている場所:kintoneのレコード詳細画面
エラー内容:ブラウザの開発者ツールのコンソールから下記エラーが出ます。
"Uncaught SyntaxError: Unexpected end of input"

再現条件

動作を確認した環境の情報を記載してください。

(例)

  • 問題が発生した箇所:記事の手順3の部分
  • 権限設定:アプリ管理者
  • デバイス(PC or モバイル):PC
  • OS・ブラウザ:macOS、Chrome
  • IP制限などネットワークに特殊なことがあれば:特になし

---

また、こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
もしも、JavaScriptカスタマイズ方法に関する不明点や技術的な問題・疑問であれば、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics

Avatar
ohara

cybozu developer network 運営事務局 様

ご連絡いただき、ありがとうございました。

すみません、フォーム設定を間違えていたため設定しなおし無事PC画面で動き出しました!

 

同じ項目なので2点追加で質問です。他の質問者と重複したらすみません。

①モバイル版で「確認ボタン」をだすためには、カスタマイズ設定をどうしたらよいでしょうか。

②通知先の人が「確認ボタン」を押すと、レコードが更新されて、確認するたびに通知が入ります。

 通知を受け取らないためには下記の設定を変更すれば可能でしょうか。

 

Avatar
ohara

cybozu developer network 運営事務局 様

続けて質問です。

「確認ボタン」はブラウザによって表示されないのですが、設定項目があればご教授ください。

microsoft edge では表示

Internet Explorerでは非表示でした。

Avatar
cybozu Development team
ohara様
 
お世話になっております。cybozu developer network 運営事務局です。
動作したようで安心いたしました。
 
> ①モバイル版で「確認ボタン」をだすためには、カスタマイズ設定をどうしたらよいでしょうか。
 
JavaScriptカスタマイズをスマートフォンでも動作させるにはスマートフォン用のイベントを利用するなど一部改修が必要です。

> ②通知先の人が「確認ボタン」を押すと、レコードが更新されて、確認するたびに通知が入ります。 
 
通知が送信されるタイミングと宛先に関してはヘルプをご確認ください。
 
 
大変恐縮ではございますが、こちらのコメント欄は記事通りに試したが動かない等の記事内容へのフィードバック用となります。
追加でご質問いただいた分に関しましては、直接的に記事内容と関連のない技術的なご質問ですので、cybozu developer コミュニティをご活用いただきますようお願いいたします。
Avatar
cybozu Development team
ohara様
 
お世話になっております。cybozu developer network 運営事務局です。
注意事項に示してありますとおり、当記事のコードにおきましてはInternet Explorerには対応しておりません。
Internet Explorerで動作させたい場合はES5形式に書き直す必要があります。
 
こちらのコメント欄は、記事通りに試したが動かない等の記事へのフィードバック用となります。
ES5形式への書き直し方などわからないことがあれば、ぜひコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
Avatar
ohara

cybozu developer network 運営事務局様

 

ご回答いただき、ありがとうございます!

今後はコミュニティへ訪問してみます。理解が追い付かず、ご迷惑をおかけしました。

 

 

Avatar
青山昌司

お世話になります

レコードにて「確認ボタン」を押した後、

誰かがレコードを更新した場合に再度確認ボタンが表示されるという理解なのでしょうか?現状確認ボタンを押した後レコードが変更になっても

再度ボタンが表示されることはありません。コンソールにエラーなし

 
ja: {
        icon: '確認',
        message: 'このお知らせを確認された方は、下の「確認」ボタンをクリックしてください',
        publishedStatusName: '公開済み',
        revsionError: '誰かがレコードを更新しました。再度「確認」ボタンをクリックしてください。'
 

どうぞよろしくお願いいたします。

青山昌司により編集されました
Avatar
cybozu Development team

青山昌司 様

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

こちらのカスタマイズは、一度確認ボタンを押した後、レコードを編集しても再度確認ボタンは表示されないようになっています。

そのような挙動にしたい場合は、レコード更新時に、確認ボタンを押したユーザー(Noted_Usersフィールド)を空にするなどの変更が必要になります。

恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
試してみてわからないなど、記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

Avatar
hiroaki

お世話になっております。

注意事項に『大量のユーザーでのご利用はお控えください。』と記載がありますが、

大量とは何ユーザーぐらいまで対応可能でしょうか。

ご教授のほどよろしくお願いいたします。

Avatar
cybozu Development team

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

大変恐縮ですが、本カスタマイズの対応可能なユーザー数は、現時点では未検証です。
また、アプリ設計の違いによる影響もあるため、仕様としてご案内することができかねます。
ご期待に添えず、申し訳ございません。

どうぞよろしくお願いいたします。

Avatar
hiroaki

cybozu developer network 運営様

ご回答ありがとうございます。

未検証ということで承知いたしました。

自己検証してみます。

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