だって楽したいじゃんか!

大学院(機械工学科)を首席で卒業した男がこれまでの経験を生かさず殺さず発信していく

【Anaconda+Django】Django(Python)でWebアプリを開発してみる【チュートリアルも一苦労編】


以前、PythonでWebアプリを開発するための準備としてAnacondaでPythonDjango、PyCharmをインストールする手順をまとめました。
今回からアプリを開発していきますが、まずは手っ取り早く開発の流れをつかむためにDjango Software Foundationのサイト(はじめての Django アプリ作成、その 1 | Django ドキュメント | Django)にある投票アプリを作ってみます🙆‍♂️

今回の成果物

今回はチュートリアルにある投票アプリ(polls)を作っていきます。
チュートリアルは下記から
はじめての Django アプリ作成、その 1 | Django ドキュメント | Django

⚠️参照するチュートリアルのバージョンにはくれぐれもご注意ください。
作成するDjangoと参照するチュートリアルのバージョンが異なると、全く動かないということがあります。「動かない!なんで!?」状態になってパニックになります(した 笑)のでご注意を。
チュートリアルのバージョンの切り替えはチュートリアルページの右下から。
f:id:makimakimakino:20190106005349p:plain

pollsアプリケーションは ユーザが投票したり結果を表示したりできる公開用サイトと、管理者が投票項目の追加、変更、削除を行うための管理 (admin) サイトの2つのページを作成します。

投票画面

ユーザーサイトはウェブ上で質問に投票することができます。

質問一覧

f:id:makimakimakino:20190106005751p:plain

投票画面

f:id:makimakimakino:20190106005846p:plain

投票

f:id:makimakimakino:20190106005943p:plain

結果画面

f:id:makimakimakino:20190106010027p:plain

管理サイト

管理者サイトでは質問や選択肢の追加、削除などができます。

ログイン画面

f:id:makimakimakino:20190106010251p:plain

質問の一覧画面

f:id:makimakimakino:20190106010356p:plain

質問の編集画面

f:id:makimakimakino:20190106010502p:plain

Djangoの設計思想について

DjangoはMTVモデルという設計思想を採用しています。
MTVモデルに準拠するとアプリケーションは次の3つの要素からなります。
MTVモデル

  • Model(データベースアクセス)
  • Template(ページレイアウト)
  • View(ページ選択とデータをページに埋め込む)

makimakimakino.hatenablog.com
Djangoのアプリケーションを作るときには少なくともModel、View、Templateを定義してやる必要があるということですね。

それではそれら3つをアプリケーションに実装することを意識し、チュートリアルを進めましょう。
2周もすればある程度作る感覚はつかめるのではないかと思います。

前提事項

今回アプリケーションを作成する環境は下記の通りです。
開発では言語にPython(3.6.0)、webアプリのフレームワークDjango(1.11.3)、パッケージインストーラーにAnaconda(アナコンダ)、統合開発環境PyCham Community Edition(2018.3)を使用します。
今回アプリの開発で使用するPCのスペックは、OSがWindows10、システムのプロセッサがIntel(R) Core(TM) i5-7300U CPU @ 2.60GHz 2.70 GHz、RAMが8.00 GB、システムの種類が64 ビット オペレーティング システム、x64 ベース プロセッサとなっています。
※それぞれの用語や、意味はいろんなサイトで説明があるので割愛します。多少の画面の違いはあれど、動作要件を満たしていれば、なんでもOKだと思っています。。。🙀

作成手順

アプリケーションを作る手順は、次のような流れです。
作成手順

  1. アプリ作成準備(プロジェクト、アプリケーション作成)
  2. モデル作成
  3. ビュー作成
  4. テンプレート作成

それでは説明していきます。

サンプルアプリの作り方

1.アプリ作成準備(プロジェクト、アプリケーション作成)

アプリを作るための事前準備をします。PCにAnaconda(Python)、PyCharmが入っていて、アプリ作成用に仮想環境が作成されていることを前提とします。

⚠️わからなければ下記を参照してください。
makimakimakino.hatenablog.com

①PyCharmの起動

まずは、エディター(PyCharm)を立ち上げます。
立ち上げ方は、下記を参照にしてください。
makimakimakino.hatenablog.com
⚠️インストールされていれば、Windowsの検索からjet Brainsと入力すると候補が出ます。

