いいねプラグイン

目次

概要

レコード一覧画面とレコード詳細画面に「いいね!」ボタンを設置できるプラグインです。

注意事項

  • サンプルプラグインに関するお問い合わせは、APIサポート窓口へのお問い合わせの対象外です。
  • kintoneプラグインは、スタンダードコースでのみ利用できます。
  • プラグインをv1。ゼロからアップデートする場合、アップデート前の「いいね!」したユーザーといいね数は引き継がれません。
    アップデート後は、プラグインの設定画面で設定を再保存してください。

制限事項

  • 【いいね!】を押した後に続けてレコードを編集する場合は、編集前に画面を更新してください。

プラグインの機能

レコード一覧画面で、いいね!をつけることができます。いいね!の数も確認できます。

レコード詳細画面では、いいね!したユーザーも確認できます。

プラグインのパッケージング

プラグイン化の手順の詳細は kintoneプラグイン開発手順を参照してください。

STEP1:ソースコードのダウンロード

GitHub (External link) にアクセスしてフォルダーごとダウンロードしてください。
「examples/vote」が、このプラグインのソースコード一式です。

ファイルの構成

「examples/vote」配下のファイル構成は次のとおりです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
examples/vote
├── README.md
├── css
│   ├── 51-modern-default.css
│   ├── config.css
│   ├── mobile-vote.css
│   └── vote.css
├── html
│   └── config.html
├── image
│   └── icon.png
├── js
│   ├── config.js
│   ├── mobile-vote.js
│   └── vote.js
└── manifest.json
css
  • 51-modern-default.css
    サイボウズが提供しているプラグイン設定画面のスタイルです。
  • config.css
    設定画面のスタイルです。
  • vote.cssmobile-vote.css
    いいね!ボタン調整用のスタイルです。
html
  • config.html
    プラグイン設定画面のHTMLです。
image
  • icon.png
    プラグインのアイコンファイルです。

js
  • config.js
    プラグイン設定画面のプログラムです。ここでは、次の処理を行っています。

    • 「保存」ボタンが押された時に、設定した値をプラグインの変数に代入する。
    • 「キャンセル」ボタンが押された時に、前の画面へ戻る。
    • すでにプラグインの変数が設定されている場合は、各フィールドに値を設定する。
  • vote.jsmobile-vote.js
    いいね!機能を提供するのプログラムです。ここでは、次の処理を行っています。

    • レコード一覧画面の「レコード番号」フィールドにいいねボタンを追加し、ボタンが押されたときにいいねの数やユーザーを更新する。
    • レコード詳細画面の「レコード番号」フィールドにいいねアイコンボタンを追加し、ボタンが押されたときにいいねの数やユーザーを更新する。
    • レコード追加/編集画面で、「いいねした人」と「いいねの数」に使われるフィールドを編集不可とする。
manifest.json

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

STEP2:パッケージング

plugin-packerの手順を参考にパッケージングします。

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

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

SAMPLE_like_plugin_v1.7.2.zip

プラグインの設定

STEP1:プラグインの読み込み

kintoneシステム管理画面で、パッケージングしたファイル(zipファイル)を読み込みます。
ファイルからプラグインを読み込む (External link)

STEP2:アプリの設定

  1. アプリを追加します。

  2. 次のフィールドを配置します。

    フィールド フィールドの種類 備考
    「いいねした人」のフィールド ユーザー選択
    「いいねの数」のフィールド 数値

ほかのフィールドの配置は任意です。

STEP3:プラグインの追加と設定

  1. アプリの設定画面を開き、プラグインを追加します。
    アプリにプラグインを追加する (External link)

  2. プラグインの設定画面を開き、項目を設定します。

    項目名 必須 説明
    「いいねした人」に使うフィールド 必須 いいねしたユーザーに使うユーザー選択フィールドを選択します。
    「いいねの数」に使うフィールド 必須 いいねしたユーザー数に使う数値フィールドを選択します。
  3. 【保存】をクリックします。

  4. 「アプリの設定」画面で、【設定完了】をクリックします。

STEP4:動作確認

  1. レコードを追加します。
  2. レコード一覧画面で、【いいね!】をクリックします。いいねの数が増えることを確認します。
  3. レコードを追加し、追加したレコードのレコード詳細画面を開きます。
  4. 【いいね!】をクリックします。いいねの数が増えて、いいねしたユーザーが表示されることを確認します。

更新履歴

  • 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月5日v1.5を公開
    • v1.4で発生する、管理者権限を持たないユーザーが一覧画面で「いいね!」できない不具合を修正しました。
  • 2018年6月1日v1.6を公開
    • 設定項目のローカライズ対応(英語)を行いました。
    • ゲストスペース内のアプリで、一覧画面でも「いいね!」ボタンが表示されるように修正しました。
    • 作成日時のフィールドコードが『作成日時』以外でも動くように修正しました。
    • 設定画面の説明文を追加、修正しました。
    • 設定画面の選択項目(ドロップダウン)のデザインを修正しました。
    • 一覧にレコード番号を表示していない場合、エラーメッセージが表示される問題を解消しました。
      一覧にレコード番号を表示していない場合、「いいね」ボタンは表示されず一覧からのいいねはできません。
  • 2018年7月6日v1.6.1を公開
    • 設定項目のローカライズ対応(中国語)を実施しました。
  • 2019年12月4日v1.7.0を公開
    • モバイル版においてレコード詳細画面で「いいね!」ボタンが表示されるようにしました。
  • 2023年2月15日v1.7.1を公開
    • 次のアクセシビリティ対応を実施しました。
      • 「いいね!ボタン」にタブキーでフォーカスできる。
      • エンターキーでクリックできる。
  • 2023年11月9日v1.7.2を公開
    • プラグインのhomepage_urlを修正しました。

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