未分類

BackboneとGoogle App Engineを使ったClient-side MVC (2/5)

TODOリストを作ってみる

まずはシンプルなサービスを作ることで理解を深めて行きましょう。TODOリストを一覧、追加、編集、削除するアプリケーションを作ります。

App Engineのサーバ設定

Google Developers Consoleから新しいプロジェクトを作ります。ここでプロジェクトIDが付与され、このID + .appspot.comというアドレスにアクセスすると自分のサーバがすでに立ち上がっています。前回のブログでも話したように、無料で自分のWEBサーバがすでに用意され、さらにDBも使える状態になっています。あとはhtmlやpythonのソースをアップロードするだけです。

Screen Shot 2015-05-04 at 1.57.32 PM

App Engine SDKのインストール

ローカルで開発するためのSDKをインストールします。インストールは公式サイトから行うのが無難です。英語で書いてはありますが、基本的にはダウンロードして実行すればインストールできます。

Download the Google App Engine SDK

まずはHello World

さて、ここからが本番です。ソースコードはこちらにありますので、参考にしてみてください。

フォルダ構成

サーバサイドのpythonとクライアントサイドのjavascriptやhtmlを一つのプロジェクト構成で共存させることを行います。サーバとクライアントでコードが分割されているので、開発の時はお互いのソースを行ったり来たりします。このときにプロジェクトがひとつになって、Eclipseで開発できるととても効率がいいのです。そのために、ここは次のフォルダ構成で作ってみてください。

Screen Shot 2015-05-04 at 5.20.44 PM

serverの下にはpythonで書いたサーバ側のコードが入ります。ここではmain.pyというコントローラのみを使います。clientの下にはhtmlやcss、javascriptなどが入りますが、今回はサーバ側の解説をするので、client側はmain.htmlだけを入れて下さい。

app.yaml

メインの設定ファイルです。applicationのIDは先ほどGoogleのサイトから取得したIDを入れて下さい。最初のブロックは特に解説はいらないでしょう。

2番目のブロックはAppengineがURLに対してどのファイルを返すか、どのモジュールを呼び出すかを設定します。今回は、URLがxxxx.htmlなど拡張子があるもので終わる場合はclientの下から返し、拡張子がない場合はserver以下にあるpythonを呼び出して実行するようにしてあります。

なぜこうするかというと、サーバ側に2つの役割があるからです。

  • クライアントサイドで必要なhtmlやjsを返す
  • RESTの要求に答えJSONを返す

最初にブラウザからアクセスがあると、まずはhtmlやjsを返して、ブラウザでクライアントサイドのMVCを動作させます。その後、クライアントからRESTでサーバにデータを要求すると、サーバは必要なデータをDBから取り出して返します。

最後のブロックは使用するライブラリなので、このままでいいでしょう。

appengine_config.py

これは主にpython関連の設定をします。通常、appengineではpythonpathがプロジェクトのルートフォルダにしかありません。しかし、このフォルダ構成ではserverの下にpythonファイルを置くので、そのpathをpythonに知らせる必要があります。これは読めばわかるので、解説は省略します。

main.py

下から見ていくと、この部分はルーティングを指定しています。つまり、/helloをいうリクエストがあると、HelloHandlerを呼び出すという意味です。HTTPリクエストにはGETやPOSTのようなmethodがありますが、例えば/helloというGETリクエストを受けると、HelloHandlerのget関数が呼ばれ、POSTリクエストがあればpost関数(ここでは実装してないが)が呼ばれます。非常にシンプルで分かりやすいとおもいます。

実行してみる

Google App Engine Launcherを立ち上げ、メニューのFile > Add Existing Applicationからtodolistのフォルダを指定してソースを追加します。あとはRunボタンを押せば、表示されているポート番号でサーバが実行されています。ブラウザからlocalhost:xxxx/helloにアクセスしてみましょう。「Hello, GAE!」が表示されれば成功です。お疲れ様でした。

Screen Shot 2015-05-04 at 2.06.58 PM

クラウドにアップロード

クラウドで実行したい場合は、LauncherのDeployボタンを押してみましょう。最初に取得したapplication-id.appspot.com/helloでローカルと同じような文字が表示されるはずです。

次回は

いよいよmain.htmlからBackboneを使って、サーバのRESTを呼び出してみます。ここまで来ればどのようなシステムでも作れるようになります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です