2010年12月31日金曜日

Google App Engine+Pythonで問い合わせフォーム作成(完成)

Google App Engine+Pythonで問い合わせフォーム完成しました。
いやーいろいろありましたが、年内にどうにか間に合いました。
問い合わせ確認画面で他のinput項目と同じように、問い合わせ内容を表示用に"{{contentchar|escape }}"で引き渡し、さらに <input type="hidden" name="content"・・・で戻った場合の引き渡し用としていたのを、残っていた問題も師匠にアドバイスもらい、<textarea>でreadonlyとして、<input type="hidden" name="content"・・・を止めたら、うまくいきました。


この問い合わせフォームの作成で、以下のことを習得しました。
①Google App Engine環境
   →PC側へのインストール、local側での実行、サーバー側へのアップロード、サーバー側での実行
②Pythonプログラミング
   →Pythonの仕組み、構成、デバッグ、画面遷移
③PythonとHTMLの関係
   →HTMLの分離、PythonからHTMLへのデータ引渡し、HTMLからPythonへのデータ引渡し
④Javascriptでの入力必須チェック
   →Javascriptの分離、Javascriptからのフォーム呼び出し制御
⑤スプレッドシートへの書き出し
   →セルの制御、データ書き出し
⑥メール送信
   →メールメッセージの編集、bccでの送付

技術的にHTMLを少しやっただけだったので、最初はうまくいかないことの連続でした。
わかったこと(教訓)は、欲張らないことですね。ロジックの変更やHTMLの変更を欲張ると、どこが悪いのかわからなくなってしまうので、少しずつ着実に進めて行くことが、結局は早道であることを実感した、半月でした。

今、紅白でSMAPがとりを歌っています。2010年ももうすく終わりです。
来年もよろしくお願いします。

それではみなさん、よいお年を。

Google App Engine+Pythonで問い合わせフォーム作成(その後2)

問い合わせフォーム作成ですが、やっと一通りの処理ができるようになりました。

①問い合わせ入力画面 ・・・ Javascriptでの必須入力チェック
                                      [確認]ボタンで②の確認画面を表示
        ↓
②問い合わせ確認画面 ・・・ 入力されたデータの引継ぎ
                                      [修正]ボタンで①の入力画面を再表示
        ↓                           [送信]ボタンで確認メールを送信後、③の確認画面を表示
③完了画面

ひっかかったところは、[修正]ボタンで①の入力画面を再表示するところ。ロジックがどこを流れるかわからなかったところと、データの引渡し方法に苦労しました。
Pythonではprint文、JavascriptではAlertを入れて流れを確認しつつ、トライ&エラーで進めて、ようやくここまで辿り着いたという感じです。

一つだけうまくいっていないところがあり、問い合わせ内容に"Textarea"を使っているんですが、②→①の入力画面を再表示する際に、この"Textarea"だけデータが引き継げないのです。
①→②でHTMLの <input type="hidden" name="XXXXXX" value="{{ XXXXXX|escape }}にデータを渡しているんですが、このデータを①を再表示する際Getしているんですが、内容が表示されません。"Textarea"のデータの引継ぎはJavascriptでやるしかないのかなぁ。

2010年12月19日日曜日

Google App Engine+Pythonで問い合わせフォーム作成(その後)

さて、Pythonで問い合わせフォーム作成ですが、師匠のアドバイスを受け、問い合わせフォーム画面と確認フォーム画面の遷移をGoogle App Engineのデータストアに保存することなく、コードをシンプル化することまでできました。


コードは以下の通り。
 'template/contact.html'と 'template/confirm.html'はFrontPageで作成しました。



# -*- coding:utf-8 -*-


import cgi
import wsgiref.handlers
import os
from google.appengine.ext.webapp import template
from google.appengine.ext import webapp


class ContactForm(webapp.RequestHandler):
  def get(self):
    template_values ={}


    path = os.path.join(os.path.dirname(__file__), 'template/contact.html')
    self.response.out.write(template.render(path, template_values))


class ConfirmForm(webapp.RequestHandler):
  def get(self):

    template_values = {
       'company' : self.request.get('company'),
       'division' : self.request.get('division'),
       'yourname' : self.request.get('yourname'),
       'furigana' : self.request.get('furigana'),
       'mailaddress' : self.request.get('mailaddress'),
       'tel' : self.request.get('tel'),
       'R1' : self.request.get('R1'),
       'content' : self.request.get('content'),
       'agree' : self.request.get('agree') ,
      }


    path = os.path.join(os.path.dirname(__file__), 'template/confirm.html')
    self.response.out.write(template.render(path, template_values))


def main():
    application = webapp.WSGIApplication(
                                     [('/', ContactForm),
                                      ('/confirm', ConfirmForm),
                                      ],
                                     debug=True)
    wsgiref.handlers.CGIHandler().run(application)


if __name__ == "__main__":
  main()


今、確認フォームの「送信」ボタンで、スプレッドシートに書き込む機能を追加しようとしていますが、gdataのモジュールがうまく認識されなくて、またまた苦戦してます。Googleのヘルプは英語が多いということもありよくわからないし・・・
うまくいったらまたブログにアップします。





2010年12月14日火曜日

Google App Engine+Pythonで問い合わせフォーム作成(経過)

いやー。やっぱり苦戦しました。
Pythonはなんとなくわかるものの、HTMLファイルとの関連がよくわからなかったのと、日本語の文字化けを解消するのに時間がかかりました。

pyファイルの文字化けは、ネットで調べたら先頭に # -*- coding:utf-8 -*- を入れれば解消されることがすぐにわかったが、HTMLファイル側の文字化けは、ネットではunixやLinux環境の事例が多く、utf-8形式でにすればいいことはわかったが、Windowsでどうするのかわからなかった。
HTMLファイルをFrontPageで開いて試行錯誤してるうちに、Web設定でutf-8に変更できることがわかり、ようやく解消しました。それと昔ホームページをFrontPageで作っていたことが役に立ち、表作成や背景色の入力フィールドの作成等が簡単にできるようになりました。
これで問い合わせ画面からの入力で、Google App Engineのデータストアに保存できるとこまではできたので、後は確認画面への切替と必須項目チェック、スプレッドシート連携、メール自動までやりたいので、まだまだ先は長いです。明日、近くのGoogle App Engine+Pythonの師匠にお会いしてレクチャーしてもらうので、何とか目処を付けたいです。

作成した問い合わせフォーム

問い合わせ確認フォーム

FrontPageのWeb設定画面

2010年12月12日日曜日

Apps Scriptでフォーム送信時に自動返信する機能を作成

昨日、試行錯誤しながらも、自動送信までいけたので、今日はホームページの問い合わせフォームとか、セミナー申し込みフォーム等への実装を完了。久しぶりのScript作成だったので、苦労したところもありますが、思ったより簡単でした。

せっかくなので、テストしたコンパクト版を公開します。

①Google Apps Scriptの Script Editorを開く












②スプレッドシートで名前付けされた範囲を設定
















③Scriptを作成













scriptの内容は以下の通り。
項目名で取得する方法もありますが、セル番号取得しています。
プログラミングは久しぶりなのでスマートではないかも。
※もし、おかしいところがあればコメントください。

function responsemail() {
  try{    
  sh = SpreadsheetApp.getActiveSpreadsheet();
  r = sh.getRangeByName("sheetRange");
  var s = r.getRowIndex();
  var e = r.getLastRow();
  var l = r.getColumnIndex();
  //設定した範囲の行数を定義(タイトル行含む)
  var j = 40 ;

  Logger.log([s,e,l]);
    for(var i=1; i< e-1 ; i++){
      Logger.log([i,r.getCell(i, 1).getValue(),r.getCell(i, 2).getValue()]);
      if(r.getCell(i, 1).getValue() == "")  break;
      if(r.getCell(i, 3).getValue() != "SENT"){ 
         MailApp.sendEmail(r.getCell(i,1).getValue(), "XXXXXXXXXXからの自動返信", "この度はお問い合わせを頂きまして、誠にありがとうございます。\n本メールはXXXXXXXXX株式会社にWebサイトでお問い合わせを頂いた方に自動返信で送信しております。\n\n\n------------  ご送信内容の確認  ------------\n以下の内容が送信されました。"+"\nメールアドレス : "+r.getCell(i, 1).getValue()+"\n電話番号 : "+r.getCell(i, 2).getValue() , 
         {cc : "xxxxxxxxx@xxxxxxxx.com"});
         r.getCell(i, 3).setValue("SENT");
    }
    if(e > j-2 ){
      //設定した範囲の行数に達したら管理者にメールを送信する 
      MailApp.sendEmail("xxxxxxxxx@xxxxxxxx.com", "***error*** Range overflow", "スプレッドシートの名前付けされた範囲の行数に達しました。行を拡張してください。 getLastRow="+e);
    }

  }
  }catch(e){
     //エラーが発生した場合に管理者にメールを送信する
       MailApp.sendEmail("xxxxxxxxx@xxxxxxxx.com", "***error*** Auto Mail Send", "予期しないエラーが発生しました。 message="+e);
  }
}

※自動返信が正常実行されると、メール送信ステータスに"SENT"が格納されます。
※ログ確認も組み込んでます。


④メニューTrigger > Current Script's triggers ...を選択







⑤Runに対象scriptを、Eventsに from Spredsheet - On form submitを選択







⑥フォームから入力して送信

















⑦スプレッドシートで確認



⑧自動返答メールを確認











※スプレッドシート更新時のメール通知(共有-メール通知の設定)は、解除しました。

2010年12月11日土曜日

恵比寿はクリスマスムードいっぱいだった

今日は、久しぶりに恵比寿に行ったが、どこもクリスマスムードでいっぱいでした。
12月も中旬なので、当然といえば当然か。

入力フォームに自動メール送信機能を付けたくて、Apps Scriptを作成し始めたが、なかなかうまくいかなかった。やっとセルの内容をメール送信することができたので、何とかなりそう。



2010年12月10日金曜日

Google App Engine+Pythonでチュートリアルを実行

Google App EngineのPython版チュートリアルをやってみた。

Google App EngineのサイトにあるPython用のチュートリアル


まず、以下の2つをダウンロード
・Python の Web サイトから Python 2.7をダウンロード
・Google App EngineのサイトからApp Engine SDK をダウンロード

最初、PC側の環境がよくわからなかったが、やっと解明した。

PC側の環境はコマンドプロンプトから
①cd C:\Program Files\Google\google_appengineでApp Engineのフォルダに移動
②任意のアプリのID名(mksite-app)でフォルダ作成
③フォルダ配下にチュートリアルの指示通りファイルを作成
④google_appengine/dev_appserver.py mksite-app/でWebサーバーを起動

チュートリアルの内容
このチュートリアルでは以下を習得します。

  • Python を使用して App Engine アプリケーションを構築する方法
  • Web アプリケーション フレームワーク「webapp」を使用する方法
  • Python 用のデータ モデリング API で App Engine データストアを使用する方法
  • App Engine アプリケーションに Google アカウントを統合してユーザーを認証する方法
  • アプリケーションで Django テンプレートを使用する方法
  • 作成したアプリケーションを App Engine にアップロードする方法
このチュートリアルでは、ユーザーが公開メッセージ ボードにメッセージを投稿できる簡単なゲストブック アプリケーションを作成し、実装する方法を習得します。
結果は以下の通り。 チュートリアルの説明内容が難解だったけど、なんとか感じは掴めたかな。