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回に渡りご愛読いただき、ありがとうございました!

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

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

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

第1回はこちら

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

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

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

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

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

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

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

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

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

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事