製作・改造なんでもやっちゃう広くて浅い活動日誌

2011/01123456789101112131415161718192021222324252627282930312011/02

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
先日のPythonを使ってJSONPを返すコードと、PythonにGetメソッドでデータを送る方法があればJavascriptとPythonで双方向のデータのやりとりが出来ます。

結果はjQueryを使って表示していますので、以下のコードを使用する場合はjQueryをダウンロードしてhtmlと同じフォルダに置くか、ソースを適宜変更して下さい。

といっても、前回のコードからの主な変更点は、フォームの入力を増やしたことと、Pythonコードを読み込む時にGetメソッドに合うパラメータを加えた程度です。
Pythonの方ではクエリを読み込み、計算結果をJSONPで返しています。
最終的にJSONPにより呼び出されたcallback関数が「計算結果」の部分の文字を書き換えるようになっています。
エラー処理等は行なっていない最低限なコードなのでご了承下さい。
また、ローカルでCGIを試す場合はこちらの記事を参考にして下さい。

<html>
<head>
<title>JavascriptからPythonにGETで送ってJSONPで帰ってみる</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
function callback(json) {
$("#result").html("答えは "+json.answer);
}

function send() {
var s = document.createElement('script');
a = document.form1.a.value;
b = document.form1.b.value;
param = "?a="+a+"&b="+b
s.src = '/cgi-bin/jsonp.py'+param;
document.body.appendChild(s);
return false;
}
</script>
</head>
<body>
<form name="form1" onsubmit="return send()">
<input type="text" name="a" value="1"> +
<input type="text" name="b" value="2">
<input type="submit" value="計算" />
</form>
<div id="result">計算結果</div>
</body>
</html>


#GETメソッドでデータを受けとるおまじない
import os
import cgi

if 'QUERY_STRING' in os.environ:
query = cgi.parse_qs(os.environ['QUERY_STRING'])
else:
query = {}
#おまじない ここまで

a = int(query['a'][0]) #データaを整数として読み込む
b = int(query['b'][0]) #データbを整数として読み込む
c = a + b #aとbの足し算を行う

#出力
print "Content-Type:text/javascript"
print
print "callback({'answer':'%s'});"%(str(c))


例によって、結果を画像で示します。

js-python-js.html

計算ボタンをクリック↓

js-python-js.html 計算結果


ここまで出来れば多少複雑なことも出来るようになれるかな。



みんなのPython Webアプリ編 [みんなのシリーズ]みんなのPython Webアプリ編 [みんなのシリーズ]
柴田 淳

ソフトバンククリエイティブ
売り上げランキング : 248959

Amazonで詳しく見る
スポンサーサイト
Pythonを用いたCGIにGetメソッドを使ってデータを渡します。
Getメソッドというのは、
http://localhost:8000/test.html?a=1&b=2
みたいなもので、URLの後に「?」でワンクッション置いて、「データ名=データ」の組合せを「&」で連ねたものですね。

PythonではCGIモジュールを用いればちょっとおまじないを書くだけで簡単にこのデータ(クエリ)を取得できます。

実際のサンプルコードを以下に示します。
これはGetメソッドで送信される数字aと数字bの足し算を行うものです。
最低限のことしか書いていませんので、エラー処理等はしていません。
CGIをローカルで動かしたい場合はこちらを参考にして下さい。

#ここから
import os
import cgi
if 'QUERY_STRING' in os.environ:
query = cgi.parse_qs(os.environ['QUERY_STRING'])
else:
query = {}
#ここまでおまじない

a = int(query['a'][0]) #データaを整数として読み込む
b = int(query['b'][0]) #データbを整数として読み込む

#出力
print "Content-Type:text/html"
print
print "%d + %d = %d" % (a, b, a+b)


本手法ではクエリは辞書型で与えられますので、query['データ名'][0]でデータを取り出すことが出来ます。

これをhtmlのフォームから送信するとしたらこんな感じでOK
<html>
<head>
<title>GETメソッドでPythonに通信</title>
</head>
<body>
<form action="./cgi-bin/get.py">
<input type="text" value="1" name="a" /> +
<input type="text" value="2" name="b" />
<input type="submit" value="計算" />
</form>
</body>
</html>


このブログではPythonを置けないので実行結果を画像で表示しますが、こんな感じになります。

getmethod.html

計算ボタンをクリック↓

get.py

なんとなくわかったでしょうか?
次回はJavascriptと組み合わせたサンプルを作ってみたいと思います。



webアプリを作る上で、データのやり取りは何かしら必要になりますが、Javascriptで他のドメインと通信するにはJSONPという仕組みがあるみたいです。