次に、新しいプロジェクトを作成します。
左上のファイル>新規プロジェクトを押下します。
f:id:makimakimakino:20190106011920p:plain
ロケーションにプロジェクト作成用のフォルダの場所を入力します。
f:id:makimakimakino:20190106012034p:plain
それから、プロジェクト・インタープリター(実行ファイル)には、使いたい仮想環境の実行ファイルを指定します。
f:id:makimakimakino:20190106012120p:plain

⚠️今回は以前に作成したインタープリター(実行ファイル)を使いますので、既存インタープリターを選択し、作成したインタープリターを指定します。

実行ファイルについては、Pythonがインストールされている場所や仮想環境を作成した場所にあります。
Anacondaで作成した場合は、デフォルトであればc:>Users>user>Anaconda3>envs>[作った仮想環境フォルダ]>python.exeになります。
このpython.exeを使ってプログラムを実行していきます、ということを宣言します。

⚠️仮想環境の構築が済んでいない場合は、Anaconda Navigatorを使えば、GUIから簡単に作ることができます。
makimakimakino.hatenablog.com

作成を押下し、プロジェクト用のフォルダができていることを確認します。
f:id:makimakimakino:20190106052006p:plain

Djangoプロジェクトの作成

プロジェクト作成用のフォルダを作ったら、Djangoプロジェクトを作成します。

ターミナルに下記を打ち込みます。
f:id:makimakimakino:20190106052241p:plain

⚠️今回Djangoプロジェクトの名称はmysiteとしています。

実行すると左側のプロジェクトツリーにDjangoプロジェクトが作成されます。
f:id:makimakimakino:20190106053129p:plain

次にターミナルに下記を打ち込み、今作成されたmysiteフォルダに移動します。

⚠️cd はchange directoryの略で、コマンドラインで指定したフォルダに移動する方法です。

プロジェクトがちゃんと作成されているか確認してみましょう。

「+」を押下し、ターミナルを追加します。
f:id:makimakimakino:20190106053456p:plain
f:id:makimakimakino:20190106053842p:plain

新しく追加されたターミナルに下記を入力します。

サーバーがローカル環境で立ち上がったようです。

Performing system checks...

System check identified no issues (0 silenced).

You have 13 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
January 03, 2019 - 19:14:56
Django version 1.11.3, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

ブラウザからアクセスできるか確認してみましょう。
Webブラウザを起動して、アドレスバーにhttp://127.0.0.1:8000と入力します。

次のような画面が表示されればOKです。
f:id:makimakimakino:20181125000408p:plain

ちなみにサービスは1度立ち上げておけば、プログラムを変更したときに再起動せずとも変更を反映してくれるみたいです。


runserver の自動リロード

開発サーバーは必要に応じてリクエストごとにPythonコードを自動的にリロードします。コード変更の効果を得るためにサーバーを再起動する必要はありません。しかしながら、ファイルの追加のようないくつかの行動は再起動をトリガーしません、このような場合はサーバーを再起動する必要があります。
はじめての Django アプリ作成、その 1 | Django ドキュメント | Django

 
⚠️ここまでの作業は、実はPyCharmのProfessinal Editionであれば、Djangoのサポートがあるため、①プロジェクト作成から、②アプリケーションの作成までGUIで作成できたり、サーバーの起動がボタン1つでできたりします。めんどくさいコマンドを打たなくて良く、簡単なのでとっても便利なのですが、残念ながらCommunity Editionにはその機能がありません。標準搭載してくれないかな。。。

③プロジェクトの初期設定

次に、Djangoプロジェクト全体に関わる設定を変更します。

まず、設定するファイルは mysite\settings.pyです。

■mysite\settings.py
f:id:makimakimakino:20190106054731p:plain

(1)DBの設定
使うDBに合わせて設定を変更します。
Djangoをインストールすると抱き合わせでsqlite3が、入ってきます。
sqlite3で特に問題なければここは編集しなくても大丈夫です。

⚠️大容量のデータを扱う場合は、MySQLなど他のDBを使った方が処理も軽く読み書きが安定します。今回はサンプルなので何も変更せず進めます。

(2)言語/タイムゾーンの設定
先ほど立ち上げたサイトは英語でした。
Djangoでは言語の設定がこの設定ファイルでできるようです。
mysite/settings.pyのInternationalizationを次の通りに変更します。

■mysite/settings.py

先ほど立ち上げたブラウザを更新してみると次のように表示されるはずです。
f:id:makimakimakino:20181125154538p:plain

④データベースの構築、初期化

次に、PyCharmのターミナルに次のコマンドを打ち込みます。

次のように表示されればオッケーです。

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying sessions.0001_initial... OK

