Django フレームワークを使用してモバイルフレンドリーな Web アプリケーションを作成する方法 - パート 3

「この記事は Django の最新バージョン (2016 年 5 月) で改訂および更新されています」

このシリーズのパート 1 では、仮想環境に Django をインストールして構成する方法を学習し、最初のプロジェクトのスケルトンを作成しました。

次にパート 2 ではポストオブジェクトのアプリケーションとモデルを作成し、後でデータベースに移行しました。最後に、新しく作成したアプリケーションを Django 管理ユーザーインターフェイスに統合する方法を説明しました。

これらの記事は Django シリーズの一部です:

仮想環境を使用した Django Web フレームワークのインストールと構成 – パート 1

Python の基本の復習と Django を使用した最初の Web アプリケーションの作成 – パート 2

この最後のガイドでは、UI を使用してアプリケーションにアクセスする方法と、アプリケーションをあらゆる種類のデバイスでモバイル対応にする方法について説明します。ということで、始めましょう。

Django 管理インターフェイスを介したオブジェクトの作成

Post タイプのオブジェクト (このシリーズのパート 2 で定義したモデルであることを思い出してください) を作成するには、Django 管理インターフェイスを使用します。

外側の myfirstdjangoproject ディレクトリから次のコマンドを実行して、Django 組み込み Web サーバーがポート 8000 (または選択した別のポート) で実行されていることを確認します。


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

次に、Web ブラウザを開いて http://ip-address:8000/admin をポイントし、前の記事で設定した認証情報を使用してログオンし、投稿の書き込みを開始します (これも、 Post タイプのオブジェクトを作成し、関連するデータを基礎となるデータベースに挿入します)。

このプロセスを 2 回または 3 回繰り返します。

いくつかの投稿を作成したら、Web ブラウザーを使用して投稿を表示するために何をする必要があるかを見てみましょう。

私たちの当初の見解

最初のビュー (~/myfirstdjangoenv/myfirstdjangoproject/myblog/views.py) は、すべての Post オブジェクトをフィルタリングし、 whenPublished の値が含まれるオブジェクトを返します。 は、現在の日付と時刻 (whenPublished__lte=timezone.now()) 以下であり、whenPublished の降順で並べられています。これは、「」と言うのと同じです。 最新のものから」。

これらのオブジェクトは、posts という便宜的な名前の変数に保存され、次のセクションで説明するように、HTML に埋め込まれるために返されます (allposts として識別されます)。


from django.shortcuts import render
from .models import Post
from django.utils import timezone
def posts(request):
        posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')
        return render(request, 'myblog/posts.html', {'allposts': posts})

最後に、上記の whenPublished__lte の二重アンダースコアは、データベースフィールド (whenPublished) をフィルタまたは操作 (lte=未満) から区切るために使用されます。または同等）。

初期ビューを定義したら、関連するテンプレートに取り組んでみましょう。

最初のプロジェクトのテンプレートを作成する

前のセクションで指定したディレクティブとパスに従って、最初のテンプレートを myblog/templates/myblog 内に保存します。これは、templates という名前のディレクトリと myblog という名前のサブディレクトリを作成する必要があることを意味します。


cd ~/myfirstdjangoenv/myfirstdjangoproject/myblog
mkdir -p templates/myblog

テンプレートを posts.html と呼び、その中に次のコードを挿入します。 jQuery、Bootstrap、FontAwesome、Google フォントへのオンライン参照を追加していることがわかります。

さらに、HTML 内の波括弧で Python コードを囲みました。 Post タイプのすべてのオブジェクトについて、そのタイトル、発行日、作成者、そして最後にテキストが表示されることに注意してください。最後に、赤色で、myblog/views.py 経由で返されたオブジェクトへの参照を行っていることがわかります。

これが posts.html ファイルです。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'">
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
    <style>
      .title {
        font-family: 'Indie Flower', serif;
        font-size: 30px;
        color: #1E90FF;
      }
      h1 {
        font-family: 'Pacifico', serif;
        font-size: 45px;
        color: #1E90FF;
      }
    </style>
</head>
<body>
<div class="container"><h1>My blog</h1><br>
{% for post in allposts %}
    <div>
        <div class="title">{{ post.title }}</div>
        <strong>Published on {{ post.whenPublished }} by {{ post.author }}.</strong>
        <p>{{ post.text|linebreaks }}</p>
    </div>
{% endfor %}
</div>
</body>
</html>

上記のテンプレートでは、改行フィルターを使用して、プレーンテキスト内の改行を、対応する HTML 相当物 ( または

) に置き換えます。 ) を使用して、各投稿を段落区切りで適切にフォーマットします。

次に、アプリケーション内の URL と、データを返す対応するビューとの間のマッピングを設定する必要があります。これを行うには、myblog 内に次の内容を含む urls.py という名前のファイルを作成します。


