こんにちは！今回は、Bubbleで使用できるノーコードラボが作成したテンプレート「Survey Maker」をご紹介します。このテンプレートはGoogleフォームのクローンアプリで、アンケートの作成・編集等の基本的な操作をGoogleフォームとほぼ同じUIで行うことがます。
Googleフォームはアンケートの作成・集計が容易にできるアンケートツールです。Googleアカウントがあれば誰でも無料で利用できることから一度は利用したことがある方も多いのではないでしょうか。
記事では、BubbleのMarketplaceのテンプレートを使用する方法や「Survey Maker」でできることを紹介しておりますので、ぜひ最後までご覧ください。テンプレートも試してみてくださいね！
Bubbleテンプレート
まずは、Bubbleのテンプレートについてご紹介します。テンプレートはBubbleの利用者が作成・公開している、Bubbleチームのレビュー済みのカスタマイズして使えるアプリです。
テンプレートには、ページ、要素、スタイル、ワークフローが含まれており、ユーザーはテンプレートをインポート後カスタマイズして開発を進めることができます。開発効率化につながりますね。
テンプレートはMarketplace > Templatesで公開されています。
フリーワードやカテゴリーからテンプレートを探すこともできます。ChatやLanding page、Online storeなど汎用性の高いものから、DashboardやProject management、SaaSなど、様々なカテゴリーがあります。
テンプレートは無料のものと有料（使用開始時に料金が発生）のものがあります。料金はテンプレートの一覧と詳細ページで確認できます。
下記の通り、テンプレートの料金は2種類のライセンスで用意されています。使用ケースに合わせて適切なライセンスで購入してください。
- Standard license…個人向けライセンス。個人的な目的で使用する場合にはこちらのライセンスで購入することが出来ます。このライセンスで購入した場合、第三者向けに構築されたアプリにテンプレートを使用することはできません。
- Developer licence…開発者向けライセンス。ビジネス、または第三者向けに構築されたアプリにテンプレートを使用する場合はこちらのライセンスで購入する必要があります。
なお、どちらのライセンスでも1回の購入につきテンプレートを使用できるアプリケーションの数に制限はありません。
Survey Maker
概要
それでは、ノーコードラボ作成の「Survey Maker」をご紹介していきます。
今回作成したテンプレートでは、アンケートの作成、アプリのユーザーへのアンケート配信と回答、回答集計結果の閲覧ができます。
Googleフォームとの違いは、アプリのユーザーへのアンケート配信ができるところです。ユーザーは、ログイン後にホームで回答受付中のアンケート一覧からアンケートを選択して回答することが出来ます。
Data type
このテンプレートのDta typeは下記の通りです。
| No. | Data type名 | 保存している内容 |
|---|---|---|
| 1 | Answer | 質問一つに対する回答 |
| 2 | Answer Tree | Answerが紐づく親 |
| 3 | Option | 選択肢 |
| 4 | Quetion | 質問 |
| 5 | Section | セクション |
| 6 | Survey | アンケート |
| 7 | User | ユーザー |
ページ
このテンプレートでは下記のページを使用できます。
adminlogin
管理者ログイン・サインアップページです。ログイン・サインアップのモードを切り替えて、管理者権限を持つアカウントを作成したり、管理者アカウントでログインすることができます。
index
管理者トップページです。新しいアンケートの作成や、作成したアンケートの一覧から編集するアンケートの選択ができます。右上のアイコンから一般ユーザートップページ（Home）を表示することもできます。管理者アカウントのみがアクセスできます。
| No. | 項目 | 説明 |
|---|---|---|
| 1 | 新規アンケート作成 | 新規アンケートを作成してこのアンケートの編集ページ（editor）を表示する。 |
| 2 | 作成済みアンケート一覧 | 作成済みのアンケートを表示する。クリックしてこのアンケートの編集ページ（editor）を表示する。 |
| 3 | 新しいタブで開く | このアンケートの編集ページ（editor）を新しいタブで表示する。 |
| 4 | 削除 | このアンケートを削除する。 |
| 5 | 名前変更 | このアンケートタイトルを変更する。 |
| 6 | 利用者Homeへ移動 | 現在のアカウントで一般ユーザー向けトップページ（home）を表示する。 |
| 7 | ログアウト | ログアウトして管理者ログイン・サインアップページ（adminlogin）を表示する。 |
editor
アンケートの編集と回答結果の確認ができるページです。管理者アカウントのみがアクセスできます。
タブごとに説明していきます。まず、質問タブではアンケートや質問を編集できます。
アンケート全体については下記の機能を実装しています。
| No. | 項目 | 説明 |
|---|---|---|
| 1 | アンケートタイトル編集 | アンケートのタイトルを編集できる。 |
| 2 | アンケート説明編集 | アンケートの説明を編集できる（任意）。 |
| 3 | サムネイル設定 | アンケートのサムネイル画像をアップロードできる。このサムネイルは、管理者トップページ（index）や一般ユーザートップページ（home）のアンケート一覧と、回答ページ（form）で表示される。 |
| 4 | テーマカラー設定 | アンケートのテーマカラーを紫・緑・青・赤・オレンジ・グレーの中から選択できる。 |
| 5 | 回答ページを表示 | このアンケートの回答ページを新しいタブで表示する。 |
| 6 | 公開設定 | アンケートを一般ユーザーに表示する（回答受付状態にする）設定ができる。ここでオンにしたアンケートが一般ユーザートップページ（home）で表示される。 |
| 7 | アンケートコピー作成 | 現在表示しているアンケート・質問・選択肢をコピーして新規アンケートを作成できる。 |
各質問について実装している機能は下記の通りです。
| No. | 項目 | 説明 |
|---|---|---|
| 1 | 問い編集 | 質問の問いを編集できる。 |
| 2 | 回答形式選択 | 質問の回答形式を短文・長文・チェックボックス・ラジオボタン・プルダウンから選択できる。 |
| 3 | 説明追加・削除 | 問いの補足説明を使用するか設定できる。 |
| 4 | 説明編集 | 説明を編集できる。③で説明の使用を設定している場合に表示される。 |
| 5 | コピー | この質問と選択肢をコピーして新規質問を作成できる。 |
| 6 | 削除 | この質問と選択肢を削除できる。 |
| 7 | 必須設定 | 回答の必須・任意を設定できる。 |
| 8 | 質問追加 | 新規質問をこの質問の後に作成できる。 |
| 9 | セクション追加 | セクションを新規作成できる。 |
| 10 | 表示順変更 | 質問の表示順を一つ前にできる。 |
| 11 | 画像追加 | 質問の画像をアップロードできる。ここでアップロードされた画像は回答ページ（form）の質問の問いの下部に表示される。 |
各選択肢については下記の機能を実装しています。
| No. | 項目 | 説明 |
|---|---|---|
| 1 | ラベル編集 | 選択肢のラベルを編集できる。 |
| 2 | 画像追加 | 回答形式がチェックボックス・ラジオボタンのとき、選択肢の画像をアップロードできる。 |
| 3 | 表示順変更 | 選択肢の表示順を一つ前にできる。 |
| 4 | 選択肢追加 | 選択肢を新規作成できる。 |
| 5 | その他追加 | 回答形式がチェックボックスのとき、回答時に「その他」を選択できるようにできる。 |
| 6 | 選択肢削除 | この選択肢を削除できる。 |
セクションについては下記の機能を実装しています。
| No. | 項目 | 説明 |
|---|---|---|
| 1 | セクションタイトル編集 | セクションのタイトルを編集できる。 |
| 2 | セクション説明編集 | セクションのタイトルの補足である「説明」を編集できる（任意）。 |
| 3 | モード切り替え | セクションのタイトルと説明を編集できる状態と、編集できないプレビュー状態の変更ができる。 |
| 4 | セクション削除 | このセクションを削除する。 |
次に、回答の内容や集計結果を確認できる回答タブです。
回答タブでは下記を表示する機能を実装しています。
| No. | 項目 | 説明 |
|---|---|---|
| 1 | アンケート回答数 | このアンケートの回答数が表示される。 |
| 2 | 質問回答数 | この質問の回答数が表示される。 |
| 3 | 質問 | このアンケートの質問が表示順の通り表示される。 |
| 4 | 回答 | 回答形式が長文・短文の質問のとき、回答が表示される。 |
| 5 | 選択肢の回答数・割合 | 回答形式がチェックボックス・ラジオボタン・プルダウンの質問のとき、選択肢ごとの回答数と、この質問の回答数における割合が表示される |
userlogin
一般ユーザーのログイン・サインアップページです。ページの構成や機能はadminlogin（管理者サインアップ・ログインページ）と同じです。一般ユーザーとしてアカウントを作成したり、ログインすることができます。
home
一般ユーザーのトップページです。ログイン後に表示されます。公開状態に設定されているアンケートが一覧で表示され、アンケートをクリックすると回答ページ（form）に移動します。
| No. | 項目 | 説明 |
|---|---|---|
| 1 | 回答受付中のアンケート | 公開状態に設定されているアンケートが一覧で表示される。アンケートをクリックして回答ページ（form）を表示する。 |
| 2 | 管理者トップに移動 | 管理者トップページ（index）に移動する。管理者アカウントでログインしている場合のみ表示される。 |
| 3 | ログアウト | ログアウトして一般ユーザーログインページ（userlogin）を表示する。 |
form
アンケートに回答するページです。選択したアンケートの回答を入力して送信します。
| No. | 項目 | 説明 |
|---|---|---|
| 1 | サムネイル | アンケートのサムネイルが表示される。 |
| 2 | アカウントを切り替える | アンケート回答には現在ログイン中のアカウントが紐づくが、アカウントを変更したい場合はログアウトして別のアカウントで再ログインすることができる。 |
| 3 | テキスト回答入力 | 質問の回答形式が短文・長文のとき、自由回答を入力できる。 |
| 4 | チェックボックス・ラジオボタン回答選択 | 質問の回答形式がチェックボックス・ラジオボタンのとき、回答を選択できる。 |
| 5 | その他選択・入力 | 質問でその他が選択可能のとき表示され選択できる。選択後、自由回答を入力できるようになる。 |
| 6 | プルダウン回答選択 | 質問の回答形式がプルダウンのとき、回答を選択できる。 |
| 7 | 送信 | クリックして回答を確定・送信できる。必須の質問がある場合は、回答有無を確認して送信できるようになる。回答送信後、回答完了ページ（thankyou）へ移動する。 |
| 8 | フォームをクリア | ページを再読み込みして新しい回答を作成する。 |
ちなみに、2つ目以降のセクションでは下記のように表示されます。
| No. | 項目 | 説明 |
|---|---|---|
| 1 | セクションタイトル | このセクションのタイトルが表示される。 |
| 2 | セクション説明 | このセクションのタイトルが表示される。説明が空欄の場合表示されない。 |
thankyou
アンケート回答完了ページです。アンケート回答ページ（form）で「送信」ボタンをクリック後表示されるページです。
| No. | 項目 | 説明 |
|---|---|---|
| 1 | Homeに戻る | 一般ユーザートップページ（home）に移動する。 |
まとめ
今回は、ノーコードラボが作成したテンプレート「Survey Maker」をご紹介しました。
BubbleのデータベースとGoogleフォームを連携したいと感じたことがある方もいらっしゃるはずですが、思い切ってBubbleでGoogleフォームのようなアンケートツールを構築してみるのはいかがでしょうか？ぜひこのテンプレートをご活用ください！
