Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

【Django】簡単なSNSアプリを開発する① ~基本設定~

Django

スポンサードリンク
　

f:id:ShotaNukumizu_1000:20211205071412p:plain

おはようございます。Shotaです。

今回の記事では、PythonのWEBフレームワーク「Django」で簡単なSNSアプリを開発するための手順を説明します。

▼注意(クリックして表示) 本記事は、Djangoの基本知識の理解や環境構築が終了していることを前提として書かれています。まだ環境構築が終わっていない方やDjangoに関しての理解が不十分である方は多少理解が難しいことがあるかも知れないのでご了承ください。

それでは早速、本題に入りましょう！



Djangoのインストール

まずは以下のコマンドでDjangoをインストールします。

$ pip install django

Djangoのインストールが終了したら、以下のコマンドを入力してDjangoのプロジェクトを完成させます。

$ django-admin startproject _project .
$ django-admin startapp _app


Djangoプロジェクトのmigrate

次に、Djangoプロジェクトをmigrateしましょう。

migrateとは、Django経由でデータベースに変更を加えるための仕組みを指します。これを行わないとデータベースにDjango側の処理が反映されないので十分に注意してください。

以下のコマンドを入力し、Djangoプロジェクトをmigrateしましょう。

$ python manage.py migrate


管理者(superuser)の作成

次は、Django管理サイトにアクセスするための管理者(superuser)を作成します。以下のコマンドを入力しましょう。

$ python manage.py createsuperuser

これでユーザ名、メールアドレスやパスワードを入力すれば管理者(superuser)を作成できます。


ベースとなるtemplateの作成

templatesフォルダを_projectや_appと同じディレクトリに作成しましょう。その後、templatesフォルダの下にbase.htmlを作成します。

templates/base.htmlには以下のようなコードを記載してください。

<!---templates/base.html-->
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% block static %}
    {% endblock static %}

    {% block title %}
    <title>Sample SNS Application</title>
    {% endblock title %}
</head>
<body>

    {% block header %}
    {% endblock header %}

    {% block content %}
    {% endblock content %}

</body>
</html>

これで基本となるテンプレートは完成です。

Djangoで基本となるテンプレートを設定する理由は、似たようなhtmlファイルの構造を使い回すことで書くコード量を減らし、開発を効率化させるためです。Djangoでは基本となるテンプレートを予め作成して、それを使いまわして別のテンプレートを作成するのが鉄則です。

このことはぜひ理解しておきましょう。


Blumaのインストール(CSSフレームワークその1)

次に、以下のコードをtemplates/base.htmlにコピペしましょう。(head要素の中に)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">


Bootstrapのインストール(CSSフレームワークその2)

次に、以下のコードをtemplates/base.htmlにコピペしましょう。(head要素の中に)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous"></script>


Font Awesomeのインストール

次に、以下のコードをtemplates/base.htmlにコピペしましょう。(head要素の中に)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
        integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

Font Awesomeをインストールすれば、Font Awesomeの公式サイトに記載されているアイコンを利用できます。


Markdownのインストール

次は、DjangoでMarkdownを適用させるために必要なライブラリのインストールをします。以下のコマンドを入力しましょう。

$ pip install Markdown
$ pip install django-mdeditor

これでDjangoでMarkdownを適用できます。


settings.pyの設定

最後にsettings.pyの設定を行います。


プロジェクトのインストール

#インストールするアプリやプロジェクトを追加する
#_project/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
　  #追加
    '_app',
    'mdeditor',
]

#追加
X_FRAME_OPTIONS = 'SAMEORIGIN'


静的ファイル(static)の設定

Djangoで設定したテンプレートにcssファイルやjsファイル等のstaticファイルを適用させるために以下のコードを書きます。

#_project\settings.py
STATIC_URL = '/static/'

#追加
import os
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'


templateを設置するディレクトリの設定

#_project/settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [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',
            ],
        },
    },
]

ディレクトリを'DIRS': [BASE_DIR / 'templates']に設定することで、_appや_projectと同じディレクトリにあるtemplateフォルダに入っているhtmlファイルをテンプレートとして利用できます。


おわりに

今回の記事では、Djangoで簡単なSNSアプリを開発するための方法を解説しました。

次回の記事では投稿内容のモデルを作成していきます。