Python 3を使用してFlaskを使ったWebアプリケーションを作成する方法

12か月 ago
海斗, 葵
15 minutes

著者は、寄付を受けるためにFree and Open Source Fundを選びました。これはWrite for Donationsプログラムの一環です。

はじめに

Flaskは、Pythonでウェブアプリケーションを作成する際に役立つツールや機能を提供する、小さく軽量なPythonウェブフレームワークです。このフレームワークは、開発者に柔軟性を与え、新たな開発者にとってもアクセスしやすいです。たった一つのPythonファイルを使用して、素早くウェブアプリケーションを構築することができます。Flaskは拡張可能でもあり、特定のディレクトリ構造を強制したり、複雑な雛形コードを必要としません。

このチュートリアルの一環として、Bootstrapツールキットを使用して、アプリケーションのスタイルを整え、より視覚的に魅力的にします。Bootstrapは、自分自身でHTML、CSS、JavaScriptのコードを書かずに、レスポンシブなウェブページをウェブアプリケーションに統合するのに役立ち、モバイルブラウザでもうまく動作します。このツールキットによって、Flaskの動作を学ぶことに集中することができます。

Flaskは、変数、ループ、リストなどのPythonの概念を使いながら、Jinjaテンプレートエンジンを使用してHTMLページを動的に構築します。このプロジェクトの一部としてこれらのテンプレートを使用します。

このチュートリアルでは、FlaskとPython 3を使用して小さなWebブログを作成します。アプリケーションのユーザーはデータベース内のすべての投稿を表示し、投稿のタイトルをクリックして内容を表示することができます。また、データベースに新しい投稿を追加したり、既存の投稿を編集したり削除したりすることもできます。

Info

デジタルオーシャンのアプリプラットフォームを使用して、Flaskアプリケーションのデプロイを簡素化しましょう。数分でGitHubから直接Flaskをデプロイできます。

前提条件

このガイドに従う前に、以下が必要です。

  • A local Python 3 programming environment, follow the tutorial for your distribution in How To Install and Set Up a Local Programming Environment for Python 3 series for your local machine. In this tutorial we’ll call our project directory flask_blog.
  • An understanding of Python 3 concepts, such as data types, conditional statements, for loops, functions, and other such concepts. If you are not familiar with Python, check out our How To Code in Python 3 series.

ステップ1 — Flaskのインストール

このステップでは、Pythonの環境をアクティブにして、pipパッケージインストーラーを使用してFlaskをインストールします。

もしまだプログラミング環境を起動していない場合は、プロジェクトディレクトリ（flask_blog）にいることを確認し、次のコマンドを使って環境を起動してください。

  1. source env/bin/activate

 

プログラミング環境が起動されると、プロンプトには以下のような環境接頭辞が付きます。

 

この接頭辞は、環境envが現在アクティブであることを示しており、それが作成時にどのように名前を付けたかによって別の名前を持つ可能性があります。

Note

注意：プロジェクトの開発プロセスを効果的に管理し追跡するために、バージョン管理システムであるGitを使用することができます。Gitの使用方法を学ぶためには、私たちの「Gitインストール使用とブランチの紹介」の記事をチェックしてみることをおすすめします。
Gitを使用している場合は、プロジェクトに関係のないファイルを追跡しないために、新しく作成されたenvディレクトリを.gitignoreファイルに無視するのが良いアイデアです。

今度はPythonパッケージをインストールし、プロジェクトコードをメインのPythonシステムインストールから分離します。これはpipとpythonを使用して行います。

Flaskをインストールするには、以下のコマンドを実行してください。

  1. pip install flask

 

インストールが完了したら、インストールが正しく行われたことを確認するために、以下のコマンドを実行してください。

  1. python -c “import flask; print(flask.__version__)”

 

Pythonのコマンドラインインターフェースを、オプション「-c」を使用してPythonコードを実行します。次に、flaskパッケージを「import flask;」でインポートし、flask.__version__変数で提供されるFlaskのバージョンを表示します。

次のようなバージョン番号が出力されます。

Output

1.1.2

