cybozu developer network

カテゴリー内の他の記事

いいね!プラグイン

Index

注意事項

  • サンプルプラグインは、その動作を保証するものではありません。
  • サンプルプラグインの技術的なサポート等は行っていません。
  • kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。

概要

レコード一覧画面と、レコード詳細画面に「いいね!」ボタンを設置できるプラグインです
※このサンプルのプラグインファイルを読み込むためには、パッケージング作業が必要になります。

完成形

設定画面

like_setting.png

サンプルプラグイン

GitHubにアクセスしてフォルダごとダウンロードしてください。そのフォルダ内の「examples/vote」に、今回のファイル群があります。
「vote」 配下のファイル構成は次のとおりです。

vote/
       css/
-51-modern-default.css
-vote.css html/ -config.html
image/
-icon.png
js/
-config.js
-vote.js
manifest.json

パッケージングしたサンプル

プラグイン開発のためのサンプルであり、サポート対象外であることをご理解の上、ダウンロードしてください。

SAMPLE_like_plugin_v1.7.1.zip

※こちらのパッケージングを使ってv1.0からv1.1以降へアップデートする場合、プラグインの設定画面より設定を再保存する必要があります。
またアップデート前のいいね!したユーザーとその数が引き継がれませんので、ご注意ください。

更新履歴

2015/1/10 v1.0 を公開しました

2017/2/20 v1.1 を公開しました:レコード再利用の場合はいいね!したユーザーとその数が引き継がれる問題を修正しました。

2017/5/31 v1.2 を公開しました:プラグイン設定画面のスタイルシートを新デザイン用(51-current-default.css)に変更しました。

2017/7/19 v1.3 を公開しました:スタイルシートのファイル名を「51-current-default.css」から「51-modern-default.css」に変更しました。その他軽微な修正を行いました。

2017/11/22 v1.4 を公開しました:プログラムで使用しているフォーム設計情報取得APIを下記のように変更しました。
- config.jsは、フォームのレイアウトを取得するAPIに置き換えました。
- vote.jsは、フィールドの一覧を取得するAPIに置き換えました。

2017/12/05 v1.5 を公開しました:管理者権限を持たないユーザーが一覧画面で「いいね!」できない不具合(v1.4のみ)を修正しました。

2018/06/01 v1.6 を公開しました:下記の対応を行いました。
- 設定項目のローカライズ対応(英語)
- ゲストスペース内のアプリで、一覧画面でも「いいね!」ボタンが表示されるよう修正
- 作成日時のフィールドコードが『作成日時』以外でも動くよう修正
- 設定画面の説明文を追加・修正
- 設定画面の選択項目(ドロップダウン)のデザインを修正
- 一覧にレコード番号を表示しない場合に表示されていたエラーメッセージを削除
※一覧にレコード番号を表示していない場合「いいね」ボタンが表示されず一覧上での機能利用ができないが、
エラーメッセージは表示されず通常の一覧として利用可能とする。

2018/07/06 v1.6.1 を公開しました:設定項目のローカライズ対応(中国語)

2019/12/04 v1.7.0 を公開しました:モバイル版においてレコード詳細画面で「いいね!」ボタンが表示されるようにしました。

2023/2/15 v1.7.1 を公開しました:スクリーンリーダーで操作できるように次の対応をしました。
-「いいね!ボタン」にタブキーでフォーカスできる
-  エンターキーでクリックできる

 

ご注意事項

  • サンプルプラグインは、その動作を保証するものではありません
  • サンプルプラグインの技術的なサポート等は行っていません

プラグインファイルの構成

フォルダ:css

  • 51-modern-default.css
    サイボウズが提供しているプラグイン設定画面のスタイルです。
  • vote.css
    いいね!アイコン調整用のスタイルです。

フォルダ:html

  • config.html
    プラグイン設定画面のHTMLです。

    いいね!を表示するために次のフィールドを設定する画面にしています。

    • 「いいねした人」に使うフィールド
    • 「いいねの数」に使うフィールド

