• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer

AI活用エンジニアへの道

生成AI時代のエンジニアの生き方を考えるメディア(作成途中)

  • コラム
  • 生成AI
  • プログラミング
    • Python入門
    • Flask入門
    • Django入門
  • プロフィール
Home / プログラミング / Flask / Flaskのテンプレートでurl_forを用いてリンク作成、画像表示を行う。

Flaskのテンプレートでurl_forを用いてリンク作成、画像表示を行う。

1 url_forを利用して、リンクを作成して画面遷移する
2 url_forで値を渡して、関数を実行する
3 url_forで画像、css, javascriptなどの静的コンテンツを読み込む
4 関連記事

url_forを利用して、リンクを作成して画面遷移する

url_forは、エンドポイントから、そのURLを生成する関数で、テンプレート上でaタグでリンクを作成したり画像を表示する場合などに用いられる。

・関数名を指定してそのviewに遷移する

<a  href="{{ url_for('関数名') }}">New Page</a>

・テンプレート上で画像を表示する

<img src="{{ url_for('static', filename='〇〇.jpg') }}">

 
では、以下に具体例を記述する。

Example

  • views.pyの定義
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/') # http://○○○/の場合に実行される
def index():
    return render_template('index.html')

@app.route('/user') # http://○○○/userの場合に実行される
def user():
    return render_template('user.html')

if __name__ == '__main__':
    app.run()

 

  • user関数実行時のテンプレート(user.html)
<p>USERページ</p>
<a href="{{ url_for('index') }}">Index Page</a> <!-- views.pyのindex関数を実行するリンク -->

 

  • index関数実行時のテンプレート(index.html)
<p>INDEXページ</p>

 

  • ファイルの階層構造

以下のように各フォルダ、ファイルを配置する。

 

  • 画面表示時(http://127.0.0.1:5000/user)


 
次に、画面上のIndex Pageをクリックすると、index関数が実行されて、index.htmlが表示される。

  • Index Pageクリック時

url_forで値を渡して、関数を実行する

url_forでは、引数を取った関数を実行することもできる。
それには、

url_for('add', variable=foo)

として、カンマ(,)で区切って変数を指定する。
例えば、以下のように記述する。

Example

  • user.htmlの定義
<p>USERページ</p>
<a href="{{ url_for('index', msg='hello') }}">Index Page</a>
<!-- index関数をmsgをhelloとして実行する -->

 
次に、views.pyのindex関数の定義で、msgを引数に取るようにする

@app.route('/index/<string:msg>')
def index(msg):
    return render_template('index.html', msg=msg)

url_forで画像、css, javascriptなどの静的コンテンツを読み込む

url_forを用いて、画像や、css, javascriptなどと言った静的コンテンツを読み込むこともできる。
利用する際には、url_forの第一引数にはstaticにする。
デフォルトで、staticフォルダ内のファイルを見る

Example

  • 画像を読み込んで表示する
<img src="{{ url_for('static', filename='apple.jpg') }}"> <!-- staticフォルダ内のapple.jpgを表示する -->

 

  • cssファイルを読み込む
<link rel="stylesheet" href={{ url_for('static', filename='css/base.css') }}> <!-- staticフォルダ内のcss/base.cssを読み込む -->

 

  • javascriptファイルを読み込む
<script src={{ url_for('static', filename='js/myjs.js') }}gt;</script><!-- staticフォルダ内のjs/myjs.jsを読み込む -->

 

  • ファイルを階層構造


« Previous

テンプレートを自作する方法

Next »

リダイレクトを行う方法


Flask入門記事一覧はこちら

関連記事

FlaskでFormを用いてPOSTリクエストを行い、送信された値を取得する
FlaskでFormを用いてPOSTリクエストを行い、送信さ…
Flaskでabortを用いてHTTPException例外を強制的に発生させる
Flaskでabortを用いてHTTPException例外…
Flaskで404, 500などのエラーハンドリングを行う方法についてまとめました
Flaskで404, 500などのエラーハンドリングを行う方…
flaskでリダイレクト処理を行う(flask.redirect)
flaskでリダイレクト処理を行う(flask.redire…
Flaskのテンプレートのフィルターを自作する方法についてまとめました
Flaskのテンプレートのフィルターを自作する方法についてま…
Flaskのテンプレートのフィルター機能の利用、フィルター一覧
Flaskのテンプレートのフィルター機能の利用、フィルター一…

Primary Sidebar

人気記事

  • 1
    PyCharm,IntelliJのおすすめプラグイン一覧
  • no image 2
    Python未経験だが、フリーランスの案件に採用さ…
  • 3
    ITエンジニアとしてスキルを高めるためのUdemy講…
  • 4
    アメリカのシリコンバレーでプログラミングを無…

特集記事

  • 1
    Cursorの使用のポイントとコツ(コード補完、イ…
  • 2
    ITエンジニアとしてスキルを高めるためのUdemy講…

目次

1 url_forを利用して、リンクを作成して画面遷移する
2 url_forで値を渡して、関数を実行する
3 url_forで画像、css, javascriptなどの静的コンテンツを読み込む
4 関連記事
StartCode ロゴ
AI時代のエンジニアを最速で育てる
法人向けIT研修で即戦力を育成しています。詳しくはお問い合わせください。
▶ 詳細はこちら
Flask講座
【Udemy】Flask入門講座(0からFlaskを学習: Python講座つき)
受講生6500人ほどの人気講座。<strong>View, Template, Model</str...
詳細 ▶

Footer

利用規約