IT業務効率化

Pythonのresponder入門|webページを表示させてみる。

はじめに

この記事ではresponderでwebアプリをhello worldしてみたいと思います。

目標は管理画面の作成です。

python歴は1年半くらいのなのですが、HTMLやCSSは一度も書いたことがありません。

なのでWEBアプリケーションを理解するところから苦労しました。

一つ目のresponder記事としてその事を書きたいと思います。

responderのインストール

まずはコマンドラインで以下を実行し、ライブラリをインストール

$ pip install responder

pythonファイルの作成

公式のドキュメントに従い作ってみます。

まず、下のコードがメインファイルになります。

main.pyとファイル名でつくりました。

import responder
  
api = responder.API()

@api.route("/hello.html")
def hello_html(req, resp):
    resp.html = api.template('index.html')

api.run(port=3000)

ブラウザからアクセスするときのport番号は

最後のapi.run()に引数を渡してやる事で指定できます。

@api.route(“/hello.html”)のhello.htmlは

webページにアクセスするときのドメインです。

ここまで書いたらあとはpython main.pyと実行してあげます。

yuki$ python main.py 
INFO: Started server process [42979]
INFO: Waiting for application startup.
INFO: Uvicorn running on http://127.0.0.1:3000 (Press CTRL+C to quit)
INFO: ('127.0.0.1', 56816) - "GET /hello HTTP/1.1" 500

無事に起動できたようです。

http://localhost:3000/hello.html

main.pyを実行していたらこのURLからアクセスできます。

では早速つないでみましょう!

どん!

oh….

ERROR: Exception in ASGI application
Traceback (most recent call last):
File "/anaconda3/envs/responder/lib/python3.6/site-packages/uvicorn/protocols/http/httptools_impl.py", line 368, in run_asgi
result = await app(self.scope, self.receive, self.send)

oh…

公式に従ってちゃんと進めたつもりでしたが、失敗しました。

webページを表示させたかったら

テンプレートの描画ということになります。

テンプレートを用意しなくてはなりません。

テンプレートの作成

同じディレクトリにtemplatesという名前でディレクトリを作ります。

そしてその中にhtmlファイルを書きましょう。

<!DOCTYPE>
<html lang="ja">
    <head>
        <title>hirayukiのhello world</title>
    </head>
    <body>
        <p>Hello, World!</p>
    </body>
</html>

index.htmlというファイルで作成しました。

main.pyのresp.html = api.template(‘index.html’)に対応します。

ファイル構成はこのようになっています。

.
├── main.py
├── static
└── templates
    └── index.html

staticディレクトリはまだ使い方がわかっていませんが、

main.pyを実行した時に自動でできるので心配しないでおきます。

これでページが表示できるはず!!

次こそは!

まずは起動します。

yuki$ python main.py
INFO: Started server process [43145]
INFO: Waiting for application startup.
INFO: Uvicorn running on http://127.0.0.1:3000 (Press CTRL+C to quit)

えい!

やっと起動できました!!

jinjaをちょっと使ってみたい

jinjaって何!?

Jinja2 is a full featured template engine for Python.

pythonのテンプレートエンジンとのことです。

これがなんとresponderには標準装備されているらしいのです。

(私が読んだ中で、テンプレートエンジンについて一番分かり易かった記事はこちら

一言でいうとHTMLの中にpythonコードから値を代入できます。

やってみようと思います。

main.pyを以下のように書き換えます。

import responder
  
api = responder.API()

@api.route("/hello.html")
def hello_html(req, resp):
    my_name = "hirayuki"  # 追記
    resp.html = api.template('index.html', name=my_name)  # 追記

api.run(port=3000)

次にtemplates配下にある、index.htmlを書き換えます。

<!DOCTYPE>
<html lang="ja">
    <head>
        <title>hirayukiのhello world</title>
    </head>
    <body>
        <p>Hello, {name}!</p>
    </body>
</html>

どうでしょうか!?

あれ?・・・・・・

間違えました!波括弧は2つ!

<!DOCTYPE>
<html lang="ja">
    <head>
        <title>hirayukiのhello world</title>
    </head>
    <body>
        <p>Hello, {{name}}!</p>
    </body>
</html>

どん!

無事にテンプレートエンジンの動作確認もできました!

まとめ

main.pyと

templates/index.htmlの2つがあれば

webページを実装できる。

またjinjaというテンプレートエンジンがデフォルトで実装されている。

おわりに

管理画面はまだまだ遠いですね。。

次回に続きます。

正直お恥ずかしい話、HTMLを書かずに素敵なweb画面が実装できると思っておりました。

また、スラスラと書いているように見えますが、結構いろんなところで苦戦しております。

諸先輩方からみると変なところでつまづいているように見えるかもしれませんが、

精一杯つまづいた箇所を書いていきます。

誰かのご参考になれば幸いです。

Pythonのreponderでhttpリクエストのパタメータを取得する。はじめに余談 先日投稿しました、はじめてのresponder1。webページを表示させてみる。の続きです。 そもそもどうしてwe...
ABOUT ME
hirayuki
今年で社会人3年目になります。 日々体当たりで仕事を覚えています。 テーマはIT・教育です。 少しでも技術に親しんでもらえるよう、noteで4コマ漫画も書いています。 https://note.mu/hirayuki