０．この記事について
この記事ではテンプレートを使ったWebアプリの簡易開発法を紹介します。
データ定義ファイルの修正といくつかの作業だけでアプリが完成します。
使用するプログラム言語はPython、フレームワークはDjango(2.1)です。
チュートリアル形式なのでPythonの知識は必要ありません。
Webアプリケーションの開発経験がある方なら短時間で習得可能です。
１．概要
はじめに
「Webアプリの作成に挑戦したけど、勉強することが多すぎて挫折した…」
という経験を持つ方は多いのではないでしょうか。そんな方々のためにWebアプリケーションの簡易開発法を用意しました。この方法なら現時点でプログラムの知識が無くとも実用的なWebアプリを数時間で作成することが可能です。
さらに、作ったアプリをクラウドサービスの「Heroku」にアップロードする手順も整理しました。アップロードすれば、友人や同僚のPC・スマートフォンから利用できます（無料枠で運用できます）。
オープンソースのプログラム（Python/Django）を使っているのでライセンス料は無し。Webアプリなのでユーザーに特別なアプリをインストールしてもらったりクラウドサービスに入会してもらう必要もありません。
インターネットで使うもよし。社内・学内サーバで使うもよし。ローカルPCで起動してデータベースアプリとして使うもよし。ご自由に活用してください。
何が作れるのか？
この方法で作るのは一種類のデータを扱う簡単なデータベースアプリケーションです。Excel・Access・FileMalerなどのデータベースアプリや、KintoneやSharePointなどのグループウェアのデータベース機能と同じことができます。
具体的な利用例：
- 名簿や商品一覧などのデータベース
- 掲示板
- タスク管理
- 作業報告書
なぜ短時間で開発できるのか？
この方法ではテンプレートのWebアプリケーションをダウンロードし、それをカスタマイズして完成させます。基本的な機能は全てテンプレートに含まれているので、開発者の作業はデータの項目定義と若干のHTMLの編集だけで終了です。いずれもコピペで作業できるようにテンプレート化しています。
テンプレートアプリの機能
※ スクリーンショットは「２－４．使ってみる」を参照
- データ操作画面（検索一覧・詳細・登録・更新・削除）
- ログイン画面
- ユーザー管理画面
品質やセキュリティは大丈夫？
このアプリケーションはPythonのWebアプリケーションフレームワークDjangoを使って作られています。
Djangoはデータ定義を元に自動的に画面を作る機能が充実しており、またログイン機能やユーザー管理機能もデフォルトで用意されています。
アプリケーションではこれらの機能を呼び出しているだけで、自作のロジックはほとんど記述していません。Djangoは世界中で利用されているOSSですから、品質やセキュリティについて過度に心配しなくとも大丈夫です。
※ インターネットで運用する場合はセキュリティについて十分に勉強し、不正アクセスや情報漏洩に配慮してください。
参考資料
１．Djangoについて学ぶ
このアプリケーションは「Django」というフレームワークを利用して作られています。Django には初心者向けのすばらしいチュートリアルがあります。
「そもそもWebって何？」というところから説明が始まって、最初のアプリケーションを作成してインターネットで公開するところまで平易な言葉で導いてくれます。Djangoの仕組みについて疑問に思うことがあれば、まずはこちらをゆっくり読んでみてください。
この記事で利用するテンプレートアプリは、以下の記事を元に作っています。
アプリケーションの構成について気になった時は読んでください。
・[Python] Djangoチュートリアル - 汎用業務Webアプリを最速で作る
Djangoの解説書も発売されています。ネットの情報とともにこちらも参考にしてください。
Django 公式ドキュメント
２．アプリ設計のサンプル
自分でデータ定義をするときに、どんな項目を作るべきか悩むときがあります。そんなときはデータベースアプリメーカーのサンプルを参考にさせてもらいましょう。
-
- 大量のExcelのテンプレートがダウンロードできます。項目定義を参考にしましょう。
-
- アプリ紹介ページの画像をクリックすると、各画面の項目の詳細を見ることができます。
-
- アプリ紹介ページの画像をクリックすると、各画面の項目の詳細を見ることができます。
２．開発手順
１．開発環境を作る
アプリケーションの開発環境を作ります。一般的なPythonの開発環境となります。不明な点があれば市販のPython入門書やネットの情報を参考にしてください。
１－１．PCの用意
OSはWindows/MacOS/Linux なんでもOKです。
ただしインターネットに自由に接続できるネットワーク環境を用意してください。
１－２．開発ツール
開発に必要なアプリをインストールします。
- Webブラウザ
Google Chromeを用意してください。利用するだけならどんなブラウザでもかまいませんが、開発機能についてはGoogle Chromeが一番が充実しノウハウも見つけやすいです。
参考：サルワカ 初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
- テキストエディタ
Python用の設定があるテキストエディタを用意しましょう。現在使い慣れているものがあればそれでＯＫです。
とくに現在使っているものが無いなら「Visual Code Studio」をお勧めします。無料で使えて動作も軽く、Pythonのデバッグ実行が可能です。
・Visual Studio Code クラウド開発用の強力かつ軽量なコード エディター
・Visual Studio Codeの使い方、基本の「キ」
- GUIデータベースクライアント
開発環境ではSQLiteというデータベースを使います。SQLiteではデータは「*.sqlite3」という形式のファイルに保存されます。このデータはコマンドラインから参照・編集することができますがGUIでの管理ツールの方が便利です。様々なツールがありますので、自分の使いやすいツールを探してください。
・おすすめ：無償の高機能SQLクライアントツール「DBeaver」
※ Djangoは他にもPostgres/MySQL/Oracle/SQLServerの各データベースに対応しています。
１－３．Pythonのインストール
開発で使うPCにPython(Python3)をインストールします。インストールするバージョンは最新のものでＯＫです。各ＯＳへのインストール方法は「Django Girls Tutorial」のページを参考にしてください。
２．テンプレートアプリの準備
２－１．ダウンロード
カスタマイズの土台となるテンプレートアプリをダウンロードします。Githubで公開しているので、そこからダウンロードします。
Github: テンプレートアプリ(instant-django)
https://github.com/okoppe8/instant-django
ダウンロードはページの右上の緑のボタン「Clone or download」を選び「Download ZIP」を選びます。zipファイルをダウンロードしたら、開発用のディレクトリを適当な場所に作成してそこで解凍してください。
※ gitが使えるならgit cloneを使ってください。
git clone https://github.com/okoppe8/instant-django.git
２－２．初期化する
ここからはコマンドラインで操作します。各ＯＳのコマンドラインの使い方はDjango Girls Tutorialのこちらのページを見てください。
コマンドラインのコンソールが起動したら、解凍したディレクトリに移動します。
cd instant-django
移動後に以下のコマンドを上から順番に実行します。
- Windows用準備コマンド
python -m venv env
env\Scripts\activate
pip install -r requirements.txt
manage.py migrate
manage.py createsuperuser
- MacOS/Linux用準備コマンド
python3 -m venv env
source env/bin/activate
pip install -r requirements.txt
python manage.py migrate
python manage.py createsuperuser
※環境構築はvenv/pip以外のツールでも問題ありません。
コマンドの詳細は以下の通りです（windows版で説明）。
python -m venv env
env\Scripts\activate
テンプレートアプリ用のpythonの仮想環境を作成し有効化しています。
参考：Django Girls Tutorial 仮想環境
pip install -r requirements.txt
アプリケーションの実行に必要なライブラリをインストールします。
時間がかかるので気長に待ちましょう。
manage.py migrate
データベースの構築をします。実行後、ディレクトリに作成される「db.sqlite3」というファイルが開発環境でのデータベースです。
参考：Django Girls Tutorial :データベースをセットアップする
manage.py createsuperuser
データベースにアプリケーションの管理者ユーザーを作成します。
アカウント名/e-mailアドレス/パスワード を要求されます。
e-mailアドレスは任意なので空でも大丈夫です。
２－３．起動する
参考：Django Girls Tutorial :ウェブサーバを起動する
管理者ユーザーの登録が完了したら、コマンドラインに以下のコマンドを入力してアプリケーションを起動します。
- Windows
manage.py runserver
- MacOS/Linux
python manage.py runserver
起動に問題が無ければ以下のメッセージが表示されます。
System check identified no issues (0 silenced).
September 14, 2018 - 13:35:40
Django version 2.0.8, using settings 'config.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
この状態のままでブラウザを起動して、以下のアドレスにアクセスしてみましょう。
http://127.0.0.1:8000/
テンプレートアプリのログイン画面が表示されればＯＫです。
２－４．使ってみる
カスタマイズの前にテンプレートアプリの機能を確認しましょう。
- ログイン画面
この画面で「createsuperuser」で作ったアカウントを入力するとログインできます。この画面はDjangoに最初から用意されているものです。
- 検索一覧画面と検索条件入力フォーム
データの一覧リストです。検索条件を入力して絞り込みと並べ替えができます。
- 詳細画面・新規登録 更新画面・削除画面
個別データの表示・登録更新・削除画面です。
- 管理メニュー・ユーザー管理画面
Djangoにデフォルトで用意されている管理ツールの画面です。このアプリケーションでは「管理画面」のリンクより移動できます。アプリに戻る場合は管理画面上部の「サイトを表示」のリンクをクリックします。
ユーザーの追加はここから行います。
データの修正やマスタメンテ業務もここから可能です。
２－５．データを確認する
アプリケーションで登録したデータをデータベース上で確認しましょう。１－２でインストールしたデータベースクライアントを起動し、アプリケーションのディレクトリにあるファイル「db.sqlite3」を開きましょう。
アプリケーションのデータはテーブル「app_item」、ユーザー情報は[users_user]に入っています。どのように保存されているのか確認しましょう。
ちなみにDjangoでは以下のデータベースが利用できます。
- SQLite
- MySQL
- Postgres
- Oracle
- SQL Server
データベースをSQLite以外のものに変える場合は公式サイトの説明を見てください。
参考：https://docs.djangoproject.com/ja/2.1/ref/settings/#databases
３．カスタマイズ作業
３－１．修正ファイルは３つだけ
ここから本格的な開発作業を行っていきます。
まずアプリケーションのディレクトリを確認してみましょう。
ディレクトリは以下の様な構成になっています。
project_root
├ config # 設定ディレクトリ
│ │ settings.py # 設定
│ │ urls.py # ルーティング設定
│ └ wsgi.py # 本番環境での起動ファイル
│
├ app # アプリ ディレクトリ
│ ├ migrations # データベース定義
│ ├ static # 静的ファイル(img/js/css)
│ ├ templates
│ │ └ app # 画面テンプレート
│ │ │ _base.html # 共通部品
│ │ │ _pagination.html # ページネーション部品
│ │ │ item_confirm_delete.html # 削除画面
│ │ │ item_detail.html # 詳細画面
│ │ │ item_detail_contents.html # 詳細・削除画面 共通部品 【★】
│ │ │ item_filter.html # 検索一覧画面 【★】
│ │ └ item_form.html # 新規登録・更新画面
│ │
│ ├ templatetags # テンプレートタグ
│ │ admin.py # 管理アプリ用定義
│ │ apps.py # アプリ設定
│ │ filters.py # 検索
│ │ forms.py # 入力フォーム
│ │ models.py # モデル【★】
│ │ tests.py # テスト
│ │ urls.py # ルーティング設定
│ └ views.py # ビュー(MVCでのコントローラ)
│
├ users # ユーザー管理用アプリ ディレクトリ
│
└ manage.py # 管理コマンド
多くのファイルがありますが全く覚える必要はありません。
この開発方法で編集を行うファイルは以下の３つのみです。
- モデルファイル：
models.py
アプリで扱うデータ定義を管理するファイルです。モデルの修正内容は、管理コマンド（マイグレーション）を使ってデータベースに反映させます。
- 検索一覧画面のテンプレートファイル：
item_filter.html - 詳細画面のテンプレートファイル：
item_detail_contents.html
検索一覧画面と詳細表示画面を表示するファイルです。
他のウェブアプリケーションフレームワークと同じく、HTMLの中にデータを表示するためのマークアップ（テンプレートタグ）が挿入されています。
- 開発の流れ
開発では以下の３つの作業を順に行います。
- モデルを変更する
- モデルの変更をデータベースに反映する
- 画面表示を変更する
３－２．モデルファイルを修正する
モデルファイルはデータの項目定義を担当しています。名簿のアプリケーションであれば、名前や住所、年齢などを項目（フィールド）として定義する場所になります。Djangoで定義したモデルはそのままデータベースの１テーブルに対応します。
わかりずらいという方は、先に以下のDjango Girls Tutorialのページや後述する参考資料を読んでみてください。
ではモデルの定義に入ります。テキストエディタでファイルapp/models.pyを開いてください。このような内容になっています。
from django.db import models
from users.models import User
class Item(models.Model):
"""
データ定義クラス
各フィールドを定義する
参考：
・公式 モデルフィールドリファレンス
https://docs.djangoproject.com/ja/2.1/ref/models/fields/
"""
# サンプル項目1 文字列
sample_1 = models.CharField(
verbose_name='サンプル項目1_文字列',
max_length=20,
blank=True,
null=True,
)
# サンプル項目2 数値
sample_2 = models.IntegerField(
verbose_name='サンプル項目2_数値',
blank=True,
null=True,
)
# サンプル項目3 ブール値
sample_3 = models.BooleanField(
verbose_name='サンプル項目3_ブール値',
)
# サンプル項目4 選択肢
sample_choice = (
(1, '選択１'),
(2, '選択２'),
(3, '選択３'),
)
sample_4 = models.IntegerField(
verbose_name='サンプル項目4_選択肢',
choices=sample_choice,
blank=True,
null=True,
)
# サンプル項目5 日付
sample_5 = models.DateField(
verbose_name='サンプル項目5 日付',
blank=True,
null=True,
)
# 以下、管理項目
# 作成者(ユーザー)
created_by = models.ForeignKey(
User,
verbose_name='作成者',
blank=True,
null=True,
related_name='CreatedBy',
on_delete=models.CASCADE,
editable=False,
)
# 作成時間
created_at = models.DateTimeField(
verbose_name='作成時間',
blank=True,
null=True,
editable=False,
)
# 更新者(ユーザー)
updated_by = models.ForeignKey(
User,
verbose_name='更新者',
blank=True,
null=True,
related_name='UpdatedBy',
on_delete=models.CASCADE,
editable=False,
)
# 更新時間
updated_at = models.DateTimeField(
verbose_name='更新時間',
blank=True,
null=True,
editable=False,
)
def __str__(self):
"""
リストボックスや管理画面での表示
"""
return self.sample_1
class Meta:
"""
管理画面でのタイトル表示
"""
verbose_name = 'サンプル'
verbose_name_plural = 'サンプル'
- 既存フィールドの説明
このファイルには事前にItemというクラスを用意しました。このクラスはそのまま使います。この開発法におけるカスタマイズとは、このItemクラスのフィールドを目的にあわせて編集するということです。
事前に９つのフィールドを定義しています。このうち用途がサンプルのものは、動作の理解やコーディングのサンプルとして用意したものなので、最終的には全て削除してください。
用途が管理のものはプログラムによって作成者・更新者の情報が自動的に入力されます。削除せずにそのまま残してください。
| フィールド名 | 用途 | 説明 |
|---|---|---|
| sample_1 | サンプル | 文字列項目のサンプル |
| sample_2 | サンプル | 数値項目のサンプル |
| sample_3 | サンプル | ブール値項目のサンプル |
| sample_4 | サンプル | 選択項目のサンプル |
| sample_5 | サンプル | 日付項目のサンプル |
| created_by | 管理用 | 作成者のID |
| created_at | 管理用 | 作成時間 |
| updated_by | 管理用 | 更新者のID |
| updated_at | 管理用 | 更新時間 |
- フィールドの定義方法
フィールドの定義方法を、サンプル項目１を例に説明します。
# サンプル項目1 文字列
sample_1 = models.CharField(
verbose_name='サンプル項目1_文字列',
max_length=20,
blank=True,
null=True,
)
フィールド定義は以下の文法で成り立っています。
フィールド名 = models.フィールド型(オプション x N)
-
フィールド名
- データを格納する変数です。フィールド名は入力フォーム上でid,name属性として、データベース上ではカラム名として使われます。名前の付け方については一般的な命名規則にしたがいましょう。
- 参考：データベースオブジェクトの命名規約
- 参考：プログラミングでよく使う英単語のまとめ【随時更新】
-
フィールド型
- フィールド名の型の指定です。例えばCharFieldは文字列型、IntegerFieldは数値型などの種類があります。フィールド型の一覧は公式サイトを見てください。
- 参考：公式：モデルフィールドリファレンス フィールドタイプ
-
フィールドオプション
- フィールドにさまざまな付属情報や制約を付けます。以下、オプションの例です。
- verbose_name：入力フォームの見出し
- max_length：文字列の最大長
- blank=True、null=True：空欄での入力を可とします（デフォルトは不可）。「blank=True、null=True」はセットで設定してください。
- 参考：Django公式：モデルフィールドリファレンス フィールドオプション
コピペで使えるようにしたものが以下の記事にあります。利用してください。
３－３．データベースに反映する
モデルファイルを修正したら、その修正内容をデータベースに反映させます。
データベースへの反映にはマイグレーションを使います。
例として、先のモデルファイルのフィールドsample_1を削除（コメントアウト）してみましょう。ファイルを保存したら、その状態で以下のコマンドを実行します。「makemigrations」コマンドはモデルの変更を検知して、その変更をデータベースに反映されるためのスクリプトを作成します。
windows> manage.py makemigrations
MacOS> python manage.py makemigrations
モデルの内容にエラーが無ければ、フィールドの変更を検知して「migrations」ディレクトリの下に連番のファイルが作成されます。このファイルは、データベースに対して、コメントアウトしたsample_1に対応するカラムを削除する内容になっています。
ファイルが作成されたら、続けて以下のコマンドを入力します。
windows> manage.py migrate
MacOS> python manage.py migrate
「migrate」 は、「makemigrations」で作られたデータベース変更ファイルを実際にデータベースに適用します。実行が終わったらデータベースを確認してください。削除したサンプルフィールドに対応するカラムが消えているはずです。
さらにこの状態でアプリケーションを起動してログインしてみましょう。検索条件入力画面と新規登録・更新画面を見るとsample_1の入力項目が無くなっています。
このように入力フォームの内容はモデルの定義をもとに表示されます。
この後で、再度sample_1のコメントアウトを解除してみましょう。先ほどと同じように「makemigrations」及び「migrate」を実行してアプリを起動すると、sample_1が再作成されて再度表示されます。
このような感じで、モデルファイルの修正とデータベースへの反映を行っていきます。
マイグレーションの細かい説明については以下のページを参照してください。
※ マイグレーションファイルのまとめ方
何度もマイグレーションを実行すると、migrationsディレクトリに大量のファイルが作成されてしまいます。マイグレーションファイルのまとめ方は色々ありますが、一番手っ取り早いのはマイグレーションファイルを全て削除して再作成することです。
手順：
- migrations以下にある
__init__.py以外のファイルを全て削除する。 - データベース(
db.sqlite3)を削除する。 -
makemigrationsとmigrateを再実行する。 -
createsuperuserでユーザーを再作成する。
バージョン管理システムを使って他の開発者と共同で開発している場合は、一括で消してしまうとトラブルになります。この方法は使わないでください。
３－４．検索一覧・詳細画面の修正
モデルの定義の修正は入力フォームに自動的に反映されますが表示画面には反映されません。自分で画面表示用のテンプレートを修正する必要があります。修正対象は２つのファイルです。
-
app/templates/app/item_detail_contents.html
- 詳細・削除画面 共通部品
-
app/templates/app/item_filter.html
- 検索一覧画面
ファイルitem_detail_contents.htmlを開いてみます。
最初の方にフィールドsample_1を表示するためのHTMLが記述されています。
<div class="row">
<div class="col-5 col-sm-3">
<p>1_文字列</p>
</div>
<div class="col-7 col-sm-9">
<p>{{ item.sample_1|default_if_none:"未入力" }}</p>
</div>
</div>
{{ item.sample_1|default_if_none:"未入力" }}の部分がフィールドのデータをHTML内に挿入する箇所です（テンプレートタグといいます）。そのあとにsample_2、sample_3のフィールドも続きますが、データの挿入箇所以外のHTMLは同じ繰り返しになっています。
モデルファイルのフィールドを修正したら、このHTMLの単位でコピーや削除を行ってください。そのあとで'item.sample_1'の部分を、自分で作成した項目（フィールド）の名前に書き換えてください。
フィルタについて
項目（フィールド）のあとに続く「|」以降の記述はフィルタと呼びます。
フィルタは項目の値を変換するもので様々な目的で使われます。
たとえば項目の定義でnull=Trueとした場合、項目が未入力だと値もNullです。
Nullの値は画面上で「None」と表示されます。これを避けるためには、フィルタでNoneを違う値（空文字・未入力など）に置き換えなくてはなりません。
フィルタの一部を紹介します。
| タグ名 | 用途 |
|---|---|
| default | 値がFalse、空文字、0、Noneの場合に設定値に置き換える |
| default_if_none | 値がNoneの場合に設定値に置き換える |
| yesno | ブール値を他の値に変換する(有：無、はい：いいえ 等) |
Djangoには他にもフィルタが大量に用意されています。
自分の目的に合ったフィルタがないか、公式サイトを参考にしてみてください。
以上でテンプレートを使った開発作業の説明は終了です。DjangoやBootStrapについて学ぶことで画面のデザインや処理内容についてより自由にカスタマイズできます。「４．カスタマイズのヒント」にあるリンクを読んでみてください。
３．インターネットで使う
Webアプリをスマートフォンや他人のPCから使えるようにするには、インターネット上にサーバを用意し、Webアプリをアップロードして様々な設定を行う必要があります。この作業のことをデプロイといいます。
サーバは主に専用業者からレンタルすることになりますが、レンタルの方式についても様々な種類があります。
このなかで「PaaS」というタイプのクラウドサービスは、とりあえず公開するだけなら事前にサーバやネットワーク関係の専門知識がなくても大丈夫です。ここでは、PaaSの代表的なサービスの「Heroku」を使ってWebアプリをデプロイする方法を紹介します。
※ 現行のDjangoGirlsTutorialでは同様のPaaSサービス「PythonAnyWhere」へのデプロイ方法を紹介しています。日本語の資料が少ないという面を除けばデプロイ作業はHerokuと同じくらい簡単で使いやすいサービスです。
参考：
この記事ではDjangoの無料プランを使います。プランの制限について確認してください。
Herokuへのデプロイ方法
デプロイ手順は以前のDjangoGirlsTurorialの内容を元にしています。さらにHerokuより提供されているDjango用のライブラリを利用して手順を簡略化しました。
１．ツールの準備
Herokuへのデプロイにあたって、以下の準備が必要です。
- Herokuにアカウントを登録する
- heroku-toolbeltをPCにインストールする
- GitクライアントをPCにインストールし初歩的な使い方を覚える
以下のサイトを参考に準備を終わらせてください。
２．ファイルの追加と更新
最初にアプリケーションにデプロイ用のファイルの追加・更新を行います。対象のファイルは３＋１つ（任意）です。
- １. Procfile（新規作成）
アプリを起動するコマンドを記述します。アプリケーションのディレクトリ直下に作成します。
web: gunicorn config.wsgi --log-file -
- ２. requirements.txt（更新）
Heroku環境で使用するライブラリを追加インストールし、requirements.txtを再作成します。
pip install gunicorn django-heroku
pip freeze > requirements.txt
- ３. config/settings.py（更新）
configディレクトリにある設定ファイルです。２か所修正します。
まず秘密鍵を新しく生成したものに変更します。秘密鍵はネット上のツールで出力することができます。
SECRET_KEY = 'ここの値を変更'
出力ツール：https://www.miniwebtool.com/django-secret-key-generator/
次にファイルsettings.pyの一番最後にHeroku用の設定記述を追加します。
import os
import django_heroku
if 'DYNO' in os.environ:
django_heroku.settings(locals())
- ４. runtime.txt（新規作成：任意）
実行するPythonのバージョンを指定します。アプリケーションのディレクトリ直下に作成します。デフォルト（2018年9月時点で3.6.6）以外のバージョンを使うときに指定してください。指定できるバージョンについてはHeroku公式ページを参考にしてください。
- runtime.txt
python-3.6.6
３．Git リポジトリの作成
コマンドラインで以下のコマンドを順に実行してGitのローカルリポジトリを作成します。
cd <アプリケーションのディレクトリ>
git init
git add -A .
git commit -m "first commit"
４．Heroku へのデプロイ
Heroku CLIのコマンドでHerokuにデプロイします。
your-app-name はアプリの名前を入れます。この名前はそのままアプリのURLとして利用されます。当然他人が既に登録しているものは使えません。
heroku login
heroku create <your-app-name>
git push heroku master
heroku ps:scale web=1
heroku run python manage.py migrate
heroku run python manage.py createsuperuser
コマンドが完了したら、「heroku open」か以下のアドレスにブラウザでアクセスしてください。エラーになっていなければherokuのアプリケーションが表示されるはずです。
https://your-app-name.herokuapps.com
他の環境へのデプロイ方法
当然ながらVPSや既存のサーバにデプロイすることも可能です。
以下、参考リンクです。
４．カスタマイズのヒント
ここで説明した以外の部分を変更したい、機能を追加したい場合の参考リンクです。なお、アプリ全体の仕組みについては以下の記事で解説しています。
画面デザインの変更
このアプリケーションはCSSフレームワークにBootStrap4を利用しています。BootStrap4のクラスやウィジェットを使えば容易に見た目の変更ができます。
CDNのBootstrap Themeなら、Bootstrapのcss読込のあとに１行追加するだけで全体のテーマを変更できます。
入力フォームは「django-crispy-forms」というライブラリを利用しています。このライブラリはモデル定義に合わせて自動的に入力フォームを作ってくれる優れものですが、入力項目の見出しをオフにしたり複数項目をインライン表示するような自由なレイアウトには向いていません。
自由にフォームを作りたいときは「django-bootstrap4」を使ってください。こちらなら入力フィールド毎の細かいコントロールが容易です。
処理内容の変更
データの処理ロジックは「app/views.py」に集約しています。viewのロジックは「クラスベースドビュー」という組み込みクラスを利用しています。
- データの表示順を変えたい
- １ページの表示件数を変えたい
という場合はここのパラメータの変更で可能です。自分で作ったモジュールを組み込みたい場合は、アプリケーションにモジュールを追加したうえでviews.pyの該当ビュー内で呼び出してください。
ヘッダー・明細形式の入力フォームを作る
Djangoには複数データを同時入力するための「inline-formsets」クラスがあります。このクラスを使うと、注文書や売上伝票などのヘッダー・明細クラスのあるフォームを扱うことができます。
画像・添付ファイルを扱う
Djangoでは画像ファイル・添付ファイルを扱う専用フィールドが用意されています。このフィールドを使えば、画像データベースのようなアプリケーションも簡単に作成することができます。
グラフを表示する
Djangoでは「django-rest-Framework」というライブラリを使ってrest形式のWebAPIを作ることができます。WebAPIを作れば、「Chart.js」「Highcharts.js」といったライブラリを使って簡単にページ内にグラフを表示することができます。
メール通知・Slack通知
データの更新時にメールやSlackで変更内容を通知するといった機能を作ることができます。
印刷する
HTMLで帳票を作成し印刷機能を作る方法です。今のブラウザなら複雑なPDFモジュールを使わなくとも正確な印刷が可能です。
以上です。フィードバックいただけると助かります。