【Python初心者】Djangoで簡単なサイトを作ってみる【練習・勉強】

2019.04.07 / 更新日：2019.06.10

困ってる人

Djangoで一体何が出来るんだろう

とりあえず、まずは基本としてフォルダの構成とかを知りたいな

こんにちは、よろと申します。

今回は「Python」のフレームワークでもある「Django」の基本を学ぶために簡単なホームページを作ってみます。

という事で、今回作るのはこれ。

今回の内容が理解出来るようになると、

ブラウザでHTMLを表示する方法

CSSとJavaScriptの読み込み方

画像の貼り付け方

リンク(aタグ)の貼り付け方

これらが分かるようになるはず。

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」の３つのフォルダを作成する。

「python manage.py migrate」

「python manage.py runserver」で、サーバーを動かす。

「settings.py」のINSTALLED_APPSの項目内に内容を追加する

「myproject/settings.py」の「INSTALLED_APPS」の項目内に、

'myapp' を追加。

1	'myapp' を追加。

必要であれば、言語、タイムゾーン部分も変更。

// 言語・タイムゾーン部分の変更

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

// 言語・タイムゾーン部分の変更

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

myapp/views.py

// myapp/views.py

# Create your views here.
from django.shortcuts import render

def index(request):
    return render(request,'index.html')

// myapp/views.py

# Create your views here.

from django.shortcuts import render

def index(request):

return render(request,'index.html')

myproject/urls.py

// myproject/urls.py

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

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

// 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

// myapp/urls.py

from django.urls import path
from . import views

app_name='myapp'

urlpatterns = [
    path('', views.index, name='index'),
]

// myapp/urls.py

from django.urls import path

from . import views

app_name='myapp'

urlpatterns = [

path('', views.index, name='index'),

]

これらの意味合いは簡単に書くとこんな感じ。

HTML, CSSファイルを用意

HTMLの中には、

// 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>ポチが１才になりました</p>
    </body>

</html>

// HTML

<!DOCTYPE html>

<html>

<head>

<title>我が家の愛犬ポチの日記</title>

</head>

<body>

<h1>我が家の愛犬ポチの日記</h1>

<h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>

<p>可愛いわんちゃんがうちに来てくれました</p>

<p>ポチの好きな食べ物</p>

<p>ポチの嫌いな食べ物</p>

<p>ポチが１才になりました</p>

</body>

</html>

ファイル名を「index.html」で保存。

CSSファイルを用意

CSSファイルの中には、

// CSS

body {
	text-align: center;
}

// 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」に追加。

まずは、

// settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) の下に、

STATIC_DIR = os.path.join(BASE_DIR,"static") を追加。

// settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) の下に、

STATIC_DIR = os.path.join(BASE_DIR,"static") を追加。

次に、

// settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS =[
    STATIC_DIR,
]

// settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS =[

STATIC_DIR,

]

「static」フォルダはどこに置いてもOK。

この状態で「http://127.0.0.1:8000/static/images/inu.png」にアクセスして画像が表示されていればOK。

【Python】Djangoを使ってブラウザでトップページに画像を表示する方法

ブラウザでトップページに画像を表示する場合は、

// トップページに画像を表示する場合

{% load staticfiles %}

<img src="{% static "images/inu.png" %}" alt="">

この２つ

// トップページに画像を表示する場合

{% load staticfiles %}

この２つ

これらを「index.html」に追加。

{% load staticfiles %}は「static」フォルダの中にあるファイルを読み込むために必要。

そうすると、最終的にこんな感じ。

// 画像を表示する場合の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>ポチが１才になりました</p>
    </body>

</html>

// 画像を表示する場合のHTML部分

<!DOCTYPE html>

{% load staticfiles %}

<html>

<head>

<title>我が家の愛犬ポチの日記</title>

</head>

<body>

<h1>我が家の愛犬ポチの日記</h1>

<h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>

<p>可愛いわんちゃんがうちに来てくれました</p>

<p>ポチの好きな食べ物</p>

