【Django×Eclipse】WEBアプリ開発環境の構築(2023年)

実はWEBアプリの開発も出来ちゃうんです！　たっきん(Twitter)です！

Pythonのプログラミングを始めてからもう8年近くになります。

最初はC言語やJavaが得意だったのですが、今となってはPythonが一番使いこなせる気がしてます。

Pythonといったら科学技術計算ライブラリが豊富で、今流行りのディープラーニングを使ったプログラミングでもよく使用されています。

しかし、Pythonが得意とするのはディープラーニングだけではありません。

実はこのPython、WEBアプリケーション開発も得意としているんです。

あの有名な「YouTube」や「Dropbox」も実はPythonで作られています。

僕も最近、Pythonを使ったWEBアプリ開発に興味を持ち始め、入門レベルではありますが試行錯誤しながら学習している最中です。

Pythonを使ったWEBアプリケーション開発を行っていく上で、開発を支援してくれるフレームワークの存在は欠かせません。

フレームワークにはFlaskやBottleといった感じでいくつか種類があるのですが、僕は現在「Django」を使っています。

しかもこのDjango、Eclipseでの開発にも対応しているんです！

なので今回はEclipseでDjangoを使ったWEBアプリ開発の環境構築について紹介していきたいと思います。

WEBアプリ開発環境の構築
Djangoプロジェクト作成
アプリケーションを作ってみる
アプリケーションを動かしてみる
さいごに

WEBアプリ開発環境の構築

DjangoとEclipseを使ったWEBアプリ開発環境の構築手順の説明ですが、Eclipseの開発環境が構築済みであることを前提として話を進めていきます。

Eclipseの開発環境構築がまだ済んでいない方は、以下の記事を参考にして準備しておきましょう！

Eclipse開発環境の構築が済んだら、後はDjangoをインストールするだけです。

「Anaconda Prompt」を開いて以下のコマンドでインストールしていきます。

・Django本体のインストール

$ conda install django

・Python用SQLパーサーのインストール

$ conda install sqlparse

これでインストール作業は完了です。

次はDjangoのプロジェクトを作成してサンプルアプリケーションをWEBブラウザ上で動かせるようにしてみましょう！

※この説明で使用する環境とインストールするバージョンは以下となります。

Windows 11
Eclipse 2022
django 4.1

Djangoプロジェクト作成

まずはEclipse上でDjangoプロジェクトを作成していきます。

新規プロジェクトウィザードを開いて「PyDev Django プロジェクト」を選択し、「次へ」をクリックする。

「プロジェクト名」は任意で入力しますが、ここでは例として「django_proj」とします。

プロジェクト名に“-（ハイフン）”を入れるとプロジェクトファイルが作成できないようです。
その場合は、代わりに“_（アンダースコア）”を使いましょう。

プロジェクト名を入力したら「次へ」をクリック。

そのまま「次へ」をクリック。

最後にデータベースの設定ですが、特に拘りがなければそのまま「完了」クリックします。

するとPythonパッケージとモジュールが自動で生成されます。

この時点で正常にプロジェクトが実行できるか確かめてみましょう！

プロジェクト上で右クリック　→ [実行] → [PyDev: Django] をクリックします。

その後、コンソール画面に以下のメッセージが表示されればプロジェクトが正常に実行され、WEBサーバーが起動します。

「http://127.0.0.1:8000でサーバーを起動しました。」とあるので、ブラウザを開き、URLの欄に「http://127.0.0.1:8000」と入力しましょう。

以下の画面が表示されればWEBサーバーは正常に起動しています。

アプリケーションを作ってみる

では実際にWEBアプリケーションを作成してみましょう！

今回作成するのは「Index」と「Page01」という２つのページを作成し、双方向で移動可能なリンクを持ったWEBページを作ってみたいと思います。

イメージとしてはこんな感じです！

アプリの雛形ファイル生成

まずはアプリケーションの雛形ファイルを生成していきます。

雛形ファイルの生成まではEclipseが自動で行ってくれます。

プロジェクト上で右クリック　→ [Django(J)] → [Create application (…)] をクリックします。

すると、「アプリ名」というウィザードが立ち上がるので、アプリ名を任意で入力し、「OK」ボタンをクリックします。

ここでは例として「app_samp01」としました。

※プロジェクト名と同様に”-（ハイフン）”は使用できません。

するとアプリケーション・パッケージが作成され、関連モジュールが自動で生成されます。

以降、この雛形ファイルを修正していくことになります。

HTMLファイルの作成

次はWEBページの基となるHTMLファイルを作成していきます。

作成するファイルは、Index用とPage01用の２つになります。

まずファイルの配置場所ですが、最上位のディレクトリに「templates」というフォルダを作成し、その直下にアプリ名のフォルダ（今回の例だと”app_samp01″）を作成し、その下に配置していきます。

「index.html」と「page01.html」の中身は以下のようにします。

<html>
 <head>
 <title>{{app}}ページだよ♪</title>
 </head>
 <body>
 <p>ここは、＜{{app}}＞です.</p>
 </body>
 <a href="{% url 'app_name_01:name_pg01' %}">Page01へのリンクだよ</a>
</html>

<html>
 <head>
 <title>{{app}}だよ♪</title>
 </head>
 <body>
 <p>ここは、＜{{app}}＞です.</p>
 </body>
 <a href="{% url 'app_name_01:name_idx' %}">Indexへのリンクだよ</a>
</html>

ビューの作成

次はビューを作成します。

編集するファイルは「view.py」です。

以下のコードを追加します。

from django.views.generic.base import TemplateView


class AppViewIdx(TemplateView):

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context["app"] = "Index"
        return context


class AppViewPage01(TemplateView):

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context["app"] = "Page01"
        return context

そしたら次は「urls.py」をいじって作成したビューのパスを設定していきます。

プロジェクト全体のurls.py（django_proj/urls.py）は自動生成されるのですが、アプリケーション毎のurls.py（app_samp01/urls.py）は自動生成されないので、app_samp01の直下に新規で「urls.py」ファイルを作成します。

中身は以下のようにします。

from django.urls import path
from .views import AppViewIdx, AppViewPage01

app_name = "app_name_01"

urlpatterns = [
    path(
        "ns_idx/",
        AppViewIdx.as_view(template_name="app_samp01/index.html"),
        name="name_idx",
    ),
    path(
        "ns_pg01/",
        AppViewPage01.as_view(template_name="app_samp01/page01.html"),
        name="name_pg01",
    ),
]

プロジェクトにアプリを追加

アプリを新規に作成したので、プロジェクト側にアプリ追加の設定をしていきます。

修正するファイルは「django_proj」直下の「settings.py」と「urls.py」です。

まず、「django_proj/urls.py」ですが、新規追加したアプリ側の「urls.py」（django_proj/urls.py）のパスを追記します。

from django.contrib import admin
from django.urls import path
from django.urls import include  # ☆追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('path01/', include('app_samp01.urls')),  # ☆追加
]

次は「settings.py」ですが、追加したアプリ（app_samp01）とHTMLファイルを格納するのに作成した「templates」フォルダのパスを追加していきます。

import os  # ☆追加

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app_samp01',  # ☆追加
]



TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),  # ☆追加
                 ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

修正はこれで以上になります。

今回作成したプロジェクトとアプリのソースコードは僕のGitHubのページで公開しています。

参考までにリンクを載せておきます。