フォルダ:image

  • icon.png
    プラグインのアイコンです

フォルダ:js

  • config.js
    プラグイン設定画面のプログラムです。ここでは、次の処理を行っています。
    1. 「保存」ボタンが押された時に、設定した値をプラグインの変数に代入する。
    2. 「キャンセル」ボタンが押された時に、前の画面へ戻る。
    3. 既にプラグインの変数が設定されている場合は、各フィールドに値を設定する。
  • vote.js
    いいね!アイコン配置用のプログラムです。このファイルは以下3つの処理を行います。
    1. レコード一覧画面の「レコード番号」フィールドにいいねアイコンを追加します。
    2. レコード詳細画面の「レコード番号」フィールドにいいねアイコンを追加します。
    3. レコード追加/編集画面で、「いいねした人」と「いいねの数」に使われるフィールドを編集不可にします。

フォルダ:manifest.json

プラグインのマニュフェストファイルです。

パッケージング

こちらの手順を参考にパッケージングします。 

インポート&動作確認

  1. プラグイン適用のための、ユーザー選択フィールド及び数値フィールドをアプリに設定します。
  2. 設定画面より、ダウンロードした「plugin.zip」をkintoneシステム管理画面より読み込みます。
  3. 適用したいアプリの設定画面より、「いいね!プラグイン」をインストールします。
  4. プラグインの設定画面より、「いいねした人」に使うユーザー選択フィールドと「いいねの数」に使う数値フィールドを設定します。

「入力値チェックプラグイン」のチュートリアル にプラグインの適用方法と動作確認を紹介していますのでご参考下さい。

制限事項

  • レコード詳細画面または一覧画面で「いいね!」ボタンを押した後に続けてレコードを編集したい場合は、編集前に画面の更新を行う必要があります。

利用している OSS のライセンス情報

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

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

Avatar
yamako

ポータルで一覧表示させたときにも「いいね」アイコンは表示できますか?

Avatar
おんち

yamakoさん
おはようございます。

アプリをポータルに貼り付けた場合、アプリに適用したプラグイン/JavaScriptカスタマイズは反映(表示)されません。
なので、今回の「いいね」プラグインに関しても同様で、「いいね」アイコンも、「いいね」の数も表示されません。

Avatar
takokichi

いつもお世話になっております。

いいねプラグインは、既読の管理で利用できとても助かっております。

1点要望があります。

実装した際に、レコード番号が表示されます。

ユーザ側で不要な情報であり、混乱する要素はなるべく排除いたいと考えております。

レコード番号を非表示にすることは可能でしょうか。

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

Avatar
おんち
takokichiさん
こんにちは。

>レコード番号を非表示にすることは可能でしょうか。

現状だとレコード番号を非表示にすることはできません。

ただ、前のバージョンをご利用いただくと、「いいね」アイコンを
青い紙ボタン(レコードの詳細を表示するためのボタン)の横に配置することは可能です。
適用した画面は以下になります。

前のバージョンをご利用いただく為には、ダウンロードしていただいた「いいね」プラグインのzipファイルを展開して、
その中にあるJSファイル&CSSファイルを前のバージョンのファイルに書き換えて、ご自身でパッケージングをする必要があります。

もしこちらでよろしければ、下記の手順で設定を行ってください。

①前のバージョファイルをコピーするために、こちらの記事に記載されている
plugin-sdk>examples>vote>history(右上)>add vote plugin to examplesに入ります。

②表示された画面で「vote.css」の内容をコピーして、展開したファイルの中にある「vote.css」の中にペーストして上書き保存します。

③②と同様に「vote.js」もコピーしていただいて、展開したファイルの中にある「vote.js」の中にペーストして上書き保存します。

④書き換えが完了したら、こちらの記事と下記のURLを参考に、パッケージングを進めてください。

