tablerをさわってみる

参照

tabler

install

1
2
3
4
git clone https://github.com/tabler/tabler.git
cd tabler
npm install
bundle install

build

1
npm run serve

上記でサーバーが立ち上がる。
http://localhost:4000
にアクセス。  

src

ルート直下のsrcを修正すると立ち上げたサーバーに反映される。
修正はリアルタイムに反映される。
「_site」 ディレクトリに出来上がったソースが反映されて、それがサーバーに反映される仕組み。
moduleで分割して扱えるからいいかも。

どのようにしてDjangoの user model を拡張するか

4つの方法がある

参考↓
https://simpleisbetterthancomplex.com/tutorial/2016/07/22/how-to-extend-django-user-model.html

Using a Proxy Model

元からあるuserテーブル(auth_user)にカラム等のフィールドを付け足すことなく、振る舞いを変えたい時に利用する
新しいテーブルを作らず、既存のテーブルのスキーマを変更せずにモデルのクエリマネージャー等に追加のメソッドを用意したい時に使う
https://simpleisbetterthancomplex.com/tutorial/2016/07/22/how-to-extend-django-user-model.html#proxy

authentication プロセス等の振る舞いを変更せずにフィールドを追加した時はこれ
https://simpleisbetterthancomplex.com/tutorial/2016/07/22/how-to-extend-django-user-model.html#onetoone

reating a Custom User Model Extending AbstractBaseUser

AbstractBaseUserを継承した新しいモデルを作成する
例えば、email アドレスをusernameの代わりにid として使いたい場合など、authentication プロセスを変更したい時に使う。
setting.pyのAUTH_USER_MODEL = '***'にも指定する必要がある
劇的に色々かえる必要がある場合はこれ  
https://simpleisbetterthancomplex.com/tutorial/2016/07/22/how-to-extend-django-user-model.html#abstractbaseuser

Creating a Custom User Model Extending AbstractUser

AbstractUserを継承した新しいモデルを作成する
DjangoのauthenticationプロセスはそのままにダイレクトにUserModelに新しいフィールドを追加したいような時に使う
https://simpleisbetterthancomplex.com/tutorial/2016/07/22/how-to-extend-django-user-model.html#abstractuser

「django-registration-redux」を使ってみた

参照

django-registration-redux:Quick start guide

youtube

これかなり参考になりました
Try Django 1.8 Tutorial - 27 of 42 - Django Registration Redux - Learn Django

備考

django で user 登録, 認証をやるならいくつか選択肢があることがわかった。
django-regitration と django-registration-redux とあってどっちを使えばよいのか迷った。
SNSと連携するなら django-allauth が良さそうだった。

setup

install

1
$ pip install django-registration-redux

settings.pyregistration, django.contrib.sitesを追加

1
2
3
4
5
6
7
8
9
10
INSTALLED_APPS = [
'registration',
'django.contrib.sites',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]

settings.pyに定数(設定値)を追加

1
2
3
4
5
6
7
ACCOUNT_ACTIVATION_DAYS = 3 # One-week activation window; you may, of course, use a different value.
REGISTRATION_AUTO_LOGIN = True # Automatically log the user in.
REGISTRATION_DEFAULT_FROM_EMAIL = 'test.example@ikasumimi.com'
REGISTRATION_EMAIL_HTML = False
ACCOUNT_AUTHENTICATED_REGISTRATION_REDIRECTS = True
REGISTRATION_USE_SITE_EMAIL = True
REGISTRATION_SITE_USER_EMAIL = True

django-registration-redux ではいくつかのユーザー登録・認証のフローを選択できるようだ。

ノーマルなのがThe default backendになる。
登録して、アクティベート用のメールが送られてくるタイプのものだ。
他には  
The “simple” (one-step) backend backend)
The admin approval backend
がある。  

project/urls.py のセットアップ

url(r'^accounts/', include('registration.backends.default.urls')),urlpatterns に追加

1
2
urlpatterns = [
url(r'^accounts/', include('registration.backends.default.urls')),

template のセットアップ

  1. templates dir の指定をしておく
    project/settings.py でプロジェクトルートの templates dir を使えるようにする
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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',
    ],
    },
    },
    ]

project root に templates/registration dir を作成したのち,

macdhuibh/django-registration-templates をclone してtemplateファイルをコピーする.

ユーザー登録を試してみる

http://127.0.0.1:8000/accounts/register/ にアクセスすると、ユーザー登録画面が見える
適当に入力して登録しようとするとエラー(ConnectionRefusedError at /accounts/register/)になる。
これはdjangoのローカルサーバだと、メール送信できないためである。
http://127.0.0.1:8000/admin/ 
で Registration profiles の データを確認(change:編集)すると、Activation Key:を確認することができる。
メールだと、下記の様なURLを送られてくるので、ローカル環境では下記の様なURLを人為的に作成して、試してみるとよい
http://127.0.0.1:8000/accounts/activate/{Activation Key}
成功すると、auth_userテーブルのis_activeの値が1になり
http://127.0.0.1:8000/accounts/activate/complete/ の画面が表示される .

アカウント登録時のフォームの入力フィールドを追加するには?

デフオルトだと、Username, E-mail, Password となっている
他に付け足したい場合は、CustomFormを作成してsettings.pyに明記する必要がある

home/forms.py を作成

1
2
3
4
5
6
7
8
9
10
from django import forms
from django.utils.translation import ugettext_lazy as _
from registration.forms import RegistrationForm
from registration.forms import RegistrationFormTermsOfService
from registration.forms import RegistrationFormUniqueEmail

class CustomForm(RegistrationFormTermsOfService, RegistrationFormUniqueEmail):
first_name = forms.CharField(max_length=30, label=_("First name"))
last_name = forms.CharField(max_length=30, label=_("Last name"))
extra = forms.CharField(max_length=30, label=_("カスタムの入力項目"))

settings.py に CustomForm を指定

1
REGISTRATION_FORM = 'accounts.forms.CustomForm'

上の設定をすると、利用規約同意の項目を追加できたり、カスタムの入力項目を追加できたりします。  
ただ、この時点ではいくつか問題があります。 カスタムの入力フィールどに対応したDBテーブルのカラムがないこと。
入力フィールドの見た目の調整が必要なこと。    

下記と
https://stackoverflow.com/questions/35741212/django-registration-redux-with-custom-user-model-registration-notimplementederro

メモ

https://www.youtube.com/watch?v=IH_l7UWk8WY

https://www.youtube.com/watch?v=CNtHjPpUKt8

registration.views.RegistrationView

1
2
3
4
5
6
from django.urls import include, path
from django.conf.urls import url
from django.contrib import admin
from django.views.generic.base import TemplateView
from registration.backends.default.views import ActivationView
from registration.backends.default.views import RegistrationView

djangoのstatic の扱い

参照

django と apache の環境は 前回整えた .
ConohaでDjango2.0 と Apache, MySQLの環境を整える

django と apacheの設定

static の扱いを考慮するうちに次のような設定にひとまず落ち着いた。
公開するstatic はproject_root下には置かない方針だ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
WSGIPythonHome /var/www/environments/myenv
WSGIPythonPath /var/www/environments/mysite:/var/www/environments/myenv/lib/python3.6/site-packages
<VirtualHost *:80>
WSGIScriptAlias / /var/www/environments/mysite/mysite/wsgi.py

Alias /static/ /var/www/static/

<Directory /var/www/environments/mysite/mysite>
<Files wsgi.py>
Require all granted
</Files>
</Directory>

<Directory /var/www/static>
Require all granted
</Directory>
</VirtualHost>

mysite/settings.py

1
STATIC_URL = '/static/'

STATIC_ROOT = "/var/www/static/"

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/var/www/static/',
]

static ファイルのデプロイは次のコマンドで

1
$ python manage.py collectstatic

STATIC_ROOT で設定したディレクトリにstaticなファイル集めてくれる
deploy スクリプトに書いとけばよいだろう

deploy スクリプト等にかく場合は入力を求めらてたりしてはまずい
同じパスにおいてあるファイルを更新することも多いだろう
次のオプションを利用すればOK

1
$ python manage.py collectstatic --noinput -c

以下の記事を参考にした
DjangoをApacheで動かすときの、confサンプル
Django、静的ファイルのデプロイ(Apache)

bulmaのカスタマイズについて

css フレームワークの bulma のカスタマイズについて

sass によるカスタマイズを実行する
Customizing with Sass . Create your own theme with a simple set of variables

とりあえず install

1
2
3
$ git clone git@github.com:jgthms/bulma.git
$ cd bulma
$ npm install

npm install bulma でもよいが githubからcloneした方がコンパイル環境が揃っていて楽なのでこの方法をとる

準備

root ディレクトリに
custom/mystyles.scss を作成する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 1. Import the initial variables
@import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions";

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb;
// Add pink and its invert
$pink: #ffb3b3;
$pink-invert: #fff;
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif;

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;
// Use the existing orange as the danger color
$danger: $orange;
// Use the new serif family
$family-primary: $family-serif;

