Djangoウェブ開発のためのビューの作成方法

2年 ago
綾乃, 一希
4 minutes

イントロダクション

弊社のDjango開発シリーズに従っている場合、Djangoアプリケーションを作成し、管理者権限を持ったユーザーがDjangoの管理UIダッシュボードを介してコメントや投稿を追加できるようにしました。また、MySQLとDjangoのオブジェクト関係マッピングソリューションモデルを利用してデータ永続性も設定しました。

このチュートリアルでは、Djangoのビューを作成し、ウェブアプリケーションがウェブリクエストを適切に処理し、必要なウェブレスポンスを返せるようにします。Djangoのドキュメントで定義されているように、ウェブレスポンスはウェブページのHTMLコンテンツ、リダイレクト、またはHTTPエラー（例：404）のいずれかです。ビュー関数のコードは原則として、Pythonパスのどこにでも存在することができます。ただし、これらのビュー関数が存在するファイルの命名や配置には一般的な慣例があり、私たちはこれらの慣例に従います。

このチュートリアルの手順を完了すると、Djangoのブログサイトは最新の投稿を「your-IP-or-domain/post」URLに取り込むことができます。

前提条件

このチュートリアルは、Django開発シリーズの一部であり、そのシリーズの継続です。

このシリーズについて追いかけていない場合は、以下の仮定を行っています。

  • You have Django version 4 or higher installed.
  • You have connected your Django app to a database. We are using MySQL, and you can achieve this connection by following part two of the Django series, “How To Create a Django App and Connect it to a Database.”
  • You are working with a Unix-based operating system, preferably an Ubuntu 22.04 cloud server as this is the system we have tested on. If you would like to set up Django on a similar environment, please refer to our tutorial, “How To Install Django and Set Up a Development Environment on Ubuntu 22.04.
  • You have set up your Django Admin Interface. You can accomplish this by following our Django Admin tutorial.

これは主にDjango Viewsに関するガイドですので、少し異なる設定をしている場合でも、おそらく続けて読むことができるかもしれません。

ステップ1- ビュー関数を作成する

ターミナル内で、まず関連するディレクトリに移動し、Pythonの仮想環境をアクティベートする必要があります。このシリーズに従ってきた場合は、以下のコマンドを入力できます。アプリを開発する際には、常にPythonのプログラミング環境を使用することが重要です。これにより、コードが制限され、適切な設定で作業できます。

  1. cd ~/my_blog_app
  2. . env/bin/activate

 

仮想環境がアクティブになったので、Pythonファイルを開いて最初のビュー関数を作成するために、ブログサイトのディレクトリに移動しましょう。

  1. cd ~/my_blog_app/blog/blogsite

 

nanoまたは選んだテキストエディタを使用して、編集用にviews.pyファイルを開いてください。

  1. nano views.py

 

ファイルを開くと、このようなコードが入力されるべきです。

私のブログアプリのビューコードは、/my_blog_app/blog/blogsite/views.pyです。
from django.shortcuts import render

# Create your views here.

私たちは、django.shortcutsライブラリからrender()関数をインポートするインポート文を保持します。render()関数によって、テンプレートとコンテキストを組み合わせて適切なHttpResponseオブジェクトを返すことができます。これを覚えておいてください、なぜなら私たちが書くすべてのビューについて、インスタンス化、ポピュレート、そしてHttpResponseの返却に責任を持つ必要があるからです。

次に、最初のビューを追加します。これはインデックスページでユーザーを歓迎するものです。DjangoのhttpライブラリからHttpResponse()関数をインポートします。この関数を使用して、ウェブページがリクエストされたときに表示されるテキストを渡します。

~/my_blog_app/blog/blogsite/views.pyを日本語で自然に言い換えてください、1つのオプションで結構です：
~/my_blog_app/blog/blogsite/views.py
from django.shortcuts import render
from django.http import HttpResponse


def index(request):
    return HttpResponse('Hello, welcome to the index page.')

その後、チュートリアルで後ほど作成する個々の投稿を表示する機能を追加します。

「~/my_blog_app/blog/blogsite/views.py」を日本語で自然に言い換えてください。1つのオプションで大丈夫です：
「~/my_blog_app/blog/blogsite/views.py」を日本語に翻訳してください。
...
def individual_post(request):
    return HttpResponse('Hi, this is where an individual post will be.')

私たちの最終的なviews.pyファイルは以下のようになります。

次のコードは、~/my_blog_app/blog/blogsite/views.pyにあります。
from django.http import HttpResponse
from django.shortcuts import render


def index(request):
    return HttpResponse('Hello, welcome to the index page.')

def individual_post(request):
    return HttpResponse('Hi, this is where an individual post will be.')

ファイルの編集が完了したら、保存して終了することを忘れないでください。nanoでは、CTRLキーとXキー、そしてYキー、最後にENTERキーを押します。

現在、これらの機能が指している指定されたURLはありませんので、URLの設定ファイル内のurlpatternsブロックにそれを追加する必要があります。ビューが追加されたら、この設定ファイルを使用してURLをそれらにマッピングし、作成したページを表示できるようにしましょう。

ステップ2 — URLをビューにマッピングします。

Djangoを使用すると、アプリケーションで使用する独自のURLを設計することができます。これは、URLconfまたは「URL設定」ファイルとして一般的に言及されるファイルを使用して、純粋なPythonで行われます。

ウェブページを表示するためには、まずDjangoが使用するルートのURLconfモジュールを特定し、その後、すべてのURLパターンを含むリストデータ構造”urlpatterns”を検索します。DjangoはそれぞれのURLパターンを順番に処理し、最初に一致するものを探します。一致するパターンが見つかると、Djangoはそれに関連するビューを見つけ、そのビュー関数にURLパターンに関するデータとHttpRequestオブジェクトを渡します。このプロセス中にどこかでエラーが発生した場合、代わりにエラーハンドリングビューが表示されます。

このセクションでは、アプリの2つの異なるディレクトリにある2つの異なるurls.pyファイルで作業を行います。

~/my_blog_app/blog/blogsiteディレクトリにいる間、編集用にurls.pyファイル（URLconfファイルとも呼ばれます）を開きます。ここではnanoを使用してファイルを編集します。

  1. nano urls.py

 

下記のファイルと同じになるように、ファイルを変更してください。urlpatternsリストを含めてください。

~/my_blog_app/blog/blogsite/urls.pyを日本語で表現すると以下のようになります：
~/my_blog_app/blog/blogsite/urls.py
from django.urls import path
from . import views


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

上記の行を追加し終わったら、ファイルを保存して閉じてください。

ブログサイトのディレクトリのURLconfファイルを更新したら、それをブログディレクトリのURLconfに含める必要があります。そうしないと認識されません。これは、設定ファイルでROOT_URLCONFとして設定されているためです。つまり、DjangoはurlpatternsのためにブログディレクトリのURLconfを参照しています。

私たちのブログサイトのURLconfをブログのURLconfに含めるには、そのディレクトリに移動する必要があります。

  1. cd ~/my_blog_app/blog/blog

 

一度そこに着いたら、お好きなテキストエディターでnanoや他のURLconfファイルを開くことができます。
(イチド ソコ ニ ツイタラ、オスキナ テキストエディター デ ナノ ヤ ほか ノ URLconf ファイル ヲ ヒラク コト ガ デキマス。)

  1. nano urls.py

 

このファイルには、私たちがさっき作業した /blogsite/urls.py ファイルを含めるために、以下の行を追加します。このファイルは2行目で示されています。

私のブログのアプリケーションの「urls.py」ファイルは、「~/my_blog_app/blog/blog/urls.py」です。
from django.contrib import admin
from django.urls import include, path


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

ファイルを保存して閉じてください。

では、作成したURLに移動して追加したテキストが表示されるか、ウェブブラウザを開いて確認しましょう。Djangoアプリを提供するmanage.pyファイルにアクセスするために、親ディレクトリに移動する必要があります。

  1. cd ..

 

以下のコマンドを実行してください。下記のIPアドレスを0.0.0.0で置き換えることができます。

  1. python manage.py runserver 0.0.0.0:8000

 

Webブラウザ上で、IPアドレスとポート番号8000にアクセスしてください。

your-server-ip:8000

以下のようなウェブページを受け取ります。

Django Initial Index Page

次に、以下のURLにアクセスしてください。

your-server-ip:8000/post/

ここから、次のウェブページが表示されるべきです。

Django Initial Post Page

私たちは今、2つのurls.pyファイルが機能していることを確認し、データが私たちの予想通りに表示されることがわかりました。これが機能しているので、ブログに実データを追加しましょう。

ステップ3 — ブログ投稿を作成する

URLパターンとビューの基本原理が理解できたことから、Pythonファイルにハードコーディングされたテキストではなく、ブログ投稿をウェブページに表示させるようにしましょう。

以前に設定した管理ページを通じて、投稿を作成します。Djangoアプリをサーバーで提供している場合は、Webブラウザを使用してブログサイトの管理ページに移動してください。

your-server-ip:8000/admin/blogsite/

インターフェース上で、投稿の行にある+ 追加リンクをクリックして、データベースに例のブログ投稿を追加し始めてください。

Django Blogsite Admin Page