⑤管理ユーザ作成

Djangoでは、プロジェクトを作った時に、なんと管理用のサイトが自動で生成されます。
そこにアクセスできるスーパーユーザーを作ります。
PyCharmのターミナルに次のコマンドを打ち込みます。

ユーザーIDとメールアドレス、パスワードを求められるので入力します。

Username (leave blank to use 'user'): username👈入力
Email address: mail@mail.com👈入力
Password:👈入力
Password (again):👈入力
Superuser created successfully.

⚠️パスワードはパスワードポリシーが設定してあり、IDに近くないものかつ最低文字数の制約があります。

管理サイトにログインして確認してみます。
ブラウザのアドレスバーにhttp://127.0.0.1:8000/adminを入力します。
管理サイトのログイン画面が表示されるので、先ほど作成したスーパーユーザーのユーザーIDとパスワードを入力してログインを押します。
f:id:makimakimakino:20181125154802p:plain
このようなサイトが表示できればOKです。
f:id:makimakimakino:20181125154830p:plain

2.アプリケーションの作成

プロジェクトが作成されたことを確認できたら、次はアプリケーションを作成していきます。
PyCharmのターミナルに次のコマンドを打ち込みます。

アプリケーションフォルダと中身が作られていればOKです。
f:id:makimakimakino:20190106060639p:plain

プロジェクトとアプリケーション

プロジェクトとアプリケーションの違いとは何でしょうか?アプリケーションとは、実際に何らかの処理を行う Web アプリケーションを指します。例えばブログシステムや公開レコードのデータベース、単純な投票アプリといった具合です。プロジェクトとは、あるウェブサイト向けに設定とアプリケーションを集めたものです。一つのプロジェクトには複数のアプリケーションを入れられ ます。また、一つのアプリケーションは複数のプロジェクトで使えます。
はじめての Django アプリ作成、その 1 | Django ドキュメント | Django

3.モデルの定義

MTVモデルのM、つまりモデルを定義していきます。
ここでは、扱うオブジェクトの構造を定義し、DBに反映させます。

①polls/models.pyの編集

polls/models.pyを編集します。
■polls/models.py
f:id:makimakimakino:20190106061108p:plain

⚠️サンプルのチュートリアルだと、はじめはviewに触れてますが、あまりviewから作り始めるプログラム(画面ドリブン型)は無いのと、結局後で再編集したりするし、あっち行ったりこっち行ったりすると混乱するので、ここでは、モデルから構築して行く流れにします。
viewの動作確認という意味では触れておくのもいいと思います。

⚠️Djagoにはモデルのフィールドリファレンスがあらかじめ用意されています。これを使うことで、DBや画面を作ったときに勝手にバリデーションチェックしてくれるような便利なものが用意されています。
モデルフィールドリファレンス | Django ドキュメント | Django

②モデル定義の有効化

mysite/setting.pyにてINSTALLED_APPSにアプリケーション名を追記します。
■mysite/setting.py

③モデルをDBに反映

作成したモデルをアプリケーションで使用できるようにモデルの構造をDBに反映します。
ターミナルに下記を入力します。



マイグレーション

migrate コマンドはすべての適用されていないマイグレーション(Djangoはデータベース内の django_migrations と呼ばれる特別なテーブルを利用してどれが適用されているかを追跡しています)を捕捉してデータベースに対してそれを実行します - 重要なのは、モデルに対して行った変更はデータベースのスキーマに同期するということです。
マイグレーションはとても強力なツールであり、プロジェクトの発展に合わせて、モデルを変更し続けていくことができます。データベースやテーブルを削除して作り直す必要はありません - マイグレーションは、データを失うことなしにデータベースをライブでアップグレードするよう特化しています。これらについてはチュートリアルの後の部分でもっと深くカバーしますが、今は、モデルの変更を実施するための3ステップガイドを覚えておいてください:

  • モデルを変更する (models.py の中の)
  • これらの変更のためのマイグレーションを作成するために python manage.py makemigrations を実行します。
  • データベースにこれらの変更を適用するために python manage.py migrate を実行します。
マイグレーションの作成と適用のコマンドが分割されている理由は、マイグレーションバージョン管理システムにコミットし、アプリとともに配布するためです。これによって、あなたの開発が容易になるだけでなく、他の開発者や本番環境にとって使いやすいものになります。

④管理サイトで質問・選択肢を編集できるように設定

アプリを 管理サイトで編集できるようにします。
■polls/admin.py
f:id:makimakimakino:20190106063837p:plain

