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

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

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

今回より、また新たに Python WebAPI 関連の連載を始めます!

その名も「Python Responder + Firestore で、モダンかつサーバーレスなブログシステムを作ってみる」です。

ポイント

このテーマのポイントは、以下の2つです。

  1. Responder = モダンな Python WebAPI
  2. Firebase (Firestore)  = モダンな Web アプリ向けプラットフォーム

ブログシステムなので、もちろん、SEO もしっかり考慮していきます!

モダンなフレームワークの使い方を学びながらブログシステムを構築していく」というのが、この連載の大きな主軸となってきます。

この連載で学べる知識

本連載では、以下の知識が学べます。

  1. Python WebAPI (Responder) の使い方
  2. Cloud Firestore
  3. Firebase Auth RestAPI
  4. ブログシステム構築
  5. 簡単なブログデザイン

今回のテーマは?

第1回目の本記事では、「各ツールの簡単な概要」と「セットアップの解説」を行います。

長い連載になるかと思いますが、ぜひ皆さんも一緒に作りながら学んでいきましょう!

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

Responder とは?

Responder」は、Python で Web アプリケーションを簡単に構築できるフレームワークです。

仕様は、「Django」よりも、「Flask」に近いです。

Responder の特徴

Responder には、以下のような特徴があります。

  1. 単一のインポートで導入可能
  2. 非同期処理が簡単に書ける
  3. GraphQL API が簡単に書ける
  4. 書いていて楽しい (筆者の感想)

このように、Responder は、モダンな機能がたくさん詰まっているフレームワークです。

Responder についてもっと知りたいなら

Responder の詳細は、公式ドキュメントを読んでみてください。

【Responder】
https://github.com/taoufik07/responder

Firestore とは?

Firestore」は、Google 製のドキュメントデータベースです。

Firestore の特徴

Firestore には、以下のような特徴があります。

  1. サーバやスケーリング管理がいらない
  2. フロントエンド開発に集中できる
  3. フロントエンドから直接データを取得・更新できる

Firestore についてもっと知りたいなら

Firestore の詳細は、以下を参照してください。

【Cloud Firestore】
https://firebase.google.com/docs/firestore?hl=ja

セットアップ

それでは、さっそく作っていきましょう。

まずはセットアップです。

注意

全て Pip での管理を想定していますが、環境に合わせて適宜読み替えてください。

また、Responder は、Python3.6以上 であることが前提です。

各種インストール

Responder をインストール

まずは、Responder をインストールします。

執筆現在 (2020.06.02) は、バージョン2.0.5でした。

Firestore モジュールをインストール

次に、Firestore 関連のモジュールをインストールします。

【Cloud Firestore を使ってみる】
https://firebase.google.com/docs/firestore/quickstart?hl=ja#python

しばらく Firebase の出番はありませんが、ここでインストールしておいてください。

セットアップ完了!

これで、最初のセットアップは完了です。

プロジェクトを作る

そうしたら、プロジェクトを作りましょう。

今回は、「resp_firestore_blog」というプロジェクト名 (ディレクトリ名) にしました。

そうしたら、必要なファイルやディレクトリを作成しましょう。

各ファイルの構成

まずは、以下の様な構成で、各ファイルを作成しました。

それでは、各ファイルの中身を解説していきます。

controllers.py

このファイルは、「Responder のインポートとルーティング」、「処理をしてビューに投げる」役割を担います。

中身は、以下の様な形にします。

Responder の書き方は、コードをみるととてもわかりやすいと思います。

run.py

このファイルは、「サーバ立ち上げ」を担います。

中身はこれだけです。

Responder のサーバ立ち上げは、裏で「Uvivcorn」が動いています。

static/style.css

Responder の static ディレクトリは、「静的ファイルを扱うディレクトリ」です。

「スタイルシート」や「スクリプトファイル」、「画像」などを保管します。

今はとりあえず、CSS ファイルを作成します。

今回のデザインはシンプルなものにしますが、お好きなデザインで作ってみてください。

これも、随時更新していきます。

templates/layout.html

このファイルは、「全てのWebページの共通部分」を担います。

他の HTML ファイルは、このレイアウトを引き継いで構築していきます。

<!-- メインコンテンツ --> の部分が、可変なところになります。

{{ }} で、変数を展開できます。

controllers.pyで resp.html = api.template('index.html', title='') としたので、今回は {{ title }}となっています。

ゆくゆくは、そのページのタイトルを動的に生成できる仕様にしておきます。

templates/index.html

仮のトップページを作ります。

先ほど controllers.py にて、「ルートはindex.htmlに投げる」という処理を書いたので、記述していきましょう。

大したことはまだ記述していませんが、 {% extends "layout.html" %} で「引き継ぎ」、 {% block content %} 内に「中身を記述する」、ということだけ頭に入れておきましょう。

動作確認

さっそく、動作確認してみましょう!

表示画面

実際に、http://127.0.0.1:5042 にアクセスしてみると、

現在のトップページ

しっかり動作しています!

今後は、ここに記事一覧などを表示できれば良さそうですね。

第2回へつづく!

今回は、連載「Python Responder + Firestore で、モダンかつサーバーレスなブログシステムを作ってみる」第1回としてセットアップを中心に行いました。

次回は、「Firebase周りのセットアップと動作確認」を解説していきます。

お楽しみに!

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

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

次回の記事はこちら

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

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

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

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

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

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

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

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

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

採用情報はこちら

関連記事