WEBアプリケーションフレームワーク「Django」でブログを作成して開発の流れを知ろう!Ver. 1.1

DjangoでのWEB開発の流れが一通り分かるようになっています。技術チュートリアルとしてご活用ください。

===============================−==

Ver. 1.1 アップデート内容

・サポート体制の強化

・CSSの導入方法

・Adminサイトのセキュリティ対策

・細かな修正

==================================

近年、人工知能が注目されていますよね。人工知能のWEBアプリを作りたい人や「なにから勉強し始めればいいのかわからない。」という人はたくさんいると思います。

そんな時は、人工知能開発と相性の良いPythonがベースのフレームワークである「Django」を使いましょう!今回は入りとして、簡単なブログを作成していく予定ですが、今後はAIを導入したアプリケーションを作成していきたいと思います!

なぜ今、Djangoを学ぶべきなのか?は以下のnoteにまとめてありますので、御一読ください。

この技術チュートリアルを通してできるようになること

Djangoの開発環境を整えることができるようになります。
・人工知能と相性の良いPythonベースのWEBアプリケーションフレームワーク「Django」の基本と仕組みが理解できるようになります。
ローカル環境で以下の写真のような簡単なブログを作成することができます。

Bootstrapを使ったウェブデザインの基礎が学べます。

対象者

このチュートリアルの対象者は、

・Djangoを触ったことがない。

・Pythonを少し勉強した。

・Djnagoの日本語リファレンスがなくて挫折してしまった。

・今後Djangoを利用して、AIアプリを作成してみたい!

という方です。初めての方でもわかりやすく画像付きで丁寧に説明していると思います。

サポート体制

いつでも質問を受け付けています。初めての方はわからないことも多くあると思います。noteにコメントをくださるか、TwitterID「@nanakkk07」にDMでご連絡下されば1日以内に返信いたします。また、希望の場合は、Slackコミュニティに招待させていただきます。(ご購入いただいた方のみの招待となりますのでこのnoteの最後に参加方法を記述しておきます。)ただし、このDjangoチュートリアルに関しての質問だけではなくプログラミングの勉強法などの相談も承っております。

開発環境

Python3/Windows10/Spyder

最新のPython3を使用します。また、Anacondaに同梱されているSpyderを使用して、無料で開発を進めます。

それでは、DjangoでWEB開発を進めていきましょう!

Anacondaのインストール


実行をしましょう。


インストーラーを起動したらNextで次に進みましょう。


I Agreeを選択します。

今回はJust Meを選択します。

Next進みます。

Installに進みます。

チェックを外しても外さなくても構いません。Finishを押してインストールを完了しましょう。


仮想環境の作成

Djangoをインストールするための仮想環境を作成していきましょう。anacondaがインストールされていればcondaで仮想環境を作成することができます。以下のコマンドをコマンドプロンプトで実行しましょう。

conda create -n python

ここでの「python」は環境名です。これは任意につけても大丈夫です。

activate python

ここの「python」も先ほど設定した環境名でアクティベートしましょう。([y]/n)?と聞かれますのでyでEnterを押しましょう。

次は以下のコマンドでDjangoに必要なファイル群をインストールをします。

conda install django

ここでも、([y]/n)?と聞かれますのでyでEnterを押しましょう。最後に以下のコマンドを実行してインストールを終わらせましょう。

pip install django

これで、Djangoをつかう準備ができました!

プロジェクトの作成

本格的にプロジェクトを作成していきましょう。

コマンドプロンプトで以下のコマンドを実行しましょう。

django-admin startproject myblogapp

これでプロジェクトが完成しました。

myblogapp以下のファイルも確認してみましょう!

開発サーバーの起動

開発サーバーを起動してみましょう。サーバーの起動は以下のコマンドで行います。このとき、作成したディレクトリに移動しましょう。

ディレクトリに移動するときは

cd C:¥Users¥eita-¥myblogapp

のようにcdコマンドを使います。

サーバーを以下のコマンドで立ち上げて↓

python manage.py runserver

http://127.0.0.1:8000/にアクセスしてみましょう。

この画面が出たら成功です!


Spyderの起動

今回は無料で使用できるAnacondaに同梱されたSpyderを起動します。

言語とタイムゾーンを変更する

日本語に変更し、タイムゾーンを日本に設定をしていきます。

setting.pyのファイルにアクセスします。LANGUAGE_CODEとTIME_ZONEを以下のように変更します。

もう一度、サーバーを立ち上げてみましょう。言語が変化していましたか?

アプリケーションの作成

コマンドプロンプトで、アプリケーションを作る以下のコマンドを実行しましょう。

python manage.py startapp posts

そうすると以下のディレクトリができました

