【Django】Djangoで開発環境の構築から、django-allauthを使いfacebookでユーザー認証を行うところまでのTips①

#前提

MacでPyCharmを使って開発します。
多くの文献がそうであるように、仮想環境を構築して基本的には`(venv)`の中で作業をしていきます。

省略していますが

```console
$
```
このように書いているのはターミナルに打ってくださいねの意味ですが、仮想環境にいる状態で(つまり`$source venv/bin/activate`した状態で)、

```console
(venv)$
```

打ってくださいねの意味と思ってください。

#プロジェクトの作成

<img width="769" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265778/3e4c168c-264a-7cf8-fcce-bbcd997dbda2.png">
PyCharmのトップ画面から Create New Projectする

<img width="186" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265778/d5a070e6-75c7-8d0d-a367-70d5705a6c67.png">

<img width="1001" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265778/d11e89c5-1f4c-18f9-ec09-31996ff08f8d.png">

preferencesのproject interpreterから＋ボタンで検索画面へ。

<img width="916" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265778/c5567c83-7df1-a5b0-2d75-ce38bff54107.png">
Djangoを検索しインストール。
サクセスメッセージが出たらインストール成功です。

```console
$ django-admin.py startproject config .
$ python manage.py startapp accounts
```

さてここからはディレクトリ構成を意識しながらプロジェクトを構築していきます。

<img width="309" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265778/60c9b4a1-958e-e274-a93e-a08251794ecf.png">

このようなディレクトリ構成をまず作っておきます。

#settings.pyを編集する
##1.MySQLの設定をする
今回はデータベースにMySQLを使用します。
デフォルトではsqlite3という軽量なデータを扱うのに向いたデータベースがセットされていますが、
今回はMySQLを使う仕様なので設定を変更していきます。

まずはMySQLをDjangoで使う為に、pymysqlというパッケージをインストールします

```console
$pip install pymysql
```
これはパッケージというか、正式にいうとドライバのひとつですね。
ドライバとは何かというと、以下の説明をご覧ください。
> 最も基本的な定義では、ドライバーとはオペレーティング システムとデバイスの間で相互のやり取りを可能にするソフトウェア コンポーネントのことです。たとえば、あるアプリケーションでデバイスからデータを読み取る必要がある場合を考えてみます。アプリケーションはオペレーティング システムで実装された関数を呼び出し、オペレーティング システムはドライバーで実装された関数を呼び出します。デバイスの設計と製造をした会社が作ったドライバーであれば、デバイス ハードウェアとやり取りする方法を認識してデータを取得します。ドライバーがデバイスからデータを取得した後、データはオペレーティング システムに返され、さらにアプリケーションへと返されます。
*https://msdn.microsoft.com/ja-jp/library/windows/hardware/ff554678(v=vs.85).aspx*

初心者にとってもわかりやすい説明ですが、もう少しわかりやすくいうとするならば、「必要なもの」ということです。


まずは`DATABASES`から

```settings.py
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql', #mysqlに変更する
        'NAME': 'django_database', #作成するデータベースの名前
        'USER': 'root', #MySQLのユーザー名、自分はrootにしてあります
        'PASSWORD': '', #MySQLのパスワード、自分は設定していません
        'HOST': 'localhost', #MySQLのHOST、自分はlocalhostにしてあります
        'PORT': '', #MySQLのPORT、自分は指定していません
        'OPTIONS': {
            'init_command': "SET sql_mode='STRICT_TRANS_TABLES'",
        },
        'TEST': {
            'NAME': 'test'
        }
    }
}
```

自分がインストールしたMySQLの設定の確認は以下を参照。

```console
＄mysql -u root
```

※MySQLに入るのにユーザー名とパスワード使用の有無はわかっていないといけない

```mysql
mysql> select host, user from mysql.user;

+-----------+---------------+
| host      | user          |
+-----------+---------------+
| localhost | mysql.session |
| localhost | mysql.sys     |
| localhost | root          |
+-----------+---------------+
3 rows in set (0.01 sec)

```

続いて、MySQLに入った状態からデータベースを作成してみましょう。
先ほど`settings.py` で自分で書いた名前で作成してください

```mysql
mysql> CREATE DATABASE django_database;
Query OK, 1 row affected (0.04 sec)
```

さらに、データベースが作れたかどうかはこちらで確認できます！

