• Skip to main content
  • Skip to primary sidebar
  • ホーム
  • お問い合わせ

ハイパー仕事し隊

思い立った吉日!イロイロ試してオンリーワンの起業家を目指してます!

現在の場所:ホーム / ウェブアプリ関連 / メッチャ手軽にウェブアプリ構築!Flask (Python ウェブフレームワーク) を初めて触る!

メッチャ手軽にウェブアプリ構築!Flask (Python ウェブフレームワーク) を初めて触る!

2018年5月12日

Flask

早くウェブアプリを作りたい!!

でも、初めてウェブアプリを作成をするにあたりどのウェブフレームワーク使えば良いんでしょ?

python 勉強していますので、一先ずの調査で Flask を触ってみることにしました!

(参考にした比較サイト: https://techacademy.jp/magazine/15502)

実際に使ってみるとすごい使いやすかったので、「何ができるの?」「どう使いやすいの?」が気になっている方に Flask の良さを紹介していきます!

実行環境とファイル構成

こちらが利用した環境とファイル構成になります。

実行環境

基本的には Python が動く環境であれば、問題ありません。
念のために、私の環境はこちらです。

  • Windows 7 SP1 x64
  • VSCode 1.23.0
  • Python 3.6.5
  • Flask 1.0.2 (コマンドプロンプトから pip install Flask でインストールできます。)

ファイル構成

アプリを構築中には、徐々にファイルやフォルダを増えていきます。
こちらが最終的に出来上がるファイル構成です。

[]
 ├─ application.py
 │ (Flask アプリのメインファイル)
 │
 ├─ send_requests.py
 │ (POST リクエストをし、レスポンス結果を確認するファイル)
 │
 └─[] templates
   └─ index.html (jinja テンプレート)

Flask で色々なアウトプットをしてみる

Run Simple App
Flask というものに慣れるために、シンプルなアウトプットから、jinja テンプレートを使ったアウトプットまで幅広く試していきます!

ベースとなるコード

# Flask クラスインポート
from flask import Flask

# 初期設定 (ほとんどのケースで必要)
app = Flask(__name__)

# # # # # # # # # # # # # # # # 
# ここにページの処理を書いていく #
# # # # # # # # # # # # # # # #

# この application.py が直接呼ばれた場合に、デバッグモードで実行する
if __name__ == '__main__':
    app.run(debug=True)
    # デフォルトでは、host='127.0.0.1' & port=5000 という指定になっていますが、もちろん変更も可能です。
    # デフォルトでは app.run(debug=True, host='127.0.0.1', port=5000) として実行されています。

実際には app.run() だけで動作するのですが、”debug=True” 引数を追加することで、何かしらのエラーが発生したときにどのようなエラーなのか見ることができ、大変便利です。こちらがエラーが発生した際の表示です。

Debug Mode

「name_method() で yourname が引数指定されていない」ということがこのエラーからわかります。

気をつけてほしいのが、実運用では何かしらのエラーで内部情報を晒したくないので、開発時のみ使用するようにしましょ!

それでは「ここにページの処理を書いていく」で何を書くか見ていきましょ!

コード: TOP ページで 「Hello World!」を表示

 # [application.py] ファイル
@app.route('/')
def index():
    return '<h1>Hello World!</h1>'

@app.route('/') でトップページを意味し、トップページにアクセスがあれば、index() 関数を実行する (Hello World! を出力する) という意味になります。

コード: 特定ページでインプットに合わせて表示を変える

# [application.py] ファイル
@app.route('/name/<yourname>')
def name(yourname):
    return '<h1>Hello {}!</h1>'.format(yourname)

@app.route('/name/<yourname>') で “yourname” を変数として扱うことを宣言し、URL にインプットされた変数を表示するという関数になります。

入力・出力例:
Variable Name

コード: HTTP リクエストの方法を変える

# [application.py] ファイル
@app.route('/name_method', methods=['POST'])
def name_method():
    return '<h1>Hello World!</h1>'

methods=['POST'] を追加することで、POST リクエストのみ受けと指定することができます (他にも GET, PUT, DELETE などがある) 。デフォルは “GET” なのですが、”POST” のみと指定していますので、通常のリクエスト (“GET”) をするとこのようになります。

Method Not Allowed

それでは POST のリクエストを “send_requests.py” から送って結果を確認してみましょ!

少々ややこしいので、処理をまとめます。

  • application.py を実行し、サーバーを起動する
  • send_requests.py から “http://127.0.0.1:5000/name_method/” に対し、”username” = “mike” というデータを “POST” リクエストで送信
  • サーバー (application.py) が @app.route(/name_method) に関係する関数 (“def name_method()”) を実行
  • その関数 (“def name_method()”) では、送られてきた情報 (“username” = “john”) から “username” に入っている値 (“john”) をテキストで取得
  • 取得したテキストをリクエスト元にレスポンス (= あんたが送ってきたデータはこれだよ!)
  • send_requests.py 側でレスポンス結果を “print” 関数で出力 (“john”)

という流れになります。

# [application.py] ファイル
from flask import request

@app.route('/name_method/', methods=['POST'])
def name_method():
    return str(request.values['username'])

POST リクエストはブラウザから簡単にできないので、Python の requests モジュールを使います。

# [send_requests.py] ファイル
import requests

# post リクエストを出し、そのレスポンス結果を "r" に入れる
r = requests.post(
    'http://127.0.0.1:5000/name_method/', data={'username': 'john'}
)

# レスポンス結果が入っている "r" の文字列を取得
print(r.text)

分かりにくかったら申し訳ありません。
実際には、DB と絡めてこのような処理を行います。

  • GET: DB 内のデータを取得
  • POST: データを DB に登録
  • PUT: DB 内のデータを更新
  • DELETE: DB 内のデータを削除

DB を使った実際のやり方は後日記事にします。そこでもう少し理解は深まると思います!

コード: テンプレートを使って表示を変える

Flask をインストールするとデフォルトで jinja テンプレートが使えるようになっています。このテンプレートを使うことで HTML 内で、IF 文や For 文を定義する事ができます。

# [application.py] ファイル
from flask import render_template

@app.route('/my-jinja-template')
def my_jinja_template():
    names = ['John', 'Mike', 'Carl', 'David', 'Lisa']
    return render_template('index.html', names=names)

render_template('index.html', names=names) で index.html に python 側で定義した names を index.html 内の names に値を渡しています。

<!-- template\index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>First Jinja Template</title>
</head>
<body>
    <h1>If and Loop Example</h1>
    {%if names %}
   
    {% for name in names %}
        <h2>Hello {{ name }}!</h2>
    {% endfor %}

    {% else %}

    <h2>Hello World!</h2>

    {% endif %}
</body>
</html>

HTML 側では、受け取った names に値があるかを IF 文 ({% if names%}) で確認し、あれば {% for name in names %} で1つづつ値を取得し H2 ヘッダーに出力しています。

入力・出力例:
If and For Output

このようにすることで、条件に合わせて HTML ファイル変更するのではなく、同一 HTML で出力内容を変更できるようになり、ファイルハンドリングが楽になります。

まとめ

いかがでしたでしょうか?

一見難しく感じるかも知れませんが、一度コードを書くと Flask がすごいシンプルなフレームワークだと気づきます。

本格運用では Django を使うと思いますが、サクッとウェブアプリ作成するには Flask はとても良いフレームワークだと思います。

ぜひお試しください!!

カテゴリー: ウェブアプリ関連
タグ: flask, fullstack, python

最初のサイドバー

簡単な自己紹介

ごく普通の 30 代サラリーマンです。世界を旅しながらの生活が目標!!
IT 全般に興味あり: Python (Flask, Django) / PHP (Laravel, Wordpress) / Golang / AWS / Network Security.
Read More…

サイト内検索

最近の投稿

  • 【VS Code プラグイン】Postman より便利!? Rest Client をオススメする理由
  • MySQL と phpMyAdmin を Docker Compose で作って、Python から接続する
  • Windows10 上の Ubuntu から “curl localhost” を実行すると “Connection refused” になる原因
  • リダイレクトの仕組み知ってる?Flask で調べるてみるのだ。
  • Apple 独自の 検索エンジンで何が変わるのか

アーカイブ

  • 2021年3月
  • 2021年1月
  • 2020年10月
  • 2019年3月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年5月
  • 2018年4月

タグ

amazon cloudfront amazon s3 aws coursera css django docker flask fullstack gcp github hawaii life in USA linux mongodb mysql postgresql pwa python sqlite vagrant

Contact
Privacy Policy and Term of Use
Copyright © 2025 · All rights reserved.