注目キーワード
  1. Photoshop
  2. Python
  3. Raspberry Pi
  4. Arduino

Flask入門編01 Pythonを使って簡単なWebアプリを作成する

  • 2020年12月1日
  • 2020年12月9日
  • Python

ここでは「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のバージョン確認はコマンドラインで

python –version

python -V

などで確認することができます。

 

またFlaskのバージョン確認(Flask、Python、Werkzeug)はコマンドラインで

flask –version

で確認することができます。

 

必要なpip install

 

続いて、Flaskを利用するためのパッケージをインストールします。

pip install frask

とコマンドライン(コマンドプロンプト)やターミナルで実行してインストールします。

 

インストールできたら、flaskをpythonファイルでインポートして使えるように定義するだけです。

 

Flaskの基礎知識と動作

Flaskとは何か?

まずFlask(フラスク)とは?を簡単に説明すると

Pythonで簡単にWebアプリを作れる構造・枠組み

ということ。

 

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 ターミナルで

python app.py

と記述し実行してみましょう。

 

flask01_01

すると

Runnning on http://localhost:5000/

と表示されるので、表示されたアドレスをコピペしてChromeなどでアクセスします。

アクセスすると「Hello World!」と表示されていることが確認できますね。

 

では、プログラムの内容を確認していきます。

(自分はアウトプットで復習(*´Д`))

 

Flaskプログラム各記述の意味

ではさっそく上記のプログラムの意味合いを紹介していきます。

まず

app = Flask(__name__)

はFlaskのWebアプリ本体といえるもので、引数には「アプリ名」を指定します。

今回は__name__を指定しています。(アプリ名は可変だが、nameが一般的)

 

続いて

@app.route(‘/’)

def hello_world():

text = ‘Hello World!’

return text

は「ルートに割り当てる関数」を示しています。

def hello world(): 以降の記述はPythonの関数の定義文と同じなので省略しますが、@app.route(‘/’)というのは見慣れないですよね。

 

この「@app.route(‘/’)」は

(  )に指定したパスにアクセスしたとき、呼び出される関数

という意味合いを持ちます。

 

つまりどういうことか?

今回は引数として「 (‘/‘) 」と指定していますよね。

なので

http://localhost:5000/

とアクセスすると@app.route(‘/’)直下の「hello world()」関数が実行され、「Hello World!」とテキストが返されるわけです。

(※ ‘/’ はアクセスするときに無くても動作する)

 

例えば、このパスの引数を「 (‘/python’) 」と指定すれば

http://localhost:5000/python

とアクセスしたときに@app.route(‘/python’)直下の関数が実行されることになります。

 

最後の

if __name__ == ‘__main__’:

app.debug = True # デバッグ機能をON

app.run(host = ‘localhost’) # Webアプリケーションの起動

はコマンドプロンプト、ターミナルで「python app.py」とpythonコマンドで実行するための記述で

if__name__ == ‘__main__’:

「app = Flask(__name__)」と名前を付けた「name」をメインプログラムとして扱う処理をしています。

 

app.run(host = ‘localhost’)

はホスト名を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( ファイル名 )」は

「templates」フォルダから指定したファイル名を探し、読み込む

処理を行う記述で、これをreturnに返すことでhtmlファイルを読み込んでいます。

 

この「render_template」を使用するためにインポートで「render_template」を呼び出しています。

 

これを実行すると

flask01_02

と表示されるので、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」の3つの変数を埋め込んでいます。

 

また、さきほど「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」の先ほどと変えたので、実際に動作させて確認してみます。

flask01_03

しっかりと「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では背景色、文字サイズ、テキスト色、フッターの並び順などを装飾しました。

背景色などのカラーコードは

ウェブカラー – Wikipedia

を参考にしてください。

 

このCSSファイルをHTMLファイルで読み込むため

<link rel=”stylesheet” href=”{{url_for(‘static’, filename=’style.css’)}}”>

とurl_for関数を使用しています。

 

この関数は

指定したファイルのパスを取得する

もので、ここでは「static」フォルダの「style.css」のパスを取り出していることがわかります。

 

あとは実際に実行してみて、CSSが反映されているかを確認します。

flask01_04

背景色、フッターの背景色、タイトル色などの装飾がされていることが確認できますね。

これでCSSの装飾は完了です。

 

CSSの装飾が更新されないときは?

style.cssのコードを変更して、いざ実行してみたけどWebアプリに反映されていないという場合があります。

これはCSSの内容がブラウザにキャッシュされ更新されていないからです。

対処法は

1:http://localhost:5000/static/style.cssにアクセス

2:F5キーを押してページを更新

3:http://localhost:5000に戻り更新を確認

とすることです。

 

実際に、背景色などを変えたときの工程で対処法を確認してみると

flask01_05

こんな様子で、青色の背景から紫色の背景に変わっていることが分かります。

CSSの装飾が反映されないときは、上記の方法を使って確認してみてください。

 

以上、Flask入門編でした。

Pythonだけでなく、HTMLやCSSファイルも扱うため難しく感じるかもしれませんが、ページごとの処理をファイルを分けてプログラムしているだけなので慣れてこればスラスラとコードがかけるようになると思います。

(と自分に言い聞かせてFlaskのレベルアップを頑張ります)

 

お疲れ様でした。

flask01-top-thumbnail
学びに関する情報をチェック!