1. HOME
  2. ブログ
  3. IT技術
  4. 【第8回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【管理者ページの仕上げ】

【第8回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【管理者ページの仕上げ】

第8回~モダンなフレームワークの使い方を学びながらブログシステムを構築~

連載「Python Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみる」第8回目です。

前回は、「メディアのアップロード機能」を実装しました。

管理者ページの整備を完成させよう

今回行うのは、「管理者ページの整備の仕上げ」です。

具体的には、以下の4点を実装していきます。

  1. プロフィール変更
  2. カテゴリの追加と修正
  3. タグの追加と修正
  4. 記事の編集・破棄

少し長くなりますが、ひとつひとつ確実にやっていきましょう!

プロフィール変更機能

それでは、ログインユーザの「プロフィール変更機能」から実装していきます。

ルーティングとビュー

まずは、いつも通り「ルーティング」と「ビュー」を作りましょう。

ルーティング

ユーザ情報を受け取る関数を用意

ここで、「ユーザ情報を受け取る関数」も用意しておきましょう。

firebase のモジュールに関数があるので、これだけでOKです。

また、 auth.get_user_by_email(email) によって返るのは UserRecode 型なので、「辞書型変数」で必要なものだけ返すようにします。

ビュー

そして、ビューはひとまずこんな感じです。

ユーザプロフィール変更画面

CSS

デザインは好きなもので構いません。

上記サンプルの CSS は、以下となります。

情報を更新する関数を作っておく

「/admin/profile/update」を作る前に、「Firebase の管理者情報を更新する関数」を作成しておきます。

RestAPI を使用しますが、この関数も Python の firebase モジュールにあります。

内容は、前に書いた「ユーザ取得関数」と大きな違いはありません。

これも、「辞書型変数」に直して、必要なデータだけ受け取るようにします。

管理者情報のアップデート処理のルーティング

では、実際に処理を書いていきましょう。

実装する処理内容は、以下の通りです。

  1. POSTデータを取得
  2. POSTデータに誤りがないかチェック
  3. 更新
  4. エラーがあればエラー処理
  5. なければ更新してクッキーも更新

さっそく実装してみます。

今回は細かいエラー処理は割愛しますが、本番サーバに上げる場合はしっかり実装しましょう!

カテゴリ (タグ) の追加と編集

次に、「カテゴリとタグに関するページ」を作っていきます。

ルーティングとビューの作成

ルーティング

ビュー

カテゴリのビューでは、「編集」「削除」「新規追加」を行えるようにします。

カテゴリ編集画面



こんな感じにしました。

それでは、処理を書いていきましょう!

新規追加

「新規追加」は、受け取った POST データをもとにデータを作って、アップロードするだけです。

以下のように実装すればOKです。

新規追加できた

カテゴリの削除

ドキュメント ID が分かれば、 delete() メソッドで削除できます。

今回、スラッグは一意に定まるものとしているので、以下のような実装で良いでしょう。

関数を作成

一旦、モデル側で関数を用意します。

コントローラ処理

コントローラ側の処理は、以下のようになります。

カテゴリの更新

まずは、「スラッグでカテゴリを取得し、新しいデータに変える関数」を作成します。

コントローラ処理

あとは、POST で受け取ったデータをコントローラ側で展開し、この関数を使って更新していくだけです。

以下のような実装で良いでしょう。

タグの実装手順も同じ

カテゴリとタグの実装手順は同じです。

タグの「更新」「削除」「新規追加」も、上記の手順に倣って実装してください。

記事の編集・破棄

記事の編集画面は、以前作成した新規追加ページ「new.html」を使います。

やることは以下の2つだけなので、何も難しいことはありません。

  1. 「/admin/new」なら、input value 要素には何も入れない
  2. 「/admin/edit/{slug} 」なら、記事の要素を input value要素に入れる + α

ルーティング

以前実装した get_article(slug) で、記事をコントローラ側で取得し、ビューに渡すだけです。

このとき、ビューでの POST 先は、以下のように設定します。

  1. 新規追加なら「/admin/add」
  2. 記事更新なら「/admin/article/update」

new.htmlの修正

次に、記事を展開するために、ビューを修正します。

修正点は以下の3点です。

  1. 空だった value の中身を変更
  2. POST 先 URL を追加
  3. カテゴリのチェックボックスを checked にする

このとき、 <input type="hidden" value="{{slug}}" name="original_slug"> で、オリジナルのスラッグをとっておきましょう。

スラッグが変更されても、記事をしっかり更新するためです。

/admin/new のコントローラも編集しておく

新規追加する際にも、引数として article をビューに渡さないとエラーになるので、 None を渡しておきます。

これでOKです。

記事のアップデート処理

あとは、記事の「更新」をするコードを書いていきます。

これは、先ほどのカテゴリ更新とほとんど同じです。

関数を作成

まずは、「スラッグから ID を取得して、記事のフィールドを更新する関数」を作ります。

コントローラ処理

そして、コントローラ側を実装していきます。

長いですが、中身は「記事追加」「カテゴリ更新」のコントローラとさほど変わらないので、大丈夫でしょう!

確認してみると

しっかり記事内容が反映されている

上出来です!

更新機能も、上手く動いていそうですね!

記事の削除

最後に、記事の「削除」について実装します。

削除ボタンを追加

まずは、先ほどのビューの「記事編集画面」に削除ボタンを追加しましょう。

場所はどこでも良いですが、とりあえず画面上部に設置しました。

関数を作成

記事削除の関数を作ります。

コントローラ処理

続いて、コントローラをコーディングします。

これで、管理者ページの実装は全て完了です!

お疲れ様でした!

第9回へつづく!

今回は長い道のりでしたが、一気に管理者ページを仕上げることができました。

あとは、ブログを表示する「フロント側の実装」がメインになります。

もう終盤戦です、このまま頑張っていきましょう!

次回の記事はこちら

第1回はこちら

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

書いた人はこんな人

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

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

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

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

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

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界を変える…! /

Androidエンジニア

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

iOSエンジニア