検索
Close
カテゴリー内の他の記事

Garoon スケジュールでアンケートを実施するカスタマイズ

作成日
更新日

Index

 

2020年11月26日に、アンケートを設置後に選択肢を追加できるなどの修正を行いました。
すでに Garoon へ当該カスタマイズを適用している場合は、サンプルコード（JavaScript）の内容を差し替えてください。

はじめに

スケジュールの参加者にちょっとしたアンケートを取りたいときに、オススメするカスタマイズです。

このカスタマイズを適用すると、「参加可能な日程を選んでください」「勉強会の事前準備は終わりましたか」「注文する弁当を選んでください」といった選択式のアンケートを実施できます。

完成イメージ

できること

予定の詳細画面における、アンケートを設置したときのイメージ

  • アンケートの設置
    • アンケートは、予定の詳細画面の「メモ」の下に表示されます。
    • アンケートの回答数や回答者の名前は、選択肢の横に表示されます。
      回答数や回答者の名前が表示されます

  • 選択肢の追加
    • アンケートの設置後に、選択肢を追加できます。
      アンケート設置後に選択肢を追加できます

  • アンケートの削除
    • 設置したアンケートを削除できます。
  • アンケートの回答の締切や再開
    • アンケートの回答を締め切ると、アンケートへの回答はできなくなります。
      アンケートの回答を締め切ったときのイメージ
  • 未回答者への通知の送信
    • アンケートに回答していない予定の参加者に、通知を送信できます。
      未回答者への通知のイメージ

利用上の注意事項

  • アンケートの説明欄を変更したり、追加済みの選択肢を削除したい場合は、アンケートを削除してもう一度設置し直してください。
  • 1つのアンケートあたりの利用人数は、十数人程度を想定しています。
  • アンケートに回答すると、他の予定の参加者に対して予定変更の通知が送信されます。

使い方

アンケートの設置

アンケートの設置は、次の手順で行います。

  1. 予定を追加します。
  2. 追加した予定を開き、予定の詳細画面を表示します。
  3. 「メモ」の下の[アンケートを作成する]リンクをクリックします。
  4. アンケートの内容を入力します。入力が終わったら、[アンケートを開始する]ボタンをクリックします。
    アンケートの作成画面のイメージ
    項目 内容
    説明欄 実施するアンケートの説明です。
    選択肢の一覧の上部に表示されます。また未回答者への通知にも、ここで入力した文言が表示されます。
    選択肢 アンケートの選択肢を、1項目1行で入力します。
  5. アンケートが作成され、予定の詳細画面に設置されます。

アンケートの選択肢を追加する

  1. [選択肢を追加する]ボタンをクリックします。
    [選択肢を追加する]をクリックします

  2.  追加したい選択肢をフォームに入力します。入力が終わったら、[追加]ボタンをクリックします。
    入力後、[追加]ボタンをクリックします

アンケートの回答

アンケートの回答は、次の手順で行います。

  1. アンケートを設置している予定を開きます。
  2. 「メモ」の下にアンケートが表示されています。回答するには、アンケートの選択肢をクリックします。
    選択肢をクリックして回答します
  3. 回答内容を変更する場合は、他の選択肢をクリックします。
    回答を取り消す場合は、クリックした選択肢をもう一度クリックします。

注意事項

  • このカスタマイズには、クラウド版 Garoon の環境が必要です。
  • モバイル画面および KUNAI では利用できません。
  • スケジュールのカスタム項目（additionalItems）を利用するカスタマイズは、同時に適用できません。
  • カスタマイズプログラムは、その動作を保証するものではありません。
  • カスタマイズプログラムの技術的なサポート等は行っていません。

Garoon の設定

Garoon システム管理で、次の設定をします。

  1. API 外部通知の設定
  2. カスタマイズの適用

1. 外部通知の設定

[Garoon システム管理] > [各アプリケーションの管理] > [通知一覧] > [外部通知の設定] の順で「外部通知の追加」画面を開きます。
手順の詳細は、Garoon ヘルプ - API の外部通知の設定をご参照ください。

「外部通知の追加」画面では、次の内容を入力してください。