プロジェクトフォルダを作成し、仮想環境を設定し、Flaskをインストールしました。これで基本的なアプリケーションのセットアップに進む準備が整いました。

ステップ2- ベースアプリケーションの作成

Pythonファイル内に小さなウェブアプリケーションを作成し、サーバーを起動してブラウザ上に情報を表示します。これにより、プログラミング環境の準備が整ったので、Flaskを使って始めましょう。

あなたのflask_blogディレクトリで、編集用にhello.pyという名前のファイルを開き、nanoもしくはお気に入りのテキストエディタを使用してください。

  1. nano hello.py

 

このhello.pyファイルは、HTTPリクエストを処理する方法の最小限の例として使用されます。それには、Flaskオブジェクトをインポートし、HTTPレスポンスを返す関数を作成します。以下のコードをhello.py内に書いてください。

フラスコ_ ブログ/こんにちは.py
from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return 'Hello, World!'

前のコードブロックでは、まずflaskパッケージからFlaskオブジェクトをインポートします。それから、それを使用して名前がappのFlaskアプリケーションインスタンスを作成します。現在のPythonモジュールの名前を保持する特殊な変数__name__を渡します。これはインスタンスに場所がどこかを伝えるために使用されます- Flaskは裏でいくつかのパスを設定するため、これが必要です。

アプリのインスタンスを作成した後、それを使用して受信したウェブリクエストの処理やユーザーへのレスポンスの送信を行います。@app.routeは、通常のPython関数をFlaskのビュー関数に変換し、関数の返り値をHTTPクライアント（ウェブブラウザなど）が表示するためのHTTPレスポンスに変換するデコレータです。@app.route()に’/’の値を渡すことで、この関数がURL’/’に対するウェブリクエストに応答することを示します。これはメインのURLです。

hello()ビュー関数は、応答として文字列「こんにちは、世界！」を返します。

ファイルを保存して閉じてください。

ウェブアプリケーションを実行するためには、まずFLASK_APP環境変数を使用して、Flaskにアプリケーション（この場合はhello.pyファイル）の場所を指定します。

  1. export FLASK_APP=hello

 

以下のようにフラスコ環境変数（FLASK_ENV）を使用して、開発モードで実行してください。

  1. export FLASK_ENV=development

 

最後に、flask runコマンドを使用してアプリケーションを実行してください。

  1. flask run

 

アプリケーションが実行されると、出力は次のようになります。

Output

* Serving Flask app “hello” (lazy loading) * Environment: development * Debug mode: on * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 813-894-335

先行する出力には、以下の情報がいくつか含まれています。

  • The name of the application you’re running.
  • The environment in which the application is being run.
  • Debug mode: on signifies that the Flask debugger is running. This is useful when developing because it gives us detailed error messages when things go wrong, which makes troubleshooting easier.
  • The application is running locally on the URL http://127.0.0.1:5000/, 127.0.0.1 is the IP that represents your machine’s localhost and :5000 is the port number.

ブラウザを開き、URL http://127.0.0.1:5000/ を入力してください。すると、”Hello, World!”という文字列が応答されます。これにより、アプリケーションの正常な動作が確認できます。

Warning

Flaskを使用する際には、開発環境でアプリケーションを提供するために単純なウェブサーバーが使用されますが、それに伴いFlaskデバッガーも実行され、エラーのキャッチが容易になります。この開発サーバーは本番展開では使用しないでください。詳細については、Flaskのドキュメントのデプロイメントオプションページをご覧ください。また、このFlaskのデプロイチュートリアルも参考になります。

今度は、開発サーバーをターミナル上で実行したままで、別のターミナルウィンドウを開いてください。hello.pyがあるプロジェクトフォルダーに移動し、仮想環境をアクティベートし、環境変数FLASK_ENVとFLASK_APPを設定し、次の手順に進んでください。（これらのコマンドはこの手順の前にリストされています。）

Note

注意：新しいターミナルを開く際には、仮想環境をアクティベートし、環境変数FLASK_ENVとFLASK_APPを設定することを忘れないようにしてください。
Flaskアプリケーションの開発サーバーが既に実行中の場合、同じflask runコマンドで別のFlaskアプリケーションを実行することはできません。これは、flask runがデフォルトでポート番号5000を使用しており、一度使用されると他のアプリケーションを実行することができなくなるため、以下のようなエラーが発生します：
OutputOSError: [Errno 98] Address already in use