<p>ポチの嫌いな食べ物</p>

<p>ポチが１才になりました</p>

</body>

</html>

これで、トップページの画像が表示されるようになる。

【Python】Djangoでスタイルシート(CSS), JavaScriptのファイルを読み込む方法

まずはCSSファイルの保存先は、

「myproject\myapp\static\css\style.css」

ファイル名は「style.css」で保存。

そして、保存したファイルを読み込む場合は「HTMLファイル」の、

// CSSファイルの読み込み

<link rel="stylesheet" href="style.css"> の部分を、

<script src="{% static "css/style.css" %}"></script> と置き換え。

// CSSファイルの読み込み

そうすれば、body内の要素に中央寄せが適用される。

// 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>ポチが１才になりました</p>
    </body>
 
</html>

// HTML

<!DOCTYPE html>

{% load staticfiles %}

<html>

<head>

<title>我が家の愛犬ポチの日記</title>

</head>

<body>

<h1>我が家の愛犬ポチの日記</h1>

<h2>うちの可愛い愛犬ポチを紹介するホームページです。</h2>

<p>可愛いわんちゃんがうちに来てくれました</p>

<p>ポチの好きな食べ物</p>

<p>ポチの嫌いな食べ物</p>

<p>ポチが１才になりました</p>

</body>

</html>

ファイルが読み込まれない場合は{% load staticfiles %}に注意。

JavaScriptを読み込む方法

「JavaScript」も「CSS」と同じようにhead内にコードを書いて読み込む。

// JavaScriptを読み込む

<script src="{% static 'javascript/sample.js' %}"></script>

// JavaScriptを読み込む

ファイルの保存先は、

「myproject\myapp\static\javascript\sample.js」

リンクを貼る方法(aタグ部分) – index.html

リンクを貼る際に必要なタグは、この２つ。

{% load static %}

1	{% load static %}

{% url '{namespace}:{name}' %}

1	{% url '{namespace}:{name}' %}

その際には{namespace}と{name}の設定が必要。

{name}部分は「myapp\urls.py」に書く。

myapp\views.py

// 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を返す

// 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」はそのまま変更する必要なし。

// myproject\urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')), # index.htmlに来た場合
]

// myproject\urls.py

urlpatterns = [

path('admin/', admin.site.urls),

path('', include('myapp.urls')), # index.htmlに来た場合

]

myapp\urls.py

// 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'),
]

// 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ファイルにリンクを貼る方法で、その際には、

{% url '{namespace}:{name}' %} を使う。

1	{% url '{namespace}:{name}' %} を使う。

そうすると、こんな感じ。

// index.html

<p><a href ="">可愛いわんちゃんがうちに来てくれました</a></p>
<p><a href ="">ポチの好きな食べ物</a></p>
<p><a href ="">ポチの嫌いな食べ物</a></p>
<p><a href ="">ポチが１才になりました</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}">ポチが１才になりました</a></p>

このように変える。

// index.html

<p><a href ="">可愛いわんちゃんがうちに来てくれました</a></p>

<p><a href ="">ポチの好きな食べ物</a></p>

<p><a href ="">ポチの嫌いな食べ物</a></p>

<p><a href ="">ポチが１才になりました</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}">ポチが１才になりました</a></p>

このように変える。

今回の{namespace}部分は、

「myapp\urls.py」の「app_name=’myapp‘」この部分。

{name}部分は「myapp\urls.py」の「urlpatterns」の中に書かれた「name=’ここ‘」部分。

すると、最終的に「index.html」部分はこんな感じ。

// 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' %}">ポチが１才になりました</a></p>

    </body>

</html>

// index.html

<!DOCTYPE html>

{% load static %}

<html>

<head>

<title>我が家の愛犬ポチの日記</title>

</head>

<body>

<h1>我が家の愛犬ポチの日記</h1>

<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' %}">ポチが１才になりました</a></p>

</body>

</html>

ここまで出来れば、今回のような簡単なサイトの見た目でしたら、ひと通りは作れるようになるでしょう。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール