1. HOME
  2. ブログ
  3. IT技術
  4. 【第10回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【ブログ完成!!】

【第10回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【ブログ完成!!】

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

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

前回は、「ブログトップの作成」を行いました。

ブログを完成させよう

最終回となる今回は、ブログにとって重要なページを作ったり、システムの微調整をしていきましょう。

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

  1. カテゴリごとのページ
  2. sitemap.xml の自動生成
  3. フッター整備

カテゴリ(タグ)ごとのページ

まずは、「カテゴリごとのページ」を作っていきましょう。

カテゴリごとのページとは、「/category/{category}」のことです。

表示するものは、前回作成した「index.html」を流用します。

コントローラの作成

では、コントローラを作成します。

やることは以下の2つだけなので、とても簡単です!

  1. URL からカテゴリを抽出
  2. ページに反映

スラッグからカテゴリ名を取得する関数を作る

ここで、「スラッグからカテゴリ名を取得する関数」を作りましょう。

これを使うと、ページに『「技術」の記事一覧』のような表示が出来るようになります。

ルーティング

そうしたら、ルーティングしましょう。

ほとんどトップページと同じですね。

ビューも一部変更

ビューは、以下の部分だけ変更します。

忘れずに、「/」のコントローラも変更しておきましょうね。

これで良さそうです!

動作確認

それでは、動作確認してみましょう。

例: /category/technology

良さそうですね!

細かい部分を整える

先ほど、「スラッグからカテゴリ名を取得する関数」を作成しましたね。

さっそく、「記事個別ページ」や「記事一覧」に反映させてみましょう。

記事個別ページ

ここで、 article['category'] = get_category_name(article['category']) をやってしまうのは、絶対に NG です!

カテゴリの URL も同じになってしまうので、注意してくださいね。

記事一覧

こちらも同様です。

「/category/{category}」のコードを最適化

「/category/{category}」も同様ですが、こちらは全て同じカテゴリ名なので、少しだけコードを最適化できます。

関数の呼び出しは少なめに!

今回の関数は、データベースとのやり取りを行うため、重めの仕様になっています。

そのため、できるだけ関数の呼び出しが少なくなるよう心がけましょう。

ちなみに、「タグページ」もこれとほとんど同じなので、割愛します。

sitemap.xml の自動生成

サイトマップは、ブログの SEO 的に超重要です。

理想としては、記事が追加・更新・削除されるたびに、「sitemap.xml」を更新するのが良いですね。

では、さっそく実装していきましょう!

ルーティング

「/sitemap.xml」でサイトマップをしっかり取得できないと、サイトマップを送信してもクロールされません。

基本的には、以下のような仕様にすれば OK です。

  1. テキストとして「sitemap.xml」を開く
  2. ヘッダーの Content-type を「application/xml」にする

自動生成する関数を作る

何かのファイルと一緒でも良いのですが、筆者は sitemap_generator.py を新たに作り実装しました。

「sitemap.xml」の基本は、以下の通りです。

記事の URL を追加

これにプラスして、記事の URL を追加していきます。

少しゴリ押しですが、以下のような感じでファイルを上書きしていきます。

「更新」「新規追加」「削除」部分に追記

そうしたら、上記ファイルを各所で呼びます。

例として、記事の更新をするコントローラでは以下のような感じ。

他にも、新規追加・削除の部分に追記しておきましょう。

なお、カテゴリページを含めるかは、みなさん次第です。

動作チェック

試しに、何か記事を更新してみます。

/sitemap.xml にアクセスしてみる

上手く反映できていそうですね!

フッターを作る

最後に、フッターを作成しましょう。

これは Python も Firestore も関係ありませんが、ブログの見た目的には大事です。

「footer.html」を作ってインクルード

「footer.html」を作成し、「layout.html」にインクルードします。

ロゴと CSS を用意

デザインは、白色のロゴと、CSS を用意します。

完成!

こんな感じでどうでしょう!

あくまでサンプルなので、みなさんは自由にこだわってくださいね!

footerサンプル

プライバシーポリシーは、アドセンスなどで必要になってくるので、しっかり作りましょうね。

番外編へつづく!

お疲れ様でした!

Python Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみる」これにて完結です!

全10回にもなる長期連載でしたが、ようやくブログシステムの構築が終わりました。

この記事を通して、「Responder (Python)」と「Cloud Firestore」「Firebase Auth」との連携について、しっかり理解できたと思います。

オリジナルのブログシステムを作ってみよう

この連載で作成したシステムはとてもシンプルなので、自分好みにカスタマイズするのがおすすめです。

参考までに、いくつかアイディアを挙げておきますね。

  1. 記事の CSS デザイン (code, quote, ...) などを整える
  2. 関連記事を表示する機能を実装してみる (キーワードを指定したり、タイトルの類似度を計算する)
  3. SNS シェアボタンを作る
  4. 月別アーカイブを作る

ぜひ、この連載を参考にして、自分色のブログシステムを構築してみてくださいね!

最後になりますが、第10回に渡りご愛読いただき、ありがとうございました!

次回の記事はこちら(番外編)

第1回はこちら

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

書いた人はこんな人

ライトコード社員ブログ
ライトコード社員ブログ
「好きなことを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もりは大歓迎!
また、WEBエンジニアとモバイルエンジニアも積極採用中です!

ご応募をお待ちしております!

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界を変える…! /

Androidエンジニア

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

iOSエンジニア