0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

研修でflaskを使用したので、ナレッジをまとめる。

Posted at

はじめに

研修で、flaskを使用してAPIを実行するアプリケーションを作成した。
flaskを使用することで、webアプリケーションのバックグラウンドをpythonで記述することができるようだ。

install と import

shell
pip install flask

でインストールをすることができる。
importする際には、

import
from flask import Flask

とインポートする。

基本の使い方

初めに、app.pyファイルを作成する。

flaskを実行したディレクトリ中のapp.pyが実行される。

app.pyファイルの中身について説明をする。

app.py
app = Flask.app()

初めに/が呼ばれるため、@app.route("/")を使用し関数index()を定義する。

app.py(続き)
@app.route("/")
def index():
    return "Hello, World"

実行する為には、flask runコマンドを使用する。

flask run

次のようなWebページ( http://127.0.0.1:5000 )が生成される。

スクリーンショット 2025-05-17 12.42.29.png

これは、ローカルホストとして実行している。よって、このURLを共有しても他のインターネットに接続しているユーザーはブラウザにアクセスすることができない。

HTMLの表示

flaskを使用することで、htmlで作成したファイルを表示させることもできる。その為には、次のようなディレクトリ構造を作成する必要がある。

app.py
templates/index.html

templateディレクトリ中にhtmlファイルを作成する。

template/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テストWebアプリ</title>
</head>
<body>
    <h1>index.html表示してます</h1>
</body>
</html>

app.pyも次のように書き換える

app.py
import sys, os
from flask import Flask ,render_template

app = Flask(__name__)

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

実行結果は次のようになる。

スクリーンショット 2025-05-17 17.07.05.png

ボタン機能の追加

簡単なボタンを作成し、ボタンが押された場合に文字列を表示させるように追記する。
なお、表示させる文字列は、app.py側で指定できるようにする。

まずは、新しいhtmlファイルを作成する。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テストWebアプリ</title>
</head>
<body>
    <h1>index.html表示してます</h1>
    <!-- ボタンフォーム:POSTで同じURLに送信 -->
    <form method="POST" action="/button">
        <button type="submit">ボタン</button>
        <!-- ボタンが押されたときに表示されるメッセージ -->
        <p>{{ message }}</p>
    </form>
</body>
</html>

formを追加している。formのactionbuttonと設定している。この変数名を使用し、flask側で処理を実行する。

次に、python側の変更点についてみていく。

app.py
import sys, os
from flask import Flask ,render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    return render_template("index.html")

@app.route("/button", methods=["GET", "POST"])
def button():
    message = "app.pyからのメッセージ"
    if request.method == "POST":
        return render_template("index.html", message = message)

このように、@app.route()の引数として/buttonを使用している。
また、戻り値として、messageを追加している。

上記app.pyを実行すると次の結果を得られる。

スクリーンショット 2025-05-17 21.42.55.png
ボタンを押下すると、、、
スクリーンショット 2025-05-17 21.43.37.png
のように表示される。

他にもhtmlのformを使用することでさまざまな動作を作成することができる。

まとめ

JavaScriptをあまり使用したことがないため、JavaScriptを使用した実例は避けたが、今後、JavaScriptを使用していく上で有用な方法があれば紹介する。

action属性の名称を設定するだけで簡単に動作するので扱いやすいと感じた。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?