詳しい仕組みに関しては、申し訳ありませんが他をあたって下さい。
ただ、私の理解としては「Javascriptのソースを読み込むと見せかけてデータを受けとり、同時に関数も実行する」手法というものでして、このデータと実行する関数名のセットをJSONPと呼び、
callback({"name1":"date1", "name2":"date2"});
こんな感じで記述します。
すると、このJSONPが読み込まれた時点で同じ名前の関数が実行され、中のデータを使用することが出来ます。
上記の例だとcallbackが呼び出される関数で、name1,name2がデータの名前、date1,date2がそれぞれのデータの中身です。
JSONPってこんな感じ?

せっかくなのでJavascriptとCGI(Python)を使ってJSONPのサンプルを作ってみました。
あいにく、ここのブログではCGIを使用できる環境がありませんので、先日の記事のようにローカルでCGIが動くようにして、クロスドメインでもなんでもないJSONPのデータ受け渡しをしてみます。
結果の表示にはjQueryによるhtmlの書き換えを使いました。
試しに動かしてみたい方は、jQueryよりスクリプトをダウンロードし、htmlファイルと同じフォルダに設置して、ソース中のjquery-1.5.1.min.jsを自分の持っているものに書き換えて下さい。


<html>
<head>
<title>jsonpを使ったテスト</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
function callback(json) {
$("#result").html(json.hoge);
}

function send() {
var s = document.createElement('script');
s.src = '/cgi-bin/jsonp.py';
document.body.appendChild(s);
return false;
}
</script>
</head>
<body>
<form onsubmit="return send()">
<input type="submit" value="送信" />
</form>
<div id="result">ここに結果が出る</div>
</body>
</html>


print "Content-Type:text/javascript"
print
print "callback({'hoge':'This is JSONP'});"


submitボタンを押すとsend()関数が呼び出され、cgi-binフォルダのjsonp.pyを呼び出します。
すると、データを引数にcallback関数が起動し、htmlが書き換えられています。

画像で申し訳ありませんが、実行結果はこんな感じです。

submit前

submit後


callback関数やjsonp.pyにいろいろ加えることで、より複雑なことが出来そうです。


フレディ VS ジェイソン [DVD]フレディ VS ジェイソン [DVD]
ロバート・イングランド,ケン・カージンガー,モニカ・キーナ,マーク・スウィフト,ダミアン・シャノン,ロニー・ユー

アミューズソフトエンタテインメント
売り上げランキング : 36184

Amazonで詳しく見る
Pythonを使ったCGIを作るにあたり、ローカルで簡単に動作確認したいなと思った時はこんなコード。

import CGIHTTPServer
CGIHTTPServer.test()

たったこれだけのコードを適当なフォルダで実行すると、プロンプトが起動して、そのフォルダが
http://localhost:8000
のルートフォルダになります。

フォルダの中身

したがって、そのフォルダにindex.html等を置いておけば http://localhost:8000 で見ることが出来ますし、cgi-binもしくはhtbinというフォルダを作れば、そのフォルダ以下ではCGIが動きます。
CGIといっても、拡張子は.pyのままで問題ありません。


CGIプログラミングCGIプログラミング
スコット グーリッジ,ガンザー バージニックス,シシャ ガンダヴァラム,Scott Guelich,Gunther Birznieks,Shishir Gundavaram,田辺 茂也,大川 佳織

オライリー・ジャパン
売り上げランキング : 285622

Amazonで詳しく見る
Pythonでテキストファイルを扱う時、
自分がよく使うものを纏めてサンプルプログラムっぽくしてみました。
FileIn.txtを読み込んでFileOut.txtを書き出します。


a = "";     # 空の文字列
b = 0; # 整数0
c = 0.0; # 浮動小数0.0
for l in open("FileIn.txt", 'r'): # ファイルを開き一行ずつ読み込む
if (l[0]=='#'): continue; # 一文字目が'#'ならスキップする
tmp = l.split(); # 行をタブやスペースで区切ってリスト化
a += tmp[0]; # 文字を繋げる
b += int(tmp[1]); # 文字をint()で整数に変換して足し合わせ
c += float(tmp[2]); # 文字をfloat()で小数に変換して足し合わせ
f = open("FileOut.txt", 'w'); # 保存用のファイルを作る
f.writelines("a="+a+"\n"+ # ファイルに書込み 文字列は'+'で繋げる
"b="+str(b)+"\n"+ # 整数はstr()で文字列に変換
"c="+str(c)+"\n"); # 浮動小数もstr()で文字列に変換
f.close() # 開いたファイルは閉じる

#CommentArea
Hello 2011 2.8
World 123 45

a=HelloWorld
b=2134
c=47.8


応用すればいろいろ使える……はず


みんなのPython 改訂版
みんなのPython 改訂版柴田 淳

Amazonで詳しく見る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。