はじめに

お恥ずかしながら僕は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の公式チュートリアルから引っ張ってきたコードに少し手を加えたものです。

hello_world.py

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    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の中身を適当に記述しておきます

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="UTF-8">
      <title>HELLO</title>
  </head>
  <body>
      <p class="hello">HTMLが正常に読み込まれています</p>
  </body>
</html>

これでhtmlの準備はできたのでpythonファイルのなかでHTMLを返すように変更します

hello_world.py

from flask import Flask, render_template #"render_template"を追記
app = Flask(__name__)

@app.route('/')
def hello():
    return render_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の中身も適当に作っていきます。

style.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と連結していきます。

hello_world.py

from flask import Flask, render_template
import pyrebase #追記

#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('/')
def hello():
    return render_template('index.html')

if __name__ == "__main__":
    app.run()

先ほどのスクリプトの一部をコピペしてconfigに代入しています。

これでpyrebaseのセットアップは終わりです。

データベースに保存&削除

これでDB周りも設定できたので実際に読み書きしていきたいと思います。

hello_world.py

from flask import Flask, render_template, redirect, request
import pyrebase

config = {
  "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'])
def hello():
  #メソッドによって処理を分岐させる
  if request.method == 'POST':
    if request.form['act'] == 'create' :
      person = request.form['name']
      #フォームの内容をpeopleキーの子として保存する
      db.child('people').push(person)

    if request.form['act'] == 'delete' :
      #peopleキーの子をすべて削除する。
      db.child('people').remove()
    return redirect('/')

  #db内のpeopleキーの内容を取得する
  people = db.child("people").get()
  #キーの内容を辞書型オブジェクトとしてpへ代入
  p = people.val()

  #何も保存されていない場合は空の辞書型のオブジェクトを代入
  if(p == None) :
    p = {}

  #辞書型オブジェクトの値のみをHTMLに返す
  return render_template('index.html', people = p.values() )

if __name__ == "__main__":
    app.run()

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HELLO</title>
    <link rel="stylesheet" href="/static/style.css">
</head>

<body>
    <form action="/" method="post">
        <input type="text" name="name">
        <input type="submit" name="act" value="create">
    </form>
    <br>

    <form action="/" method="post">
        <input type="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と比べてとてもシンプルでした。個人開発にはもってこいなフレームワークなのではないでしょうか。

なにか説明不足があれば追記しますので、コメントにてお願いします。