Django で Markdown を扱うには？
Django で Markdown を扱うには？
2021年4月27日
Django で Markdown を扱うには？
これまで、Django の基本的な使い方を紹介してきました。 この記事では少し実用的な実装を紹介します。GitHub などで利用されている Markdown で書かれたファイルを Django で作られているページに表示させる簡単な方法です。
まずは Django のプロジェクトの作成と初期設定
最初に、Django の基本を復習しながら、Django のプロジェクトの作成と初期設定を行います。
手順は以下の通りです
- 仮想環境の作成
- Django のインストール
- Django プロジェクトの作成
- Django アプリの作成
- テンプレートの作成
- ファイルのアップロードフォームの作成
- Markdown を表示するビューの作成
この流れで作成します。以前の投稿と重複するところもありますが、一応初めから説明します。少し量が多いので何回かに分けて紹介します。
最初に、Django の基本を復習しながら、Django のプロジェクトの作成と初期設定を行います。
手順は以下の通りです
- 仮想環境の作成
- Django のインストール
- Django プロジェクトの作成
- Django アプリの作成
- テンプレートの作成
- ファイルのアップロードフォームの作成
- Markdown を表示するビューの作成
この流れで作成します。以前の投稿と重複するところもありますが、一応初めから説明します。少し量が多いので何回かに分けて紹介します。
仮想環境の作成
以前紹介した通り、Python のパッケージを普通にインストールするとシステム全体にインストールされてしまいます。全てのプロジェクトで同じモジュールを使う場合は良いのですが、プロジェクトによって利用するパッケージが変わるので、この方法はちょっと不便です。 そこで、仮想環境を利用してプロジェクト毎に環境設定を分ける方法が利用されています。この例でも、仮想環境を利用して Django のプロジェクトを作成する事にします。
仮想環境は幾つかありますが、今回は「virtualenv」を利用します。 Windows をご利用の方は、以前に紹介した「venv」の方が利用しやすいかと思います。
仮想環境のパッケージのインストールをします。
$ pip3 install virtualenv
プロジェクトのフォルダを作成して仮想環境を作成します。
$ mkdir markdown
$ cd markdown
$ python3 -m virtualenv env
これで仮想環境「env」が作成されたので、この設定を有効にします。
$ source env/bin/activate
で有効にできます。
以前紹介した通り、Python のパッケージを普通にインストールするとシステム全体にインストールされてしまいます。全てのプロジェクトで同じモジュールを使う場合は良いのですが、プロジェクトによって利用するパッケージが変わるので、この方法はちょっと不便です。 そこで、仮想環境を利用してプロジェクト毎に環境設定を分ける方法が利用されています。この例でも、仮想環境を利用して Django のプロジェクトを作成する事にします。
仮想環境は幾つかありますが、今回は「virtualenv」を利用します。 Windows をご利用の方は、以前に紹介した「venv」の方が利用しやすいかと思います。
仮想環境のパッケージのインストールをします。
$ pip3 install virtualenv
プロジェクトのフォルダを作成して仮想環境を作成します。
$ mkdir markdown
$ cd markdown
$ python3 -m virtualenv env
これで仮想環境「env」が作成されたので、この設定を有効にします。
$ source env/bin/activate
で有効にできます。
Django のインストールとプロジェクト・アプリの作成
まず最初に Django をインストールします。仮想環境を有効にした状態で
$ pip3 install django
続いて、Django のプロジェクトを作成します。
$ django-admin startproject markdown
これで Django のプロジェクトが作成されて、先ほど作成したプロジェクトフォルダの下に「makrdown」という Django のプロジェクトフォルダが作成されます。最初に作成したフォルダも「markdown」なので紛らわしいですが、一番先しょのフォルダから見るとフォルダの構造は「markdown/markdown」のようになっています。
Django のアプリを作成します
$ cd markdown
$ python3 manage.py startapp app
これで、Django アプリの作成まで完了です。
$ pyton3 manage.py startserver
を実行して、「127.0.0.1:8000」にアクセスすると Django プロジェクトのテンプレートのページが表示されますので確認してください。
まず最初に Django をインストールします。仮想環境を有効にした状態で
$ pip3 install django
続いて、Django のプロジェクトを作成します。
$ django-admin startproject markdown
これで Django のプロジェクトが作成されて、先ほど作成したプロジェクトフォルダの下に「makrdown」という Django のプロジェクトフォルダが作成されます。最初に作成したフォルダも「markdown」なので紛らわしいですが、一番先しょのフォルダから見るとフォルダの構造は「markdown/markdown」のようになっています。
Django のアプリを作成します
$ cd markdown
$ python3 manage.py startapp app
これで、Django アプリの作成まで完了です。
$ pyton3 manage.py startserver
を実行して、「127.0.0.1:8000」にアクセスすると Django プロジェクトのテンプレートのページが表示されますので確認してください。
アプリの登録とテンプレートの作成
ここから実際に Django のアプリを作るわけですが、いろいろ設定が必要です。
- アプリの登録
- テンプレートのフォルダの設定
- URL マッピングの設定
ここから実際に Django のアプリを作るわけですが、いろいろ設定が必要です。
- アプリの登録
- テンプレートのフォルダの設定
- URL マッピングの設定
アプロの登録とテンプレートのフォルダの設定
これは、Django のプロジェクトのフォルダ「markdown」の下にある「settings.py」を変更します。
from pathlib import path
import os
...
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app'
]
....
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',
],
},
},
]
...
ポイントは、「INSTALLED_APPS」の最後に作成したアプリの「apps」を追加する事と、「TEMPLATES」の「DIRS」にテンプレートのフォルダを指定します。 ここで指定しているテンプレートのフォルダは「templates」なので Django のプロジェクトフォルダの下に「templates」のフォルダを指定します。
なお、フォルダの指定の際に「os」を利用しているので、モジュール「os」をインポートしておきます。（「import os」）
これは、Django のプロジェクトのフォルダ「markdown」の下にある「settings.py」を変更します。
from pathlib import path
import os
...
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app'
]
....
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',
],
},
},
]
...
ポイントは、「INSTALLED_APPS」の最後に作成したアプリの「apps」を追加する事と、「TEMPLATES」の「DIRS」にテンプレートのフォルダを指定します。 ここで指定しているテンプレートのフォルダは「templates」なので Django のプロジェクトフォルダの下に「templates」のフォルダを指定します。
なお、フォルダの指定の際に「os」を利用しているので、モジュール「os」をインポートしておきます。（「import os」）
URL マッピングの設定
まずは、Django のプロジェクトフォルダにある、「urls.py」を変更して、アプリのフォルダの「urls.py」を参照するようにします。
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('', include('app.urls')),
path('admin/', admin.site.urls),
]
Django のアプリのフォルダには、「urls.py」がないので作成します。
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name="index"),
]
まずは、Django のプロジェクトフォルダにある、「urls.py」を変更して、アプリのフォルダの「urls.py」を参照するようにします。
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('', include('app.urls')),
path('admin/', admin.site.urls),
]
Django のアプリのフォルダには、「urls.py」がないので作成します。
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name="index"),
]
view の作成
URL のマッピングをした際に、「views.index」を指定していますが、このビューは存在しないので作成します。
アプリのフォルダの「views.py」に追記します。
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'basic.html')
これでビューの設定は終わりですが、ここで参照している「basic.html」がテンプレートと呼ばれる HTML の雛形です。これは、先ほど指定した、テンプレートのフォルダに保存します。最初のフォルダからのパスは「markdown/markdown/templates」になります。 このフォルダに、「basic.html」を作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home Page</title>
</head>
<body>
<div>
<h1>Hello World!</h1>
<div class="footer">
<footer>Copyright(c) 2021 by Silicon Valley Super Ware, all rights reserved.</footer>
</div>
</body>
</html>
今回はとりあえず、「Hello World!」を表示するだけにしてあります。 加えてコピーライトを表示するようにしています。
以上で、開発用のサーバーを先程と同様に起動して、「127.0.0.1:8000」にアクセスするとこのテンプレートのページが表示されるようになります。
URL のマッピングをした際に、「views.index」を指定していますが、このビューは存在しないので作成します。
アプリのフォルダの「views.py」に追記します。
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'basic.html')
これでビューの設定は終わりですが、ここで参照している「basic.html」がテンプレートと呼ばれる HTML の雛形です。これは、先ほど指定した、テンプレートのフォルダに保存します。最初のフォルダからのパスは「markdown/markdown/templates」になります。 このフォルダに、「basic.html」を作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home Page</title>
</head>
<body>
<div>
<h1>Hello World!</h1>
<div class="footer">
<footer>Copyright(c) 2021 by Silicon Valley Super Ware, all rights reserved.</footer>
</div>
</body>
</html>
今回はとりあえず、「Hello World!」を表示するだけにしてあります。 加えてコピーライトを表示するようにしています。
以上で、開発用のサーバーを先程と同様に起動して、「127.0.0.1:8000」にアクセスするとこのテンプレートのページが表示されるようになります。
次のステップは？
今回の目的は、Markdown で書かれた原稿をアップロードしてそれを表示するというサイトを作成する事です。
とりあえず、ページを表示する所まではできたので、次回はファイルをアップロードするフォームを作成して Markdown のファイルをサーバーにアップロードする部分を作ります。
具体的には、
- アップロードのフォームのテンプレートの作成
- 選択したファイルをアップロードしてサーバーに保存
- Markdown を HTML に変換
- ページに表示
といった処理を行います。 今回は、フロントエンドの実装は特別に使わずに、Django の機能で実現します。
今回の目的は、Markdown で書かれた原稿をアップロードしてそれを表示するというサイトを作成する事です。
とりあえず、ページを表示する所まではできたので、次回はファイルをアップロードするフォームを作成して Markdown のファイルをサーバーにアップロードする部分を作ります。
具体的には、
- アップロードのフォームのテンプレートの作成
- 選択したファイルをアップロードしてサーバーに保存
- Markdown を HTML に変換
- ページに表示
といった処理を行います。 今回は、フロントエンドの実装は特別に使わずに、Django の機能で実現します。
次回の内容は？
次回は、アプリの中にファイル選択のフォームのテンプレートを作成して、開発用のサーバーでファイルのアップロードをする部分を紹介します。
その後、そのファイルを読み込んで、Markdown を HTML に変換して表示させる部分をさらにその後の投稿で紹介予定です。
次回は、アプリの中にファイル選択のフォームのテンプレートを作成して、開発用のサーバーでファイルのアップロードをする部分を紹介します。
その後、そのファイルを読み込んで、Markdown を HTML に変換して表示させる部分をさらにその後の投稿で紹介予定です。
まとめ
今回の投稿では、これまでの復習を兼ねて仮想環境の作成から、Django のインストールと初期設定の部分を中心にまとめて見ました。
既に一通り紹介しているので、復習のつもりで是非今一度やってみてください。
次回以降、少し実用的な例の紹介に入りますのでお楽しみに！
今回の投稿では、これまでの復習を兼ねて仮想環境の作成から、Django のインストールと初期設定の部分を中心にまとめて見ました。
既に一通り紹介しているので、復習のつもりで是非今一度やってみてください。
次回以降、少し実用的な例の紹介に入りますのでお楽しみに！
コメント
コメントを投稿