こんにちは、ikuxxと申します。
今回は「Python」のフレームワークでもある「Django」の基本を学ぶために簡単なホームページを作ってみます。
という事で、今回作るのはこれ。
今回の内容が理解出来るようになると、
これらが分かるようになるはず。
Python初心者がDjangoで簡単なサイトを作ってみる:ファイルの準備
まずはファイルの用意をする前に「Python」をダウンロードしておく。
それからプロジェクトとアプリケーションを作成。
「コマンドプロンプト」でも「Windows PowerShell」でも何でもいいですが、まずは開いて、
「cd desktop」でデスクトップに移動
「mkdir フォルダ名」 (今回はフォルダ名を「sample」に)
「cd sample」で「sample」フォルダの中に移動
「django-admin startproject プロジェクト名 .」 (今回はプロジェクト名を「myproject」に)
そうすると、この時点でのプロジェクトファイル(myproject)の中身はこんな感じ。
次にアプリケーションを作成。
「python manage.py startapp アプリ名」 今回のアプリ名は「myapp」
そうするとアプリ(myapp)のファイルの中身はこんな感じ。
「myapp」の中に
「urls.py」
「templates」フォルダを作成し、中に「index.html」を置く。
「static」フォルダを作成し、中に「css」「javascript」「images」の3つのフォルダを作成する。
「python manage.py migrate」
「python manage.py runserver」で、サーバーを動かす。
「settings.py」のINSTALLED_APPSの項目内に内容を追加する
「myproject/settings.py」の「INSTALLED_APPS」の項目内に、
1 |
'myapp' を追加。 |
必要であれば、言語、タイムゾーン部分も変更。
1 2 3 4 5 |
// 言語・タイムゾーン部分の変更 LANGUAGE_CODE = 'ja' TIME_ZONE = 'Asia/Tokyo' |
myapp/views.py
1 2 3 4 5 6 7 |
// myapp/views.py # Create your views here. from django.shortcuts import render def index(request): return render(request,'index.html') |
myproject/urls.py
1 2 3 4 5 6 7 8 9 |
// myproject/urls.py from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('myapp.urls')) ] |
myapp/urls.py
1 2 3 4 5 6 7 8 9 10 |
// myapp/urls.py from django.urls import path from . import views app_name='myapp' urlpatterns = [ path('', views.index, name='index'), ] |
これらの意味合いは簡単に書くとこんな感じ。
HTML, CSSファイルを用意
HTMLの中には、
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <title>我が家の愛犬ポチの日記</title> </head> <body> <h1>我が家の愛犬ポチの日記</h1> <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2> <p>可愛いわんちゃんがうちに来てくれました</p> <p>ポチの好きな食べ物</p> <p>ポチの嫌いな食べ物</p> <p>ポチが1才になりました</p> </body> </html> |
ファイル名を「index.html」で保存。
CSSファイルを用意
CSSファイルの中には、
1 2 3 4 5 |
// CSS body { text-align: center; } |
ファイル名を「style.css」で保存。
【Python初心者】DjangoでHTML, CSS, 画像などをブラウザで表示する方法
ここからは実際にブラウザでHTML, CSS, JavaScript, 画像などを表示してみます。
ブラウザでHTMLファイルに書かれた内容を表示する
「index.html」ファイルを「myproject/myapp/templates/index.html」に保存。
ブラウザで画像を表示する方法
今回は「inu.png」というものを使います。
「sample\myproject\myapp\static\images\」の中に画像を保存。
ファイルの読み込みが出来るように「settings.py」に追加。
まずは、
1 2 3 4 5 |
// settings.py BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) の下に、 STATIC_DIR = os.path.join(BASE_DIR,"static") を追加。 |
次に、
1 2 3 4 5 6 |
// settings.py STATIC_URL = '/static/' STATICFILES_DIRS =[ STATIC_DIR, ] |
「static」フォルダはどこに置いてもOK。
この状態で「http://127.0.0.1:8000/static/images/inu.png」にアクセスして画像が表示されていればOK。
【Python】Djangoを使ってブラウザでトップページに画像を表示する方法
ブラウザでトップページに画像を表示する場合は、
1 2 3 4 5 6 7 |
// トップページに画像を表示する場合 {% load staticfiles %} <img src="{% static "images/inu.png" %}" alt=""> この2つ |
これらを「index.html」に追加。
{% load staticfiles %}は「static」フォルダの中にあるファイルを読み込むために必要。
そうすると、最終的にこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// 画像を表示する場合のHTML部分 <!DOCTYPE html> {% load staticfiles %} <html> <head> <link rel="stylesheet" href="style.css"> <title>我が家の愛犬ポチの日記</title> </head> <body> <h1>我が家の愛犬ポチの日記</h1> <img src="{% static "images/inu.png" %}" alt=""> <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2> <p>可愛いわんちゃんがうちに来てくれました</p> <p>ポチの好きな食べ物</p> <p>ポチの嫌いな食べ物</p> <p>ポチが1才になりました</p> </body> </html> |
これで、トップページの画像が表示されるようになる。
【Python】Djangoでスタイルシート(CSS), JavaScriptのファイルを読み込む方法
まずはCSSファイルの保存先は、
「myproject\myapp\static\css\style.css」
ファイル名は「style.css」で保存。
そして、保存したファイルを読み込む場合は「HTMLファイル」の、
1 2 3 4 5 |
// CSSファイルの読み込み <link rel="stylesheet" href="style.css"> の部分を、 <script src="{% static "css/style.css" %}"></script> と置き換え。 |
そうすれば、body内の要素に中央寄せが適用される。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// HTML <!DOCTYPE html> {% load staticfiles %} <html> <head> <link rel="stylesheet" href="{% static "css/style.css" %}"/> <title>我が家の愛犬ポチの日記</title> </head> <body> <h1>我が家の愛犬ポチの日記</h1> <img src="{% static "images/inu.png" %}" alt=""> <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2> <p>可愛いわんちゃんがうちに来てくれました</p> <p>ポチの好きな食べ物</p> <p>ポチの嫌いな食べ物</p> <p>ポチが1才になりました</p> </body> </html> |
ファイルが読み込まれない場合は{% load staticfiles %}に注意。
JavaScriptを読み込む方法
「JavaScript」も「CSS」と同じようにhead内にコードを書いて読み込む。
1 2 3 |
// JavaScriptを読み込む <script src="{% static 'javascript/sample.js' %}"></script> |
ファイルの保存先は、
「myproject\myapp\static\javascript\sample.js」
リンクを貼る方法(aタグ部分) – index.html
リンクを貼る際に必要なタグは、この2つ。
1 |
{% load static %} |
1 |
{% url '{namespace}:{name}' %} |
その際には{namespace}と{name}の設定が必要。
{name}部分は「myapp\urls.py」に書く。
myapp\views.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// myapp\views.py # Create your views here. from django.shortcuts import render # render関数 def index(request): # index関数 return render(request,'index.html') # index.htmlを返す def welcome(request): # welcome関数 return render(request, 'welcome.html') # welcome.htmlを返す def like(request): # like関数 return render(request,'like.html') # like.htmlを返す def dislike(request): # dislike関数 return render(request,'dislike.html') # dislike.htmlを返す def birthday(request): # birthday関数 return render(request,'birthday.html') # birthday.htmlを返す |
myproject\urls.py
「myproject\urls.py」はそのまま変更する必要なし。
1 2 3 4 5 6 |
// myproject\urls.py urlpatterns = [ path('admin/', admin.site.urls), path('', include('myapp.urls')), # index.htmlに来た場合 ] |
myapp\urls.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// myapp\urls.py urlpatterns = [ url(r'^$', views.index, name='index'), url(r'^welcome/$', views.welcome, name='welcome'), url(r'^like/$', views.like, name='like'), url(r'^dislike/$', views.dislike, name='dislike'), url(r'^birthday/$', views.birthday, name='birthday'), ] これらの意味合いとしては、 ↓ urlpatterns = [ # index.htmlにアクセスが来た場合、views.pyのindex関数の処理をする。 url(r'^$', views.index, name='index'), # welcome.htmlにアクセスが来た場合、views.pyの中のwelcome関数の処理をする。 url(r'^welcome/$', views.welcome, name='welcome'), # like.htmlにアクセスが来た場合、views.pyの中のlike関数の処理をする。 url(r'^like/$', views.like, name='like'), # dislike.htmlにアクセスが来た場合、views.pyの中のdislike関数の処理をする。 url(r'^dislike/$', views.dislike, name='dislike'), # birthday.htmlにアクセスが来た場合、views.pyの中のbirthday関数の処理をする。 url(r'^birthday/$', views.birthday, name='birthday'), ] |
index.html
次にHTMLファイルにリンクを貼る方法で、その際には、
1 |
{% url '{namespace}:{name}' %} を使う。 |
そうすると、こんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// index.html <p><a href ="">可愛いわんちゃんがうちに来てくれました</a></p> <p><a href ="">ポチの好きな食べ物</a></p> <p><a href ="">ポチの嫌いな食べ物</a></p> <p><a href ="">ポチが1才になりました</a></p> この部分を、 <p><a href="{namespace}:{name}">可愛いわんちゃんがうちに来てくれました</a></p> <p><a href="{namespace}:{name}">ポチの好きな食べ物</a></p> <p><a href="{namespace}:{name}">ポチの嫌いな食べ物</a></p> <p><a href="{namespace}:{name}">ポチが1才になりました</a></p> このように変える。 |
今回の{namespace}部分は、
「myapp\urls.py」の「app_name=’myapp‘」この部分。
{name}部分は「myapp\urls.py」の「urlpatterns」の中に書かれた「name=’ここ‘」部分。
すると、最終的に「index.html」部分はこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// index.html <!DOCTYPE html> {% load static %} <html> <head> <link rel="stylesheet" href="{% static "css/style.css" %}"/> <title>我が家の愛犬ポチの日記</title> </head> <body> <h1>我が家の愛犬ポチの日記</h1> <img src="{% static "images/inu.png" %}" alt="表示できません"> <h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2> <p><a href="{% url 'myapp:welcome' %}">可愛いわんちゃんがうちに来てくれました</a></p> <p><a href="{% url 'myapp:like' %}">ポチの好きな食べ物</a></p> <p><a href="{% url 'myapp:dislike' %}">ポチの嫌いな食べ物</a></p> <p><a href="{% url 'myapp:birthday' %}">ポチが1才になりました</a></p> </body> </html> |
ここまで出来れば、今回のような簡単なサイトの見た目でしたら、ひと通りは作れるようになるでしょう。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
Djangoで一体何が出来るんだろう
とりあえず、まずは基本としてフォルダの構成とかを知りたいな