はじめに
スケジュールの参加者にちょっとしたアンケートを取りたいときに、オススメするカスタマイズです。
このカスタマイズを適用すると、「参加可能な日程を選んでください」「勉強会の事前準備は終わりましたか」「注文する弁当を選んでください」といった選択式のアンケートを実施できます。
完成イメージ
できること
- アンケートの設置
- アンケートは、予定の詳細画面の「メモ」の下に表示されます。
- アンケートの回答数や回答者の名前は、選択肢の横に表示されます。
- アンケートの削除
- 設置したアンケートを削除できます。
- アンケートの回答の締切や再開
- アンケートの回答を締め切ると、アンケートへの回答はできなくなります。
- アンケートの回答を締め切ると、アンケートへの回答はできなくなります。
- 未回答者への通知の送信
- アンケートに回答していない予定の参加者に、通知を送信できます。
- アンケートに回答していない予定の参加者に、通知を送信できます。
利用上の注意事項
- アンケート内容を変更したい場合は、アンケートを削除してもう一度設置し直してください。
- 1つのアンケートあたりの利用人数は、十数人程度を想定しています。
- アンケートに回答すると、他の予定の参加者に対して予定変更の通知が送信されます。
使い方
アンケートの設置
アンケートの設置は、次の手順で行います。
- 予定を追加します。
- 追加した予定を開き、予定の詳細画面を表示します。
- 「メモ」の下の[アンケートを作成する]リンクをクリックします。
- アンケートの内容を入力します。入力が終わったら、[アンケートを開始する]ボタンをクリックします。
項目 内容 説明欄 実施するアンケートの説明です。
選択肢の一覧の上部に表示されます。また未回答者への通知にも、ここで入力した文言が表示されます。選択肢 アンケートの選択肢を、1項目1行で入力します。 - アンケートが作成され、予定の詳細画面に設置されます。
アンケートの回答
アンケートの回答は、次の手順で行います。
- アンケートを設置している予定を開きます。
- 「メモ」の下にアンケートが表示されています。回答するには、アンケートの選択肢をクリックします。
- 回答内容を変更する場合は、他の選択肢をクリックします。
回答を取り消す場合は、クリックした選択肢をもう一度クリックします。
注意事項
- このカスタマイズには、クラウド版 Garoon の環境が必要です。
- モバイル画面および KUNAI では利用できません。
- スケジュールのカスタム項目（additionalItems）を利用するカスタマイズは、同時に適用できません。
- カスタマイズプログラムは、その動作を保証するものではありません。
- カスタマイズプログラムの技術的なサポート等は行っていません。
Garoon の設定
Garoon システム管理で、次の設定をします。
1. 外部通知の設定
[Garoon システム管理] > [各アプリケーションの管理] > [通知一覧] > [外部通知の設定] の順で「外部通知の追加」画面を開きます。
手順の詳細は、Garoon ヘルプ - API の外部通知の設定をご参照ください。
「外部通知の追加」画面では、次の内容を入力してください。
| 項目 | 設定する値 |
|---|---|
| ステータス | 「有効」を選択します。 |
| 許可する外部通知 | 「API」を選択します。 |
| 外部通知コード | 「garoonSurvey」と入力します。 |
| 表示名 | 任意の値を入力します。この記事では「未回答のアンケートがあります」としています。 |
| 許可するURL | 「https://{subdomain}.cybozu.com/g/schedule/*」と入力します。 {subdomain} を、利用している Garoon 環境のサブドメインに変更してください。 |
2. カスタマイズの適用
[Garoon システム管理] > [各アプリケーションの管理] > [スケジュール] > [JavaScript / CSSによるカスタマイズ] の順で選択し、「カスタマイズグループを追加する」画面を開きます。
手順の詳細は、Garoon ヘルプ - スケジュールのカスタマイズ設定をご参照ください。
「カスタマイズグループを追加する」画面では、次の内容を入力してください。
| 項目 | 設定する値 |
|---|---|
| カスタマイズ | 「適用する」を選択します。 |
| カスタマイズグループ名 | 任意の値を入力します。この記事では「Garoon スケジュールアンケート」としています。 |
| 適用対象 | カスタマイズを適用するユーザーやグループを選択します。 |
| JavaScript カスタマイズ | 次の順で、URL およびファイルを指定します。
|
| CSS カスタマイズ | 次の順で、URL およびファイルを指定します。
|
※1：grn_kit.css（Garoon html/css/image-Kit for Customize）の入手方法
grn_kit.css は、Garoon の見た目に調和する UI パーツのスタイルシートです。
- https://github.com/garoon/css-for-customize にアクセスします。
- [Clone or download] ボタンをクリックして、「Download ZIP」を選択します。
- ダウンロードした zip ファイルを解凍します。
- 解凍したファイルの「css」フォルダー下の「grn_kit.css」を利用します。
※2：sweetalert_button_grn.css の入手方法
sweetalert_button_grn.css は、Garoon に適用したときの SweetAlert のモーダルのレイアウト崩れを防ぐスタイルシートです。
- https://github.com/garoon/css-for-SweetAlert にアクセスします。
- [Clone or download]ボタンをクリックして、「Download ZIP]を選択します。
- ダウンロードした zip ファイルを解凍します。
- 解凍したファイルの「css」フォルダー下の「sweetalert_button_grn.css」を利用します。
サンプルコード
サンプルコード（JavaScript）
- テキストエディタを開いて、下記のコードの内容をコピー＆ペーストします。
- ファイルの拡張子「.js」、文字コードは「UTF-8（BOMなし）」で、ファイルに名前を付けて保存します。この記事では、ファイル名を questionnaire.js としています。
サンプルコード（css）
- テキストエディタを開いて、下記のコードの内容をコピー＆ペーストします。
- ファイルの拡張子「.css」、文字コードは「UTF-8（BOMなし）」で、ファイルに名前を付けて保存します。この記事では、ファイル名を questionnaire.css としています。
おわりに
このカスタマイズを適用すると、予定に関連するちょっとしたアンケートを実施できます。
他にも、cybozu developer network では、予定の調整に特化した、調整さん連携カスタマイズや往訪予定の調整カスタマイズを紹介しています。
この記事で利用している API
- Garoon JavaScript API
- Garoon REST API
この記事で利用しているライブラリ
- jQuery v3.4.1, ドキュメント（外部サイト）
Vue.js v2.5.22, ドキュメント（外部サイト） - SweetAlert2 v2.8.13, ドキュメント（外部サイト）
- Garoon html/css/image-Kit for Customize, ドキュメント
- css for SweetAlert on Garoon
このTipsは、2020年9月版 Garoonで確認したものになります。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。