項目 設定する値
ステータス 「有効」を選択します。 
許可する外部通知 「API」を選択します。
外部通知コード 「garoonSurvey」と入力します。
表示名 任意の値を入力します。この記事では「未回答のアンケートがあります」としています。
許可するURL 「https://{subdomain}.cybozu.com/g/schedule/*」と入力します。
{subdomain} を、利用している Garoon 環境のサブドメインに変更してください。

2. カスタマイズの適用

[Garoon システム管理] > [各アプリケーションの管理] > [スケジュール] > [JavaScript / CSSによるカスタマイズ] の順で選択し、「カスタマイズグループを追加する」画面を開きます。
手順の詳細は、Garoon ヘルプ - スケジュールのカスタマイズ設定をご参照ください。

「カスタマイズグループを追加する」画面では、次の内容を入力してください。

項目 設定する値
カスタマイズ 「適用する」を選択します。 
カスタマイズグループ名 任意の値を入力します。この記事では「Garoon スケジュールアンケート」としています。
適用対象 カスタマイズを適用するユーザーやグループを選択します。
JavaScript カスタマイズ 次の順で、URL およびファイルを指定します。
  1. https://js.cybozu.com/jquery/3.4.1/jquery.min.js
  2. https://js.cybozu.com/vuejs/v2.5.22/vue.min.js
  3. https://js.cybozu.com/sweetalert2/v8.13.0/sweetalert2.min.js
  4. questionnaire.js（カスタマイズファイル）
    詳細は、サンプルコード（JavaScript）を参照してください。
CSS カスタマイズ  次の順で、URL およびファイルを指定します。
  1. https://js.cybozu.com/sweetalert2/v8.13.0/sweetalert2.min.css
  2. grn_kit.css ※1
  3. sweetalert_button_grn.css ※2
  4. questionnaire.css（カスタマイズファイル）
    詳細は、サンプルコード（css）を参照してください。

※1：grn_kit.css（Garoon html/css/image-Kit for Customize）の入手方法
grn_kit.css は、Garoon の見た目に調和する UI パーツのスタイルシートです。

  1. https://github.com/garoon/css-for-customize にアクセスします。
  2. [Clone or download] ボタンをクリックして、「Download ZIP」を選択します。
  3. ダウンロードした zip ファイルを解凍します。
  4. 解凍したファイルの「css」フォルダー下の「grn_kit.css」を利用します。

※2：sweetalert_button_grn.css の入手方法
sweetalert_button_grn.css は、Garoon に適用したときの SweetAlert のモーダルのレイアウト崩れを防ぐスタイルシートです。

  1. https://github.com/garoon/css-for-SweetAlert にアクセスします。
  2. [Clone or download]ボタンをクリックして、「Download ZIP]を選択します。
  3. ダウンロードした zip ファイルを解凍します。
  4. 解凍したファイルの「css」フォルダー下の「sweetalert_button_grn.css」を利用します。

サンプルコード

サンプルコード（JavaScript）

  1. テキストエディタを開いて、下記のコードの内容をコピー＆ペーストします。
  2. ファイルの拡張子「.js」、文字コードは「UTF-8（BOMなし）」で、ファイルに名前を付けて保存します。この記事では、ファイル名を questionnaire.js としています。

サンプルコード（css）

  1. テキストエディタを開いて、下記のコードの内容をコピー＆ペーストします。
  2. ファイルの拡張子「.css」、文字コードは「UTF-8（BOMなし）」で、ファイルに名前を付けて保存します。この記事では、ファイル名を questionnaire.css としています。

おわりに

このカスタマイズを適用すると、予定に関連するちょっとしたアンケートを実施できます。
他にも、cybozu developer network では、予定の調整に特化した、調整さん連携カスタマイズや往訪予定の調整カスタマイズを紹介しています。

この記事で利用している API

この記事で利用しているライブラリ

変更履歴

  • 2020年11月26日
    • 機能改善
      • アンケートを設置するときの入力項目（「説明欄」「選択肢」）が必須項目になりました
      • アンケートの設置後に、選択肢を追加できるようになりました
    • 不具合修正
      • 0 や false など、 false と判定される値を選択肢に指定できるように修正しました

 

このTipsは、2020年11月版 Garoonで確認したものになります。

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

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

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