注目キーワード
  1. Photoshop
  2. Python
  3. Raspberry Pi
  4. Arduino

Djangoチュートリアル01~アプリ作成の基礎とHTMLの呼び出し

ここでは「Python」の中で本格的なWebアプリケーション開発用のフレームワークである「Django」を使った、アプリ作成方法、HTMLの呼び出し方法といった基礎をチュートリアルとして紹介します。

 

この記事を読むことで

Djangoの基本的な使い方

DjangoでHTMLファイルを呼び出す

VScodeでDjangoを実行する

方法を知ることができます。

 

また当サイトでは、下記URLのdjango公式チュートリアルを参考にしています。

 

django公式チュートリアル:はじめてのDjangoアプリ作成、その1

 

PythonでWebアプリケーションの開発をしてみたい方は是非挑戦してみてください。

それでは早速始めていきましょう。

 

Djangoの準備と基礎

まずは、Djangoアプリケーションの作成に取り掛かるまでの準備と基本的な使い方を紹介します。

 

Djangoの動作環境とインストール

当サイトではDjangoの実行環境として下記で行いました。

 

PC周りの動作環境

OS:Windows 10

IDE、エディタ:Visual Studio Code

Pythonバージョン:3.7.5

 

PythonパッケージであるDjangoのインストールは

Windows の方はコマンドプロンプト、macの方はターミナルから

> pip install django

を実行してインストールを行います。

 

また、OSがUbuntuの場合

sudo apt install python3-pip

とpython3-pipをインストールし(既にインストールしている場合は省略)

上記のpip installからDjangoをインストールしましょう。

 

インストールが終了したら、Djangoのバージョンを確認します。

> python -m django –version

3.2.3

 

2021/05/25日現在は3.2.3が最新バージョンだと思います。

ここまでできたら、Djangoを始める準備は完了です。

 

Djangoプロジェクトの作成と実行

では早速Djangoのプロジェクトを作成して、実行してみます。

Djangoパッケージは軽量フレームワークのFlaskと違い、プリセットのようなプロジェクトを下記コマンドから呼び出すことができます。

主に、プロジェクト固有のオプションや設定を記述するのに使用します。

 

django-admin startproject プロジェクト名

 

プロジェクトのフォルダはコマンドプロンプト(ターミナル)で選択されているディレクトリに作成されるので

cd Desktop

など任意の場所にカレントディレクトリを移動しておきましょう。

 

今回はデスクトップ直下にプロジェクトを作成することとし、プロジェクト名をmysiteとしてフォルダを作成します。

> django-admin startproject mysite

 

上記のコマンドを実行すると、デスクトップにmysiteというフォルダが作成されていることが分かります。

djangoinit_01

 

プロジェクトフォルダの作成が確認できたら

> cd ./mysite

などでカレントディレクトリを作成したプロジェクト名のディレクトリへ移動します。

 

移動したら

> python manage.py runserver

と入力して実行します。

 

Django version 3.2.3, using settings ‘mysite.settings’

Starting development server at http://127.0.0.1:8000/

と表示されるので、http://・・・の欄をCtrl+クリックして開発サーバーにアクセスしてみましょう。

 

djangoinit_02

上図のように、開発サーバーにアクセスすることができました。

Djangoの簡単な動作内容を確認することができました。

 

また、チュートリアルにはありませんが

mysite/mysite/settings.py 106、108行目 : 言語とタイムゾーンの設定欄

になっています。

 

したがって

mysite/settings.py

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

と書き換えてあげると先ほどの開発サーバーの表示が

djangoinit_03

と日本語使用に変わります。

 

Djangoアプリケーションを様々なタイムゾーンで使用する場合は、上記の欄を任意に変えてくださいね。

 

Djangoアプリケーション

Djangoを動作させるプロジェクトの準備ができたので、実際にアプリケーションの作成と実行を行ってみましょう。

 

ここで

taku
プロジェクトとアプリケーションってどう違うの

と疑問に思う方へ、噛み砕いて説明すると

プロジェクト:システム全体の設定

アプリケーション:作りたいアプリごとの設定

