SNSでよくある「いいね！」ボタンや、Gmailなどにある「既読」ボタンが、 kintone のレコード自体にあったらいいなと思ったことはありませんか？

kintone では、レコードやスペースのコメントには「いいね！」のリアクション機能が付いているのですが、レコード自体には付いていません。今回はこの機能をカスタマイズで追加してみたいと思います。


なおボタンを押さず、詳細画面を表示した際に既読状態にする方法もあり、次の記事が参考になります。

既読・未読を管理や表示する : gusuku support


Customineの基本的な事柄は、こちらの「はじめてのカスタマイズ」をご参照ください。


2018年12月11日追記：

お客様から「ログインユーザーが「既読」ボタンをすでに押下済だった場合、「既読」ボタンを表示しないよう制御したい」というご要望を頂きましたので、別の方法を考えてみました。こちらもご参考にしてください。

  • 詳細画面で、まずログインユーザーを取得する

  • 取得したら、ユーザー選択にそのユーザーが居なかったら、ボタンをスペースに配置する

  • そのボタンが押されたら、フィールドにユーザーを追加

  • 追加されたらリロード

こうすると、詳細画面で必要なときだけボタンが出てくるようになります。

ぜひお試しください！



利用想定シーン

「いいね！」のようなボタンを付けたいシーンは色々です。単純にリアクションだけの場合もありますし、「既読にする」ボタンとしてそのレコードを読んだ人を記録する、という風にも使えると思います。


このカスタマイズでは、レコードの詳細画面に「既読にする」ボタンを追加して、そのボタンを押した人をユーザー選択フィールドに保存する、というカスタマイズをしてみることにします。


こうしておくと、あとで一覧画面の絞り込み条件を利用して、簡単に既読・未読の一覧を作成することが出来るようになります。


kintoneアプリの準備

今回利用するアプリは、アプリストアにある「日報」アプリに少しフィールドを追加して利用したいと思います。kintone アプリストアから「日報」を追加して下さい。もちろん、すでにお手元にあるアプリをご利用いただいても構いません。


このアプリに対して以下のようにグループを追加、その中に「buttonSpace」という要素IDを付けたスペースと、ユーザー選択フィールドを追加しました。

グループの「初期値」は「グループ内のフィールドを表示する」にチェックを入れておいてください。


Customineの設定

それでは、この日報アプリに対してカスタマイズをしていきます。Customine のアプリ選択画面から、日報アプリを選択してカスタマイズの作成を始めます。


まずボタンをスペースに配置しましょう。

  • 「やること」にカテゴリー：ボタンの中から、「ボタンをスペースに配置する」を選択します
  • 「場所」は先程追加した「buttonSpace」のスペースを選択します
  • 「ラベル」には「既読にする」と入れて下さい

やることの設定はこれで完了です。条件には「詳細画面を表示した時」を選択しておきます。

ボタンの設置は以上です。


ボタンを押した時の動き

次に、ボタンを押したときの動きを作成してみます。何が必要か考えますと、以下のような工程が必要そうです。

  1. ボタンを押したログインユーザーを取得
  2. ユーザー選択フィールドにそのユーザーの情報を追加
  3. 追加が完了したら、画面をリロード


それぞれ設定してみます。まずはログインユーザーの取得です。

  • 「やること」にカテゴリー：その他の中から、「ログインユーザーを取得する」を選択します
  • 「セット先フィールド」は空にしておきます。「セット先フィールド」でセットしてしまうと、ボタンを押すたびにユーザーが追加されず、上書きされてしまうのでご注意下さい
  • 「条件」には自動的に「ボタンを押したとき」が入っていますのでそのまま利用します
  • 「ボタン」は先程追加したボタンを選択します

設定は以下のようになりますね。


次に取得したユーザーの情報をユーザー選択フィールドに追加します。

  • 「やること」にカテゴリー：フィールドの中から、「フィールドの選択を追加する」を選択します。ここで「フィールドに値をセットする」を使ってしまうと、ボタンを押すたびにユーザーが追加されず、上書きされてしまうのでご注意下さい
  • 「フィールド」には「ユーザー選択」を選択します
  • 「値」には、「他のアクションの結果」ボタンを利用して「ログインユーザーを取得する」の結果を取得し、「.code」を追加します。例えばログインユーザーを取得するアクションがアクション番号2番の場合、「${$2.code}」のようになります


ログインユーザー情報にはいろいろな情報が含まれますが、ユーザー選択フィールドに追加するときにはそのうちの「code」というパラメータ（ログイン名）を利用します。

設定はこのようになります。


最後に画面のリロードを追加します。レコードの更新は自動的に行われるので、利用者に何らかUI的なレスポンスを返す必要があります。ダイアログなどを表示してもよいのですが、ここでは単に画面をリロードすることにします。


「＋」ボタンをクリックして、空のアクションを追加してから「やること」を追加します。


長くなりましたが以上になります。

「kintoneアプリへ登録」をクリックして、kintoneで動作を確認してみて下さい。


レコード詳細画面に進み、ボタンをクリックすると、ログインユーザーの名前が入りましたでしょうか？自分以外のユーザーにも試してもらって下さい。


もう少し改良してみましょう

ここまでで、基本的な動作はうまく動いたと思います。このままでも良いのですが、もう少しだけカスタマイズを追加してみましょう。例えば、新規作成時や編集画面に既読にするボタンが有るのはちょっと違和感があります。これを消して、画面からは既読した人の編集は出来ないようにしておきましょう。


これは「フィールドやグループを非表示にする」を使うと良いと思います。こうすることで、詳細画面以外では既読にするボタンが押せない状態を作ることが出来ます。設定は以下のようになるかと思います。



また、ボタンの見た目を変更したいという場合もあるかと思います。こちらはCSSを利用してカスタマイズ可能ですので、Customine応用編の「CSSを利用した画面デザイン」を参考に試してみて下さい。


更に改良してみましょう

ここまでやったのですから、更に一覧画面でも未読と既読が分かるようにしてみましょう。

このカスタマイズも簡単です。以下の例は、未読の場合にフィールドの文字色を変更する例となります。お手軽なので色々試してみてください！


まとめ

レコードに「既読」ボタンを追加するカスタマイズは以上になります。


このカスタマイズでは「既読」「未読」の管理として利用してみましたが、他にも「いいね！」はもちろん、例えばイベントの参加希望者の登録やアイデアに賛成した人の集計など、ログインユーザーに関連した色々なカスタマイズに応用が可能だと思います。是非いろいろなアイデアを試してみて下さい。