リンクをクリックすると、以下のような入力フォームが表示されます。

Django Add Post Form

いつでも投稿を追加したい場合は、このページに移動して行ってください。また、変更リンクで投稿を編集することもできます。

フォームでは、以下のフィールドを編集することができます。

Field Content
Title Add your desired blog post title here, for example My First Blog Post.
Slug This refers to the part of a URL which identifies a valid web address element with human-readable keywords. This is generally derived from the title of the page, so in this case we can use my-first-blog-post.
Content This is the body of your blog post. We will just be adding Hello, World! for example purposes, but this is where you can be verbose.
Author In this field, add your relevant name or username. We will use Sammy.

テストの目的に合わせて、ブログ投稿フォームを適当に記入してください。

Django Filled Out Blog Post Form

ページにサンプルデータを追加したら、保存ボタンをクリックしてください。以下の確認ページが表示されます。

Django Post Submission Successful

おめでとうございます！初めてのブログ投稿が完成しましたね！

次に、私たちが管理者インターフェースに入力したデータを含むMySQLデータベースに行が追加されているかを確認しましょう。

ステップ4 — データベースデータの表示

この時点では、MySQLに移動する必要があるので、現在のサーバープロセスをターミナルでCTRL + Cを入力して停止し、MySQLのインタプリタを開きます。私たちのDjangoアプリケーションのデータベースのユーザーはdjangouserですが、プロジェクトに適切なユーザーを使用してください。

  1. mysql -u djangouser

 

MySQLプロンプトに入ったら、blog_dataデータベース（またはプロジェクトに適切なデータベース）に移動してください。

  1. use blog_data;

 

ブログサイトの投稿テーブルの内容を表示してください。

  1. select * from blogsite_post;

 

次に示すような出力を受け取ります。これには、管理ユーザーインターフェースに追加した情報が表示されるはずです。

Output

+—-+——————–+——————–+—————+—————————-+——–+ | id | title | slug | content | created_on | author | +—-+——————–+——————–+—————+—————————-+——–+ | 1 | My First Blog Post | my-first-blog-post | Hello, World! | 2020-05-14 00:30:03.186564 | Sammy | +—-+——————–+——————–+—————+—————————-+——–+ 1 row in set (0.00 sec)

出力に示されている通り、追加した投稿のデータがある行があります。今度はこのデータを投稿のビュー関数で参照しましょう。MySQLインタプリタを終了するには、CTRL + Dを使用してください。

ブログサイトアプリ内のviews.pyファイルの場所に移動してください。

  1. cd ~/my_blog_app/blog/blogsite

 

新しいデータを含めるために、ファイルを開いてください。

  1. nano views.py

 

以下のファイルと同じ内容にファイルを編集してください。

私のブログアプリ/ブログサイトのフォルダです。
from django.shortcuts import render
from django.http import HttpResponse
from .models import Post


def index(request):
    return HttpResponse('Hello, welcome to the index page.')

def individual_post(request):
    recent_post = Post.objects.get(id__exact=1)
    return HttpResponse(recent_post.title + ': ' + recent_post.content)

以上のコードでは、Postの追加のimport文を追加しました。また、HttpResponseから引用符の文字列を削除し、ブログ投稿のデータに置き換えました。特定のオブジェクトのデータを参照するために、表示したいオブジェクトに関連付けられたブログ投稿のIDを使用し、そのIDをrecent_postという変数に格納しています。それにより、そのオブジェクトの特定のフィールドを取得することができます。

ファイルを保存して閉じたら、Djangoアプリを実行するためにmanage.pyファイルの場所へ移動してください。

  1. cd ~/my_blog_app/blog
  2. python manage.py runserver 0.0.0.0:8000

 

webブラウザで、以下のアドレスに移動してください。

your-server-ip:8000/post/

ここでは、私たちが行った変更を確認することができます。このページはこのようになり、投稿に追加したテキストが表示されます。

Django Served Blog Post

「ページの検査が終わったら、プロセスを停止させるためにターミナルでCTRL + C を押してください。」

プログラミング環境を無効にするには、「deactivate」とコマンドを入力してからサーバーを終了します。

結論 (けつろん。)

このチュートリアルでは、ビューを作成し、URLパターンをマッピングし、ブログ記事のデータベースからウェブページにテキストを表示しました。

次のチュートリアルでは、実際にHTMLを使用してDjangoテンプレートを作成することで、これをより美しくする方法を説明します。これまでのシリーズでは、DjangoモデルとDjangoビューについて説明してきました。テンプレートは、Djangoアプリケーションの基盤として最も重要な最後の部分です。

コメントを残す 0

Your email address will not be published. Required fields are marked *