４月ですね。年度が変わると気持ちが引き締まる思いがしていましたが、国外にいるとそんな雰囲気は全くありません。学期末テストの準備やサマーインターンの申し込み、プロジェクトの締め切り間近でどたばたしています。今春は桜を見れなかったのが残念ですが、花粉の影響がなかったのでプラマイ０です。
先週は北極圏まであとわずかのフィンランド 北部、ロヴァニエミへオーロラを見てきました。今年は10年程度に一度のオーロラ活発期とあって、３泊中に２夜オーロラを見ることができました。この時期は気温も-８度くらいとまだ活動しやすく、泊まったホテルの屋上で快適に見ることができました。
[ホテル屋上から見えるオーロラ Photo by Kentaro Mabe]
しかし、問題だったのは日中です。たまたまイースター 休日と旅行日程がかぶってしまい、外出をしても公共機関は閉まってるし、商業施設は早く閉まる。また、予てから見たかったアルヴァ・アアルト 設計のロヴァニエミ図書館は閉館してる上に工事中で写真にもおさめられない。日中はホテルで読書したり、インターネッツ したり、コーディングしたりというような生活です。残念ながら近くの商業施設まで片道30分ほどあるので、そうめったに外出はしませんでした。一緒に行った友達はサンタ村に興味があったようですが、僕はそんなになかったので保留です。その中、一番時間をかけていたのがWEBデザインのお手伝いでした。
結婚お披露目会の案内をWEBで行うということで、僕は最初は助言程度だったのですが最終的にはゼロからコーディングすることになりました。その主な原因がフォームに埋め込みできない画像、動画、地図です。 Google Docs のフォームはアンケートなどでとても有効なのですが、型式指定がきつくカスタムがデフォルトではできません。そこで、そのフォームを利用しつつカスタムしてみることにしました。今回は、フォームの作成、新しいhtmlページの作成を行います。
Google Docs の解体と再構築をしていたのでメモがわりに記録しておきます。（もしかしたらこういうのはGoogle Docs の規約違反 なのかもしれないけど…。）色々と探してもなかったので、きっと本職の人にとったらどうでもいい情報なのかもしれないですが、僕のような初心者には大きな情報だったので。きっと誰かが今後アンケートなりで利用してくれると思います。
製作環境：Macbook Pro Dropbox
まずはフォームを作成
ここは説明しませんが、Google Docs のフォームを作成してください。この時に地図や動画を埋め込みたいところがあれば適当にテキスト打ち込んで分かりやすくするのも手ですが、後にhtmlでいじるのでいらないでしょう。
[こんな感じのフォームを作成]
フォームのソースを表示
先程の画像上部にもある「ライブフォームを表示」をクリックすると入力フォームが出てきます。（Chrome の場合）サイトを右クリックし、ソースを表示させてください。僕は英語になっていますが、日本語でも同じような感じで出てると思います。
[View Page Sourceをクリック]
上手にコピペ、文字コード と form action と inputが重要
続いて、CotEditorで適当なwebpageのコードを書きましょう（下記参照）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset="utf-8">
<title>フォームのカスタム</title>
</head>
<body>
これは本文です。
</body>
</html> ここに先ほど非表示したGoogle Docs のソースを一部コピペします。重要なのは＜form action〜＞と＜input〜＞で挟まれた部分です。divのclassやidはスタイルシート 用の記述なので削ってしまっても構いません。今回はCSS は使いません。
必要な箇所を抜き取り、先程のコードに足します。今回は以下のようにします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>フォームのカスタム</title>
</head>
<body>
これは本文です。<form action="https://docs.google.com/forms/d/ここにフォームのリンクを/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">
<br>
名前：
<input type="text" name="entry.719400388" value="" class="ss-q-short" id="entry_719400388" dir="auto">
<br><br>
性別：<input type="radio" name="entry.2110305272" value="男性" id="group_2110305272_1" class="ss-q-radio" aria-label="男性"> 男性 <input type="radio" name="entry.2110305272" value="女性" id="group_2110305272_2" class="ss-q-radio" aria-label="女性"> 女性 <input type="radio" name="entry.2110305272" value="その他" id="group_2110305272_3" class="ss-q-radio" aria-label="その他"> その他
<br>
<input type="hidden" name="draftResponse" value="[]">
<input type="hidden" name="pageHistory" value="0">
<input type="submit" name="submit" value="送信" id="ss-submit">
<div class="ss-secondary-text">Google フォームでパスワードを送信しないでください。<br>Powered by
<a class="ss-logo-link" href="http://docs.google.com"><img class="ss-logo" src="https://ssl.gstatic.com/docs/forms/drive_logo_small.png" alt="Google ドライブ"></a>
<br>
<a href="https://docs.google.com/forms/d/ここにフォームのリンクを/reportabuse?source=https://docs.google.com/forms/d/ここにフォームのリンクを/viewform">不正行為の報告</a>
-
<a href="http://www.google.com/accounts/TOS">利用規約</a>
-
<a href="http://www.google.com/google-d-s/terms.html">追加規約</a>
<script type='text/javascript' src='/static/forms/client/js/2803853122-formviewer_prd.js'></script>
<script type="text/javascript">_initFormViewer();</script>
</body>
</html> このファイルをhtml形式で、Dropbox のPublicフォルダに保存してください。できたファイルが公開されたら右クリックからパブリックリンクのコピーを選択肢、ブラウザで開いてみましょう。
フォームのカスタム これは本文です。Google フォームでパスワードを送信しないでください。
Powered by
不正行為の報告 -
利用規約 -
追加規約
すると上記のようなフォームが出来上がっているとお思います。ここで絶対にいじっていけないのは、文字コード 『utf-8 』、＜form action〜＞タグ、文字コード を変更してしまうと日本語で入力したフォームを送信したときに文字化けが発生し、読むことができなくなります。＜form action＞タグは入力したフォームを送信する部分なので削ってしまうと入力はできても送信できません。あとはみなさんでいじりながらやっていきましょう。この時点でもうフォームに入力し、送信までが出来上がっています。当然結果を見ることもできるので一度試してみたほうがいいでしょう。それでは続いて、地図と動画をhtmlに埋め込みましょう。
コピペとサイズ
もうここまで来れば終わったも同然です。僕は会場までの地図（ルート）とそのルート紹介ビデオを入れたかったので＜iframe＞タグでさきのhtmlコードにコピペし、表示しています。Google MapとYoutube の埋め込みコードは街灯サイトにて即発行できます。
表示したいところへコピペし、成形すると以下のように表示できます。ここで発行したものはそれぞれwidth="〜"とheight="〜"で表示サイズを変更できるので、自分のサイトに合わせて変えましょう。
最終的なコードはこんな感じです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>フォームのカスタム</title>
</head>
<body>
<br>これは本文です。<br>
地図<br>会場までのルート<br><iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?f=d&source=s_d&saddr=%E4%BA%AC%E9%83%BD%E9%A7%85&daddr=%E4%BA%AC%E9%83%BD%E5%BA%9C%E4%BA%AC%E9%83%BD%E5%B8%82%E5%BD%B9%E6%89%80%E5%89%8D%E9%A7%85&hl=ja&geocode=FfLVFQIdu38XCCm_sTfBrggBYDGlPjJIoWh0Mw%3BFbs5FgId_aoXCCk1Z6uHkggBYDEVqijqSuJmAw&aq=0&oq=%E4%BA%AC%E9%83%BD%E5%B8%82%E5%BD%B9%E6%89%80&sll=35.011053,135.769644&sspn=0.020352,0.038624&brcurrent=3,0x6001061f709ae1b3:0x24b6e0f6cc19d7d,0&ttype=now&noexp=0&noal=0&sort=def&mra=ls&ie=UTF8&t=m&start=0&ll=34.998225,135.763962&spn=0.025373,0.008701&output=embed"></iframe><br /><small><a href="https://maps.google.co.jp/maps?f=d&source=embed&saddr=%E4%BA%AC%E9%83%BD%E9%A7%85&daddr=%E4%BA%AC%E9%83%BD%E5%BA%9C%E4%BA%AC%E9%83%BD%E5%B8%82%E5%BD%B9%E6%89%80%E5%89%8D%E9%A7%85&hl=ja&geocode=FfLVFQIdu38XCCm_sTfBrggBYDGlPjJIoWh0Mw%3BFbs5FgId_aoXCCk1Z6uHkggBYDEVqijqSuJmAw&aq=0&oq=%E4%BA%AC%E9%83%BD%E5%B8%82%E5%BD%B9%E6%89%80&sll=35.011053,135.769644&sspn=0.020352,0.038624&brcurrent=3,0x6001061f709ae1b3:0x24b6e0f6cc19d7d,0&ttype=now&noexp=0&noal=0&sort=def&mra=ls&ie=UTF8&t=m&start=0&ll=34.998225,135.763962&spn=0.025373,0.008701" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>
<br>京都の動画<br><iframe width="420" height="315" src="http://www.youtube.com/embed/PjCHwurBi5o" frameborder="0" allowfullscreen></iframe><form action="https://docs.google.com/forms/d/ここにフォームのリンクを/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">
<br><br>
名前：
<input type="text" name="entry.719400388" value="" class="ss-q-short" id="entry_719400388" dir="auto">
<br><br>
性別：<input type="radio" name="entry.2110305272" value="男性" id="group_2110305272_1" class="ss-q-radio" aria-label="男性"> 男性 <input type="radio" name="entry.2110305272" value="女性" id="group_2110305272_2" class="ss-q-radio" aria-label="女性"> 女性 <input type="radio" name="entry.2110305272" value="その他" id="group_2110305272_3" class="ss-q-radio" aria-label="その他"> その他
<br>
<input type="hidden" name="draftResponse" value="[]">
<input type="hidden" name="pageHistory" value="0">
<input type="submit" name="submit" value="送信" id="ss-submit">
<div class="ss-secondary-text">Google フォームでパスワードを送信しないでください。<br>Powered by
<a class="ss-logo-link" href="http://docs.google.com"><img class="ss-logo" src="https://ssl.gstatic.com/docs/forms/drive_logo_small.png" alt="Google ドライブ"></a>
<br>
<a href="https://docs.google.com/forms/d/ここにフォームのリンクを/reportabuse?source=https://docs.google.com/forms/d/ここにフォームのリンクを/viewform">不正行為の報告</a>
-
<a href="http://www.google.com/accounts/TOS">利用規約</a>
-
<a href="http://www.google.com/google-d-s/terms.html">追加規約</a>
<script type='text/javascript' src='/static/forms/client/js/2803853122-formviewer_prd.js'></script>
<script type="text/javascript">_initFormViewer();</script>
</body>
</html>
終わりに
というわけで、Google Docs のフォームをカスタマイズして新しいhtmlの作成を行いました。自分のサーバーに入れてアンケートを作成するもよし、このままDropbox で公開するもよしでしょう。（公に公開しないような、頻繁に開かれるようなサイトを作らない場合は。）もし検索ボットに引っかからないようにするならそのためのタグを打ち込んでもいいかもしれません。
これを応用するとフォーム自身ではできなかったテキストボックス、ラジオボタン を横並びに配置することもできますし、BGMを入れたりすることも当然可能です。アンケート用紙特有のつまらなさを排除することができ、参加率が上がるかもしれません。以上、メモでした。
