画面に「Hello Word」を表示しましょう
プログラム作成の第一歩は「Hollo World」を表示させましょう。
「Hello World」はどのプログラムでも最初に表示を目指す作業ですね。
それではいってみましょう！
アプリの作成
先ほどDjangoでプロジェクトフォルダを作りましたね。次はアプリを作ります。
プロジェクトとアプリは分かりづらいですが、プロジェクトが大枠でその中にアプリを作っていきます。これ以降は基本的にアプリファイルを作っていくイメージです。
まずプロジェクトフォルダの中に新規アプリを作っていきましょう。
まずはコマンドで作業フォルダを移動します。
cd プロジェクトを作ったフォルダへのパス/test_appいよいよアプリを作成します。
以下のコマンドを打ちましょう。
python3 manage.py startapp アプリ名アプリ名は半角英数字で設定してください。また、プロジェクト名と別のものにするとわかりやすくなります。今回は「newApp」とします。
実行するとtest_appフォルダにnewAppフォルダができると思います。
そしてその中にはいくつかフォルダとファイルが表示されます。
これらのファイルを編集することでアプリを作っていくんですね。
test_app
manage.py
newApp
├── __init__.py
├── admin.py
├── app.py
├── migrations
└── __int__.py
├── models.py
├── tests.py
├── urls.py
└── views.py では次は画面を表示するところまでいきましょう！
ここからはVSCodeでいきます。
現時点でこのような階層になっているはずです。
次はurls.pyを設定していきます。urlsは表示する画面(html)とアプリをつなぐ役割をします。
まず’newApp’内に’urls.py’を作成してください。
こうなればOKです。
※test_app内に元からある’urls.py’ではないので注意してください。
では今作った’urls.py’を開きましょう。
開いたらこのように記述してください。
from django.urls import path
from . import views
app_name = 'newApp'
urlpatterns = [
path('', views.index.as_view(template_name="index.html"), name='index'),
]
6行目ではシングルコーテーション’ ‘でHTMLにアクセスがあったときにどのページを開くか指定します。
今回は’ ‘内に何も書いていないので、何も書かずにアクセスがあった場合は’index’に飛ばしますよという意味になっています。
では次は’test_app’直下の’urls.py’も編集していきましょう。
以下のように記述してください。
from django.contrib import admin
from django.urls import path, include #includeを追加
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('newApp.urls', namespace='newApp')), #ここを追加
]
2行目の’include’と6行目を追加しました。
‘namespace’はプロジェクト内に複数のアプリがある場合にどのアプリ用が指定する役割があります。今回は1つしかないので気にしなくて大丈夫です。
次はプロジェクトに何のアプリが作成されたか教えてあげましょう。
‘test_app’内の’setting.py’を開いて以下のようにアプリ名を追加しましょう。
追加したらついでにタイムゾーンなども編集しておきます。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'newApp', #追加
]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Internationalization
# https://docs.djangoproject.com/en/4.0/topics/i18n/
#LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'ja' #jaに変更
#TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Tokyo # Asia/Tokyoに変更
USE_I18N = True
USE_TZ = True
さて次は’views.py’を編集していきます。
‘views’はリクエストに対して実際にどのページのデータを読み出すかの指示をします。
‘newApp’直下の’views.py’を開いたら次のように記述しましょう。
from django.shortcuts import render
class index(TemplateView):
template_name = "index.html"
これで’newApp’内の’index.html’を開く設定ができました。
ではいよいよ実際に開くページを作成していきます。
‘index.html’を含むhtmlファイルは’templates’フォルダを作ってその中に配置します。
templatesフォルダはプロジェクト直下かアプリフォルダの中に作成します。
全アプリに統一したhtmlファイルを作成するにはプロジェクト直下、アプリ固有のものであればアプリフォルダ内に作るといいでしょう。
今回はアプリは１つしかないのでプロジェクト直下に配置します。
こんな感じで作成してください。
※’mkdir’でもVSCode上で作成しても大丈夫です。
├── config
├── db.sqlite3
├── diary
├── manage.py
└── templatesさて、デフォルトでは’templates’フォルダはアプリ直下のものを優先して見に行くように設定されているので、作成したフォルダを参照するように設定を変えましょう。
‘setting.py’を開いて以下のように書きましょう。
import os #osモジュールを使うため、ページの先頭に追記
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ROOT_URLCONF = 'newApp.urls' #newApp.urlsに変更
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates'),], #この部分を追記
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
では表示用の’index.html’を作りましょう。
‘templates’フォルダ内にindex.htmlを作成します。
※VSCodeの’templates’フォルダ上で右クリック→新しいファイル→名前を’index.html’に変更
作ったら開いて以下のように追記してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>newApp</title>
</head>
<body>
<h1>Hello Django</h1>
</body>
</html>
これでページを開く準備ができました。
ターミナルを開いて次のコマンドを実行してください。(あらかじめcdコマンドを使って’manage.py’のあるフォルダに移動しておいてください。
python(python3) manage.py runserveer
次にブラウザを開いてアドレスバーに’localhost:8000’と入力します。
このような画面は表示されましたか？
これでDjanoで画面を表示することができるようになりました。
‘index.html’の文字を色々変えて試してみましょう。
最後までご覧いただきありがとうございました！
PR広告を含みます
