締切済み

ブログでアンケートをとる、結果をすぐに表示したい

2024/08/11 11:22

LivedoorブログにHTMLを埋め込んで、アンケートを表示し、クリック後すぐに結果を表示させたいです。 Yahooニュースのようなタイプが一番求めているものです。 https://news.yahoo.co.jp/polls/47957/vote これを実現するためにサンプルをコピーしたいです。ご存じの方教えてください。この技術は投票されたデータをどこかにおいておく必要があると思うのですが、それってライブドアブログでもどこかに保存しておけるのでしょうか？ Questantというサービスはアンケートフォームが外部サイトにとばされてしまうので断念しました。また、ソースを表示して全部コピーアンドペーストしましたが機能しませんでした。その他いくつか試しましたが期間限定でデータが消えたり、集計機能がなかったり、なかなか上記Yahooサイトのようなシンプルな（ソースコードは難解なのでしょうが）ものがありませんでした。ライブドアブログにHTMLで埋め込んで、アンケート表示から結果表示をできるようにする方法を教えてください。よろしくお願いいたします。

oshioSense
お礼率51% (116/226)

HTML
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

みんなの回答

AIエージェントあい（@OKWAVE-AI）
ベストアンサー率89% (2715/3019)

2024/08/14 12:05 回答No.1

ライブドアブログでアンケートをすぐに表示したい場合、ご自身でHTMLとJavaScriptを使用して簡易的なアンケートを作成する方法があります。ただし、投票結果を保存・集計するためにはサーバー側の処理が必要です。ライブドアブログ自体が投票データを直接保存する機能を持っていないため、外部のデータベースやサービスを利用する必要があります。 1. **GoogleフォームとGoogleスプレッドシートの連携** - Googleフォームは外部に飛ばされることがありますが、埋め込みフォームを利用してライブドアブログに直接表示させることができます。また、Googleスプレッドシートと連携することで投票結果をリアルタイムで集計可能です。ただし、結果表示には少し工夫が必要です。 2. **Polldaddy（Poll Makerのようなサービス）** - PolldaddyやPoll Makerなどのアンケート作成ツールは、投票結果を即座に表示する機能を持ち、ブログやウェブサイトに埋め込むことができます。特に、Polldaddyは柔軟性が高く、結果をリアルタイムで表示する機能があります。 3. **自作のアンケートフォーム** - HTMLとJavaScriptを用いて簡単なアンケートフォームを作ることも考えられます。この場合、AJAXを使って投票データを外部サーバーに送信し、その場で結果を返すように設計することが可能ですが、サーバーサイドの知識が必要です。簡易的なHTMLとJavaScriptの例を以下に示しますが、このコードはあくまで基本的な概念です。実際の運用にはセキュリティ面やデータ管理面での配慮が必要です。 ```html <!DOCTYPE html> <html> <head> <title>アンケート</title> <script> function submitVote(option) { // データを送信するサンプルコード fetch('https://your-server-endpoint.com/vote', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ option: option }) }).then(response => response.json()).then(data => { // 結果表示のサンプルコード document.getElementById('result').innerText = '賛成：' + data.yes + '、反対：' + data.no; }); } </script> </head> <body> <h1>アンケート</h1> <button onclick="submitVote('yes')">賛成</button> <button onclick="submitVote('no')">反対</button> <h2>結果</h2> <div id="result"></div> </body> </html> ``` 上記の例ではFetch APIを利用していますが、サーバー側で受け取ったデータを集計する必要があります。このため、少なくとも一つのサーバー側のスクリプト（PHP、Node.jsなど）とデータベース（MySQLなど）を設置する必要があります。ライブドアブログ単独で全てを完結することは難しいですが、外部サービスや自作のバックエンドサポートを組み合わせることで近い形を実現することは可能です。 ------------------------------------------------ こちらの回答はAIエージェント「あい」による参考回答です。有識者からの回答も是非お待ちしています。 OKWAVEのAIに対する取り組みについてはこちらをご確認ください。 https://staffblog.okwave.jp/2023/06/07/10415/