FlaskでWebアプリを作る。その1:HelloWorldを作る
こんにちは、playwaoのむさしです。 最近、仕事でFlaskを触る事になったそれらについてのまとめを書こうかと思います。
FlaskでWebアプリを作る
まず、何よりも日本語の資料が中々存在しません。日本だとPHPやRubyの方がメジャーのようでそちらの資料は豊富に存在します。また、僕はWebアプリケーション作りが今回が初めてという事もあり、かなり苦労しました。データベースなにそれ?状態から始めたので大変でした^^;
そんなこんなで2週間ずーっとFlask勉強していました…僕みたいな迷子を生まないために、今回記事を書いていきたいと思います。
内容としては、はじめの一歩からJSONでやりとりできるようになるところまでを想定しています。そこそこ内容があり長くなるので複数記事に渡り書かせていただきます。 また、内容も1ヶ月前の僕のように初めてPythonでWebアプリ作るという人向けに書いていく予定なのである程度経験ある人は適当に読み飛ばしながらご覧ください。 またまた、当方pythonだけでなくプログラミングもかなり初心者なのでカスみたいなコード書いているのですが、その辺も多めに見ていただけると幸いです。こっちの方がいいコードだお、ここのコード間違っているお、みたいなのがあれば教えていただけると僕の勉強にもなるのでありがたいです。
webアプリやサーバーは個人ゲーム開発者には関係ないのか?
webアプリはゲームと関係ない?ように思います。特に個人開発の人はそんなにコストを掛けれないはずです。サーバーだってタダでないし維持するのも大変です。ただ、僕は最近関係ないとは言えないのではないかと感じています。
例えばほんの2、3年前の頃は3DCGで個人開発なんて想像もしませんでしたが、今は個人開発でもヒットを出してるものに3DCGを使っているものが増えてきています。 個人だから無理という時代は徐々に終わってきてるのです。
そりゃガチガチなソシャゲは無理でも、例えばradisと組みあわせてリアルタイムランキングを作ったり、「片道勇者」というフリーゲームでは同じ世界で遊んでいる人が敵に倒されたら画面左上にちょこっと通知がきます。先ほど例にあげた3DCGも特定のもののみ3DCGで作っていたり、視点が1視点からしかないとか、それぞれのもつフルの性能でなく、実現できそうなちょっとしたところに使ってみるというやり方ができるようになってきていると思います。
これをきっかけにwebアプリというものに挑戦してみてはいかがでしょうか?
Flaskとは?
FlaskとはPythonのWebアプリ用の マイクロフレームワーク です。 公式によるとmicroとは…
『micro』とは何でしょうか。私にとっては、microframework における「micro」は、 フレームワークの簡易性やフレームワークの小さいものとうだけでなく、フレームワークで 書かれた、複雑さとアプリケーションのサイズに制限をかけたものです。 ひとつのPythonファイルにアプリケーション全体を持つことも可能です。 この制限によりMicroframeworkが親しみ易く、簡単なものと感じることでしょう
つまり、ひとつのファイルにアプリケーション全体を入れることができる小さいアプリケーションを作れる!ということみたいです。 ただ、Flakでは大きいアプリケーションが作れないわけではありません。後々説明していきます。
環境構築
Pythonのインストール
私の開発環境はMacOS10.10.3です。
まず、pythonとpipがインストールされている前提で話を進めます。
使うのはpython2.7です。特に理由はないのですが会社で触った時は2.7だったので同じ状態で作っていきたいからです。
FlaskはPython3にも対応済みだのでそちらを利用しても大丈夫です。ただ、使用するモジュールが対応していない可能性があるので注意してください。
バージョンの確認はpython --version
で確認できます。
$ python --version Python 2.7.9
また、仮想環境構築のためvirtualenvをpipで入れてください。 詳しい使い方はこちらを参考にしてください。
Flaskのインストール
早速、Flaskをインストールしましょう。
$ pip install Flask
ちゃんとインストールされているかpip freeze
で確認します。
$ pip freeze Flask==0.10.1 itsdangerous==0.24 Jinja2==2.7.3 MarkupSafe==0.23 Werkzeug==0.10.4 wheel==0.24.0
Jinja2とかWerkzeugなどはFlaskをインストールされる際に一緒にインストールされます。
これで準備万端です。早速作っていきましょう。
FlaskでHelloWorld
アプリを作るディレクトリを作成し、そこに移動します。
$ mkdir flask_app $ cd flask_app
app.py
を作ります。これは公式のhellworldをちょっといじったものです。
app.py
#!/usr/bin/env python # coding: utf-8 import sys reload(sys) sys.setdefaultencoding('utf-8') from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return "Hello World!" if __name__ == "__main__": app.run()
この中で公式のものに付け足した部分は
#!/usr/bin/env python # coding: utf-8 import sys reload(sys) sys.setdefaultencoding('utf-8')
です。これを記述したのはpythonでよく起こるunicode errorを回避するためです。今後日本語でコメントとか書いたり日本語のデータを保存する際によく起こります。僕もまだあまりよくわかっていないのでもう少しちゃんと分かりたいです。
@app.route("/")
は関数の前に書くことができる修飾詞です。この場合だと http://(ホスト名)/
にアクセスするとhello()
が実行されます。
…まあ、この程度の認識で多分問題ないはずです^^;僕もこれ以上は理解していないです。
さて、これでもうアプリは起動できるので、python app.py
を実行しましょう。多分127.0.0.1:5000でウェブサーバーが起動します。
$ python app.py * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
ブラウザでhttp://127.0.0.1:5000/
を開けてみましょう。
無事"Hello World!"が出ることを確認できました。 サーバーはCTRL+Cで終了します。
テンプレートの導入
このままではwebサイトぽくないのでテンプレートを導入します。 僕は以下のようにディレクトリを構成します。
. ├── app.py ├── static └── templates ├── index.html └── header.html
templatesにindex.htmlとheader.htmlを作ります。 テンプレートエンジンとしてflaskをインストールした時に一緒についてきた Jinja2 を使います。htmlファイルにある{{}}がそれです。
header.html
<!DOCTYPE html> <html> <head> <title>flask_app</title> </head> <body> {% block body %}{% endblock %} </body> </html>
index.html
{% extends "header.html" %} {% block body %} <h1>Hello World!</h1> {% endblock %}
また、app.pyもこれに合わせて編集します。
flaskからrender_templateをインポートしてhello関数がrender_template("index.html")
を返すようにしてください。
こうすることでhttp://(ホスト名)/
を実行するとindex.htmlとheader.htmlを繋ぎ合わせたものが返ってきます。
app.config['DEBUG'] = True
とすることでファイル更新した時に自動で再起動したり、エラーが発生した場合デバッグ内容が表示されたりして非常に便利です。
app.py
#!/usr/bin/env python # coding: utf-8 import sys reload(sys) sys.setdefaultencoding('utf-8') from flask import Flask, render_template app = Flask(__name__) app.config['DEBUG'] = True @app.route("/") def hello(): return render_template("index.html") if __name__ == "__main__": app.run()
app.pyを実行して、http://127.0.0.1:5000/
をブラウザで開いてください。
無事実行できました。 ページのソースを見てもらうと
<!DOCTYPE html> <html> <head> <title>flask_app</title> </head> <body> <h1>Hello World!</h1> </body> </html>
となっており先ほど述べた通り2つのhtmlファイルが結合しているのがわかります。
とりあえず今回はこれで終了です。 次回からはよりアプリケーションらしく仕上げていきます。
次の記事: playwao.hatenablog.com
p.s.
はてなのマークダウンだとコードの左上にどのファイルを使ったか書けないのでソースコードの上にapp.py
みたいに書いてあるのですがもっといい方法はないのでしょうか?