ここでは「Flask入門編」ということで「Python」を使った簡単なWebアプリの制作方法を紹介します。
まずは第一回目ということで「Flask」の基礎からの紹介です。
私がFlaskを使ったWebアプリケーションを作ろうと思った経緯は
Qiita：Flask + Pillowで画像合成アプリを作成する
このサイトを見て、自分も作ってみたいと思ったからです。
（作りたいと思ったら、即行動＆学習・アウトプットをしますよ！）
この「Flask入門編」を読むことで
Flaskの基礎知識と文法
FlaskでHTMLを実装する方法
FlaskでCSSを実装する方法
などを学ぶことができます。
したがって
PythonとFlaskを使い、Webアプリケーションを作りたい方
Webアプリの開発がどんなものか知りたい方
に役立てて頂ければ幸いです。
それでは始めていきましょう！
※ Flask入門編では言語「Python」のほかに、「HTML」、「CSS」を使用します。
HTMLとCSSの基礎知識があり、ある程度読めることを前提として進めますのでご理解いただけますと幸いです。
FlaskでWebアプリを作成するための準備
まずPythonとFlaskでWebアプリケーション作成コードを書く前に、動作環境の構築・実行ファイルの場所＆内容などを確認しておきましょう。
Pythonの動作環境
今回使用する動作環境は以下の通りです。
OS：Windows10
テキストエディター：TeraPad（Visual Studioもたまに)
Pythonバージョン：3.7.5
Flask 1.1.2
2020/12/01日現在の最新バージョンは「Python：3.9.0」ですが、3系バージョンなら大抵は動作します。
Pythonのバージョン確認はコマンドラインで
や
などで確認することができます。
またFlaskのバージョン確認（Flask、Python、Werkzeug）はコマンドラインで
で確認することができます。
必要なpip install
続いて、Flaskを利用するためのパッケージをインストールします。
とコマンドライン（コマンドプロンプト）やターミナルで実行してインストールします。
インストールできたら、flaskをpythonファイルでインポートして使えるように定義するだけです。
Flaskの基礎知識と動作
Flaskとは何か？
まずFlask（フラスク）とは？を簡単に説明すると
ということ。
Webアプリを作成する手段として有名な「Django（ジャンゴ）」というものがあるが、こちらは本格的にWebアプリを作成するために使用されることが多い。
そのため、われわれ初心者に取っては手を出しにくいので、手を付けやすい「Flask」からWebアプリの仕組みを学んでいこうということですね。
Flaskプログラムの基本
では早速プログラムを書いてFlaskを使ったWebアプリを作ってみましょう。
ファイルのパスはお任せしますが、ここでは
📁 C：
➡ 📁 code
➡ 📁 frask_test
➡ app.py
とCドライブ直下に「code ＞ frask_test」とファイルを作り、その中に「app.py」のPythonファイルを作成しました。
作成ができたら、下記のapp.pyの内容をコピペして動作準備をします。
app.py
from flask import Flask
app = Flask(__name__) # Flaskインスタンス作成
@app.route('/')
def hello_world():
text = 'Hello World!'
return text
if __name__ == '__main__':
app.debug = True # デバッグ機能をON
app.run(host = 'localhost') # Webアプリケーションの起動
Pythonファイルが準備できたら、コマンドプロンプト or ターミナルで
と記述し実行してみましょう。
すると
と表示されるので、表示されたアドレスをコピペしてChromeなどでアクセスします。
アクセスすると「Hello World！」と表示されていることが確認できますね。
では、プログラムの内容を確認していきます。
（自分はアウトプットで復習(*´Д｀)）
Flaskプログラム各記述の意味
ではさっそく上記のプログラムの意味合いを紹介していきます。
まず
はFlaskのWebアプリ本体といえるもので、引数には「アプリ名」を指定します。
今回は__name__を指定しています。（アプリ名は可変だが、nameが一般的）
続いて
@app.route(‘/’)
def hello_world():
text = ‘Hello World!’
return text
は「ルートに割り当てる関数」を示しています。
def hello world(): 以降の記述はPythonの関数の定義文と同じなので省略しますが、@app.route(‘/’)というのは見慣れないですよね。
この「@app.route(‘/’)」は
という意味合いを持ちます。
つまりどういうことか？
今回は引数として「 (‘/‘) 」と指定していますよね。
なので
とアクセスすると@app.route(‘/’)直下の「hello world()」関数が実行され、「Hello World！」とテキストが返されるわけです。
（※ ‘/’ はアクセスするときに無くても動作する）
例えば、このパスの引数を「 (‘/python’) 」と指定すれば
とアクセスしたときに@app.route(‘/python’)直下の関数が実行されることになります。
最後の
if __name__ == ‘__main__’:
app.debug = True # デバッグ機能をON
app.run(host = ‘localhost’) # Webアプリケーションの起動
はコマンドプロンプト、ターミナルで「python app.py」とpythonコマンドで実行するための記述で
は「app = Flask(__name__)」と名前を付けた「name」をメインプログラムとして扱う処理をしています。
はホスト名をlocalhostとしてWebアプリを実行する処理になります。
ここまでがPythonとFlaskを使ったWebアプリの基本文法になるので、しっかりと意味合いを理解しておきましょう。
ではFlaskでHTMLファイルを実装する項目に入る前に「お知らせ」です。
PythonとFlaskを使ってWebアプリケーション開発を学びたい方は「Udemy」のこちらのコースがオススメです。
Webデザイン、アプリの開発やPythonのスキルアップを目指したい方は是非上記リンクからのぞいてみてください。
FlaskでHTMLファイルを実装する
Flaskの基礎知識と文法を紹介したところで、Webアプリに様々な装飾を追加していきましょう。
まずはHTMLファイルを実装し、Webアプリの表示を変えていきます。
下準備として
📁frask_test
➡ app.py
➡ 📁 templates
➡ index.html
と「templates」フォルダを作成し、その中に「index.html」ファイルを作成しておきます。
renderでHTMLファイルを読み込む
さっそく作成したhtmlファイルに以下のプログラムを書き込みます。
index.html
<!DECOTYPE html>
<html lang="ja">
<head>
<title>Title</title>
<meta charset="utf-8"/>
<meta name="description"content="">
<meta name="keywords"content="">
<meta name="viewport"content="width=device-width,initial-scale=1"> <!-- モバイル最適化 -->
<style>
body {margin:16px;}
h1 {color:Navy;font-size:48pt;}
p {font-size:16pt;}
li {font-size:8pt;}
</style>
</head>
<body>
<h1>タイトル</h1>
<p>FlaskでHTMLファイルを実装</p>
<footer>
<ul>
<li><a href="#">サイトポリシー </a></li>
<li><a href="#">プライバシーポリシー </a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</footer>
</body>
</html>
今回用意したHTMLファイルでは<style>タグにおいて
h1：フォントサイズ 48pt
p ：フォントサイズ 16pt
li：フォントサイズ 8pt
と指定しているので、WebアプリにHTMLファイルが実装されれば文字サイズの違いが分かるようになっています。
続いて、Pythonファイルである「app.py」の「@app.route(‘/’)」下の関数を以下のように書き換えます。
app.py
from flask import Flask, render_template
@app.route('/')
def index():
return render_template('index.html')
上記の「render_template( ファイル名 )」は
処理を行う記述で、これをreturnに返すことでhtmlファイルを読み込んでいます。
この「render_template」を使用するためにインポートで「render_template」を呼び出しています。
これを実行すると
と表示されるので、h1のフォントカラー、テキストサイズ、ハイパーリンクなどからHTMLファイルの実装を確認することができました。
このようにHTMLファイルを読み込んでも問題ないのですが、上記の場合はHTMLファイルを読み込み、そのまま表示（反映）させた形です。
したがって、ただHTMLファイルを読み込むだけではテンプレートとしての機能不足になります。
（せっかくHTMLファイルを作ったのに、ページ毎にHTMLを用意しなければならないから）
そこで登場するのが「Jinja（ジンジャ）」と呼ばれるテンプレートエンジンになります。
このテンプレートエンジンを使うことで
HTMLファイルに埋め込み処理ができる
テンプレHTMLを別のHTMLからも継承（参照）できる
といったメリットがあります。
よって、FlaskでWebアプリケーションを作成するなら「Jinja」のマスターも欠かせないため、Jinjaテンプレートを使ってHTMLの埋め込みを確認していきます。
JinjaテンプレートでHTMLファイルを埋め込む
まずはJinjaテンプレでHTMLファイルを埋め込むためのプログラムを紹介します。
HTMLファイルで変える部分は＜body>タグのみです。
index.html
<body>
<h1>{{title}}</h1>
<p>{{message}}</p>
<footer>
<ul>
{% for remarks in data %}
<li><a href="#">{{remarks}}</a></li>
{% endfor %}
</ul>
</footer>
</body>
スタイルを埋め込むには「 {{ }} 」という記号を使って埋め込み、値や変数を埋め込むのに使われます。
上記では「title、message、remarks」の３つの変数を埋め込んでいます。
また、さきほど「footer」で3つの備考を表記していましたが、Jinjaの「for in ブロック」を使うことで簡単にまとめることができます。
Jinjaでの「for in ブロック」記述方法は
{% for 変数 in リストなど %}
繰り返す処理
{% endfor %}
となり、他にも様々な分岐表示がJinjaには存在しますがここでは割愛します。
続いてPythonファイルも変更していきます。
app.py
@app.route('/')
def index():
data = ['サイトポリシー', 'プライバシーポリシー', 'サイトマップ']
return render_template('index.html', \
title = "タイトル", \
message = "Jinjaでテンプレを埋め込む", \
data = data)
Python側では、さきほどHTMLファイルで埋め込み処理をした「 {{ }} 」部分の値を与えています。
埋め込み処理をすることで、Python側でいくらでも値の調整ができます。
さらに埋め込み処理部を増やしたい場合も、render_templateに引数名を追加すればいくらでも埋め込みが可能です。
今回は「message」の先ほどと変えたので、実際に動作させて確認してみます。
しっかりと「Jinjaでテンプレを埋め込む」や与えた値を確認することができました。
FlaskでCSSファイルを実装する
最後にスタイルシートとしてCSSファイルをFlaskに実装していきましょう。
こちらも下準備として
📁frask_test
➡ app.py
➡ 📁 templates
➡ index.html
➡ 📁 static
➡ style.css
と「static」フォルダと「style.css」を用意します。
CSS実装とスタイルの更新
ではさっそくCSSファイル、HTMLファイルのプログラムを紹介します。
style.css
body{
background-color:MintCream; /* 背景色 */
}
h1 {
color: DarkCyan; /* テキストカラー */
font-size: 48pt;
margin:16px;
}
p{
font-size: 16pt;
margin:16px;
}
#footer{
padding:10px 0;
background-color:LightSeaGreen /* フッター背景色 */
}
#flink a{
padding:0 10px;
color:#fff; /* フッター文字色 */
text-decoration:none; /* リンク装飾なし */
}
#flink li{
display:inline; /* 横並びへ */
}
index.html
<head>
<title>Title</title>
<meta charset="utf-8"/>
<meta name="description"content="">
<meta name="keywords"content="">
<meta name="viewport"content="width=device-width,initial-scale=1"> <!-- モバイル最適化 -->
<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
</head>
<body>
<h1>{{title}}</h1>
<p>{{message}}</p>
<footer id="footer">
<ul id="flink">
{% for remarks in data %}
<li><a href="#">{{remarks}}</a></li>
{% endfor %}
</ul>
</footer>
</body>
CSSでは背景色、文字サイズ、テキスト色、フッターの並び順などを装飾しました。
背景色などのカラーコードは
を参考にしてください。
このCSSファイルをHTMLファイルで読み込むため
とurl_for関数を使用しています。
この関数は
もので、ここでは「static」フォルダの「style.css」のパスを取り出していることがわかります。
あとは実際に実行してみて、CSSが反映されているかを確認します。
背景色、フッターの背景色、タイトル色などの装飾がされていることが確認できますね。
これでCSSの装飾は完了です。
CSSの装飾が更新されないときは？
style.cssのコードを変更して、いざ実行してみたけどWebアプリに反映されていないという場合があります。
これはCSSの内容がブラウザにキャッシュされ更新されていないからです。
対処法は
1：http://localhost:5000/static/style.cssにアクセス
2：F5キーを押してページを更新
3：http://localhost:5000に戻り更新を確認
とすることです。
実際に、背景色などを変えたときの工程で対処法を確認してみると
こんな様子で、青色の背景から紫色の背景に変わっていることが分かります。
CSSの装飾が反映されないときは、上記の方法を使って確認してみてください。
以上、Flask入門編でした。
Pythonだけでなく、HTMLやCSSファイルも扱うため難しく感じるかもしれませんが、ページごとの処理をファイルを分けてプログラムしているだけなので慣れてこればスラスラとコードがかけるようになると思います。
（と自分に言い聞かせてFlaskのレベルアップを頑張ります）
お疲れ様でした。