1. HOME
  2. ブログ
  3. IT技術
  4. 【第4回】FastAPIチュートリアル: toDoアプリを作ってみよう【管理者ページ改良編】

【第4回】FastAPIチュートリアル: toDoアプリを作ってみよう【管理者ページ改良編】

FastAPIチュートリアル: toDoアプリを作ってみよう~第4回~

前回の記事「【第3回】FastAPIチュートリアル: toDoアプリを作ってみよう【認証・ユーザ登録編】」の続きです。

今回も、toDoアプリを作る過程で、FastAPIの使い方を学んでいきましょう!

第1回はこちら

管理者ページをより使いやすく

現在、管理者ページ(ログインユーザごとのページ)は、登録した予定を羅列しているだけのダサいページです。

本来のtoDoアプリケーションで、最低でも以下の機能が欲しいところです。

欲しい機能

  1. カレンダーでパッと予定を把握できる
  2. カレンダーの日付から予定を追加・削除・終了ができる
  3. 直近の予定はわかりやすく

こんなところでしょうか。

これらは、やや難しそうに見えますが、Pythonなら簡単に実現できますので、本FastAPIベースのアプリケーションでも導入してみます。

カレンダーをつくる

Pythonでは「calendar」と呼ばれるモジュールがあり、とても簡単にカレンダーをテキスト形式やHTML形式で作成できます。

HTML形式であれば、以下のように簡単に取得できます。

デフォルトのままでも良いのですが、カレンダーの日付をリンクさせたいので、 LocaleHTMLCalendar クラスを継承してマイカレンダーを作りましょう!

そのために、mycalendar.pyというファイルを作成しましょう!

MyCalendarクラス

このファイルでは、先ほども言ったように、自分好みのカレンダーを作成するために、元々のクラスを継承します。

そのため、まずは、以下のような大枠を作ります。

次に、コンストラクタ(Pythonではイニシャライザと言う)を作成します。

このとき、親クラスのコンストラクタも継承するため、以下のような書き方になります。

また、ここでは、新たな引数として「ログインユーザ名(username)」と「予定」を、辞書型変数(dict{'datetime': done})で渡されることを想定しておきます。

全体の体裁を少し変える

LocaleHTMLCalendarクラスで生成されるHTMLは、「年テーブルの中に月テーブル」のようなテーブルが入れ子(ネスト)されています

まずは、見やすくするため、月ごとのテーブルに枠をつけます。

LocaleHTMLCalendar クラスのメソッドをオーバーライド(上書き)していきましょう。

以下のコードは複雑そうに見えますが、中身はほとんど親クラスの元々のメソッドと同じです。

週メソッドと日メソッドも上書きする

週メソッドは、「自身の引数」と「日メソッドに渡す引数」を変更しています。

ちなみに、このように親クラスのメソッドと異なる引数を指定すると、PyCharm などの IDE では注意されます。

PyCharmでは注意される

これは、Pythonでは、オーバーロード(引数違いであれば同じ名前の関数を定義できること)がサポートされていないためです。

しかし、元々の関数を別で使うわけでもないのでOKです。

日を取得するメソッドで

日を取得するメソッドでは少し工夫を加えます。

本アプリは以下の要素を加えてみました。

  1. 空白の日は背景色を薄いグレーに
  2. 終了した予定は背景色を緑、テキストカラーを白に
  3. 過去の予定で終了していないものは背景色を濃いグレー、テキストカラーを白に
  4. これからの予定は背景色を黄色にする
  5. 全ての日付を「/todo/{username}/{year}/{month}/{day}」というURLでリンクする

実装

これらを実装すると以下のようになります。

少し長々として複雑ですが、これでMyCalendarは完成です。

adminコントローラを修正する

次に、このカレンダーを使うために関数を修正しましょう。

その前に、作ったカレンダーをインポートするのを忘れずに!

大々的に admin() を修正します。

しかし、大方の作業は、先ほどのMyCalendarクラスでやっていますので、コード自体は大したことありません。

新しく追加した分の前には「"""」でコメントを添えています。

内包表記をたくさん使用していますが、もしこの辺りの知識が曖昧であれば「Pythonの内包表記」を復習しましょう!

ビューを修正する

最後に、ビュー(templates/admin.html)を修正します。

主な修正ポイントは、後半のカレンダー部分だけですが、 {% autoescape false %} でタグをエスケープしておく必要があります。

動作確認

ここまで長かったですが、動作確認してみましょう!

以下は、表示例です。

(皆さんがテーブルに追加した内容でビューも変わるので以下が正解ということではありません)。

確認

adminページの表示例

多少、カレンダーの上端が揃っていないのが気になるところではあります。

が、良しとしましょう(笑)

うまく、「カレンダーの表示」と「直近の予定」が表示されていることがわかります。

また、各リンクが正しいリンク(/todo/{username}/{year}/{month}/{day}になっているかも確認してください。

第4回:さいごに

今回は、管理者ページを主に修正しました。

少しFastAPIとは別の部分の解説ばかりになってしまいましたが、次回は少しFastAPI寄りの話題に戻します。

次回は、先ほどリンク付けした /todo/{username}/{year}/{month}/{day} を作成していきましょう!

URLパターンによって、処理を変える術を解説します!

第5回の記事はこちら

ResponderとFastAPIを実際に使って比較してみた

こちらの記事もオススメ!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア