・0 pv・4 min read
Django~ブラウザに表示させてみよう~
#はじめに
今回はDjnagoで「Hello world」をブラウザに表示させる手順を書いていきます。
Djangoを初めて触れる人は、下の記事に目を通してもらえるとスムーズに進められると思います。
PycharmでDjangoでアプリケーションを作成する手順準備編
Djangosettings.py編
プロジェクト全体のディレクトリやファイルは下記のようになっています。
Pycharmプロジェクト
|
|___djangoプロジェクトディレクトリ
|
|___djangoアプリケーションディレクトリ__templatesディレクトリ
|
|___manage.py
|
|___その他のファイル類
それではいきましょう！
#プロジェクトの「urls.py」を編集
まずdjangoアプリケーションディレクトリにある、「urls.py」に移動します。
おそらくこんな感じのものが書かれているはずです。
from django.contrib import admin
from django.urls import path
urlpatterns = [
path('admin/', admin.site.urls),
]
これを下のように追記してください。
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('app/', include('todo.urls')),
]
#ここでの「'app/'」はアプリケーション名を入れることが多いので、各自好きなものを入れてください。
「include」とすることで、URLの最後に「app/」と入力すると、アプリケーションの方の「urls.py」に飛んでくれます。
なぜ2つあるのかというと、プロジェクトとアプリケーションで「urls.py」を分けると、コードが見やすくなるためです。
#アプリケーションの「urls.py」の編集
次にアプリケーションの「urls.py」に書き込んでいきます。
そもそも「urls.py」とはナンジャいという方もいると思います。
一言で言うと『ブラウザに表示したいものの材料が書かれている指示書』です。
お母さんから買い物を頼まれ、その時に渡された「何を買うかのメモ」とイメージしておいてください。
デフォルトでは用意されていないので、作っていない人は作っていきましょう。
#アプリケーションディレクトリに移動
cd アプリケーションディレクトリ名
#urls.pyファイルの作成
touch urls.py
これでOKです。
作ったばかりで中身は空っぽなので、早速書いていきましょう。
from django.urls import path
from .views import HomeView #views.pyから「HomeView」クラスを読み込んでいる。
urlpatterns = [
path('home/', HomeView.as_view())
]
#「home/」はURl部分に入力するもの。
#「HomeView.as_view()」は、YRL部分に「home/」と入力することでviews.pyの「HomeView」を呼び出す。
views.pyと言われてもなんのこっちゃという感じだと思うので、次の章で解説していきます。
#「view.py」の編集
views.pyはurls.pyからの指示通りに必要な材料をかき集めてくる場所です。
お母さんから渡されたメモ通りに食材を買ってくる子供が「view.py」です。
早速追記していきましょう。
デフォルトでは下のように書かれているはずです。
from django.shortcuts import render
# Create your views here.
まずは。「# Create your views here.」この部分を削除して、次のように追記していきます。
from django.shortcuts import render
from django.views.generic import TemplateView #テンプレート表示に特化したもののインポート
class HomeView(TemplateView): #さっきurls.pyに読み込んだ「HomeView」クラス
template_name = 'home.html' #利用するHTMLファイルの指定
#「HTMLファイル」の編集
ではここからHTMLファイル編集していきましょう。
まずtemplatesディレクトリに移動します。
cd templates
templatesディレクトリの中に、HTMLファイルを作成していきます。
touch home.html #〇〇.htmlと作成してください
作成すると中身は空っぽなので、書いていきましょう。
まず「!」とタブキーを同時に押します。
そうすると下のようなものが出てきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
これが出て来なかった場合はコピペしてください。
その後下のように追記+変更してください。
<!DOCTYPE html>
<html lang="ja"> #日本語に
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
# Hello World
＃追記
</body>
</html>
これで準備は万端です！
#実行
では実行していきましょう！
python manage.py runserver
http://127.0.0.1:8000/」
と出てくると思うのでクリックするとブラウザに飛びます。
そこで「Hello World」と表示できていれば完璧です！
#終わりに
今回は「Hello World」を表示させる手順を紹介しました。
まずは小さなことから経験してどんどん成長していきましょう!
これからもアウトプットとして記事を書いていくのでよければ見ていってください。