FlaskとJavaScriptを使った動的画像表示アプリケーション<

2023.06.06
IT

1. FlaskとJavaScriptを使った動的画像表示アプリケーション

FlaskとJavaScriptを使った動的画像表示アプリケーション

今回はPythonのFlaskとJavaScriptを用いて、ディレクトリ内の最新の画像を自動的に表示するWebアプリケーションを作成します。

アプリケーションの要件

指定したディレクトリ内の画像を監視する。
ブラウザが要求するたびに、最新の画像を見つけて表示する。
ブラウザは1秒ごとに新しい画像を要求する。

Flaskアプリケーションのコード


from flask import Flask, send_file, render_template_string
import os

app = Flask(__name__)

# 監視するディレクトリを指定します
img_directory =</code> "/Users/result" @app.route('/') def index(): return render_template_string(""" &lt;img id="myImage" src="{{ url_for(" /&gt; &lt;script&gt; setInterval(() =&gt; { document.getElementById('myImage').src = '{{ url_for('display_image') }}' + '?' + new Date().getTime(); }, 1000); &lt;/script&gt; """) @app.route('/image') def<code> display_image():
    # ディレクトリ内の全ファイルをリスト化します
    files = [os.path.join(img_directory, f) for f in os.listdir(img_directory) if os.path.isfile(os.path.join(img_directory, f))]

    # ファイルを最終変更時間でソートします
    files.sort(key=lambda x: os.path.getmtime(x), reverse=True)

    # ディレクトリ内に画像がある場合、最新の画像を返します
    if files:
        return send_file(files[0], mimetype='image/*')
    else:
        return "No image found."

if __name__ == '__main__':
    # Flaskアプリケーションを起動します
    app.run(port=8080)

from flask import Flask, send_file, render_template_string

import os

app = Flask(__name__)

# 監視するディレクトリを指定します

img_directory =</code> "/Users/result" @app.route('/') def index(): return render_template_string(""" <img id="myImage" src="{{ url_for(" /> <script> setInterval(() => { document.getElementById('myImage').src = '{{ url_for('display_image') }}' + '?' + new Date().getTime(); }, 1000); </script> """) @app.route('/image') def<code> display_image():

# ディレクトリ内の全ファイルをリスト化します

files = [os.path.join(img_directory, f) for f in os.listdir(img_directory) if os.path.isfile(os.path.join(img_directory, f))]

# ファイルを最終変更時間でソートします

files.sort(key=lambda x: os.path.getmtime(x), reverse=True)

# ディレクトリ内に画像がある場合、最新の画像を返します

if files:

return send_file(files[0], mimetype='image/*')

else:

return "No image found."

if __name__ == '__main__':

# Flaskアプリケーションを起動します

app.run(port=8080)

コードの解説

このコードでは、画像を返すdisplay_image関数が毎回ディレクトリをスキャンし、最新の画像を返します。JavaScriptは以前と同じように、1秒ごとに新しい画像を要求します。新しい画像がディレクトリに追加されると、その画像は自動的に表示されます。

setInterval関数はJavaScriptのビルトイン関数で、特定の間隔（ミリ秒単位）ごとに指定した関数を実行します。ここでは、1秒（1000ミリ秒）ごとに画像のsrc属性を更新しています。new Date().getTime()は現在の時刻を返し、これをURLの末尾に追加することでブラウザのキャッシュを回避し、常に最新の画像を取得します。

このように、PythonのFlaskとJavaScriptを組み合わせることで、ディレクトリ内の最新の画像をリアルタイムに表示する動的なWebアプリケーションを作成することができます。