になります。

 

図で表すと下記のイメージ↓

django_progectapp-diff

 

始めは、大まかなイメージが掴めていれば問題ないので早速、Djangoアプリケーションを作成してみましょう。

 

Djangoアプリケーションの作成と有効化

Djangoアプリケーションは

python manage.py startappアプリケーション名

というコマンドで作成することができます。

 

公式チュートリアルを参考に、pollsという名前でアプリケーションを作成します。

ディレクトリは先ほど作成したフォルダになります。(cd Desktop/mysite)

> python manage.py startapp polls

 

実際に確認してみると、mysiteフォルダ内にpollsというフォルダが作成されていることが分かります。

djangoinit_04

 

作成したアプリケーションは

Djangoプロジェクト内で管理・操作できるようにURL・設定の有効化

をしておく必要があります。

 

設定を忘れると、プロジェクト側でアプリケーションを認識できず、エラーが発生します。

したがって下記のようにPythonファイルを編集しましょう。

 

mysite/urls.py

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('polls.urls')),
]

プロジェクトからアプリケーションpollsのurls.pyを参照するようにするに設定をしています。

 

mysite/settings.py

31行目以降のApplication definitionを編集し

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # activate polls application 
    'polls.apps.PollsConfig',
]

pollsアプリケーションを有効化します。

 

mysite/urls.py

mysiteプロジェクト内に新しくurls.pyを作成し

from django.urls import path

from .import views

app_name = 'polls'
urlpatterns = [
    path('',views.IndexView.as_view(),name="index"),
]

と記述します。

 

これはアプリケーション名をpolls、pathの参照先をviews.pyのクラスであるIndexViewからファイル名indexを呼びだす設定になります。

 

これらの設定・有効化が完了したらプロジェクト内での設定は終了になるので、アプリケーション側の設定に入ります。

 

Djangoアプリケーションの設定とHTMLファイルの呼び出し

プロジェクトの設定ができたので、アプリケーションの設定を下記のように行っていきます。

 

polls/views.py

from django.views import generic

class IndexView(generic.TemplateView):
    template_name="index.html"

class部分で、templatesフォルダからindex.htmlを呼び出すように設定します。

 

polls/templates/index.html

アプリケーションを示すpollsフォルダ内にtemplatesというフォルダを作成し、その中にindex.htmlを下記のように用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>TOP Page</title>
</head>
<body>
    <h1>Hello Django World!</h1>
    <p>Django layout test</p>
</body>
</html>

 

ここまでできたら、実行・デバッグをしてみましょう。

> python manage.py runserver

 

http://にアクセスすると

djangoinit_05

HTMLで記述した内容が表示されました。

 

これがpollsアプリケーション内で設定したWebアプリケーションになるということです。

何となく理解できれば、ひとまずOKです。

 

VScodeでDjangoアプリケーションを実行・デバッグする

最後に、VScodeでDjangoアプリケーションを実行・デバッグする方法を紹介します。

この方法を取り入れることで

> python manage.py runserver

というコマンドを打ち込む必要がなくなり、快適にアプリケーションのプレビューを行うことができるのでオススメです。

 

まずVScodeの「実行とデバッグ」をクリックします。

vscode_json_01

 

Debug Configuration

という選択欄から

Django Launch and debug a Django web application

をクリックしましょう。

vscode_json_02

 

すると、プロジェクトフォルダ内に

.vscode/launch.json

が作成され、VScodeにはlaunch.jsonファイルの内容が表示されます。

 

jsonファイルが表示されたら、左側の▶ボタン(実行とデバッグボタン)をクリックしましょう。

vscode_json_03

 

すると、runserverコマンドが実行されます。

この方法を知っておけば、jsonファイルを実行するだけで良いので効率アップに繋がります!

エディタ-にVScodeを使っている方は、是非試してみてください。

 

 

以上、Djangoチュートリアル01でした。

DjangoでWebアプリケーションの作成をしてみたいという方に役立てて頂ければ幸いです。

お疲れ様でした。

djangoinit_thumbnail
学びに関する情報をチェック!