1. HOME
  2. ブログ
  3. IT技術
  4. 【第1回】Responderを使ってDjangoチュートリアルをやってみた【プロジェクト作成編】

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

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

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

Djangoのチュートリアル

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

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

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

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

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

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

プロジェクトを作成する

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

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

開発用サーバー

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

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

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

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

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

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

  • ユーザが投票したり結果を表示したりできる公開用サイト
  • 投票項目の追加、変更、削除を行うための管理 (admin) サイト

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

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

はじめてのビュー作成

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

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

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

ディレクトリ内構造

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

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

urls.py

run.py

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

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

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

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

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

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

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

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

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

index.htmlとadmin.htmlを作る

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

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

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

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

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

【index.html】

【admin.html】

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

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

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

第2回へつづく!

今回はここまで!

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

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

第2回の記事はこちら

第1回の記事はこちら

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

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


書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア