script google app comment form

徒労であるがこのファイルのように唯のhtmlにgoogle spread sheetを利用してコメント欄をつくることもできる。

コメント欄の作成では、script google appのようにデータの受信が必要になるとともに、googleアンケートフォームを利用した入力フォームの組み込み、取得データの順序選択的取得が必要となる。

先のようにスプレッドシートを作成し、public属性にする。
URLは

https://spreadsheets.google.com/ccc?key=0Ahx8FrCtx3TOdGl0WW94WnUtT0lKLXpzMWJHeDl5VkE&hl=en

であった。

そしてTOOL > FORMに進みフォーム作成ページを開く
./img/fm.jpg

右上のADD ITEMボタンで複数行のフォームも追加、一行のフォームもそれぞれ必須にした

target html textfield
writer name
data textarea

./img/fm2.jpg

下のリンクを開くと実際のフォームを見ることができる
./img/fm3.jpg

このフォームがあれば誰でも先のspread sheetにレコードを追加できることになる。
試しにここで記入して送信してみればスプレッドシートに追加されることが分かる。また列名もgoogle側で作成する

'' 右クリックしてソースコードを見る ''

そしてフォームのところを切りとる

<form action="https://spreadsheets.google.com/spreadsheet/formResponse?formkey=dGl0WW94WnUtT0lKLXpzMWJHeDl5VkE6MQ&amp;ifq" method="POST" id="ss-form">

<br>
<div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_0">target html
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_0"></label>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0"></div></div></div>
<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_1">writer name
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_1"></label>
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1"></div></div></div>
<br> <div class="errorbox-good">

<div class="ss-item ss-item-required ss-paragraph-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_2">data
<span class="ss-required-asterisk">*</span></label>
<label class="ss-q-help" for="entry_2"></label>
<textarea name="entry.2.single" rows="8" cols="75" class="ss-q-long" id="entry_2"></textarea></div></div></div>
<br>
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">


<div class="ss-item ss-navigate"><div class="ss-form-entry">
<input type="submit" name="submit" value="Submit"></div></div></form>

これを自分のページに組込追加すれば、そのページからデータを送信できる
求めていない値は消した。また、xhtml使用にするため 「/>」をにinputの末尾を変更した

<form action="https://spreadsheets.google.com/spreadsheet/formResponse?formkey=dGl0WW94WnUtT0lKLXpzMWJHeDl5VkE6MQ&amp;ifq" method="POST" id="ss-form">
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" />
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" />
<textarea name="entry.2.single" rows="8" cols="75" class="ss-q-long" id="entry_2"></textarea>
<input type="hidden" name="pageNumber" value="0" />
<input type="hidden" name="backupCache" value="" />
<input type="submit" name="submit" value="Submit" />
</form>

そしてentry.0.singleはこのファイル名を当てるためhidden属性にし、valueをこのファイル名に書き換える.
自分はjavascriptで書き換えている

<input type="hidden" name="entry.0.single" value="藻類HOME" class="ss-q-short" id="entry_0" />

送信してみる

仮にfoo.html

<html>
<body>
<form action="https://spreadsheets.google.com/spreadsheet/formResponse?formkey=dGl0WW94WnUtT0lKLXpzMWJHeDl5VkE6MQ&amp;ifq" method="POST" id="ss-form">
<input type="hidden" name="entry.0.single" value="藻類HOME" class="ss-q-short" id="entry_0" />
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" />
<textarea name="entry.2.single" rows="8" cols="75" class="ss-q-long" id="entry_2"></textarea>
<input type="hidden" name="pageNumber" value="0" />
<input type="hidden" name="backupCache" value="" />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

として保存、開いて送信してみると、写真のようにフォームが遷移してちゃんとspreadsheetに記録される

./img/fm4.png
./img/fm5.jpg

script google app comment form 2

関連: script google app script google app comment form 3 script google app comment form 2 script
土, 4 30, '11

Leave your comments
    inserted by FC2 system