postsの中身を見てみると__pycache__ディレクトリ、__int__.py,admin.py,apps.py,models.py,test.py,views.pyファイルが作成されています。

また、setting.pyにアプリケーションを追加しましょう。以下の画像のように追加します。

これは、こちらのapps.pyと接続されていて読み込んでいます。


Djangoのリクエスト処理の流れ

Djangoのリクエストの流れを示します。

1.リクエストを渡します。

2.どのページを見るのかをビューに渡す

3.ビューがデータを取り出さなければならない処理があればモデルに渡す。

4.データベースからデータを取り出す。

5.テンプレートを合成する。

6.  クライアントにビューを返す。

ビューをルーティングで指定をして、返してあげるというプログラムを作っていきます。

まずは、以下の処理のみを行いましょう。(黒掛けしてある部分は今は考えない部分です。)

myblogapp/posts/views.pyを作っていきます。

まずは、HttpResponseのインポートをしましょう。

from django.http import HttpResponse

次は、Hello Worldを返す関数を追加していきます。

def index(request):
    return HttpResponse("Hello World")

myblogapp/posts/views.pyのファイルは以下のようになったでしょうか?

from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def index(request):
    return HttpResponse("Hello World")

この関数では、「index」というページを作っています。そして、return HttpResponseで”Hello World”を返してあげます。

urls.pyのindexへの関連付け

以下のコードでプログラムが間違っていないかチェックしましょう。

プロジェクト全体のurlを呼び出す、myblogapp/urls.pyと、ビューを直接呼び出すmyblogapp/posts/urls.pyの2つのファイルの設定していきます。

myblogapp/urls.py

from django.contrib import admin
from django.urls import path,include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('posts/', include('posts.urls'))
]

2行目で、ほかのファイルを使うためのinclude、urlを渡すためのpathを呼び出しています。5行目で次に設定するpost.urlsを呼び出しています。

myblogapp/posts/urls.py

from django.urls import path
from . import views
urlpatterns = [
        path('',views.index, name = 'index')
]

4行目でmyblogapp/posts/views.pyで作ったindex関数を呼び出しています。

確認ができたら、manage.pyのあるディレクトリから開発用サーバーを立ち上げましょう。

python manage.py runserver

ブラウザから、http://127.0.0.1:8000/posts/にアクセスしてみましょう。

Hello Worldが表示されましたね!これで、あなたもDjango入門クリアです!


テンプレートファイルを追加する

次は、HttpResponseから、TemplateResponseに変更してテンプレートファイルを呼び出しましょう。

ビューからテンプレートを呼び出すイメージは以下の通りになっています。

「ブラウザから、クライアントがルーティングでビューを呼び出す」→「ビューがクライアントにデータを返す」ではなく、「ブラウザから、クライアントがルーティングでビューを呼び出す」→「いったんビューがテンプレートを呼び込み、クライアントに返す」という流れを行います。

そのためにテンプレートを作成していきます。まずは、Templatesディレクトリを作成します。

次に、postsディレクトリを作成し、最後にpostsディレクトリの中に、index.htmlファイルを作成します。

myblogapp/posts/Template/posts/index.htmlを編集していきます。

まずは以下のコードによりウェブページのhtmlを作っていくことを宣言します。

<!DOCTYPE html>

次に文字化けしないように、日本語であることを宣言します。

<html lang = 'ja-jp'>

次は、ブラウザーのタイトルを入力していきます。

<head>
    <title>投稿一覧</title>
</head>

ここの部分になるところですね↓

次にボディーの部分(今後、記事になる部分)のhtmlを追加していきます。

<body>
    <h2>これは投稿一覧です</h2>
</body>
</html>

</html>を閉じています。

最終的なindex.htmlのファイルは以下の通りです。

<!DOCTYPE html>
<html lang = 'ja-jp'>
<head>
    <title>投稿一覧</title>
</head>
<body>
    <h2>これは投稿一覧です</h2>
</body>
</html>
<body>
    <h2>これは投稿一覧です</h2>
</body>
</html>

次に、index.htmlとviewsをつなげていきます。

先ほど、myblogapp/posts/views.pyに入力した

    return HttpResponse('Hello World')

を以下のコードに書き換えます。renderはビューとテンプレートをつなぐ関数です。

今回はpostsの中のindex.htmlなので'posts/index.html'と書きます。

    return render(request, 'posts/index.html',)

書き換えることができたら、もう一度サーバーを立ち上げてhttp://127.0.0.1:8000/posts/にアクセスしてみましょう。


モデルを定義してマイグレートしよう!

今回の操作は少し複雑なので分からない事があれば気軽にメッセージをください。

