こんにちは、playwaoのむさしです。最近、仕事でFlaskを触る事になったそれらについてのまとめを書こうかと思います。

FlaskでWebアプリを作る

まず、何よりも日本語の資料が中々存在しません。日本だとPHPやRubyの方がメジャーのようでそちらの資料は豊富に存在します。また、僕はWebアプリケーション作りが今回が初めてという事もあり、かなり苦労しました。データベースなにそれ？状態から始めたので大変でした^^;

そんなこんなで２週間ずーっとFlask勉強していました…僕みたいな迷子を生まないために、今回記事を書いていきたいと思います。

内容としては、はじめの一歩からJSONでやりとりできるようになるところまでを想定しています。そこそこ内容があり長くなるので複数記事に渡り書かせていただきます。また、内容も１ヶ月前の僕のように初めてPythonでWebアプリ作るという人向けに書いていく予定なのである程度経験ある人は適当に読み飛ばしながらご覧ください。またまた、当方pythonだけでなくプログラミングもかなり初心者なのでカスみたいなコード書いているのですが、その辺も多めに見ていただけると幸いです。こっちの方がいいコードだお、ここのコード間違っているお、みたいなのがあれば教えていただけると僕の勉強にもなるのでありがたいです。

webアプリやサーバーは個人ゲーム開発者には関係ないのか？

webアプリはゲームと関係ない？ように思います。特に個人開発の人はそんなにコストを掛けれないはずです。サーバーだってタダでないし維持するのも大変です。ただ、僕は最近関係ないとは言えないのではないかと感じています。

例えばほんの２、３年前の頃は3DCGで個人開発なんて想像もしませんでしたが、今は個人開発でもヒットを出してるものに3DCGを使っているものが増えてきています。個人だから無理という時代は徐々に終わってきてるのです。

そりゃガチガチなソシャゲは無理でも、例えばradisと組みあわせてリアルタイムランキングを作ったり、「片道勇者」というフリーゲームでは同じ世界で遊んでいる人が敵に倒されたら画面左上にちょこっと通知がきます。先ほど例にあげた3DCGも特定のもののみ3DCGで作っていたり、視点が１視点からしかないとか、それぞれのもつフルの性能でなく、実現できそうなちょっとしたところに使ってみるというやり方ができるようになってきていると思います。

これをきっかけに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/を開けてみましょう。

f:id:playwao:20150721231536p:plain

無事"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/をブラウザで開いてください。

f:id:playwao:20150721231552p:plain

無事実行できました。ページのソースを見てもらうと

<!DOCTYPE html>
<html>
  <head>
    <title>flask_app</title>
  </head>
  <body>
    
<h1>Hello World!</h1>

  </body>
</html>

となっており先ほど述べた通り２つのhtmlファイルが結合しているのがわかります。

とりあえず今回はこれで終了です。次回からはよりアプリケーションらしく仕上げていきます。

次の記事： <a href="http://playwao.hatenablog.com/entry/2015/07/25/100823">FlaskでWebアプリを作る。その２:Flask-Migrationでデータベースを作る - 僕らは偶然性を大切にするためにクソゲーを作り続ける。</a>playwao.hatenablog.com

p.s.

はてなのマークダウンだとコードの左上にどのファイルを使ったか書けないのでソースコードの上にapp.pyみたいに書いてあるのですがもっといい方法はないのでしょうか？

僕らは偶然性を大切にするためにクソゲーを作り続ける。

なんか気ままにクソゲームを作っています。

FlaskでWebアプリを作る。その１:HelloWorldを作る