【第1回】Responderを使ってDjangoチュートリアルをやってみた【プロジェクト作成編】
2021.12.20
第１回～Responderを使ってDjangoチュートリアルをやってみた～
初期セットアップが、まだお済みでない方は前回の記事をご覧ください。
Djangoのチュートリアル
今回からは、本格的にDjangoのチュートリアルに沿って進めていきたいと思います。
Djangoのチュートリアルは以下となります。
【はじめての Django アプリ作成、その 1】
https://docs.djangoproject.com/ja/2.2/intro/tutorial01/
今記事は、Djangoチュートリアル第1回の内容に則った内容となります。
もちろんResponderで追う形になりますので、多少内容が異なる部分がありますが、成果物はできるだけ同じものを作っていきます。
それでは、第１回スタートです！
プロジェクトを作成する
Djangoでは、プロジェクト生成コマンドを叩きますが、Responderでは自分でディレクトリを作成して、その中にPythonファイルを追加していくだけです。
今回は、前回の responder ディレクトリをそのまま使いたいと思います。
開発用サーバー
サーバーについては、前記事でご説明した通り
1 2 3 4 5 6 | import responder api = responder.API() if __name__ == '__main__': api.run() |
を実行するだけでサーバーが立ち上がるので大丈夫でしょう！
Polls アプリケーションをつくる
これで準備は整いました！
本記事では、Djangoのチュートリアルと同じように簡単な「投票Webアプリ（Pollsアプリケーション）」を作っていきます。
アプリの内容は公式サイトによると、
- ユーザが投票したり結果を表示したりできる公開用サイト
- 投票項目の追加、変更、削除を行うための管理 (admin) サイト
の要素を含んだアプリケーションで、これを本記事でも目指します。
本記事もDjangoチュートリアルにならって、まずは、2つ目の「投票項目の追加、変更、削除を行うための管理 (admin) サイト」から手をつけていきたいと思います。
はじめてのビュー作成
「はじめて」と言ってますが、これも前回触れたので「はじめて」ではありませんね（笑）
ですが今回は、新しく各ビューに対応するURLと処理をまとめたファイル urls.py を作ることにします。
また、 test.py はサーバー立ち上げ専用にしたいので、名前を run.py に変更します。
ディレクトリ内構造
前回から続けてやっていれば、ディレクトリ内は以下のような構造になっているはずです。
1 2 3 4 5 6 | .responder/ ├── static ├── templates │ └── index.html ├── run.py └── urls.py |
次に、 urls.py と run.py を以下のように記述してください。
urls.py
1 2 3 4 5 6 7 8 9 10 11 12 | import responder api = responder.API() @api.route('/') def index(req, resp): resp.content = api.template("index.html") @api.route('/admin') def admin(req, resp): resp.content = api.template("admin.html") |
run.py
1 2 3 4 5 | from urls import api if __name__ == '__main__': 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!-- templates/layout.html --> <!DOCTYPE html> <html lang="ja"> <head> <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"> <meta charset="UTF-8"> <title>Sample Polls Application</title> </head> <body style="background-color: #eeeeee"> <div class="container"> {% block content %} <!-- メインコンテンツ --> {% endblock %} </div> </body> </html> |
index.htmlとadmin.htmlを作る
今回は、各ビューページはこのレイアウトを使って、メインコンテンツ部分のみを変更していく形で、とりあえず進めていきたいと思います。
次に、index.html と、新たに admin.html を作成し、以下の内容に変更または加筆します。
1 2 3 4 5 6 7 8 9 10 | {% extends "layout.html" %} {% block content %} <br> <h1>Welcome to Polls Application!</h1> <hr> <p> This is a simple polls application from Django Tutorial (URL: <a href="https://docs.djangoproject.com/ja/2.2/intro/tutorial01/">https://docs.djangoproject.com/ja/2.2/intro/tutorial01/</a>) </p> {% endblock %} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | {% extends "layout.html" %} {% block content %} <br><br> <div align="center"> <div class="card w-50" > <h5 class="card-header bg-primary text-white text-center">Responder Administration</h5> <div class="card-body" align="left"> <form action="/ad_login" method="post"> <p>Username</p> <input type="text" name="username" size="30"> <br> <br> <p>Password</p> <input type="password" name="password" size="30"> <br> <br> <div align="center"> <input class="btn btn-primary" type="submit" name="submit" value="Login"> </div> </form> </div> </div> </div> {% endblock %} |
これで、それぞれのページは layout.html をもとに、コンテンツ部分だけ変更するようなページになりました。
なんとなくビューはそれっぽくなりましたね。
( index.html はまだ適当ですが...)
【index.html】
【admin.html】
現段階でのプロジェクトの中身
ちなみに、現段階でのプロジェクトの中身は、以下のようになります。
1 2 3 4 5 6 7 8 | .responder/ ├── run.py ├── static ├── templates │ ├── admin.html │ ├── index.html │ └── layout.html └── urls.py |
この時、 __pycache__ というディレクトリがあるかもしれませんが、これはファイルをインポートした際に生成されるものなので、特に気にしないでください。
第2回へつづく！
今回はここまで！
次回はデータベースとモデルの作成に移ります！
おそらく、次回が最初の山場だと思いますので一緒に頑張っていきましょう！
第2回の記事はこちら
第１回の記事はこちら
【全編まとめ】Responderを使ってDjangoチュートリアルをやってみた
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
- ITエンタメ7月 14, 2023【クリス・ワンストラス】GitHubが出来るまでとソフトウェアの未来
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
