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

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

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

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

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

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

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

次回の記事はこちら

第1回はこちら

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

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

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

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

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

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

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

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

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

採用情報はこちら

関連記事