【拡散希望！！！】noteの記事内でリアルタイムで結果が変わる「アンケート生成ツール」を無料公開します！

こんにちは、「まる。」です。

昨日、無料でデータベースを構築する方法を模索していたところ、
ふと面白いアイデアが浮かび、熱量そのままにツールを急造しました！

その名も、「note用アンケート生成ツール」です！！！

noteを書いていて、

「読者の皆さんに意見を募りたいな」

と思う場面、ありますよね？

一応、Googleフォームなどを使う方法もありますが、回答にGoogleアカウントへのログインが必要な場合が多く、
読者の方にとっては少しハードルが高いのが難点でした。😅

また、note上にアンケート結果をリアルタイムで反映させるには、GAS（Google Apps Script）を組むなど…
技術的な壁も立ちはだかります。😇

そこで、
「誰でも簡単にアンケートを作成できて、結果がその場でパッと反映される」
……そんなツールを自作しました！

難しいことはなにもありません！

「回答者側のログイン不要」
「ポチッと押した瞬間にグラフが伸びる快感」
「二重投票の防止」

…など、使い心地にもこだわっています。

（突発的に急いで作ったので、もし不具合があったらごめんなさい！😅
その時はコメント欄で優しく教えていただけると助かります🙏）

1.回答者側の操作

お試しで、一つアンケートを用意しています。

こちらを元に投票方法を解説します。

ステップ1：「Run Pen」をクリック

埋め込み枠の中央に表示されている 「Run Pen」 というボタンをクリックしてください。

これがアンケートを読み込むための「起動スイッチ」になっています。

ステップ2：選択肢をポチッと選ぶ！

アンケート項目が表示されたら、あなたが投票したい項目を クリック（またはタップ） するだけで投票完了です。😎

投票した瞬間にみんなの集計結果がリアルタイムに反映され、グラフがググッと伸びる様子が見られますよ！

ステップ3：やり直しも自由自在

「あ、やっぱりこっちの意見に変えたい！」という時は、
下にある 「投票をやり直す」 ボタンを押せば、いつでも回答を修正できます。👍

2.主催者側の操作（アンケートの作り方）

続いて、アンケートを作成する主催者側の操作を解説します。

必要なステップは以下の3つだけです。

• 事前準備：無料サービス「CodePen」のアカウントを作成する。

• 作成：専用フォームでアンケート内容を入力する。

• 公開：CodePenにコードを保存し、noteに貼り付ける。

ステップ1 : CodePen（コードペン）に登録する

このアンケート機能は、ブラウザ上でプログラムを実行できるオンライン開発ツール 「CodePen」 を利用しています。

ジェネレーターが作成した専用コードをCodePen側に渡して「保存」する仕組みになっているため、
あらかじめアカウント登録（無料）が必要になります。

💡念のためCodePenについて補足！

■CodePen

https://codepen.io/trending

■アカウントの作成方法

アカウントの作成方法についてもご紹介します。

まずはCodePenの公式サイトへアクセスし、トップ画面中央にある 「無料で登録する」 ボタンをクリックします。

必要事項を入力、若しくはGoogleアカウントでサインアップします。

これで準備OKです！

ステップ2 :アンケートを作成する

CodePenの準備ができたら、
専用の作成ツールを使ってアンケートの中身を組み立てましょう。

■note用アンケート作成ツール

画像のように、入力項目は非常にシンプルです。

• 1. 「質問文」を入力する
  読者に聞きたい問いかけを入力します。

• 2. 「選択肢」を入力する
  デフォルトでは2つ用意されていますが、
  足りない場合は 「＋ 選択肢を追加」 ボタンで自由に追加できます。

• 3. 「CodePenを自動生成する」をクリック
  入力が終わったら、一番下の青いボタンを押してください。

ステップ3 : アンケートを保存する

ジェネレーターの「CodePenを自動生成する」ボタンを押すと、
自動的にCodePenの編集画面が開きます。

画面が開いたら、右上に表示されている 「Save」 ボタン（画像の赤線部分）をクリックして保存してください。

これで、アンケートの作成と保存はすべて完了です！

ステップ4 : URLをコピーしてnoteに貼り付ける

保存が終わったら、noteに張り付ける為のリンクをコピーします。

1. ブラウザのURLをコピーする
   ブラウザの一番上にあるアドレスバー（https://codepen.io/...）を選択してコピーします。
   

2. noteに貼り付けて「Enter」！
   あとはnoteの執筆画面でそのURLを貼り付け、キーボードの「Enter」を押すだけ。
   （これで貼り付けられなければ、
   note上で「＋」ボタン　⇒　埋め込み　⇒URLをぺースト
   でいけます。）

3.利用規約（という名の、ゆるいお願い）

基本的には、無料でどなたでも・どんな用途でも、好きなだけ自由にお使いいただけます！

事前の利用報告なども一切不要ですので、皆さんのnote活動に気軽に取り入れてみてください。

ただ……もしよろしければ、

• この記事への「スキ」やフォロー

• 「使ってみたよ！」というコメント

• （気が向いたら……！）次回の開発の励みになる心ばかりのサポート（投げ銭）

などをいただけると、まる。が小躍りして喜びます😏

4.今後の運用と「大切なお知らせ」

本ツールは、私が開発中のカードゲーム『HorizonNotes』の公式サイトと同じNetlifyやFirebaseというデータベースの無料枠をお借りして運用しています。

そのため、もし予想を上回る大反響をいただき、

通信量の限界（無料枠）を超えてしまった場合、
一時的に「新しいアンケートが作成できない」という状況になる可能性があります😅

「作成済みのアンケート」は止まりません！

ここが一番大事なポイントですが、
すでに作成してnoteに貼り付けてあるアンケートが、ツールの制限によって動かなくなったり消えたりすることはありません。

このシステムは、アンケートを表示・集計する仕組み（Firebase）を作成ツールとは切り離して設計しているため、
万が一ツール側が止まっても、公開済みのアンケートは元気に動き続けます。

どうぞご安心ください！

アップデートと不具合報告

基本的には「気が向いた時のゆるいアップデート」になりますが、

不具合や「こんな機能が欲しい！」という要望があれば、
ぜひこの記事のコメント欄で教えてください。📗

皆さんの声を聞きながら、少しずつ使いやすく育てていければと思っています。

宣伝

最後に、ちょこっとだけ宣伝させてください！

私は普段、「まる。」という名前で、
最新のゲームエンジン「Unreal Engine 5（UE5）」を駆使して、
完全自作の対戦型カードゲームRPG 『HorizonNotes』 を開発しています。

実は、今回このアンケートツールを作ったのも、

「制作中のゲームのイラスト案やパラメータについて、読者の皆さんの意見をもっと気軽に、リアルタイムで聞いてみたい！」

と思ったのがきっかけでした。

ゲーム開発の進捗は、私の情熱が溢れたタイミングで…🤭
日々更新しています。

もしよろしければ、アンケートツールと一緒に、
この『HorizonNotes』が形になっていく様子も併せて応援していただけると、開発者としてこれ以上の喜びはありません！😆

それでは、素晴らしいnoteライフを！🍀

■開発記事

■ゲーム紹介

■自信作のストーリー紹介記事はこちら

また、ゲームに登場するキャラクター募集企画も実施してますので宜しければご応募ください😆

◾️キャラクター募集企画　記事

#アンケート #note #個人開発 #便利ツール #HorizonNotes #プログラミング   #拡散希望 #作ってみた #まる #note用アンケート生成ツール
#アンケート機能