いいね!プラグイン

フォローする

Index

概要

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

完成形

設定画面

サンプルプラグイン

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

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

ご注意事項

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

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

フォルダ: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

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

パッケージング

作成した「plugin.zip」を プラグインの開発手順 パッケージング を参考に、「vote」をパッケージングします。
今回は「_workIine」フォルダを作成し、その中に「package.sh」を追加して実行します。 

コマンド例)
$ cd iine
$ ../_workIine/package.sh ./ 

更新履歴

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」に変更しました。その他軽微な修正を行いました。

like_plugin.zip

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

インポート&動作確認

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

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

制限事項

  • レコード一覧画面でいいね!ボタンを表示させるためには、「レコード番号」フィールドと「作成日時」フィールドを一覧に含める必要があります。フィールドコードは初期設定から変更しないでください。
  • カテゴリ機能を利用しているアプリには対応していません。
  • 日本語にしか対応していません。

※kintoneプラグインはスタンダードコースでのみご利用いただけます。ライトコースではご利用いただけませんのでご注意ください。

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

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

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でできることはアプリでも同じような修正で対応できると考えておりました。

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

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

 

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