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

【第9回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【ブログトップを作る】

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

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

前回は、「管理者ページの仕上げ」を行いました。

ブログトップを作ろう

今回は、「ユーザ (ブログ来訪者) が触れるビュー」を作っていきます。

今までバックエンド部分が多かったのですが、フロント側もしっかり作っていきましょう!

ブログトップページの構想を練る

まずは、ブログのトップページに必要なものを考えてみましょう。

  1. 記事一覧 (必須!)
  2. ロゴとメニューバー (+各個別ページ)

上記に加え、「ブログ本体のサムネ」もあれば、もっといいかもしれません。

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

記事一覧を取得する

はじめに、「記事一覧」を取得します。

以前作った def get_articles(unreleased: bool) 関数を使って取得しましょう。

コント―ラ修正

そして、久々にルートのコントローラを修正していきます。

ビューを書いて実行

動作確認がてらビューを適当に書いて実行してみると、

エラーが発生...??

どうやら、クエリが上手く取得できていない様子。

調べてみると、

「並べ替えは同じフィールドで行う必要があります。」

とのこと。

つまり、「公開済みか否か」「最終更新日での並び替え」は別で行う必要があるのです。

修正の上、ふたたび挑戦!

そこで、以下のように修正してみました。

これで、エラーもなく上手く動作しました!

気を取り直して実装

それでは、本格的に実装していきましょう。

トップページでは、弊社ブログのように「記事を取得」して、「ボックス状に記事を陳列」させます。

コントロ―ラ修正

まずは、コントローラを少し修正します。

ビューをデザイン

続いて、ビューをデザインしていきます。

完成!

こんな感じになりました!

適当に記事を追加して確認

メインメニューの作成

次に、「メインメニュー」を作っていきましょう。

これは Python も Firestore も関係ないので、サクサクいきますよ!

メインメニューの内訳

今回、メインメニューには、「ロゴ」と以下の「リンクメニュー」を作成しようと思います。

  1. Top: トップリンク
  2. About: このブログについて
  3. Profile: 運営者について
  4. Twitter
  5. Contact: お問い合わせ

なお、各個別ページの作成は割愛します。

ロゴとメニューのレイアウトを決める

「ロゴ」と「メインメニュー」を、一直線に並べるようなデザインにします。

コード

メニューはリストを使うので、コード自体は以下のような感じです。

CSS

CSSの方は、こんな感じです。

最低限のシンプルなものなので、デザインはお好きなものを作ってみてくださいね。

見た目

こんな感じになりました。

ブログメインメニュー 

筆者が即席で作ったロゴのクオリティは置いておいて、やはりロゴとメニューが揃うとブログっぽいですね!

header.htmlとして共有する

そうしたら、これを共有ファイルにして、「index.html」と「single.html」にインクルードするようにします。

インクルードは {% include 'header.html' %} でOKです。

記事ページもそれっぽくなった

第10回へつづく!

今回は、「ブログのトップページの整備」を終わらせました。

残るは、「カテゴリページ」のみ!

その他デザインも整える必要はありますが、機能としてはこれでラストになります。

ラストスパート、頑張っていきましょう!

次回の記事はこちら

第1回はこちら

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

書いた人はこんな人

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

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

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

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

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

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界を変える…! /

Androidエンジニア

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

iOSエンジニア