fbpx
  1. HOME
  2. ブログ
  3. IT技術
  4. 【Python】[番外編] Responderを使ってDjangoチュートリアルをやってみた【さらなるアプリ改良】

【Python】[番外編] Responderを使ってDjangoチュートリアルをやってみた【さらなるアプリ改良】

Responderを使ってDjangoチュートリアルをやってみた~番外編~

今回の記事は、「【第7回】Responderを使ってDjangoチュートリアルをやってみた【adminページ改良編】」の続きにあたります。

第1回から第7回まで読んでいない方は、ぜひ【第1回】から読んでくださいね!

今回の記事は、「Djangoチュートリアル」には載っていませんが、私が第7回までに作ってきたアプリケーションを改良していきたいと思います!

「Webアプリケーションとして、さらにユーザに満足してもらうには?」

「Webアプリケーションに他に必要なものは?」

など様々な視点で改良していきます。

第1回はこちら

フッターの設定

まず、最初はフッターの設定からやっていきましょう。

これは、Responderとはあまり関係ありません。

しかし、Webアプリケーションを作成する上で欠かせませんのでしっかりと設定しましょう。

templates/layout.htmlのメインコンテンツ下部にフッターを作成

上のは例ですが、「コピーライト」や「サイトマップ」を入れるのが普通だと思います。

ただ、これでは、質問が少ない時にフッターが上に位置してしまい、なんだかダサいですね・・・

修正

そこで、メインコンテンツに以下のようなスタイルを適用してあげます。

<div style="display: flex; flex-direction: column; min-height: 80vh"> の部分です。

確認

これで、最低でも80vh分のメインコンテンツ領域が確保されます。

(本当は直書きじゃなくてCSSに書いた方が良いです)

投票結果をグラフ化して表示してみる

今までの投票結果ページは、各選択肢に何票集まったかを表示させるだけの「質素なビュー」でした。

しかし、せっかくPythonでWebアプリを開発しているのですから、matplotlibなど便利なモジュールを使ってスマートにしてみましょう!

まず、投票結果から得たものを棒グラフとして描画します。

棒グラフとして描画

今回は、グラフをSVGとして保存し、それをビューに渡す、というような処理にします。

(なぜPNGなどの拡張子にしないかというと、クッキーの関係で画像変更が、すぐにはブラウザ上で反映されないからです)

ちょっと工夫して描画する棒グラフは、少し凝ったものにしてみました。

受け取ったsvgをビューで展開

次に、受け取ったsvgをビューで展開します。

このとき、 < や > が勝手に &lt; や &gt; にエスケープされないように Jinja2 の {% autoescape false %} を使います。

確認

描画するとこんな感じです。

(matplotlib ver. 3.1.1 での表示)

とても COOL ですね!

APIドキュメントを作ってみる

APIドキュメントとは、その名の通りAPIの使い方を示すドキュメントです。

もし、外部のWebページから本アプリケーションを操作したり、連携したりする場合はAPIを公開する必要があります。

(GoogleカレンダーやGoogleマップなどが身近ですね)

その際、「利用規約や利用方法など細かくAPIについてまとめたもの」、すなわちAPIドキュメントが必要です。

APIドキュメントを作成するときに、最近では「Swgger(OpenAPI)」と呼ばれるフレームワークがよく利用されます。

Responderでは、このSwagger記法に則ったAPIドキュメントが簡単に作成できます

本アプリケーションは、特にオープンAPIとして開発しているわけではありませんが、Responderの機能ということで紹介します。

最低限の必要な設定

一番最初に書いた、アプリケーションのAPIを作成する部分がありました。

このAPIクラスに引数として必要事項を渡すことで、APIドキュメントを生成してくれます。

早速やってみましょう。

以下のように加筆してみてください。

引数の名前から何を設定しているかはわかると思います。

OpenAPIは、現在(2019/10/15)の最新版は「3.0.2」なので、 openapi='3.0.2' としています。

APIドキュメントのルーティングは、 docs_route='/docs' です。

確認

では、早速サーバを立ち上げて、127.0.0.1:5042/docs にアクセスしてみましょう。

Swagger によって、 APIドキュメントの大枠が作成されました!

ちなみに、Swagger のソースは、http://127.0.0.1:5042/schema.yml にあります。

モデルのスキーマ(構造)の追加

まずは、モデルのスキーマからドキュメントに入れていきましょう。

まず、コードが乱雑にならないように、新しく shemas.py というファイルを作りましょう。

そうしたら、各モデルに対してフィールド情報をmarshmallow(マシュマロ)というライブラリを使って定義していきます。

このあたりは、ほぼ Responder のドキュメント通りです。

あとは、このファイルを urls.pyでインポートします。

早速、もう一度サーバを立ち上げ直して、ドキュメントを見てみましょう!

モデルスキーマがドキュメントに追加されました!

URLスキーマの追加

あとは、URLによるレスポンスなどを追加してみましょう。

試しに、ルート(“/”)でやってみます。

今回は、かなり簡単な記述ですが、気になる方は Swagger の記法を調べてみてください。

これで、サーバを立ち上げ直してドキュメントを確認してみます。

確認

実際に「Try it out」して実行(Execute)してみると、インデックスビューのボディがレスポンスされるのをWebページ上から確認できます。

URLスキーマのサンプル

次に、GETメソッドとPOSTメソッドによって、処理の違うログイン(”/ad_login”)についてのスキーマの例を書いてみます。

あまり、有用ではありませんが、記述方法の参考になれば幸いです。

確認

最低限必要な構成要素は、

でしょう。

さいごに【番外編】

Djangoチュートリアルを一通り終え、さらにその先までアプリ作成してみました。

Responder の良い部分、使いにくい部分など、様々あるかと思います。

Responder は、まだまだ発展途上なフレームワークと言えると思います。

しかし、これからのアップデートで、さらに便利な機能がデフォルトで追加されると思うので、楽しみですね。

今回、作成したアプリのソースは、Githubにあげています。

【ソースはこちら】
https://github.com/rightcode/ResponderTutorial

少しだけディレクトリ構成などが異なっていて、本連載の「responder」ディレクトリは「ResponderTutorial/polls」にあたりますのでご注意を!

連載終了!

これで「Responderを使ってDjangoチュートリアルをやってみた」の連載は終了となります!

全8回に渡ってご愛読いただいたみなさま、ありがとうございました!

ぜひ、当ブログの他の記事も読んでみてくださいね!

関連記事

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

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

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

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

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

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

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

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

採用情報はこちら

関連記事