演習 - アプリを作成する
ここでは、アプリケーションを繰り返し作成し、特定の概念を中心に説明します。 まず、アプリケーションのランディング ページを作成します。これにより、ユーザーが使用するフォームが表示されます。
通常、Flask アプリケーションのエントリ ポイントは、app.py という名前のファイルです。 ここでは、この規則に従って、アプリケーションのコアを作成します。 次の手順で行います。
- コア アプリケーションを作成する
- アプリケーションのルートを追加する
- サイト用の HTML テンプレートを作成する
- アプリケーションをテストする
コア アプリケーションを作成する
前に使用していた Visual Studio Code のインスタンスに戻り、[エクスプローラー] タブで [新しいファイル] をクリックして、app.py という名前の新しいファイルを作成します
重要
この演習で初めて Visual Studio Code を使用して Python アプリケーションを作成する場合は、Python 拡張機能とリンター pylint のインストールについてのメッセージが表示されます。 [インストール] を選択して、これらのアドオンをインストールします。
Flask アプリケーションを作成するためのコードを追加します
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
import ステートメントには、Flask アプリケーションの中核となる Flask への参照が含まれています。 HTML を返す必要があるとき、しばらくの間は render_template を使用します。
app がコア アプリケーションになります。 次のステップでルートを登録するときにそれを使用します。
ルートを追加する
このアプリケーションでは、1 つのルート / を使用します。 このルートは、ユーザーがドメインまたはサーバーの名前以外のものを指定しない場合に使用されるため、既定ルートまたはインデックス ルートと呼ばれることがあります。
app.py の最後に次のコードを追加します
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
@app.route を使用することにより、作成するルートを示します。 パスは / であり、これは既定ルートです。 GET にはこれが使用されることを示します。 / に GET 要求が送られてきた場合、Flask により、デコレータ (この場合は index) のすぐ下で宣言されている関数が自動的に呼び出されます。 index の本体では、index.html という名前の HTML テンプレートをユーザーに返すことを示します。
フォーム用の HTML テンプレートを作成する
Flask のテンプレート エンジンである Jinja では、HTML が非常に重視されています。 その結果、既にある HTML のスキルとツールをすべて使用できます。 ここでは、Bootstrap を使用してページをレイアウトし、少しよい見た目にします。 Bootstrap を使用するため、HTML で使用する CSS クラスが異なります。 Bootstrap に慣れていない場合は、クラスを無視し、HTML に注目することができます (これは間違いなく重要な部分です)。
重要
HTML (ハイパーテキスト マークアップ言語) は、Web ページの作成に利用される標準のマークアップ言語です。 HTML は、見出し、段落、リスト、画像、リンク、および Web ページを構成するその他の要素を作成するための一連のタグと属性で構成されます。 ユーザーが Web ページを要求すると、ブラウザーは HTML コードを読み取り、ユーザーが操作できるビジュアル Web ページとしてレンダリングします。 HTML の詳細については、「HTML の基本」を参照してください。
Flask のテンプレートは、templates という名前のフォルダーに作成する必要があります。これは固定です。 フォルダーと必要なファイルを作成し、HTML を追加してみましょう。
Visual Studio Code の [エクスプローラー] ツールで [新しいフォルダー] を選択して、templates という名前の新しいフォルダーを作成します
作成した templates フォルダーを選択し、[新しいファイル] を選択してファイルをフォルダーに追加します
ファイルの名前は index.html にします
次の HTML を追加します
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Translator</title> </head> <body> <div class="container"> <h1>Translation service</h1> <div>Enter the text you wish to translate, choose the language, and click Translate!</div> <div> <form method="POST"> <div class="form-group"> <textarea name="text" cols="20" rows="10" class="form-control"></textarea> </div> <div class="form-group"> <label for="language">Language:</label> <select name="language" class="form-control"> <option value="en">English</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ru">Russian</option> <option value="de">German</option> </select> </div> <div> <button type="submit" class="btn btn-success">Translate!</button> </div> </form> </div> </div> </body> </html>
上記の HTML のコア コンポーネントは、ユーザーが翻訳しようとしているテキストのための textarea と、ユーザーがターゲット言語を示すために使用するドロップダウン リスト (select) です。 言語をさらに追加する場合は、サポートされている言語の一覧に関するページで他のオプションを確認できます。 value 属性に言語コードを設定します (たとえば、ポーランド語の場合は pl)。
アプリケーションをテストする
最初のサイトを作成したら、テストしてみましょう。 作業を少し簡単にするため、Visual Studio Code 内の統合ターミナルを使用します。
Ctrl-` (Mac では Cmd-`) キーを押して、統合ターミナルを開きます
次のコマンドを実行して、Flask ランタイムを開発に設定します。これは、サーバーによってすべての変更の再読み込みが自動的に行われることを意味します
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=developmentアプリケーションを実行します。
flask runブラウザーで http://localhost:5000 に移動して、アプリケーションを開きます
フォームが表示されるはずです。 おめでとうございます。