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

    広告メディア事業部広告メディア事業部
    2019.08.20

    IT技術

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

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

    featureImg2019.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で追う形になりますので、多少内容が異なる部分がありますが、成果物はできるだけ同じものを作っていきます。

    それでは、第1回スタートです!

    プロジェクトを作成する

    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()

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

    1. サーバーを立ち上げる時は run.py を実行する
    2. ビューまたは処理とパスの紐付けは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回の記事はこちら

    featureImg2019.08.22【第2回】Responderを使ってDjangoチュートリアルをやってみた【データベース・モデル構築編】第2回~Responderを使ってDjangoチュートリアルをやってみた~今回も、Responder(レスポンダー)を...

    第1回の記事はこちら

    featureImg2019.08.20【第1回】Responderを使ってDjangoチュートリアルをやってみた【プロジェクト作成編】第1回~Responderを使ってDjangoチュートリアルをやってみた~初期セットアップが、まだお済みでない方は前回...

    【全編まとめ】Responderを使ってDjangoチュートリアルをやってみた

    featureImg2019.10.25【まとめ編】Responderを使ってDjangoチュートリアルをやってみたResponderを使ってDjangoチュートリアルをやってみた~まとめ~ライトコード社長も今、イチオシのWEBフレー...

    こちらの記事もオススメ!

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
    featureImg2020.07.30Python 特集実装編※最新記事順Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた!P...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事