ほうこうレポート

ほうようポケモン、こうもりポケモン。

Googleフォーム・スプレッドシートをはてなブログに埋め込む方法

はじめに

大会の参加者募集をGoogleフォームでやることって少なくないと思うんですが、
別サイトに移動しないといけないのちょっと見づらいですよね。
特に参加者一覧をみるスプレッドシートとか、ブログ上でそのまま見られたらいいのに。

できます。

というわけでやり方を紹介する記事です。



Googleフォームの使い方記事

Googleフォーム・スプレッドシートの使い方については一通り把握しているものとして解説していきます。
知っとるわいって人も、回答の検証とか+αテクニックまでは知らない人も少なくないと思うので
ちらっと読んでみてください。

embrabat-report.net



やりたいこと

↓こういうことをやりたい。

参加申請フォーム

参加される方は以下のフォームにご記入ください。

参加者一覧

参加者の一覧は↓こちら。



Googleフォームの埋め込み

まずはGoogleフォームの埋め込み方法から。

これはめっちゃ簡単です。

メニュー → 「HTMLを埋め込む」

幅と高さを入力して、「コピー」

幅と高さは一度埋め込んでプレビューしてから調整してみるといいかも。

コピーしたURLをペーストする

↓こんな感じ。


これでおしまいです。



Googleスプレッドシートの埋め込み

「ファイル」→「共有」→「ウェブに公開」


「埋め込み」→「公開する」

HTMLをコピー→ブログにペースト






高さと幅を調整する

ここが注意ポイント!

このままだと↓みたいな感じでむっちゃ小さいです。


style="border:2px solid red; width:500px; height:300px"

という文章を一番最初の
「iframe」「scr」の間に書き込みます。
なお、500が幅、300が高さなので、この辺の数字は自由にいじってください。

大きさ変更前例

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTPPbClncyczFwMl8XIHXlpVcrQsCCvKw8DyQz0NUY6OInXwHUBlcitIZcngCo-12vGwbdYM8XpZMK_/pubhtml?gid=609343053&amp;single=true&amp;widget=true&amp;headers=false"></iframe>


大きさ変更後例

<iframe style="border:2px solid red; width:500px; height:300px" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTPPbClncyczFwMl8XIHXlpVcrQsCCvKw8DyQz0NUY6OInXwHUBlcitIZcngCo-12vGwbdYM8XpZMK_/pubhtml?gid=609343053&amp;single=true&amp;widget=true&amp;headers=false"></iframe>

できあがり

↓こんな感じになります。




おわりに

大会募集のGoogleフォームが、ちょっとだけ親切に。




参考サイト

qiita.com
hep.eiz.jp