2012年4月21日土曜日

フォームからPOSTし、googleスプレットシートを更新するサンプル

ここを参考した、ありがとう御座いました。
つまり、googleスプレットシートをデータベースのように利用する。

① まず、googleドキュメントでスプレットシートを新規作成、シート名を"DATA"に変更する
② ツール → Script Editorを開け、このサイトからスクリプトをコピペする
③ スクリプトのfunction名「doGet」を「doPost」に変更して、保存、プロジェクト名は任意
④ 関数選択で「setUp」を選択し、実行、ポップアップした「Authorization required」にAuthorizeし、完了メッセージのページが表示される
⑤ もう一回「setUp」を実行、今回は何も表示しない
⑥ 「公開」→「サービスとして公開」、ポップアップ窓で、「Allow anyone to invoke this service」、「Allow anonymous access」、「Enable Service」をチェック、URLをコピー(重要)、最後「保存」
⑦ スプレットシートに戻って、A,B,C列の一行目に「name」、「age」、「sex」を入力
⑧ そしてHTMLを作る、UTF8で編集してね
<html>
<head>
<title>GoogleスプレットシートAPIテスト</title>
<script type="text/javascript">
<!--
function validateForm(){
  if(document.getElementById("name_input").value==""){
    alert("なんか書いてくださいよ!");
    return false;
  }else{
    document.getElementById("formID").submit();
    document.getElementById("thankyou").style.display="";
    document.getElementById("thankyou").innerHTML="登録ありがとう御座いました!";
    document.getElementById("formID").style.display="none";
  }
}
-->
</script>
</head>
<body>
<div style="display:none;" id="thankyou"></div>
<iframe src="#" id="fake-target" name="fake-target" style="width:0px; height:0px; border:0px;">
</iframe>
<form id="formID" action="https://docs.google.com/macros/exec?service=AKfycbzzoShgn4aUhFE4HLhUk2c41OCsMX8GOBru-nep" method="post" target="fake-target">
名前:<input type="text" name="name" id="name_input"/>
年齢:
<select name="age" id="age_input">
<option value="10">10歳</option>
<option value="20">20歳</option>
<option value="30">30歳</option>
<option value="40">40歳</option>
<option value="50">50歳</option>
</select>
性別:
<input type="radio" name="sex" id="sex_m" value="male" />男
<input type="radio" name="sex" id="sex_f" value="female" />女
<button onClick="javascript:validateForm();">送信</button>
</form>
</body>
</html>
⑨ ここのinputエレメントのname属性はそれそれスプレットシートに対応していますよ

スプレットシートのURL、登録後、確認してみてください。
https://docs.google.com/spreadsheet/ccc?key=0Akp-AdfTe-rCdE4weUFsMU1BUWlKMkNLLXBDQ2hiSGc

デモ、実際やってみてください!
名前:
年齢:
性別:

1 件のコメント:

  1. お陰様で、同じように作ることが出来ました!!!!
    もし、タイムスタンプを同時に記録する方法があれば、教えて頂きたいです。

    返信削除