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回へつづく!

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

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

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

(株)ライトコードは、WEB・アプリ・ゲーム開発に強い、ITが大好きな会社です。
Responder + Firestoreでの開発依頼・お見積もりはこちらまでお願いします。
また、ResponderやFirestoreを扱えるエンジニアを積極採用中です!詳しくはこちらをご覧ください。

※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

次回の記事はこちら

第1回はこちら

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

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

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

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

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

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

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

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

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

採用情報はこちら

関連記事