// 4. Setup your Custom Colors
$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #55acee;
$twitter-invert: findColorInvert($twitter);
$github: #333;
$github-invert: findColorInvert($github);

// 5. Add new color variables to the color map.
@import "../sass/utilities/derived-variables.sass";
$addColors: (
"twitter":($twitter, $twitter-invert),
"linkedin": ($linkedin, $linkedin-invert),
"github": ($github, $github-invert)
);

$colors: map-merge($colors, $addColors);

// 6. Import the rest of Bulma
@import "../bulma";

例えば、class=container の幅を狭くしたい場合は下記のような’mystyles.scss’ にしよう

参考: [Variables , Easily customize Bulma to match your design](https://bulma.io/documentation/overview/variables

全部 tablet と同じ幅にしているので極端な例ではあるが..

mystyles.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 1. Import the initial variables
@import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions";

// 2. Set your own initial variables

$desktop: 860px + (2 * $gap);

// 1152px container + 4rem
$widescreen: 769px + (2 * $gap);

// 1344px container + 4rem
$fullhd: 769px + (2 * $gap);



// 6. Import the rest of Bulma
@import "../bulma";

package.jsonscriptsにscriptをたす

1
"build-sass-bulma-custom": "node-sass --output-style expanded --source-map true custom/mystyles.scss css/mystyles.css",

script を実行する

1
$ npm run build-sass-bulma-custom

css/mystyles.css の出来上がり

ConohaでDjango2.0 と Apache, MySQLの環境を整える

locale の設定をきちんとしておくこと

https://qiita.com/mathayuki/items/1ec220b7b63601a914d2

apacheとdjangoの環境

【Django】Apacheとmod_wsgi環境でDjango2を使う方法を解説 – CentOS7

centos7.4での初期設定

1
2
3
$ sudo yum update -y
$ sudo yum install -y yum-utils
$ sudo yum groupinstall -y development

centos7.4でのApache2.4のインストール

1
2
$ sudo yum install -y httpd httpd-devel
$ httpd -v

一旦、apacheの立ち上げと自動起動の設定をしておく

1
2
$ sudo systemctl start httpd.service
$ sudo systemctl enable httpd.service

起動確認

1
$ sudo systemctl status httpd.service

firewallの確認

1
2
$ sudo systemctl status firewalld.service
$ sudo firewall-cmd --list-all

※conohaのVPSで試してます
※default で 80port閉じられてるみたいです。

80番ポートをあける設定

1
2
3
$ sudo firewall-cmd --permanent --add-service=http --zone=public
$ sudo firewall-cmd --permanent --add-service=https --zone=public
$ sudo firewall-cmd --reload

確認 services に http, https が追加されてる

$ sudo firewall-cmd --list-all

python3 をインストールする

1
2
3
4
$ sudo yum install -y https://centos7.iuscommunity.org/ius-release.rpm
$ sudo yum install -y python36u
$ sudo yum install -y python36u-pip
$ sudo yum install -y python36u-devel

python の version を確認する

1
2
3
4
[high5@instance-1 ~]$ python --version
Python 2.7.5
[high5@instance-1 ~]$ python3.6 --version
Python 3.6.4

venvによる仮想環境

1
注釈 pyvenv スクリプトは Python 3.6 で非推奨となり、代わりに python3 -m venv を使い、仮想環境を動かす Python インタープリタを取り違える可能性を防ぎやすくします。
1
2
3
4
5
6
$ sudo mkdir -p /var/www/environments
$ cd /var/www
$ sudo chown high5:high5 environments
$ cd environments
$ python3.6 -m venv myenv
$ source myenv/bin/activate

venv 環境においては pythonの versionが3.6 になる

django2.0のインストール

1
2
3
4
(myenv) [high5@1instance-1 environments]$ pip install django
(myenv) [high5@1instance-1 environments]$ django-admin startproject mysite
(myenv) [high5@1instance-1 environments]$ cd mysite
(myenv) [high5@1instance-1 mysite]$ python manage.py runserver 0.0.0.0:8000

ひとまず起動したらOK . CONTROL-C. で閉じましょう  

mod_wsgiをインストールしておく

下記の記事がwsgiの理解を深めさせてくれる
Django を Apache と mod_wsgi とともに使うには?

venv 環境下にてphpでmod_wsgiをインストールする

1
2
3
4
5
6
7
(myenv) [high5@instance-1 environments]$ pip install mod_wsgi
Collecting mod_wsgi
Downloading mod_wsgi-4.5.24.tar.gz (2.6MB)
100% |████████████████████████████████| 2.6MB 447kB/s
Installing collected packages: mod-wsgi
Running setup.py install for mod-wsgi ... done
Successfully installed mod-wsgi-4.5.24

deactivate で venv 環境を一旦抜ける

1
(high5) [high5@instance-1 ~]$ deactivate

apache の設定で読み込む「mod_wsgi」 モジュールがどこにあるか把握しておく

1
2
$ find /var/www/environments/myenv -name 'mod_*.so'
/var/www/environments/myenv/lib/python3.6/site-packages/mod_wsgi/server/mod_wsgi-py36.cpython-36m-x86_64-linux-gnu.so

apacheのhttpd.confの設定

  1. module の読み込みの設定

    1
    2
    $ sudo vi /etc/httpd/conf.modules.d/mod_wsgi.conf
    LoadModule wsgi_module /var/www/environments/myenv/lib/python3.6/site-packages/mod_wsgi/server/mod_wsgi-py36.cpython-36m-x86_64-linux-gnu.so
  2. Django、mod_wsgi 関連設定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $ sudo vi /etc/httpd/conf.d/django.conf
    # 各自のプロジェクトのパスに応じて適宜書き替えてください
    WSGIPythonHome /var/www/environments/myenv
    WSGIScriptAlias / /var/www/environments/mysite/mysite/wsgi.py
    WSGIPythonPath /var/www/environments/mysite:/var/www/environments/myenv/lib/python3.6/site-packages

    <Directory /var/www/environments/mysite/mysite>
    <Files wsgi.py>
    Require all granted
    </Files>
    </Directory>
  3. apacheを再起動した後にアクセスする

再起動してアクセスする前に djangoの設定ファイルで許可するホストを記述する必要がある

1
2
$ vi /var/www/environments/mysite/mysite/settings.py
ALLOWED_HOSTS = ['*']

※上記はどのhostでもアクセスできるようにする例

1
$ sudo systemctl restart httpd.service

maridadb が入っていたら消してしまおう

1
2
3
4
5
$ rpm -qa | grep maria
mariadb-libs-5.5.56-2.el7.x86_64

$ sudo yum remove mariadb-libs
$ sudo rm -rf /var/lib/mysql

mysql5.7 をinstall しよう

1
2
3
4
-- 公式リポジトリを追加
$ sudo rpm -Uvh http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm
-- mysqlをインストール
$ sudo yum install --enablerepo=mysql57-community mysql-community-server

自動起動の設定

1
$ sudo systemctl enable mysqld.service

起動する

1
$ sudo systemctl start mysqld.service

temporary パスワードの確認

1
2
$ sudo grep 'temporary password' /var/log/mysqld.log
A temporary password is generated for root@localhost: ****

mysql 接続

1
$ mysql -u root -p

password 変更

とりあえず、manual 通り強いパスワードに変更

1
mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY 'MyNewPass4!';

好きなパスワードに変更したい場合は下記のようにすると変更できる
下記は最小 4 までにしてポリシーレベルを下げた例

1
2
3
mysql> SET GLOBAL validate_password_length=4;
mysql> SET GLOBAL validate_password_policy=LOW;
mysql> SHOW VARIABLES LIKE 'validate_password%';

おすきなパスワードへ

1
mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY '***';

database 作っとく

1
mysql> CREATE DATABASE django DEFAULT CHARACTER SET utf8;

django に mysql との接続情報を記述しておく

1
2
3
4
5
6
7
8
9
10
11
$ vi /var/www/environments/mysite/mysite/settings.py
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'django',
'USER': 'root',
'PASSWORD': '****',
'HOST': 'localhost', # Or an IP Address that your DB is hosted on
'PORT': '3306',
}
}

pythonからmysql に繋ぐのに必要な module の設定  

1
2
3
4
5
6
7
$ sudo yum install python-devel
$ sudo yum install mysql-community-devel
$ cd /var/www/environments
$ source myenv/bin/activate
(myenv) [high5@*** environments]$ pip install mysqlclient
$ deactivate
$ sudo systemctl restart httpd.service

django

インストール

Djangoをインストール。
バージョンを指定しなければ最新版がインストールされる。

1
2
3
4
5
6
7
$ pip install Django
Collecting Django
Downloading Django-2.0.1-py3-none-any.whl (7.1MB)
100% |████████████████████████████████| 7.1MB 106kB/s
Requirement already satisfied: pytz in /Users/kurumaki0926/anaconda/lib/python3.6/site-packages (from Django)
Installing collected packages: Django
Successfully installed Django-2.0.1