Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8576

【Flask簡単すぎwww】Railsしか使ったことない大学生エンジニアがPyathonのFlaskを使ってみる。

$
0
0

はじめに

お恥ずかしながら僕はRailsしかサーバーサイドのフレームワークを使ったことがなかったのですが、Flaskを人に教えることになったので頑張って覚えます!

正直Pythonすら触ったことないけど多分何とかなる!

そもそもFlaskって?

logo-full.png

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
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/にアクセスしてみます。

resultscn.PNG

このように表示されれば成功です。

また、環境変数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><htmllang="ja"><head><metacharset="UTF-8"><title>HELLO</title></head><body><pclass="hello">HTMLが正常に読み込まれています</p></body></html>

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

hello_world.py
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サーバなんかもつくることができちゃいますね。

では実際にサーバを立ち上げなおして確認してみます。

htmlは正常に読み込まれています.PNG

文字が見づらくて申し訳ないですが、このように表示されれば成功です。

CSS

次にCSSを組み込んでいきます。
Flaskのデフォルトでは、CSSやjavascriptはstaticというフォルダ名から参照するのでHTMLと同じようにフォルダとファイルを作っていきます。

HelloWorld/
  ├ static/
  │ └ style.css
  ├ templates/
  │ └ index.html
  └ hello_world.py

続いてCSSの中身も適当に作っていきます。

style.css
.hello{color:blue;}

ここまで出来たら確認してみましょう。

css成功.PNG

文字が青色になっていれば成功です。

データベースとつなげてみる

アプリケーションを作るうえでデーターベースは欠かせないですよね。

今回はSQLiteを使おうと思っていましたが、Firebaseを使っていこうと思います。
なんとなく簡単そうだったから...。

Firebaseとは簡単に説明すると、サーバーサイドの役割をほとんど賄える開発プラットフォームです。
今回はそんなFirebaseのデータベース機能を使っていきたいと思います。
NoSQLなのでSQLに慣れている方は少し違和感あるかも。

firebaseのセットアップ

まずfirebaseのトップページからプロジェクトを作成します。

firebaseTop.PNG

プロジェクトを作成から作成していきます。
今回は
プロジェクト名:Hello Flask
アナリティクス:日本
でプロジェクトを作成します

firebaseProjectName.PNG

プロジェクトが作成できたらデータベースを作って設定していきます。

開発Databaseデータベースの作成で作成できます。

databaseCreate.PNG

今回はテストモードを選択します。

databaseTestMode.PNG

ロケーションはasia-northeast1を設定していきます。

databaseLocation.PNG

作成できたらRealtimeDatabaseに変更します。

dbconsole.PNG

realtimedb.PNG

最後にルールから設定を以下のように変更します。
これによってデータベースの読み書きが許可されます。

dbrules.PNG

これでデータベースは作成できました。

アプリケーションとDBを連結

ここからFlaskアプリケーションとデータベースを連結していきます。

プロジェクトの設定からマイアプリにFlaskアプリケーションを登録します。
ウェブアプリなので</>のマークから登録します。

myapp.PNG

アプリケーションの名前を適当に決めて入力します。
myappname.PNG

スクリプトが表示されれば完了です。

myappscript.PNG

今後はこの内容を張り付けることで認証します。

pyrebaseのセットアップ

pyrebaseはPythonでFirebaseを操作するためのAPIラッパーです。

まずはFlaskと同じようにインストールしていきます。

pip install pyrebase

注意:僕がpyrebaseをインストールしたとき文字コードのエラーが発生しました。
以下の記事に詳しい対処法が書かれていたので、同じエラーが出た場合は参考にしてください。

pip install pyrebase しただけなのに... (UnicodeDecodeError)

hello_world.pyにpyrebaseをインポートし、firebaseと連結していきます。

hello_world.py
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周りも設定できたので実際に読み書きしていきたいと思います。

hello_world.py
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()
index.html
<!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と比べてとてもシンプルでした。個人開発にはもってこいなフレームワークなのではないでしょうか。

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


Viewing all articles
Browse latest Browse all 8576

Trending Articles