```mysql
mysql> SHOW DATABASES;

+-------------------------------+
| Database                      |
+-------------------------------+
| django_database               |
+-------------------------------+

```

うまく作成できていることがわかったら、mysqlを抜けてください

次は、`manage.py`のimport分の後ろに以下を足します

```manage.py
import pymysql


pymysql.install_as_MySQLdb()
```


続いてmigrate、runserverしてみましょう

```console
$python manage.py migrate
$python manage.py runserver
``` 

![image.png](https://qiita-image-store.s3.amazonaws.com/0/265778/067bdc76-e657-05e7-215a-067620e1a7d0.png)

とりあえずサーバーが立ち上がることが確認できました。
もう少し`settings.py` をいじっていきましょう


##2.テンプレートを設定する
```settings.py
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',
            ],
        },
    },
]
```

`'DIRS'`がデフォルトでは空になっていると思いますが、これはビューが指定するテンプレートに対してどのディレクトリを優先するかを設定するものです。以上のように加筆しておきましょう

##3.LANGUAGE_CODEとTIME_ZONE

ここは日本です。
日本人向けのサービスを作るので日本向けの設定にします。

```settings.py
LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/265778/2f2a0e61-57bb-ee7f-34fd-747954bb4588.png)

日本語は安心しますね。

その他細かいセッティングがありますが一旦ここまでにしておきます。

#ログイン画面を作る
##URLディスパッチャの設定

`config/urls.py` に書かれる`urlpatterns = []` は、URLパターンにマッチするビュー関数を見つけてくる為のものです。

```config/urls.py
urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('accounts.urls')),
]
```

この`include`を用いると、アプリケーションごとの`urls.py`を読み込みます。これにより、 「/accounts/」で 始まるURLパターンの全てを 「accounts」 アプリケーションの`accounts/urls.py`に委譲しています。


```accounts/urls.py

app_name = 'accounts'
urlpatterns = [
    path('login/', views.login, name='login'),
]
```

##ビューの設定

```accounts/views.py
from django.contrib.auth.views import LoginView as AuthLoginView


class LoginView(AuthLoginView):
    template_name = 'accounts/login.html'


login = LoginView.as_view()
```

`config/settings.py` に追記します

```config/settings.py
LOGIN_URL = '/accounts/login/'
```

あくまでログインするところまでの実装なので最小限すぎるほど最小限の実装に留めます。

#テンプレートを用意する

ログイン後リダイレクトする為のhome.htmlというページをtemplates直下に作っておきます
中身はあとで書いていきます。

```console
$touch home.html
```

共通レイアウトに関しては`base.html`にまとめます

```templates/base.html
<!doctype html>
{% load static %}
<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">
    <title>Sample_title</title>
</head>
<body>
<div class="ui container">
    {% block content %}{% endblock %}
</div>
</body>
</html>
```
ミニマムなログイン画面を作ります

```templates/accounts/login.html
{% extends "base.html" %}
{% block page_title %}ログイン{% endblock %}

{% block content %}
<h2>ログイン</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">ログイン</button>
</form>
{% endblock %}
```
csrf_tokenを絶対忘れないでください。
ちなみに`python manage.py runserver` して、
*http://127.0.0.1:8000/accounts/login/*
にアクセスすると
![image.png](https://qiita-image-store.s3.amazonaws.com/0/265778/6449c4d6-9638-8f0d-8b88-b64b5e8c7146.png)

こんなにもシンプルで美しいログインページが現れます

続いて`home.html`　を一応書いていきます。

```templates/home.html
{% extends "base.html"%}
{% block title %}ホーム{% endblock %}
{% block content%}
<h2>ホーム</h2>
ようこそ {{user.get_username}} さん
{% endblock%}
```

これもシンプルで上質なページができそうな気がしてたまらないですね。

`home.html` へ接続する為に、`config/urls.py` を以下のように書き換えます。

```config.urls/py
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='home.html'), name='home'),
    path('accounts/', include('django.contrib.auth.urls')),
]
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/265778/7e3c4491-ae2f-750c-cf0d-2ccc28881f9e.png)

*`http://127.0.0.1:8000/`* にアクセスした画面

続いてログイン後のリダイレクト先を`home`に変更します。

```config/settings.py
LOGIN_REDIRECT_URL = 'home'
```

ここまででとりあえず外枠を用意できたイメージです。
次回いよいよfacebook認証に取り掛かっていきます。