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

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

    メディアチームメディアチーム
    2020.07.17

    IT技術

    FirestoreResponder

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

    今回より、また新たに 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 をインストールします。

    1$ pip install responder

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

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

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

    1$ pip install --upgrade firebase-admin

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

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

    セットアップ完了！

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

    プロジェクトを作る

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

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

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

    各ファイルの構成

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

    1.
2├── controllers.py  # Responder処理部
3├── run.py          # サーバ立ち上げ
4├── static          
5│   └── style.css   # Webページのデザイン 
6└── templates
7    ├── index.html  # トップページ
8    └── layout.html # レイアウト

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

    controllers.py

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

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

    1# controllers.py
2# ルーティングと処理を記述
3
4import responder
5
6api = responder.API()
7
8
9@api.route('/')  # ルートは index() に投げる
10def index(req, resp):
11    resp.html = api.template('index.html',　title='')

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

    run.py

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

    中身はこれだけです。

    1# run.py
2# サーバ立ち上げ用
3# Copyright (c) RightCode Inc. All rights reserved.
4
5from controllers import api
6
7if __name__ == '__main__':
8    api.run()

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

    static/style.css

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

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

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

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

    1@charset "utf-8";
2/*
3static/style.css
4スタイルシート
5*/
6
7body{
8    font: 14px/1.6 "Hiragino Kaku Gothic Pro",Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
9    margin:0;
10    color:#313131;
11    background-color: #eeeeee;
12}
13hr{
14    border-top: 3px double #bbb;
15}
16h1{
17    padding: 5px 0;
18    color: #6594e0;
19    border-bottom: dashed 2px #6594e0;
20}
21.container{
22    max-width: 1200px;
23    margin: 0 auto;
24}
25.article h2{
26    padding: 0.5em;
27    color: #494949;
28    background: #c8d6ee;
29    border-left: solid 5px #2b52cd;
30}

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

    templates/layout.html

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

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

    1<!--
2templates/layout.html
3テンプレートファイル：これが全てのWebページの雛形となる．
4-->
5
6<!DOCTYPE html>
7<html lang="ja">
8<head>
9    <title>My Blog Name {{ title }}</title>
10    <meta charset="UTF-8">
11    <meta http-equiv="X-UA-Compatible" content="IE=edge">
12    <meta name="format-detection" content="telephone=no">
13    <meta name="viewport" content="width=device-width">
14
15    <link rel="stylesheet" href="/static/style.css">
16</head>
17<body>
18<div class="container">
19    {% block content %}
20    <!-- メインコンテンツ -->
21    {% endblock %}
22</div>
23</body>
24</html>

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

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

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

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

    templates/index.html

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

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

    1<!--
2templates/index.html
3トップページ
4-->
5
6{% extends "layout.html" %}
7{% block content %}
8
9<br>
10<h1>My Blog Name</h1>
11<p>Responder+Firestoreで作る，SEOを考慮したモダンでハイパフォーマンスなブログシステム</p>
12
13{% endblock %}

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

    動作確認

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

    1$ python run.py
2INFO:     Started server process [19028]
3INFO:     Uvicorn running on http://127.0.0.1:5042 (Press CTRL+C to quit)
4INFO:     Waiting for application startup.
5INFO:     Application startup complete.

    表示画面

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

    現在のトップページ

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

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

    第2回へつづく！

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

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

    お楽しみに！

    次回の記事はこちら

    featureImg2020.07.20【第2回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【Firebase設定と認証機能実装】第2回～モダンなフレームワークの使い方を学びながらブログシステムを構築～本記事は、「Python Responder ...

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

    featureImg2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...

    featureImg2020.07.30Python 特集実装編※最新記事順Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた！P...

    ITフリーランスのエンジニア専門エージェントITANKEN技術力で世の中をもっと面白くエンジニア積極採用中！エンジニア積極採用中！

    ライトコードでは、エンジニアを積極採用中！

    ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    メディアチーム
    メディアチーム

    「好きを仕事にするエンジニア集団」の（株）ライトコードです！ ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎！ また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！ インターンや新卒採用も行っております。 以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit

    Show more...

    おすすめ記事

    Wantedlyのベスト100に選出!?Wantedly Awards 2024に潜入！

    Wantedlyのベスト100に選出!?Wantedly Awards 2024に潜入！

    日常

    メディアチームメディアチーム

    2024.11.01

    社内の後輩エンジニア向けにワークショップを開いたら失敗した話

    社内の後輩エンジニア向けにワークショップを開いたら失敗した話

    IT技術

    DI
    ワークショップ
    えばたん（エンジニア）えばたん（エンジニア）

    2024.10.31

    Next.jsのParallel Routesを触ってみた

    Next.jsのParallel Routesを触ってみた

    IT技術

    Next.js
    たけちゃん（エンジニア）たけちゃん（エンジニア）

    2024.10.31

    Next.jsでFirebase AuthenticationのSignInWithRedirectの実装時にハマったこととその解決策

    Next.jsでFirebase AuthenticationのSignInWithRedirectの実装時にハマったこととその解決策

    IT技術

    Firebase
    Next.js
    ハク（エンジニア）ハク（エンジニア）

    2024.10.31

    Looker Studioを使ってみよう！

    Looker Studioを使ってみよう！

    IT技術

    Looker Studio
    モリ（エンジニア）モリ（エンジニア）

    2024.10.31

    immichを知ってほしい

    immichを知ってほしい

    IT技術

    immich
    キムくん（エンジニア）キムくん（エンジニア）

    2024.10.31

    ブログ一覧

    エンジニア大募集中！

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております！

    また、フリーランスエンジニア様も大募集中です。

    求人へ応募するフリーランスの方
    background