from django.conf.urls import url
from . import views
urlpatterns = [
    url(r'^$', views.posts, name='posts'),
]

r'^$' についてはもう少し説明する必要があります。先頭の r は、一重引用符で囲まれた文字列を正規表現として扱うように Django に指示します。

特に、r'^$' は空の文字列を表すため、ブラウザで http://ip-address:8000 (他には何も指定しない) を指定すると、 views.py 内の変数 posts によって返されたデータ (前のセクションを参照) は、ホームページに表示されます。

最後に、ブログアプリケーションの urls.py ファイル (~/myfirstdjangoenv/myfirstdjangoproject/myblog/urls.py) を ファイルに含めます。メインプロジェクトの urls.py (~/myfirstdjangoenv/myfirstdjangoproject/myfirstdjangoproject/urls.py):


from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'', include('myblog.urls')),
]

次に、Web サーバーを起動しましょう。


cd ~/myfirstdjangoenv/myfirstdjangoproject
python manage.py runserver 0.0.0.0:8000

これで、以前に作成した投稿のリストが表示されるはずです。

ブートストラップ のおかげで、より小さなデバイスでも優れた視覚化を実現できます。

まとめ

この記事とこのシリーズ全体で取り上げた概念を確認してみましょう。

1. 各モデルはオブジェクトを定義し、データベーステーブルにマップし、そのフィールドがそのオブジェクトのプロパティにマップします。一方、テンプレートは、ビューから返されたデータが表示されるユーザーインターフェイスを定義します。

たとえば、概要という名前のフィールドを投稿オブジェクトに追加してモデルを変更するとします。ここには、各投稿のオプションの簡単な説明が保存されます。 myblog/models.py に次の行を追加しましょう。

summary = models.CharField(max_length=350, blank=True, null=True)

前の記事で学んだように、変更をデータベースに移行する必要があります。


python manage.py makemigrations myblog
python manage.py migrate myblog

次に、管理インターフェイスを使用して投稿を編集し、各投稿に簡単な概要を追加します。最後に、テンプレート (posts.html) 内の次の行を置き換えます。

<p>{{ post.text|linebreaks }}</p>

と

<p>{{ post.summary }}</p>

ホームページを更新して変更を確認します。

2. view 関数は HTTP リクエストを受け取り、HTTP レスポンスを返します。この記事では、views.py の def Posts(request) が基礎となるデータベースを呼び出して、すべての投稿を取得します。タイトルに ansible という単語が含まれるすべての投稿を取得したい場合は、置換する必要があります。

posts = Post.objects.filter(whenPublished__lte=timezone.now()).order_by('-whenPublished')

と

posts = Post.objects.filter(title__icontains="ansible").order_by('-whenPublished')

Web アプリケーションのアプリケーションロジックからユーザーインターフェイスを分離することで、Django はアプリの保守とエスカレーションのタスクを容易にします。

3. このシリーズで説明する手順に従った場合、プロジェクトの構造は次のようになります。


myfirstdjangoenv/myfirstdjangoproject
├── db.sqlite3
├── manage.py
├── myblog
│   ├── admin.py
│   ├── admin.pyc
│   ├── __init__.py
│   ├── __init__.pyc
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── 0001_initial.pyc
│   │   ├── __init__.py
│   │   └── __init__.pyc
│   ├── models.py
│   ├── models.pyc
│   ├── templates
│   │   └── myblog
│   │       └── posts.html
│   ├── tests.py
│   ├── urls.py
│   ├── urls.pyc
│   ├── views.py
│   └── views.pyc
└── myfirstdjangoproject
    ├── __init__.py
    ├── __init__.pyc
    ├── settings.py
    ├── settings.pyc
    ├── urls.py
    ├── urls.pyc
    ├── wsgi.py
    └── wsgi.pyc

上記のリストがブラウザーで正しく表示されない場合に備えて、次のコマンドの出力のスクリーンショットを次に示します。


tree myfirstdjangoenv/myfirstdjangoproject

まとめ

これらの概念はすべて最初は少し怖く思えるかもしれませんが、Django に慣れるために必要なあらゆる努力をする価値は十分にあると断言できます。

この優れた Web フレームワークを紹介するためにこのシリーズで使用した例が、さらに学習する動機になれば幸いです。その場合は、Django の公式ドキュメント (常に最新に保たれています) から始めるのが最適です。

Django には、一連の記事で十分にカバーしきれないほど多くの機能があることを保証します。そのため、自由に調べて実際に学習してみてください。

以下のフォームを使用して、ご質問やご提案をお気軽にお送りください。

Django フレームワークを使用してモバイル フレンドリーな Web アプリケーションを作成する方法 - パート 3

Django 管理インターフェイスを介したオブジェクトの作成

私たちの当初の見解

最初のプロジェクトのテンプレートを作成する

まとめ

まとめ

Django フレームワークを使用してモバイルフレンドリーな Web アプリケーションを作成する方法 - パート 3