メディアチーム【第1回】Responderを使ってDjangoチュートリアルをやってみた【プロジェクト作成編】
メディアチームIT技術
第１回～Responderを使って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回へつづく！
今回はここまで！
次回はデータベースとモデルの作成に移ります！
おそらく、次回が最初の山場だと思いますので一緒に頑張っていきましょう！
第2回の記事はこちら
第１回の記事はこちら
【全編まとめ】Responderを使ってDjangoチュートリアルをやってみた
こちらの記事もオススメ！
ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
「好きを仕事にするエンジニア集団」の（株）ライトコードです！ ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎！ また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！ インターンや新卒採用も行っております。 以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit
