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

    広告メディア事業部広告メディア事業部
    2020.07.17

    IT技術

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

    今回より、また新たに 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 Pゴシック","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...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事