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

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

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

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

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

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

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

次回の記事はこちら

第1回はこちら

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

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

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

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

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

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

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

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

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

採用情報はこちら

関連記事