⚠️確認するには管理サイトにログインして、質問や選択肢を編集してみてください。
f:id:makimakimakino:20190106064507p:plain
f:id:makimakimakino:20190106064634p:plain

4.ビューの定義

①ビューを定義

ビューはユーザーからのリクエストを受け取ったときにどの画面を表示させるかのアクションを定義します。

(1)アプリケーションのビュー編集
■polls/views.py
f:id:makimakimakino:20190106070442p:plain

②URLを定義

ここではまず、アプリケーションのルーティングを設定します。

(1)アプリケーション以下のURLを作成
ビューを呼ぶために、 URL を対応付けしてやる必要があります。そのためには URLconfというものが必要だそうです。
polls ディレクトリに URLconf を作るには urls.py というファイルを新たに作ります。
PyCharmでのファイルやフォルダの追加方法は、追加したいフォルダ(今回はpolls)を右クリックして新規>ファイル(もしくはディレクトリー)を選択します。
f:id:makimakimakino:20190106072011p:plain
ファイル(もしくはディレクトリー)名を入力し、OKを押下します。(今回はurls.py)
f:id:makimakimakino:20190106072447p:plain
作成したファイルを編集します。

■polls/urls.py
f:id:makimakimakino:20190106072725p:plain

(2)プロジェクトに単位のURLを作成
今度はプロジェクトのルートのURLconfにアプリケーションのURLconf(polls.urls モジュール)の記述を反映させます。

■mysite/urls.py
f:id:makimakimakino:20190106073034p:plain

5.テンプレートの作成

①テンプレートを作成

ビューの中で、ページのデザインがハードコードされている場合、ページの見栄えを変更するたびに、 Python コードを編集する必要があります。
Django のテンプレートシステムを使えば、ビューから使用できるテンプレートを作成することで、Python からデザインを分離でき、変更に対して強いプログラムを作ることができます。

最初に、 polls ディレクトリの中に、 templates ディレクトリを作成します。 Django はそこからテンプレートを探します。
その後、作成した templates ディレクトリ内で polls というディレクトリを作成し、さらにその中に テンプレートのhtmlファイルを作成します。(テンプレートは polls/templates/polls/xxxxx.html に書く必要があります。)
f:id:makimakimakino:20190106074244p:plain

■polls/templates/polls/index.html

■polls/templates/polls/detail.html

■polls/templates/polls/results.html

まとめ

以上がチュートリアルの投票アプリを作る手順になります。
実際にブラウザで動かしてみると次のような画面が見えるになると思います。
http://127.0.0.1:8000/polls/にアクセスしてください。

質問がない場合

利用可能な質問がないですと表示されます。
f:id:makimakimakino:20190106075213p:plain
http://127.0.0.1:8000/admin/からログインして質問を追加してください。

ログイン

作成したsuperuser情報でログインします。
f:id:makimakimakino:20190106010251p:plain

管理画面

扱えるモデルが表示されます。
f:id:makimakimakino:20190106075843p:plain

質問の追加/保存

質問の編集ができます。
f:id:makimakimakino:20190106010502p:plain
質問の追加が終わったら再びhttp://127.0.0.1:8000/polls/にアクセスしてください。

質問一覧

f:id:makimakimakino:20190106005751p:plain

投票画面

f:id:makimakimakino:20190106005846p:plain

投票

f:id:makimakimakino:20190106005943p:plain

結果画面

f:id:makimakimakino:20190106010027p:plain

今回はチュートリアルに沿ってサンプルの投票アプリを作ってみました。
基本的には、次の流れでアプリの開発を進めていきます。

アプリ開発の流れ


1.プロジェクトの作成
 ①PyCharmの起動
 ②Djangoプロジェクトの作成
 ③プロジェクトの初期設定
 ④データベースの構築、初期化
 ⑤管理者ユーザ作成
2.アプリケーションの作成
3.モデルの定義
 ①polls/models.pyの編集
 ②モデル定義の有効化
 ③モデルをDBに反映
 ④管理サイトで質問・選択肢を編集できるように設定
4.ビューの定義
 ①ビューを定義
 ②URLを定義
5.テンプレートの作成
 ①テンプレートを作成

少しボリュームは多いと思いますが、慣れてくると早く作ることができるようになってくると思います。(Django以外を使おうとするともっと時間がかかる気がします。)
作ったアプリに機能を追加したり、画面を見やすくしたり、管理サイトをカスタマイズしたりなど、いろいろいじってみるとさらに勉強になるのではないでしょうか。