https://developer.cybozu.io/hc/ja/articles/203480420#packaging
https://developer.cybozu.io/hc/ja/articles/217937443

⑤最後にkintone環境にそのファイルを当てて、アプリに適用すると完了です。

Avatar
takokichi

李智恩様

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

返信が遅くなって申し訳ありません。

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

プラグインのzipファイルを展開して実装したところ、再zip化できませんでした。

そのためplugin-sdkからCSS等を上書きするかたちでzip化するとうまくいったので今後のためにご報告いたします。

なお、プラグインですが、Kintoneアプリでは未対応のようでした。

今後アプリでも対応される可能性はありますでしょうか。

Avatar
おんち

takokichiさん

すみません。
④のパッケージングの手順説明で、一点記載を忘れていたところがありました。

④のURLを見ていただけると「packge.sh 」というファイルが必要と書かれておりますが、
プラグインのZIPファイルを展開して再ZIP化を行われた際は、パッケージングに必要な、
「package.sh」というファイルが入ってなかったので失敗したのではないかと思われます。

逆にplugin-sdkからダウンロードしていただいたフォルダには、
「package.sh」がダウンロードした時にすでに含まれているので、問題なくzip化できたと思います。

こちら、詳細に記載できずにお手数おかけして、すみません。

そして一つ質問なのですが、

>プラグインですが、Kintoneアプリでは未対応のようでした。

こちらもう少し詳細に背景伺えると嬉しいです。
書き換えてZIP化したいいねプラグインが適用できなかったということでしょうか?

Avatar
takokichi

李智恩様

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

書き換えてZIP化したいいねプラグインですが、PC版では実装されましたが、

モバイルのKintoneアプリで閲覧した際に、プラグインアイコンが表示されませんでした。

Avatar
おんち

takokichi様

>モバイルのKintoneアプリで閲覧した際に、プラグインアイコンが表示されませんでした。

なるほど。モバイルアプリのことでしたら、すみませんが、
現時点ではいいねプラグインの対応予定はございません。

モバイルにプラグインを適用するためには、ご自身でPC用のAPIから
モバイル用のAPIに修正していただく必要があります。

PC版では対応していても、モバイル版では対応していないAPIも
ありますので、以下のURLをご参照ください。
https://developer.cybozu.io/hc/ja/articles/202738940

Avatar
takokichi

李智恩様

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

リンクを参考にしてみます。

アプリがリリースされているため、PCでできることはアプリでも同じような修正で対応できると考えておりました。

自分でカスタマイズするとなると難易度があがりますね。

モバイルの対応必須の要件もあるため今後カスタマイズする際にはモバイルでも対応できるか事前に確認いたします。

 

Avatar
takokichi

お世話になっております、いいねプラグインの愛用者です。

 

1点利用して困っていることがあります。

プロセス管理のアプリでこのプラグインを導入するとレコードが更新されるため作業者に通知されてしまいます。

不要な通知であるため通知をとめることはできないでしょうか?

Avatar
cybozu Development team

takokichi様

愛用いただきありがとうございます。

当プラグインはユーザー選択フィールドと数値フィールドでレコードを更新するため、

kintoneのヘルプページにあるとおり、標準機能で通知が発生してしまいます。プラグインの機能では通知を止めることができません。

●通知が送信されるタイミングと宛先

https://jp.cybozu.help/k/ja/user/notifications/notification_type.html

>レコードを編集したとき - 編集した時点で作業者に割り当てられているユーザー 

通知を止めるには、プロセス管理を無効にして別のやり方でステータスを管理するのみかと存じます。

お役に立てず申し訳ありませんが、よろしくお願いいたします。

Avatar
takokichi

cybozu Development team 様

返信ありがとうございます。

やはり通知を制御するのは難しそうですね。

それがわかっただけでもありがたいです。

プロセス完了時のみいいねボタンを表示させるようにしたいのですが、

方法はありますか?

重ね重ねの質問で恐縮ですが、よろしくお願いいたします。

 

