今日のPython 第29回「TOP画面を作ってurl_forで、リンクを作成して画面遷移する」

   作成：2025/1/19

はじめに

■解説■

• 新規にユーザを登録するためのページ

■画面②：「ログイン」ページ■

■解説■

• ユーザ登録を済ませた後、家計簿のページにログインするためのページ

■画面③：「家計簿」ページ■

■解説■

• ログインすると表示される家計簿のページ

改善が必要な点

各ページ間につながりがない状態です。

今回実施すること

今回は、これらのページにつながりを持たせます。画面遷移の構成は次のとおりです。

■図（画面遷移の構成）■■解説等■

• 現在作成済みのページに、TOPページを追加します。
• そして、TOPページから、リンクを作成して画面遷移できるようにします。
• 各ページ間は、上図のように遷移します。
• リンクには、url_for関数を使用します。

url_for関数とは

url_forでリンクを追加

■コード①■■解説等■

• 以前、テスト的に準備したindex.htmlをTOPページにします。
• 表題を「TOPページ」として「家計簿ページ」へのリンクを追加します。
• リンク先はログイン画面のページです。
• https://でアドレス指定しなくて良いので便利です。

普通にHTMLだけ使って

<a href='/login'>家計簿ページ</a>

でも良いのですが、「url_for」を使えば、URLを変更するときテンプレートは変更しなくても良いのでこのように実装する方がおすすめです。

HTMLのアンカータグを使う場合は、次のようになります。

■コード②■■解説等■

• リンク先のログイン画面のページには、「ユーザ登録」ページへのリンクと「TOPページ」へのリンクを追加します。
• こちらは、url_forを使わず、リンクしてみました。
• main.pyの@app.route('/signup')等にリンクします。

■コード③■■解説等■

• リンク先の新規登録画面のページには、「ログイン」ページへのリンクと「TOPページ」へのリンクを追加します。
• こちらも同様にmain.pyの@app.route('/login')等にリンクします。

実施結果

表示画面

■画面④：TOPページ■

• index.htmlをTOPページとしました。「家計簿ページ」のリンクをクリックすると、「ログイン」ページに移動します

■画面⑤：「ログイン」ページ■

■解説■

• 「新規登録はこちら」のリンクをクリックすると「ユーザ登録」ページに移動します。
• 「TOPに戻る」のリンクをクリックすると「TOP」ページに移動します。

■画面⑥：「ユーザ登録」ページ■

■解説■

• 「ログインはこちら」のリンクをクリックすると「ログイン」ページに移動します。
• 「TOPに戻る」のリンクをクリックすると「TOP」ページに移動します。

関連ファイルの説明

プログラムの修正の紹介は、関連するファイルとそのコード修正について部分的に抜粋して説明していますので、全体のどの部分を修正しているのかを把握し辛いと思います。

その点を緩和するために、このプロジェクトで使用するファイルやフォルダ構成を、別ページで解説しています。

必要に応じてご覧ください。（→参考)

まとめ

今回は、家計簿関連のページにつながりを持たせてみました。

家計簿ページのWEBページとしての構成が少し形づくられて、また一歩前進できました。