はじめに
お恥ずかしながら僕はRailsしかサーバーサイドのフレームワークを使ったことがなかったのですが、Flaskを人に教えることになったので頑張って覚えます!
正直Pythonすら触ったことないけど多分何とかなる!
そもそもFlaskって?
FlaskはPython用のウェブアプリケーションフレームワークです。
RailsやLaravelと違ってとってもシンプルで軽量らしい。
実行環境
windows10
Python 3.7.2
Flask使ってみる
まずはおなじみのHello Worldからやっていきましょう
Flaskをインストールする
今回Pythonのセットアップは省かせていただきます。
Flaskのインストールは以下のコマンドを実行するだけです。
pip install flask
とりま書いてみる
FlaskはPythonコード内でインポートすることで使用できるらしい。
特別なコマンドも特にないのでとっても簡単ですね!
ただ、Railsと違ってファイルが最初から生成されるわけではないっぽい。
以下はflaskの公式チュートリアルから引っ張ってきたコードに少し手を加えたものです。
fromflaskimportFlaskapp=Flask(__name__)@app.route('/')defhello():return'Hello, World!'#追記
if__name__=="__main__":app.run()
これだけでRailsで言うところのコントローラとルーティングが実装できました。
簡単すぎるっ...!
以下簡単な解説
1行目:Flaskをインポートしています。
2行目:Flaskをappに定義して使えるようにしています。
4行目以降:ルーティングの設定とアクションを定義します。今回の場合http://{ドメイン名}/
にアクセスしたときHello, World!
を返します。
8行目以降:チュートリアルには記載されていない内容ですが追記しました。hello_world.pyを実行したときにウェブサーバを起動します。
実行してみよう
実行方法は通常のpythonファイルと同じように実行すればサーバが立ち上がります。
> python3 hello_world.py
* Serving Flask app "hello_world" (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
これでサーバが立ち上がったのでhttp://127.0.0.1:5000/
にアクセスしてみます。
このように表示されれば成功です。
また、環境変数FLASK_APP
に実行したいファイルを設定しておけばflask run
と入力するだけでサーバを立ち上げることもできます。
>set FLASK_APP=hello_world.py
>flask run
* Serving Flask app "hello_world.py"
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
基本的なひな形としてはこれだけです!
なんとシンプル!
ここまで見た感じ、Railsよりも圧倒的にコンパクトですね。
さすがにこれではシンプルすぎて不十分なので、ここから付け加えていきます。
HTML/CSSを作ってみよう
ここからwebアプリケーションには欠かせないHTML/CSSを付け加えていきます。
HTML
HTMLを扱うとき、Flaskではデフォルトでtemplates
というフォルダを参照します。
というわけでtemplatesと、その中にindex.htmlをそれぞれ作っておきます。
HelloWorld/
├ templates/
│ └ index.html
└ hello_world.py
index.htmlの中身を適当に記述しておきます
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>HELLO</title></head><body><pclass="hello">HTMLが正常に読み込まれています</p></body></html>
これでhtmlの準備はできたのでpythonファイルのなかでHTMLを返すように変更します
fromflaskimportFlask,render_template#"render_template"を追記
app=Flask(__name__)@app.route('/')defhello():returnrender_template('index.html')#返り値にindex.htmlを返すように変更
if__name__=="__main__":app.run()
1行目にrender_template
を追記するのを忘れないでください。
render_template()
でtemplates
フォルダ内のhtmlファイルを返すことが可能です。引数に返したいHTMLファイル名を記述するだけなので簡単ですね。
余談ですが、render_template()
をjsonify()
に変えることでJSONを返すこともできます。
これでAPIサーバなんかもつくることができちゃいますね。
では実際にサーバを立ち上げなおして確認してみます。
文字が見づらくて申し訳ないですが、このように表示されれば成功です。
CSS
次にCSSを組み込んでいきます。
Flaskのデフォルトでは、CSSやjavascriptはstatic
というフォルダ名から参照するのでHTMLと同じようにフォルダとファイルを作っていきます。
HelloWorld/
├ static/
│ └ style.css
├ templates/
│ └ index.html
└ hello_world.py
続いてCSSの中身も適当に作っていきます。
.hello{color:blue;}
ここまで出来たら確認してみましょう。
文字が青色になっていれば成功です。
データベースとつなげてみる
アプリケーションを作るうえでデーターベースは欠かせないですよね。
今回はSQLiteを使おうと思っていましたが、Firebaseを使っていこうと思います。なんとなく簡単そうだったから...。
Firebaseとは簡単に説明すると、サーバーサイドの役割をほとんど賄える開発プラットフォームです。
今回はそんなFirebaseのデータベース機能を使っていきたいと思います。
NoSQLなのでSQLに慣れている方は少し違和感あるかも。
firebaseのセットアップ
まずfirebaseのトップページからプロジェクトを作成します。
プロジェクトを作成
から作成していきます。
今回は
プロジェクト名:Hello Flask
アナリティクス:日本
でプロジェクトを作成します
プロジェクトが作成できたらデータベースを作って設定していきます。
開発
→Database
→データベースの作成
で作成できます。
今回はテストモードを選択します。
ロケーションはasia-northeast1
を設定していきます。
作成できたらRealtimeDatabaseに変更します。
最後にルール
から設定を以下のように変更します。
これによってデータベースの読み書きが許可されます。
これでデータベースは作成できました。
アプリケーションとDBを連結
ここからFlaskアプリケーションとデータベースを連結していきます。
プロジェクトの設定
からマイアプリにFlaskアプリケーションを登録します。
ウェブアプリなので</>
のマークから登録します。
スクリプトが表示されれば完了です。
今後はこの内容を張り付けることで認証します。
pyrebaseのセットアップ
pyrebaseはPythonでFirebaseを操作するためのAPIラッパーです。
まずはFlaskと同じようにインストールしていきます。
pip install pyrebase
注意:僕がpyrebaseをインストールしたとき文字コードのエラーが発生しました。
以下の記事に詳しい対処法が書かれていたので、同じエラーが出た場合は参考にしてください。
pip install pyrebase しただけなのに... (UnicodeDecodeError)
hello_world.py
にpyrebaseをインポートし、firebaseと連結していきます。
fromflaskimportFlask,render_templateimportpyrebase#追記
#configとその内容を追記
config={"apiKey":"*****","authDomain":"*****","databaseURL":"*****","projectId":"*****","storageBucket":"*****","messagingSenderId":"*****","appId":"*****","measurementId":"*****"}#firebaseを初期化&DBの関数を'db'へ代入
firebase=pyrebase.initialize_app(config)db=firebase.database()app=Flask(__name__)@app.route('/')defhello():returnrender_template('index.html')if__name__=="__main__":app.run()
先ほどのスクリプトの一部をコピペしてconfig
に代入しています。
これでpyrebaseのセットアップは終わりです。
データベースに保存&削除
これでDB周りも設定できたので実際に読み書きしていきたいと思います。
fromflaskimportFlask,render_template,redirect,requestimportpyrebaseconfig={"apiKey":"**************","authDomain":"**************","databaseURL":"**************","projectId":"**************","storageBucket":"**************","messagingSenderId":"**************","appId":"**************","measurementId":"**************"}firebase=pyrebase.initialize_app(config)db=firebase.database()#peopleキーをセットする
db.set('people')app=Flask(__name__)#ルーティングで許可するメソッドを明示的に記述する
@app.route('/',methods=['GET','POST'])defhello():#メソッドによって処理を分岐させる
ifrequest.method=='POST':ifrequest.form['act']=='create':person=request.form['name']#フォームの内容をpeopleキーの子として保存する
db.child('people').push(person)ifrequest.form['act']=='delete':#peopleキーの子をすべて削除する。
db.child('people').remove()returnredirect('/')#db内のpeopleキーの内容を取得する
people=db.child("people").get()#キーの内容を辞書型オブジェクトとしてpへ代入
p=people.val()#何も保存されていない場合は空の辞書型のオブジェクトを代入
if(p==None):p={}#辞書型オブジェクトの値のみをHTMLに返す
returnrender_template('index.html',people=p.values())if__name__=="__main__":app.run()
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>HELLO</title><linkrel="stylesheet"href="/static/style.css"></head><body><formaction="/"method="post"><inputtype="text"name="name"><inputtype="submit"name="act"value="create"></form><br><formaction="/"method="post"><inputtype="submit"name="act"value="delete"></form><br><br><p>名前リスト</p><ul>
{% for p in people %}
<li>{{ p }}</li>
{% endfor %}
</ul></body></html>
実際に動かしてみて正常に動作すれば完成です。
さいごに
最終的にはhello_world.pyを複数のファイルに分割する予定でしたが、疲れたのでここまでで簡便してください...w
Flask本体はRailsと比べてとてもシンプルでした。個人開発にはもってこいなフレームワークなのではないでしょうか。
なにか説明不足があれば追記しますので、コメントにてお願いします。