これからやるのは、以下の図で3と4の操作です。

データベースという別のソフトに格納しておきます。今回のデータベースはSQlite3を使います。(本来はデータ容量が大きいオラクルのデータベース、MySQL、PostgreSQLを使います。)

それでは、posts/models.pyを編集していきます。

class(データと命令をセットで扱う変数のテンプレート)を定義して、各種のデータをCRUDしていきます。

class Post(models.Model):
    title = models.CharField(max_length=100)
    published = models.DateTimeField()
    image = models.ImageField(upload_to='media/')
    body = models.TextField()

ブログの記事のタイトルを格納するため「title = models.CharField()」と記述、100文字までということを表す「max_length=100」を引数に取ります。

published = models.DateTimeField()で、記事が投稿された日です。

image = models.ImageField(upload_to='media/')で、データを保存するための今回のファイルは「media/」です。

body = models.TextField()で、長めの文章を保存できるように定義します。

ちなみに、先ほど出した用語の「CRUD」はデーターベースに対しての操作を表します。

Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)の頭文字をとったものです。

Create(生成)/新しい情報をデータベースに登録すること
Read(読み取り)/データベースに登録されている情報を読み取ること。様々な条件を指定してその条件に合う情報を一括して読み取ることもできる。
Update(更新)/データベースに登録されている情報を更新すること。
様々な条件を指定してその条件に合う情報を一括して更新することもできる。
Delete(削除)/データベースに登録されている情報を削除すること。
様々な条件を指定して、その条件に合う情報を一括して削除することができる。

また、データベースの中身を表す語として以下のようなものがあります。

テーブル/データが格納されている表のこと。
カラム/テーブルの列のこと。
レコード/”テーブル”と”カラム”が、データが保管される場所のことを表していた語に対して、”レコード”はデータそのもののことを指す。
フィールド/レコードを構成する1つ1つの要素のこと。Excelでいう”セル”に相当する。

マイグレーションの前にコマンドプロンプトで以下のコマンドを実行しましょう。Pillowは、Pythonで画像を扱うためのパッケージです。これをインストールしておかないとエラーが出ます。

pip install Pillow

次にモデルのファイルをもとにして、マイグレーション(データベースにテーブルを作成)しましょう。

python manage.py makemigrations

そうすると、新しいモデルがあることを認知して、ファイルを自動的に作成します。

以下の場所にファイルが作られます。

posts\migrations\0001_initial.py

ここにファイルがあるか確認してみましょう!5つのフィールドがありましたか?


テーブルの名前はname=Postで、その中にはid、title(タイトル),published(日付)、image(画像)、body(本文)が入っているという意味です。

この設定ファイルをDjangoのマイグレートすると、バックエンドのデータベースと通信をして、テーブルを作ったり、テーブルの中にフィールドを作成したりしてくれます。

コマンドプロンプトで以下のコマンドを実行しデータベースの作成・更新ををしてみましょう。

python manage.py migrate

DjangoにはSQLite3が搭載されているので、ここにアクセスしてみましょう。コマンドプロンプトで以下のコマンドを実行してみます。

sqlite3 db.sqlite3

次は、SQLite3のテーブルの中身を見てみましょう。

.tables

adminから記事を投稿する

この続きをみるには

この続き:13,821文字/画像35枚

WEBアプリケーションフレームワーク「Django」でブログを作成して開発の流れを知ろう!Ver. 1.1

中西瑛太

1,500円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

48

中西瑛太

プログラミングをはじめよう【byくるみnote】

初心者のくるみが初心者向けにプログラミングについて解説しています。プログラミング初心者に有益な記事もまとめています。いい記事があれば教えてくださいm(_ _)m
2つのマガジンに含まれています

コメント9件

ありがとうございます。例えばposts/models.pyの中身を編集した後にマイグレーションを行った場合、新しいマイグレーションファイルは作られるのでしょうか。
編集した場合はマイグレーションの実行ではなくマイグレートして更新する作業が必要になります。
python manage.py migrate
を実行していただけるとデータベースが更新されます。
遊びでdjangoを使っています。この記事は非常に参考になりました。
画像の表示のところで質問があります。

今回はadminから画像を保存していましたが、例えばformなどを作成して、そのformにPOSTされた画像を保存するときはどのようなviewsになりますか?
ここだけがうまくいかず、悩んでいます。
画像はimagefieldsです。どのような情報があればご回答いただけますか?それともこちらではその質問は受け付けていませんか?
ご購入ありがとうございます。その内容ですと、私が学習したものの中からですが、udemyの以下のコンテンツのセクション28が良いかと思います。ご参考になれば幸いです。https://www.udemy.com/share/1006oWBUYTdllRQnQ=/
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。