この問題を解決するためには、現在実行中のサーバーをCTRL+Cで停止し、再度flask runを実行するか、同時に両方を実行したい場合には、-p引数に異なるポート番号を指定することができます。例えば、ポート番号5001で別のアプリケーションを実行する場合は、以下のコマンドを使用します：
flask run -p 5001

現在、小さなFlaskのウェブアプリケーションをお持ちです。アプリケーションを実行し、ウェブブラウザ上で情報を表示しました。次に、アプリケーション内でHTMLファイルを使用します。

ステップ3 — HTMLテンプレートを使用する

現在のアプリケーションは、HTMLを使用せずに単純なメッセージのみを表示しています。ウェブアプリケーションでは主にHTMLを使用して、訪問者に情報を表示しますので、今後はアプリにHTMLファイルを組み込んで、ウェブブラウザ上で表示できるように取り組むことになります。

フラスクには、Jinjaテンプレートエンジンを利用するためのrender_template()というヘルパー関数が用意されています。これによって、HTMLコードを.htmlファイルに記述することや、HTMLコード内でロジックを使用することが容易になります。これらのHTMLファイル（テンプレート）を使用して、現在のブログ記事を表示するメインページ、ブログ記事のページ、ユーザーが新しい記事を追加できるページなど、アプリケーションのすべてのページを構築します。

このステップでは、新しいファイルで主要なFlaskアプリケーションを作成します。

まず、flask_blogディレクトリで、nanoまたはお気に入りのエディタを使用してapp.pyファイルを作成して編集します。このファイルには、ブログアプリケーションを作成するために使用するすべてのコードが含まれます。

  1. nano app.py

 

新しいファイルには、以前と同様にFlaskオブジェクトをインポートしてFlaskアプリケーションのインスタンスを作成します。また、作成するテンプレートフォルダ内に存在するHTMLテンプレートファイルをレンダリングするためのrender_template()ヘルパー関数もインポートします。このファイルには、メインの/ルートへのリクエストを処理する単一のビュー関数が含まれます。以下のコンテンツを追加してください。

フラスクブログ/アップ.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

index()ビュー関数は、index.htmlを引数にしてrender_template()を呼び出した結果を返します。これにより、render_template()はtemplatesフォルダ内のindex.htmlというファイルを探すようになります。ただし、このフォルダとファイルはまだ存在していませんので、アプリケーションを実行するとエラーが発生します。それにもかかわらず、一般的に遭遇する例外に慣れるために実行します。その後、必要なフォルダとファイルを作成して修正します。

ファイルを保存して終了してください。

「こんにちは」アプリケーションを実行している別のターミナルで、開発サーバーをCTRL+Cで停止してください。

アプリケーションを実行する前に、FLASK_APP 環境変数の値を正しく指定してください。なぜなら、もはやアプリケーション hello が使用されていないからです。

  1. export FLASK_APP=app
  2. flask run

 

ブラウザでURL http://127.0.0.1:5000/ を開くと、デバッガーページが表示され、index.htmlテンプレートが見つからなかったことが通知されます。このエラーの原因となったコードのメインラインが強調されます。この場合、それは行return render_template(‘index.html’)です。

この行をクリックすると、デバッガがさらにコードを表示して、問題を解決するためにより多くの文脈を提供します。

The Flask Debugger

このエラーを修正するには、flask_blogディレクトリ内にtemplatesというディレクトリを作成してください。そしてその中にあるindex.htmlというファイルを編集するために開いてください。

  1. mkdir templates
  2. nano templates/index.html

 

次に、index.html内に以下のHTMLコードを追加してください。

以下の内容を日本語で自然に表現するよう書き換えてください。１つのオプションで構いません。

「flask_blog/templates/index.html」

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlaskBlog</title>
</head>
<body>
   <h1>Welcome to FlaskBlog</h1>
</body>
</html>

ファイルを保存し、ブラウザで再度http://127.0.0.1:5000/に移動するか、ページを更新してください。この時、ブラウザは

タグ内の「FlaskBlogへようこそ」のテキストを表示するはずです。

フラスクのWebアプリケーションでは、テンプレートフォルダに加えて、通常スタティックフォルダも存在します。このスタティックフォルダは、CSSファイルやJavaScriptファイル、そしてアプリケーションが使用する画像など、静的なファイルをホスティングするために使用されます。

メインのflask_blogディレクトリ内に、CSSをアプリケーションに追加するためのstyle.cssスタイルシートファイルを作成することができます。まず、staticという名前のディレクトリを作成してください。

  1. mkdir static

 

その後、 staticディレクトリの中にcssと呼ばれる別のディレクトリを作成して、.cssファイルを保存するための場所を用意しましょう。通常は、静的なファイルを専用のフォルダに整理するためにこのような操作が行われます。例えば、JavaScriptファイルは通常、jsというディレクトリの中に保存され、画像はimages（またはimg）というディレクトリに入れられます。次のコマンドで、staticディレクトリ内にcssディレクトリを作成します。

  1. mkdir static/css

 

その後、編集のためにcssディレクトリ内のstyle.cssファイルを開いてください。

  1. nano static/css/style.css

 

style.cssファイルに以下のCSSルールを追加してください。

フラスクブログの静的なcssスタイル、style.cssです。
h1 {
    border: 2px #eee solid;
    color: brown;
    text-align: center;
    padding: 10px;
}

CSSコードは、

タグにボーダーを追加し、色を茶色に変更し、テキストを中央に配置し、少しのパディングを追加します。

ファイルを保存して閉じてください。

次に、編集用にindex.htmlのテンプレートファイルを開いてください。

  1. nano templates/index.html

 

インデックス.htmlのテンプレートファイルのセクションにstyle.cssファイルへのリンクを追加します。

以下は、flask_blog/templates/index.htmlのネイティブな日本語の一つのオプションでの言い換えです。

「フラスクブログのテンプレート、index.htmlです。」

. . .
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
    <title>FlaskBlog</title>
</head>
. . .

ここでは、url_for()ヘルパー関数を使用してファイルの適切な場所を生成します。最初の引数は、静的ファイルへのリンクであることを指定し、2番目の引数は静的ディレクトリ内のファイルのパスです。

ファイルを保存して閉じる。

アプリケーションのインデックスページをリフレッシュすると、FlaskBlogというテキストが茶色で中央に配置され、ボーダーで囲まれていることに気づくでしょう。

アプリケーションをより魅力的にするために、CSS言語を使って独自のデザインでスタイルを設定することができます。しかし、もしウェブデザイナーでない場合やCSSに慣れていない場合は、Bootstrapツールキットを使用することもできます。Bootstrapは使いやすいコンポーネントを提供してアプリケーションをスタイリングすることができます。このプロジェクトではBootstrapを使用します。

「index.html」テンプレートで既に書いたHTMLコードのほとんどを繰り返さなければならないと思っているかもしれません。しかし、すべてのHTMLファイルが継承するベーステンプレートファイルのおかげで、不要なコードの繰り返しを避けることができます。詳細はJinjaのテンプレート継承を参照してください。

ベーステンプレートを作るためには、まずテンプレートディレクトリ内に「base.html」という名前のファイルを作成してください。

  1. nano templates/base.html

 

ご自身のbase.htmlテンプレートに以下のコードを入力してください:

flask_blog/templates/base.htmlの以下を日本語で言い換えると、以下のようになります：

「flask_blog/templates/base.html」

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>{% block title %} {% endblock %}</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="{{ url_for('index')}}">FlaskBlog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">About</a>
            </li>
            </ul>
        </div>
    </nav>
    <div class="container">
        {% block content %} {% endblock %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

編集が終わったら、ファイルを保存して閉じてください。

以前のブロックのほとんどのコードは、標準のHTMLとBootstrapに必要なコードです。タグはウェブブラウザーに情報を提供し、 タグはBootstrapのCSSファイルへのリンクです。また、

コメントを残す 0

Your email address will not be published. Required fields are marked *