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 では注意されます。

fastapi_4-1

PyCharmでは注意される

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

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

日を取得するメソッドで

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

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

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

実装

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

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

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

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

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

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

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

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

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

ビューを修正する

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

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

動作確認

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

以下は、表示例です。

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

確認

fastapi_4-2

adminページの表示例

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

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

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

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

第4回:さいごに

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

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

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

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

関連記事

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事