【第1回】Responderを使ってDjangoチュートリアルをやってみた【プロジェクト作成編】

メディアチーム

【第1回】Responderを使ってDjangoチュートリアルをやってみた【プロジェクト作成編】

メディアチーム

2019.08.20

IT技術

Django Python Responder

第１回～Responderを使ってDjangoチュートリアルをやってみた～

初期セットアップが、まだお済みでない方は前回の記事をご覧ください。

2019.08.19【第0回】Responderを使ってDjangoチュートリアルをやってみた【初期セットアップ編】Responder（レスポンダー）とは？PythonでWebアプリケーションを作成するときは、Django（ジャンゴ）...

Djangoのチュートリアル

今回からは、本格的にDjangoのチュートリアルに沿って進めていきたいと思います。

Djangoのチュートリアルは以下となります。

【はじめての Django アプリ作成、その 1】
https://docs.djangoproject.com/ja/2.2/intro/tutorial01/

今記事は、Djangoチュートリアル第1回の内容に則った内容となります。

もちろんResponderで追う形になりますので、多少内容が異なる部分がありますが、成果物はできるだけ同じものを作っていきます。

それでは、第１回スタートです！

プロジェクトを作成する

Djangoでは、プロジェクト生成コマンドを叩きますが、Responderでは自分でディレクトリを作成して、その中にPythonファイルを追加していくだけです。

今回は、前回のresponder ディレクトリをそのまま使いたいと思います。

開発用サーバー

サーバーについては、前記事でご説明した通り

1import responder
2api = responder.API()
3
4
5if __name__ == '__main__':
6    api.run()

を実行するだけでサーバーが立ち上がるので大丈夫でしょう！

Polls アプリケーションをつくる

これで準備は整いました！

本記事では、Djangoのチュートリアルと同じように簡単な「投票Webアプリ（Pollsアプリケーション）」を作っていきます。

アプリの内容は公式サイトによると、

ユーザが投票したり結果を表示したりできる公開用サイト

投票項目の追加、変更、削除を行うための管理 (admin) サイト

の要素を含んだアプリケーションで、これを本記事でも目指します。

本記事もDjangoチュートリアルにならって、まずは、2つ目の「投票項目の追加、変更、削除を行うための管理 (admin) サイト」から手をつけていきたいと思います。

はじめてのビュー作成

「はじめて」と言ってますが、これも前回触れたので「はじめて」ではありませんね（笑）

ですが今回は、新しく各ビューに対応するURLと処理をまとめたファイルurls.py を作ることにします。

また、test.py はサーバー立ち上げ専用にしたいので、名前をrun.py に変更します。

ディレクトリ内構造

前回から続けてやっていれば、ディレクトリ内は以下のような構造になっているはずです。

1.responder/
2├── static
3├── templates
4│      └── index.html
5├── run.py
6└── urls.py

次に、urls.py とrun.py を以下のように記述してください。

urls.py

1import responder
2api = responder.API()
3
4
5@api.route('/')
6def index(req, resp):
7    resp.content = api.template("index.html")
8
9
10@api.route('/admin')
11def admin(req, resp):
12    resp.content = api.template("admin.html")

run.py

1from urls import api
2
3
4if __name__ == '__main__':
5    api.run()

こうすることで、以下のように役割を分けることができます。

サーバーを立ち上げる時は run.py を実行する
ビューまたは処理とパスの紐付けはurls.py に記述する

もちろん現状では、admin.html は作っていないので、何も表示されません。

bootstrapでビューを簡単に整える

先にビューを整えたいと思います。

現段階では、index.html とadmin.html をそれっぽく表示できればよいので、全体的なレイアウトは有名CSSフレームワークの「bootstrap4」を使いたいと思います。

まず、templates/layout.html を作成し、以下のようなコードを書いてください。

ちなみに、<head> タグ内の長々したスタイルシートは、bootstrapのサイトから「CSS Only」の部分を取ってきたものです。

これで、bootstrapのCSSが使うことができるようになります。

1<!-- templates/layout.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
6    <meta charset="UTF-8">
7    <title>Sample Polls Application</title>
8</head>
9<body style="background-color: #eeeeee">
10<div class="container">
11    {% block content %}
12    <!-- メインコンテンツ -->
13    {% endblock %}
14</div>
15</body>
16</html>

index.htmlとadmin.htmlを作る

今回は、各ビューページはこのレイアウトを使って、メインコンテンツ部分のみを変更していく形で、とりあえず進めていきたいと思います。

次に、index.html と、新たに admin.html を作成し、以下の内容に変更または加筆します。

1{% extends "layout.html" %}
2{% block content %}
3<br>
4<h1>Welcome to Polls Application!</h1>
5<hr>
6<p>
7    This is a simple polls application from Django Tutorial
8    (URL: <a href="https://docs.djangoproject.com/ja/2.2/intro/tutorial01/">https://docs.djangoproject.com/ja/2.2/intro/tutorial01/</a>)
9</p>
10{% endblock %}

1{% extends "layout.html" %}
2{% block content %}
3
4<br><br>
5
6<div align="center">
7    <div class="card w-50" >
8      <h5 class="card-header bg-primary text-white text-center">Responder Administration</h5>
9      <div class="card-body" align="left">
10          <form action="/ad_login" method="post">
11              <p>Username</p>
12              <input type="text" name="username" size="30">
13              <br>
14              <br>
15              <p>Password</p>
16              <input type="password" name="password" size="30">
17              <br>
18              <br>
19              <div align="center">
20                  <input class="btn btn-primary" type="submit" name="submit" value="Login">
21              </div>
22          </form>
23      </div>
24    </div>
25</div>
26
27{% endblock %}

これで、それぞれのページは layout.html をもとに、コンテンツ部分だけ変更するようなページになりました。

なんとなくビューはそれっぽくなりましたね。

(index.html はまだ適当ですが...)

【index.html】

【admin.html】

現段階でのプロジェクトの中身

ちなみに、現段階でのプロジェクトの中身は、以下のようになります。

1.responder/
2├── run.py
3├── static
4├── templates
5│         ├── admin.html
6│         ├── index.html
7│         └── layout.html
8└── urls.py

この時、__pycache__ というディレクトリがあるかもしれませんが、これはファイルをインポートした際に生成されるものなので、特に気にしないでください。

第2回へつづく！

今回はここまで！

次回はデータベースとモデルの作成に移ります！

おそらく、次回が最初の山場だと思いますので一緒に頑張っていきましょう！

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

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

採用情報へ

メディアチーム

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