主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

GAEで一つのWebアプリを作るのに必要だったものをまとめる

                
tags:
先日Webアプリ(bcdchest)を公開した。以前に作ったWindowsアプリ(所有物管理アプリ)をWeb上に移したという形なのだけども。


ブラウザで動くものを作るのは初めてだった。↑にあるものを作るためにどんなことをしたかを書き連ねてみたい。



0. 脳みそにすごく簡単な設計図を描く、設計図を細かく詰めていく
 出来上がりがどんなものかを漠然と想像した。次にクライアント側ではどんな画面が表示されるかを想像した。そこからクライアント側で画面表示のためにどういう処理をするかを想像し、最後にサーバー側の処理を想像した。ここからクライアント側の画面表示ではHTMLとCSS、その画面表示の処理にJavascriptを使い、サーバー側でpythonが使えることを割り出した。



1. まずWebページの骨格を作るためにHTMLとCSSを
 クライアント側で表示される画面を想像しながら、それを再現するには・・・ということを意識しながらHTMLとCSSを学んだ。
『HTMLとCSSで基礎から学ぶWebデザイン』という本を買ったが、機能紹介より、いかに文をきれいに見やすくまとめるかというところに重点を置いていたのでとても気に入った。
 本を読みながらクライアントで表示される画面のHTMLとCSSの骨格を作って次に移った



2. 動的ページにするためにJavascript
 クライアント側で要求がなければ余計な部分は表示したくなかった。その余計な部分を隠しておくために、動的ページにする必要があったのでJavascriptを使った。
参考にしたのは『初めてのJavaScript』。内容は他言語でプログラミング自体を勉強していなければ、ちょっととっつきづらかったと思う。
 Javascriptで主に使ったのは、正規表現とDOMによる要素の書き換え。
 正規表現を使えば、文字列から任意の条件に沿う要素を抽出してくれる。たとえば、XMLのような文字列から任意のタグ付けされた項目だけ抜き出したいとする。XMLは要はタグ付けされた文字列なので、正規表現の検索で欲しい項目だけ抜き出せる。


itemTag = new RegExp('<Title>(.*?)</Title>','g');
splited=xml.match(itemTag);

変数xmlにこれが文字列として入っていた場合、変数splitedにはTitleタグで囲まれた文字が返る。リストの形で。クリックによって動的にページの表示内容を増やしたい場合、これから表示したい内容が規則正しくリストに収まっているととてもやりやすい。

 続いてDOMによるWebページ中の要素の書き増し。たとえばHTML本文にIDが"CD"のdiv要素があったとして、下記のスクリプトを実行する。

document.getElementById('CD').innerHTML = "新しい内容";

"="代入演算子を使うとその要素全体を、右辺の内容にするということである。div要素"CD"の内容は"新しい内容"だけになってしまう。しかし私がやりたかったのは"書き増し"。書き増しにしたい場合は複合代入演算子が使える。

document.getElementById('CD').innerHTML += "追加分";

これをマウスイベントにからめれば、クリックするごとにページの表示内容を増やしていくことができる。

 正規表現を使ってXMLから必要な情報を抜き出してリスト化し、DOMのinnerHTMLを使って表示内容を書き増しできるようにする。これでクライアント側は大筋完成。


3. サーバー側でのデータ処理pythonとwebapp フレームワーク
 GAEサーバーを立てるのは初めてで、今回のことをやるにあたって、GAEの公式チュートリアルを参照した。逆に言えば、それ以外は特に必要なものがなかった。チュートリアルを試してみるだけで、自分のWebアプリを公開するために、ここまでに作ったHTMLとCSSとJavascript、そしてここでのpythonをどう組み合わせればいいかは容易に分かった。
 まずapp.yamlでリクエストに対してスクリプトを走らせて何かを返すか、画像やテキストをそのまま返すかを宣言する。次にスクリプトを書く。たとえば/mainにアクセスされたら"main"、/subにアクセスされたら"sub"と返したいとする。そうしたらまず、webapp.WSGIApplicationにアドレスごとに処理を行うクラスを渡す。そして処理クラスの中のself.response.out.writeに返したい文字を渡すだけである。

from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app

class Main(webapp.RequestHandler):
def get(self):
self.response.headers['Content-Type'] = 'text/plain'
self.response.out.write('main')

class Sub(webapp.RequestHandler):
def get(self):
self.response.headers['Content-Type'] = 'text/plain'
self.response.out.write('sub')

application = webapp.WSGIApplication(
[('/main', Main)],
('/sub', Sub)],
debug=True)

def main():
run_wsgi_app(application)

if __name__ == "__main__":
main()

ちなみにself.response.out.writeは渡された文字列をどんどんつなげていく。一番新しく渡された文字列が上書きされるわけではない。アクセスのあったアドレスに対して返す文字列(さっきまで作っていたHTMLやJavascript)をガリガリ書いていく。

4.GAEサーバーを立ち上げる(デプロイ)
Pythonスクリプトやその他の画像ファイルなどのアップロード。GAEをインストールしてあれば、ファイルは一つのフォルダにまとめておくだけ。あとはコマンドを一行書くだけ。これでWebアプリが立ち上がる。
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

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