モダンなフレームワークの使い方を学びながらブログシステムを構築
今回より、また新たに Python WebAPI 関連の連載を始めます！
その名も「Python Responder + Firestore で、モダンかつサーバーレスなブログシステムを作ってみる」です。
ポイント
このテーマのポイントは、以下の2つです。
- Responder = モダンな Python WebAPI
- Firebase (Firestore) = モダンな Web アプリ向けプラットフォーム
ブログシステムなので、もちろん、SEO もしっかり考慮していきます！
「モダンなフレームワークの使い方を学びながらブログシステムを構築していく」というのが、この連載の大きな主軸となってきます。
この連載で学べる知識
本連載では、以下の知識が学べます。
- Python WebAPI (Responder) の使い方
- Cloud Firestore
- Firebase Auth RestAPI
- ブログシステム構築
- 簡単なブログデザイン
今回のテーマは？
第1回目の本記事では、「各ツールの簡単な概要」と「セットアップの解説」を行います。
長い連載になるかと思いますが、ぜひ皆さんも一緒に作りながら学んでいきましょう！
Responder とは？
「Responder」は、Python で Web アプリケーションを簡単に構築できるフレームワークです。
仕様は、「Django」よりも、「Flask」に近いです。
Responder の特徴
Responder には、以下のような特徴があります。
- 単一のインポートで導入可能
- 非同期処理が簡単に書ける
- GraphQL API が簡単に書ける
- 書いていて楽しい (筆者の感想)
このように、Responder は、モダンな機能がたくさん詰まっているフレームワークです。
Responder についてもっと知りたいなら
Responder の詳細は、公式ドキュメントを読んでみてください。
【Responder】
https://github.com/taoufik07/responder
Firestore とは？
「Firestore」は、Google 製のドキュメントデータベースです。
Firestore の特徴
Firestore には、以下のような特徴があります。
- サーバやスケーリング管理がいらない
- フロントエンド開発に集中できる
- フロントエンドから直接データを取得・更新できる
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周りのセットアップと動作確認」を解説していきます。
お楽しみに！
次回の記事はこちら
こちらの記事もオススメ！
2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...
2020.07.30Python 特集実装編※最新記事順Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた！P...