takokichiにより編集されました
Avatar
furuhashi

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

公開当初よりプラグインを愛用しております。
ありがとうございます。

改善方法があればご教示いただきたいのですが、
レコードを開き、いいねを押した後に同レコード内の添付ファイルを開こうとすると
NOW LOADINGのまま開くことができません。

おそらくいいねを押したことにより、レコードが編集後の状態に書き変わってしまうために
起こっている現象だと思うのですが、何か改善方法はございますでしょうか。

恐れ入りますが、ご教示いただけますと幸いです。
何卒よろしくお願い致します。

Avatar
cybozu Development team

furuhashi 様

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

cybozu developer network 運営でございます。

こちらにて動作を確認したところ問題なく表示できたため、
お手数ですが再現する環境について右記のガイドを確認の上共有いただけますと幸いです。

以上、よろしくお願いいたします。

Avatar
C.Tag

いいねプラグイン、愛用させていただいてます。

今回初めてゲストスペースのアプリに設置してみたのですが、ゲストメンバーが操作した時のみ、思ったように動作しません。

・いいねを押す →いいねのカウント数は+1されるが、ユーザ選択には追加されない

・もう一度いいねを押す → いいねのカウント数は-1されない

ゲストメンバーは適用外なのでしょうか。

Avatar
cybozu Development team

C.Tag 様

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

こちらのプラグインについては、ゲストメンバーによる操作に対応しておりません。

プラグインのソースコードは、GitHub に公開しています(いいねプラグインは「examples/vote」です)。
ゲストメンバーによる操作に対応させたい場合は、お手数おかけいたしますが、こちらのソースコードを修正していただきますよう、よろしくお願いいたします。

 

Avatar
temmy

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

いいねのプラグインの活用をしており確認させていただきたいことがあります。
複数のアプリで正常に使用できているのですが、特定のアプリのみ使用ができません。
考えられる原因はありますでしょうか。

以上、宜しくお願い致します。

Avatar
cybozu Development team

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

該当アプリに他のプラグインやカスタマイズを適用している場合、
他のカスタマイズからの影響を受けて、うまく動かない可能性は考えられるのですが、いかがでしょうか。

また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問は、cybozu developer コミュニティをご活用ください。
その際、表示されているエラーメッセージを公開するなど、より詳細に情報を示すと回答が集まりやすいかと思われます。
エラーメッセージの確認方法については、動かない?そんな時はデバッグをしてみよう!入門編 をご参考ください。

今後とも cybozu developer network よろしくお願いします。

Avatar
TM

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

既出の質問に似てしまうかもしれませんが教えてください。
いいね!プラグインを使用したいアプリで他のプラグイン適用あり、かつ
レコード一覧の表示形式を『カスタマイズ』で作成しているのですが
いいね!ボタンを押すと
「エラーが発生しました。アプリ管理者へご連絡ください」となりプラグインが動作しません。
この現象は、他のプラグインに起因するものでしょうか。
もしも、何らかのエラー回避方法がありましたらご教授頂ければ幸いです。
よろしくお願い致します。







Avatar
cybozu Development team

前田 哲也 様

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

ご認識のとおり他のプラグインやカスタマイズからの影響を受けて、うまく動かない可能性が考えられます。

また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問は、cybozu developer コミュニティをご活用ください。
その際、表示されているエラーメッセージを公開するなど、より詳細に情報を示すと回答が集まりやすいかと思われます。
エラーメッセージの確認方法については、kintone JavaScript カスタマイズデバッグまとめをご参考ください。

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

Avatar
遠藤泰史

現段階のバージョンでレコード番号を表示しないバージョンにする方法はありますでしょうか。

Avatar
cybozu Development team

遠藤泰史 様

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

ご認識のとおり現段階のバージョンではレコード番号を一覧に表示しなければ、いいねボタンが表示されない仕様となっております。

プラグインをご自身でカスタマイズいただくなどの方法が必要ですが、
こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。

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

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