1. HOME
  2. ブログ
  3. IT技術
  4. 【第5回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみる【記事個別ページ作成】

【第5回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみる【記事個別ページ作成】

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

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

前回は、「ブログシステムのデータベース」を作成しました。

記事個別ページを作ろう!

今回は、「記事個別ページ」を作成していきます。

記事の個別ページは、ブログにとって命です。

SEO にも深くかかわってくるので、慎重かつ丁寧に作っていきましょう。

必要な関数を作る

まずは、「個別ページに必要なものを取得する関数」をあらかじめ作っておきましょう。

models.py に加筆

モデル関連なので、 models.py に加筆していきます。

なお、個別ページのパーマリンクは「/category/{category}/{slug}」という形をとるようにしました。

3つの関数を用意

取り急ぎ用意するものは、以下の3つです。

  1. スラッグから記事情報を取得する関数
  2. 最新記事を数件取得する関数
  3. カテゴリ一覧を取得する関数

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

リストの最初の記事だけ取り出すようにする

今回、スラッグは「一意に定まるもの」として実装しています。

そのため、 article[0] のように、記事は「リストの最初のものだけ取り出す」形にしました。

なければ、 None を返しておきます。

個別ページのルーティング

次に、コントローラを実装します。

今作った関数をもとに、ビューページの「single.html」に投げるだけですが…。

記事がマークダウン形式なので、まずは HTML に変換しなければいけません。

Python のライブラリを使う

Python のライブラリを使いたいと思います。

使い方は、以下のコードを見てください。

それでは、パーマリンクに沿って実装していきます。

Responder は動的なルーティングも可能

このように、動的なルーティングも Responder なら可能です!

それらのデータを受け取るときは、「関数の引数名を一致させて」受け取ります。

とてもシンプルですね!

ビューページ「single.html」の作成

さて、ここからが今回の肝です。

正直に言うと、これからやる作業は Responder も Firestore もあまり関係ありません。

しかし、しっかりブログを構築するために、手を抜かずに作っていきましょう。

パンくずリストを作る

まずは、「パンくずリスト」を作ります。

記事個別ページに必要な上、SEO にも大きな役割を果たすものです。

パンくずリストの実装は、「schema.org」にしたがっているので、以下を参照してください。

【HTML Microdata】
https://www.w3.org/TR/microdata/

実装

実装したビューページは、以下の様になります!

注意!

HTMLタグが自動でエスケープされないよう{% autoescape false%} を忘れないでください。

サイドメニューも作ろう

サイドメニューは、別に作っています。

CSS

少し長いですが、CSS は以下のようにしています。

HTML 側では「受け取ったデータを展開している」だけなので、コード自体はさほど難しくありません。

個別ページ完成!

サムネは無いが、個別ページができた

とりあえずは、これで個別ページの出来上がりです。

使いやすくなるよう整えよう

まだ仮なのでシンプルなデザインですが、また後ほど整えていきます。

「カテゴリごとの記事表示」も実装するので、カテゴリにもしっかりリンクしておいてください。

今回は省いていますが、著者へのリンクを追加しても良いですね。

404 Error: Not Foundページを作る

今作った記事個別ページは、たとえ未公開でも URL さえ知っていれば閲覧できてしまいます

「未公開記事へのアクセスを避ける」ためと、「URL が間違っている」場合に備えて、404ページを準備しておきましょう。

コード

エラーページ完成!

404エラーページの例

デザインやレイアウトは、好みに合わせて変更してください。

第6回へつづく!

今回は、ブログの超大事な要素である「記事ページを作成」してみました。

これで、記事の表示は出来ますが、やるべきことはたくさん残っています。

次回は「記事作成画面」を作っていきます。

まだまだ頑張っていきましょう!

次回の記事はこちら

第1回はこちら

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

書いた人はこんな人

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

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

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

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

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

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界を変える…! /

Androidエンジニア

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

iOSエンジニア