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

たっきん(Twitter)です!

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

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

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

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

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

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

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

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

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

しかもこのDjangoEclipseでの開発にも対応しているんです!

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

Sponsored Link

WEBアプリ開発環境の構築

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

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

最近人気が増し増しのプログラミング言語Pythonですが、開発環境として何を使うかで迷う人って意外と多いんじゃないかと思います。 どれがオス...

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

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

・Django本体のインストール

$ conda install django

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

$ conda install sqlparse

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

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

Djangoプロジェクト作成

まずはEclipse上でDjangoプロジェクトを作成する必要があります。

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

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

ここで注意したいのが「プロジェクト名」に "-(ハイフン)"を入れないこと!

今現在のバージョン(ver 2.2)ではプロジェクト名に"-(ハイフン)"が入っているとプロジェクトが正常に作成されなくなります。(もしかしてらそーゆー仕様かもw)

"_(アンダースコア)"なら正常にプロジェクトが作成されました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTMLファイルの作成

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

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

まずファイルの配置場所ですが、最上位のディレクトリに「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」フォルダのパスを追加していきます。

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のページで公開しています。

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

アプリケーションを動かしてみる

では実際に作成したアプリケーションを動かしてみましょう!

プロジェクト上で右クリック → [実行] → [1 PyDev: Django] をクリックし、コンソール画面にサーバーが起動したことを告げるメッセージが表示されたらブラウザを開いて以下のURLを入力しましす。

http://127.0.0.1:8000/path01/ns_idx/

すると以下のような画面が表示されるはずです。

これが「Index」のページになります。

ページ内にあるリンク「Page01へのリンクだよ」をクリックしてみましょう。

すると「Index」⇒「Page01」のページに移動し、以下のようなページが表示されます。

ここで、またページ内にあるリンク「Indexへのリンクだよ」をクリックすると、最初のページである「Index」ページへ移動することができます。

さいごに

簡単ではありますが、WEBアプリ開発環境の構築から他ページに遷移するWEBアプリケーションの作成までの一連の流れを紹介してみました。

まだまだ僕もdjangoの初心者なので、もしかしたら間違いとかあるかもしれませんが、そのときはご指摘していただけると嬉しいです(^^)

これからもっと面白いWEBアプリケーションを作ってどんどん公開していきたいと思っていますので、長い目で見守っていただけたらなと思ってます!

それではまた。

Sponsored Link

このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。