「Django」の記事 - Crieit

匿名掲示板作ってみた

2021-11-22T02:31:55+09:00

匿名掲示板を作り、アルファ版として公開してみました。
Crieitユーザーの皆さんにもぜひご意見いただきたいです。

　　　　　　　　　　 -‐ '´￣￣｀ヽ､へ　　　　／＼
　　　　　　　／　／" ｀ヽヽ　　￣￣￣￣　　 >
　　　　　　　　　//, '/　　　　ヽﾊ　､　ヽ￣￣＞／
　　　　　　　　〃 {{⌒　　　 ⌒ﾘ| ｌ │ i| ／　／
　　　　　　　　ﾚ!小ｌ●　　　 ● 从　|、i| /　
　　　　　　　　ヽ|l⊃　､,､,　⊂⊃　|ﾉ│|＿＿＿＿_／
　　　　 /⌒ヽ|ﾍ　　ゝ._）　　j /⌒i !
　　　　　　＼ /:::::|　l＞,､ __,　イァ/　 /│
.　　　　　　 /:::::/|　|　ヾ:::|三/::{ﾍ､∧ |
　　　　　　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|

その名も、「よろずネットワーク」です。
作った目的は、「世の中のトレンドがわかって」「自由でゆるくて」「ネットの面白かった時代を再現できるような」掲示板を作りたいと思ったことです。

よろずネットワーク

ちなみに、よろずネットワークではAAを綺麗に投稿できます。

コメント欄はこんな感じです。

スレにはyoutube動画やニコニコ動画も貼り付けできます。

技術スタック
サーバー：Conoha VPS(ubuntu 20.04LTS) ×複数
DB: Mariadb on Conoha
バックエンドAPI：Django Rest Framework
フロントエンド: Quasar（Nuxtjsみたいなやつ）でSSR(PWAﾓｰﾄﾞ)
ドメイン：google domain
CI/CD:github actions

毎日アバター画像が自動生成されたり、返信がくると通知が来たり、カテゴリごとに毎時ランキングを見られたりなど、掲示板として使いやすいものを意識して作ったので、是非遊びに来てみてください！

　よろずネットワーク

Djangoで開発を始める時にやっておくと良いこと

2020-05-20T21:15:03+09:00

はじめに

Djangoで開発を始める時にやっておいたほうが良いこと。
後々になると変更が難しくなるので、必ずではないのですが初期段階のうちに設定しておいた方が良いことがあります。
「settings.pyが入っている設定ディレクトリ名の設定」 と 「拡張ユーザーモデル」 を作っておくことです。

他にも色々あるかもしれませんが、現段階での備忘録として。

この記事の対象者

Djangoのチュートリアル的な教材を一通り終えたぐらいで、これからアプリ制作を始めようという人
ディレクトリ構造やプロジェクト、アプリケーションについて基礎知識を整理しておきたい人
ユーザーモデルをちょろっとカスタマイズしたいという人

（１）プロジェクト制作時に設定ディレクトリの名前を変更しておく

これは、プロジェクトのディレクトリ構造をわかりやすくするための措置です。
普通に$ django-admin startproject myprojectなとしてプロジェクト制作を始めると、ベースディレクトリ名と設定ディレクトリ名が同じ名前（ここではmyproject）で作られるため区別がつきづらい、という弊害が起こってしまいます。

どういうことかというと、このコマンドでプロジェクト制作を始めると、こんなディレクトリ構造になります。

myproject   <- ベースディレクトリ
|-- manage.py
`-- myproject  <- 設定ディレクトリ
    |-- __init__.py
    |-- settings.py
    |-- urls.py
    |-- manage.py
    `-- wsgi.py

プロジェクト名（ここではmyproject）と同じ名前のベースディレクトリがあり、その中に同名の設定ディレクトリができています。

（ちなみに[現場で使える Django の教科書《基礎編》]の書籍の中では、区別がつきやすいよう
- ベースディレクトリ＝django-admin startproject で作られるプロジェクトのディレクトリ
- 設定ディレクトリ＝settings.pyのあるディレクトリ
と呼んでいるので、その呼び方に準じることにします）

これだとわかりづらいので、設定ディレクトリの方の名前を変えてやる方法があります。

プロジェクト作成時に、ベースディレクトリを任意の名前（プロジェクト名）で作成した後にベースディレクトリの下へ移動し、第一引数に設定ディレクトリ名（ここではconfig）、第二引数に.を指定してstartprojectを実行します。

$ mkdir myproject（ここにプロジェクト名を入れます）
$ cd myproject/
$ django-admin startproject config .

これを実行することで、ディレクトリ構造は

myproject   <- ベースディレクトリ
|-- manage.py
`-- config  <- 設定ディレクトリ　*この名前が変わる
    |-- __init__.py
    |-- settings.py
    |-- urls.py
    |-- manage.py
    `-- wsgi.py

このようになり、わかりやすい構成になるわけです。

（２）ユーザーモデルを拡張しておく

DjangoにはデフォルトでUserモデルが用意されており、簡単にログイン機能などが実装できるようになっています。
それだけでとても便利なのですが、よりUserモデルを使いやすくするために、カスタマイズしたユーザーモデルを作っておくことが公式でも推奨されているようです。

Userモデルを拡張する主な方法は３種類あって、
- 1.AbstractBaseUserを継承する
- 2.AbstractUserを継承する
- 3. 別モデルを作ってOneToOneFieldで関連させる

それぞれのやり方で長所短所があるのですが、
開発が進んでデータベースに既にデータがある場合は３のやり方が良さそうです。
アプリ制作を始める最初の段階なら１か２推奨ですが、１は入門〜初心者には難しそうなので、初めは２のやり方で慣れるのが無難かなというところです。

２の方法では、ユーザーモデルに独自のカラムを追加することができます。

カスタムユーザーモデルの作り方は簡単これだけ。

models.pyに記述
settings.pyにAUTH_USER_MODELを設定
マイグレート

①`app/models.py`に記述（`app`はアプリケーションディレクトリ名が入る）

ここにカスタムユーザーモデルを定義します。(AbstractUserというモデルにユーザーモデルのベースとなる情報が定義されているので、それを継承して使う形になります)

ここでテーブル名や、追加したいカラムを指定することができます。
例えば、custome_userというテーブルに外部キーを用いたCalendarというカラムを設定できます。

from django.contrib.auth.models import AbstractUser
from django.db import models

class CustomUser(AbstractUser):
    class Meta(AbstractUser.Meta):
        db_table = 'custom_user'
        swappable = 'AUTH_USER_MODEL'

    calendar = models.ForeignKey(Calendar, verbose_name='アクティブカレンダー', on_delete=models.PROTECT, blank=True, null=True)

これは僕の実際のコードの例なので、ユーザーモデルにCalendarというモデルを紐づけていますが、例えばユーザーモデルに性別や年齢、メールアドレス、パスワードなどを持たせたいときには、ここでカラム指定してあげると良いかと思います。
デフォルトのUserモデルにカラムを追加する形になるので、もともとあるカラムも残ります（Userモデルの詳細はMEMO参照）

②`config/settings.py`に`AUTH_USER_MODEL`を設定（`config`はプロジェクト作成時に作られる設定ディレクトリの名前）

ここに使用するカスタムユーザーモデルを定義します。「アプリ名.モデル名」のように記述します

AUTH_USER_MODEL = app.CustomUser

③マイグレート

モデルを変更したら定番のデータベースのマイグレート。

$ Python manage.py makemigrations
$ Python manage.py migrate

Django入門向けのいろいろ

バージョンについて

どのバージョンを指定するかですが、LTS (Long-Term Support）（＝長期間のセキュリティサポートがあるバージョンのこと）に該当するバージョンを採用すると間違いがなさそう。

2.2 => 2022年4月までサポート
1.11 => 2020年4月までサポート

ちなみに2019年12月にDjango3系が出ているのですが、LTSに当たる3.2は2021年の4月にリリース予定とのこと。

特に理由がなければ現時点で最新のLTSで始めておけば間違いがないのかな？という印象です。
（もしデプロイ先が決まっているなら、そのサーバーが対応しているかなどは調査の必要があるのかも）

プロジェクトとアプリケーションについて

Djangoには「プロジェクト」と「アプリケーション」という概念があるので、少し整理しておきます。

プロジェクト
WEBサービスの全体のプロジェクト
$ django-admin startproject myproject
（myprojectがプロジェクト名）のコマンドで作られる
　
　
アプリケーション
小さな機能のひとまとまり
python3 manage.py startapp myapp
（myappがアプリケーション名）のコマンドで作られる

プロジェクトが大きな箱で、アプリケーションはその箱の中に機能ごとに分けて作られるイメージです。

１つのWEBサービスを作る際に１つのプロジェクトを作り、小さなサービスならその中に１つのアプリケーションを作成して実装していきます。
プロジェクトの規模が大きくなってくると、１つのプロジェクトに複数のアプリケーションを作って運用することもできます。

アプリケーションは他のアプリケーションとなるべく依存しないように作るとよい
プロジェクトにアプリケーションを次々と追加する形で機能を追加していくのが基本スタイル

複数のアプリケーションを作る場合は、このように考慮するとメンテナンスがしやすそうですね。

おわりに

一通りチュートリアル的な教材を終えた後は

現場で使える Django の教科書《基礎編》

こちらの本がとてもわかりやすく勉強が捗ります！

基礎的なことが広く網羅されていて、知識の定着や理解のために良いです。つまみ食いしながら読んでもよし。
今回まとめたようなベストプラクティスな手法が多く掲載されていて、かなり重宝しております。

MEMO：デフォルトのUserモデルについて

参考までに、Django 2.1.7で確認したUserモデルのフィールドを記載。
デフォルトのUserモデルはAbstractUserモデルを継承している形になるので、AbstractUserモデルのカラム名が、カスタムユーザーモデルを作った際にも引き継がれます。

lib/django/contrib/auth/models.py

class AbstractUser(AbstractBaseUser, PermissionsMixin):
    """
    An abstract base class implementing a fully featured User model with
    admin-compliant permissions.

    Username and password are required. Other fields are optional.
    """
    username_validator = UnicodeUsernameValidator()

    username = models.CharField(
        _('username'),
        max_length=150,
        unique=True,
        help_text=_('Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.'),
        validators=[username_validator],
        error_messages={
            'unique': _("A user with that username already exists."),
        },
    )
    first_name = models.CharField(_('first name'), max_length=30, blank=True)
    last_name = models.CharField(_('last name'), max_length=150, blank=True)
    email = models.EmailField(_('email address'), blank=True)
    is_staff = models.BooleanField(
        _('staff status'),
        default=False,
        help_text=_('Designates whether the user can log into this admin site.'),
    )
    is_active = models.BooleanField(
        _('active'),
        default=True,
        help_text=_(
            'Designates whether this user should be treated as active. '
            'Unselect this instead of deleting accounts.'
        ),
    )
    date_joined = models.DateTimeField(_('date joined'), default=timezone.now)

    objects = UserManager()

    EMAIL_FIELD = 'email'
    USERNAME_FIELD = 'username'
    REQUIRED_FIELDS = ['email']

    class Meta:
        verbose_name = _('user')
        verbose_name_plural = _('users')
        abstract = True

    def clean(self):
        super().clean()
        self.email = self.__class__.objects.normalize_email(self.email)

    def get_full_name(self):
        """
        Return the first_name plus the last_name, with a space in between.
        """
        full_name = '%s %s' % (self.first_name, self.last_name)
        return full_name.strip()

    def get_short_name(self):
        """Return the short name for the user."""
        return self.first_name

    def email_user(self, subject, message, from_email=None, **kwargs):
        """Send an email to this user."""
        send_mail(subject, message, from_email, [self.email], **kwargs)


class User(AbstractUser):
    """
    Users within the Django authentication system are represented by this
    model.

    Username and password are required. Other fields are optional.
    """
    class Meta(AbstractUser.Meta):
        swappable = 'AUTH_USER_MODEL'

django-import-exportで管理画面にCSVエクスポート機能を追加する

2019-11-27T13:45:50+09:00

Djangoのadminサイト、調べてみるといろいろプラグインがあるらしい。

管理画面のデータをCSVなどの形式でインポート/エクスポートしたくなったので、
調べてみたらdjango-import-exportで簡単にできた。その時の備忘録。

インストール

まずはpipでインストール

$ pip install django-import-export

設定

import_exportをINSTALLED_APPSに追加

# settings.py
INSTALLED_APPS = (
    ...
    'import_export',
)

admin.pyに追加

対象のデータに対する設定を追加していく。

サンプルのモデルはこんな感じ。

# models.py
class Book(models.Model):
    name = models.CharField('Book name', max_length=100)
    author = models.CharField('Book name', max_length=100)

django-import-exportの設定。

対象とするモデルに対してModelResourceを継承したクラスを追加する。
設定関連はココに書いていくらしい。

# admin.py
from django.contrib import admin
from import_export import resources
from import_export.admin import ImportExportModelAdmin

from .models import Book

class BookResource(resources.ModelResource):
    # Modelに対するdjango-import-exportの設定
    class Meta:
        model = Book


@admin.register(Book)
class BookAdmin(ImportExportModelAdmin):
    # ImportExportModelAdminを利用するようにする
    ordering = ['id']
    list_display = ('id', 'title', 'author')

    # django-import-exportsの設定
    resource_class = BookResource

最後に、ImportExportModelAdminを継承したAdminクラスを用意して、
resource_classにModelResourceを継承したクラスを設定すればOK!

すると、こんな感じにボタンが表示される。簡単(´ω｀)

小ネタ

Exportだけにする: Importを無効化

インポートは別にいらないなと思ったので、無効化してみた。
ExportMixinだけにするといいらしい。

# ... 略
from import_export.admin import ExportMixin

@admin.register(Book)
class BookAdmin(ExportMixin, admin.ModelAdmin):
    # ExportMixinをadmin.ModelAdminに追加すればOK
    ordering = ['id']
    list_display = ('id', 'title', 'author')

    # django-import-exportsの設定
    resource_class = BookResource

Exportできるフォーマットを指定する

デフォルトだとJSONとかYMLとかいろいろ選べるけどCSVだけでいいので、
選択できる部分を絞ってみた。formatsを指定すればOK

# ... 略
from import_export.formats import base_formats

@admin.register(Book)
class BookAdmin(ImportExportModelAdmin):
    ordering = ['id']
    list_display = ('id', 'title', 'author')

    # django-import-exportsの設定
    resource_class = BookResource
    formats = [base_formats.CSV] # formatsで指定できる

以上!!

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

Oracle無料ティアでDjango+Nginx+uWSGIでサーバを立ててみる

2019-11-11T10:57:24+09:00

Oracle Cloudで常時無料サービスが開始されたので使ってみた。
構成は、Django+nginx+uWSGI+Oracle Database+Oracle Linux

以下の3つの環境を作ってみたので、その時の備忘録。

ローカルの開発環境
ローカルでDockerを使った開発環境
コンピュート・インスタンスでの本番環境

とりあえず、Djangoの雛形アプリにアクセスできるまでの簡易なので、
SSL対応などは省いてます。

Oracle Cloudの常時無料サービス(無料ティア)について

新しく常時無料で利用できるようになったサービスたち。
・Oracle Cloud無償ティア | オラクル | Oracle 日本

利用できるのは、以下のようなもの。

データベース ... 20GBを2つまで
コンピュート ... 仮想マシン。1/8 OCPU・1GBを2つまで
ストレージ ... 合計100GBの2つのブロック・ボリューム。10GBのオブジェクト・ストレージ

ほかにもロードバランサや監視・通知などある。

仮想マシンもデータベースも1アカウントにつき2つまでなので、
1サービスであれば、ステージング環境と本番環境を用意できそう。

とりあえずDBを作ってみる

トップ画面から。

名前とAdminのパスワードを設定する。
Always FreeもONにしておく。

「Autonomous Databaseの作成」をクリックすると、プロビジョンがはじまる。
プロビジョンが終わるとこんな感じに。

WebブラウザでDBにアクセスしてみる

SQL Developer Webからアクセスできる。

「DB接続」>「アプリケーション接続」>「SQL Developer Web」にある。
「アクセスURL」をコピーして、ブラウザに貼り付け。

ログイン画面が表示されるので、DBを作ったときのパスワードを入力。
アカウントは「admin」

ログインできるとこんな感じ

ローカルの開発環境を作ってみる

とりあえず、開発用にローカル環境でpython manage.py runserverできるようにする。
ローカルの環境はmacOS Mojave(10.14.6)

まずは、Djangoの雛形を作成する

# pythonのバージョンは3.7.3
$ python3 -V
Python 3.7.3

# ディレクトリの作成
$ mkdir sample
$ cd sample/

# 仮想環境の作成
$ python3 -m venv venv
$ source venv/bin/activate

# djangoのインストール
$ pip install --upgrade pip
$ pip install django

# djangoプロジェクトの作成
$ django-admin startproject myproject
$ cd myproject
$ python manage.py migrate

# 起動
$ python manage.py runserver

これでとりあえず、デフォルトのデータベース(SQLite)で立ち上がるとこまで完成。

ローカルでOracleDBを使えるようにする

Oracle Instant Clientのインストール

OracleDBを使うためには、Oracle Instant Clientが必要なので、
以下からダウンロードしてインストールする。
・Oracle Instant Client Downloads

Macだったので、「Instant Client for macOS (Intel x86)」の「Basic Light Package」を選択

## インストールするディレクトリを作成
$ sudo mkdir -p /opt/oracle

## インストールしたファイルを展開
$ sudo unzip ~/Downloads/instantclient-basiclite-macos.x64-19.3.0.0.0dbru.zip -d /opt/oracle

## ライブラリを参照できるように${HOME}/libにリンクを追加
$ mkdir ~/lib
$ ls -s /opt/oracle/instantclient_19_3/libclntsh.dylib ~/lib/
$ cp /opt/oracle/instantclient_19_3/lib* ~/lib/

環境変数にインストールした場所を設定

echo "export ORACLE_HOME=/opt/oracle/instantclient_19_3" >> ~/.bashrc
source ~/.bashrc

認証情報の配置

Oracle Cloudの「Autonomous Database」>「Autonomous Databaseの詳細」にある
「DB接続」からウォレットをダウンロードしてくる。

ファイル名は「Wallet_<データベース名>.zip」。
今回はデータベース名がsampleなので、Wallet_sample.zipとなる。

## 認証ファイルを配置するディレクトリを作成
$ mkdir -p /opt/oracle/instantclient_19_3/network/admin

## ダウンロードしたウォレットを展開して配置
$ sudo unzip ~/Downloads/Wallet_sample.zip -d ${ORACLE_HOME}/network/admin
Archive:  ~/Downloads/Wallet_sample.zip
  inflating: /opt/oracle/instantclient_19_3/network/admin/cwallet.sso  
  inflating: /opt/oracle/instantclient_19_3/network/admin/tnsnames.ora  
  inflating: /opt/oracle/instantclient_19_3/network/admin/truststore.jks  
  inflating: /opt/oracle/instantclient_19_3/network/admin/ojdbc.properties  
  inflating: /opt/oracle/instantclient_19_3/network/admin/sqlnet.ora  
  inflating: /opt/oracle/instantclient_19_3/network/admin/ewallet.p12  
  inflating: /opt/oracle/instantclient_19_3/network/admin/keystore.jks

cx_Oracle(pythonライブラリ)のインストール

Oracle Databaseのpythonライブラリをインストールする

$ pip install cx_Oracle

settings.pyの設定

settings.pyをOracleように変更。
NAMEには、TNS名のどれかを指定する。

今回は一番上のsample_HIGHを選択。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.oracle',
        'NAME': 'sample_HIGH',
        'USER': 'admin',
        'PASSWORD': '',
    }
}

マイグレーションをもう一度実行してみて、接続できるか確認。

$ python manage.py migrate

マイグレーションが成功すると、Webブラウザ上のSQL Developerでも確認できる。

これで、とりあえず、開発できるようになった(´ω｀)

ローカルでDockerを使った開発環境を作ってみる

実際にデプロイする際は、NginxとuWSGIを利用するので、
それを試せる環境をDockerで構築する。

Django側の変更

nginx+uWSGIで動かすために、いくつか変更。

1. STATIC_ROOTとALLOWED_HOSTS設定

settings.pyを以下の感じに変更。
ログファイルも出るように変更。

-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ["127.0.0.1"]

 ...

 STATIC_URL = '/static/'
+STATIC_ROOT = os.path.join(BASE_DIR, "static/")

+# for logging
+LOGGING = {
+    'version': 1,
+    'disable_existing_loggers': False,
+
+    'formatters': {
+        'standard': {
+            'format': "[%(asctime)s] %(levelname)s [%(name)s:%(lineno)s] %(message)s",
+            'datefmt': "%d/%b/%Y %H:%M:%S"
+        },
+    },
+    'handlers': {
+        'file': {
+            'level': 'INFO',
+            'class': 'logging.handlers.RotatingFileHandler',
+            'filename': 'django.log',
+            'maxBytes': 50000,
+            'backupCount': 2,
+            'formatter': 'standard',
+        },
+    },
+    'loggers': {
+        'django': {
+            'handlers': ['file'],
+            'level': 'DEBUG',
+            'propagate': True,
+        },
+    },
+}

2. staticディレクトリを作成&配置

manage.pyと同じ場所に作成し、
django-adminのcssとかを配置

$ mkdir static

$ python manage.py collectstatic

Docker用の資材を配置

# Docker用の資材の配置場所を作成
$ mkdir docker

# 資格情報の配置
$ mkdir docker/wallet
$ unzip ~/Downloads/Wallet_sample.zip -d docker/wallet/
Archive:  ~/Downloads/Wallet_sample.zip
  inflating: wallet/cwallet.sso      
  inflating: wallet/tnsnames.ora     
  inflating: wallet/truststore.jks   
  inflating: wallet/ojdbc.properties  
  inflating: wallet/sqlnet.ora       
  inflating: wallet/ewallet.p12      
  inflating: wallet/keystore.jks     

# NginxやuWSGIの設定ファイルは以下に配置
$ mkdir docker/conf
$ touch docker/conf/requirements.txt
$ touch docker/conf/myproject_nginx.conf
$ touch docker/conf/myproject_uwsgi.ini
$ touch docker/conf/uwsgi.service

# Dockerfireとdocker-compose.ymlを配置
$ touch docker/Dockerfile
$ touch docker-compose.yml

ディレクトリ的にはこんな感じ。

.
├── docker/
│   ├── conf/
│   │   ├── myproject_nginx.conf
│   │   ├── myproject_uwsgi.ini
│   │   └── uwsgi.service
│   ├── wallet
│   │   ├── ...
│   │   └── tnsnames.ora
│   ├── Dockerfile
│   └── requirements.txt
├── myproject/
│   ├── myproject/
│   │   ├── settings.py
│   │   └── wsgi.py
│   ├── static/
│   └── manage.py
├── venv/
└── docker-compose.yml

各ファイルの中身は以下の感じ。

docker-compose.yml

version: '2'

services:
  web:
    build: "./docker"
    volumes: # djangoアプリを/var/www配下にマウント
      - ./myproject:/var/www/myproject
    ports: # 80および8000ポートを開けておく
      - "80:80"
      - "8000:8000"
    # systemctlを使うので特権を有効にしておく
    privileged: true
    command: /sbin/init

docker/Dockerfile

# Oracle Cloud Infrastructureでも
# OracleLinuxを使うのでoraclelinuxのイメージを使う
FROM oraclelinux:7

### ENV
ENV ORACLE_HOME "/usr/lib/oracle/18.3"


### INSTALL ORACLE DATABASE
# oracle-instantclientを利用するために、2つリポジトリを有効化
RUN yum install -y oracle-release-el7 oracle-softwarecollection-release-el7
RUN yum install -y oracle-instantclient18.3-basiclite
RUN echo /usr/lib/oracle/18.3/client64/lib > /etc/ld.so.conf.d/oracle-instantclient.conf

RUN mkdir -p ${ORACLE_HOME}/network/admin
COPY wallet/* ${ORACLE_HOME}/network/admin/


### INSTALL PYTHON
# python3-develを利用するために、ol7_optional_latestを有効化
RUN yum-config-manager --enable ol7_optional_latest
RUN yum install -y python3 python3-devel gcc


### CREATE VIRTUAL ENV
RUN mkdir /var/www/
RUN mkdir /var/www/myproject

WORKDIR /var/www/

RUN python3 -m venv venv

# 作成した仮想環境(venv)にactivateする
ENV PATH="/var/www/venv/bin:$PATH"
COPY requirements.txt /var/www/
RUN pip install -r requirements.txt

#### INSTALL NGINX
RUN yum install -y nginx

COPY conf/myproject_nginx.conf /etc/nginx/conf.d/ 
RUN systemctl enable nginx

RUN chown -R nginx.nginx /var/www
RUN chmod 755 /var/www

### SETUP uWSGI Emperor mode
RUN mkdir /etc/uwsgi
RUN mkdir /etc/uwsgi/vassals
COPY conf/myproject_uwsgi.ini /etc/uwsgi/vassals

# uWSGIのログディレクトリを作成
RUN mkdir /var/log/uwsgi
RUN chown -R nginx:nginx /var/log/uwsgi

# uWSGIをサービスに登録
COPY conf/uwsgi.service /etc/systemd/system/
RUN systemctl enable uwsgi

docker/conf/requirements.txt

Django==2.2.7
cx-Oracle==7.2.3
uWSGI==2.0.18

docker/conf/myproject_nginx.conf

# the upstream component nginx needs to connect to
upstream django {
    # myproject_uwsgi.iniで設定したsocketファイルを指定
    # unix://
    server unix:///var/www/myproject.sock;
}

# configuration of the server
server {
    listen      80;
    # IPアドレスを指定。ローカルなので、127.0.0.1を設定
    server_name 127.0.0.1;
    charset     utf-8;

    # Django static
    location /static {
        alias /var/www/myproject/static;
    }

    # Finally, send all non-media requests to the Django server.
    location / {
        include     uwsgi_params;
        uwsgi_pass  django;
    }
}

docker/conf/myproject_uwsgi.ini

[uwsgi]

# Djangoプロジェクトのパスを指定
chdir           = /var/www/myproject
# Djangoプロジェクトのwsgi.pyを指定
module          = myproject.wsgi
# venvのパスを指定
home            = /var/www/venv
# process-related settings: master
master          = true
# maximum number of worker processes
processes       = 10
# socketファイルののパス
socket          = /var/www/myproject.sock
# socketファイルのユーザと権限を設定
chown-socket    = nginx:nginx
chmod-socket    = 666
# clear environment on exit
vacuum          = true
# logfile
logto           = /var/log/uwsgi/%n.log

docker/conf/uwsgi.service

[Unit]
Description=uWSGI Emperor
After=syslog.target

[Service]
User=nginx
Group=nginx

# 環境変数の設定
Environment="ORACLE_HOME=/usr/lib/oracle/18.3"
Environment="LD_LIBRARY_PAT=${ORACLE_HOME}/client64/lib:$LD_LIBRARY_PATH"
Environment="PATH=$PATH:${ORACLE_HOME}/client64/lib"

# EmperorモードでuWSGIを実行。venvにあるuwsgiを使う
ExecStart=/var/www/venv/bin/uwsgi --master --emperor /etc/uwsgi/vassals --die-on-term --uid nginx --gid nginx --logto /var/log/uwsgi/emperor.log
Restart=always
KillSignal=SIGQUIT
Type=notify
StandardError=syslog
NotifyAccess=all

[Install]
WantedBy=multi-user.target

Dockerを起動

# dockerを立ち上げ
$ docker-compose up -d

これでうまくビルドされて立ち上がれば、
http://127.0.0.1にアクセスできる。

myproject_nginx.confのserver_nameで、127.0.0.1を指定しているので、
http://127.0.0.1じゃないとDjangoアプリにアクセスできないので注意。

http://localhostだと、myproject_nginx.confの設定が適用されず、
nginxのデフォルトページが表示される。

よく使うログインとか停止とかはこんな感じ。

# コンテナにログイン
$ docker-compose exec web /bin/bash

# 停止
$ docker-compose stop

# 削除
$ docker-compose rm

# Dockerfile ビルド
$ docker-compose build

# Dockerfile ビルド(キャッシュなし)
$ docker-compose build --no-cache

# コンテナをせんぶ削除
$ docker rm `docker ps -a -q`

うまくいかないときにみるところ

以下の場所にログファイルが出力されるので見てみる。

/var/log/messages ... systemdのログ
/var/log/nginx/error.log ... nginxのエラーログ
/var/log/uwsgi/emperor.log ... uWSGI Emperorのログ
/var/log/uwsgi/myproject_uwsgi.log ... myproject_uwsgi.iniのログ
/var/www/myproject/django.log ... Djangoプロジェクトのログ

あとは、「パスが正しいか」「権限、オーナーが正しいか」などを見てみるといいかも。

コンピュート・インスタンスで公開してみる

仮想インスタンスの作成

ここから選択。

こんな感じで入力。
「パブリックIPアドレスの割当」を選択しておく。

ちゃんと「パブリックIPアドレスの割当」を選択していると、
ここにIPアドレスが表示される

デフォルトのユーザはopcなので、
こんな感じで、sshでログインできる。

$ ssh opc@

セキュリティルールを設定

HTTP(ポート80)でアクセスできるようにセキュリティルールを設定する
ただ、セキュリティルールを設定する場所は少しわかりにくい。。

仮想インスタンスの詳細にアクセスして、
「仮想クラウド・ネットワーク」を選択

左下に「ネットワーク・セキュリティ・グループ」を選択。
「ネットワーク・セキュリティ・グループの作成」を選択すると、追加できるようになる。

「名前」と「コンパートメント」に作成を設定

ルールの追加を以下のように設定して、「作成」をクリック

これで作成できたので、仮想インスタンスの詳細にもどって、
「ネットワーク・セキュリティ・グループ」の「編集」を選択

さっき作ったセキュリティグループを設定

環境構築

Dockerfileでやったような感じで、
Django+nginx+uWSGIな環境を構築してく。

DockerイメージのOracleLinuxとは違い、

リポジトリが最初から有効化されている
SELinuxが有効化されている

という感じなので、ちょっと変更が必要。

資材を仮想インスタンスに送る

Dockerのときに使った資材を仮想インスタンスに送る。

$ scp -r docker opc@:~/
$ scp -r myproject/ opc@:~/

送信したら、ログインして確認。

$ ssh opc@

$ pwd
/home/opc

$ ls 
docker  myproject

ログイン後のディレクトリ構成はこんな感じ

/home/opc
├── docker/
│   ├── conf/
│   │   ├── myproject_nginx.conf
│   │   ├── myproject_uwsgi.ini
│   │   └── uwsgi.service
│   ├── wallet
│   │   ├── ...
│   │   └── tnsnames.ora
│   ├── Dockerfile
│   └── requirements.txt
├── myproject/
│   ├── myproject/
│   │   ├── settings.py
│   │   └── wsgi.py
│   ├── static/
│   └── manage.py
├── venv/
└── docker-compose.yml

設定ファイルの変更

IPアドレスと127.0.0.1にしていたので変更する。

~/docker/conf/myproject_nginx.conf

  server {
-     server_name 127.0.0.1;
+     server_name ;
  }

~/myproject/myproject/settings.py

-ALLOWED_HOSTS = ["127.0.0.1"]
+ALLOWED_HOSTS = [""]

環境構築の実施

$ sudo -s

### INSTALL ORACLE DATABASE
$ yum install -y oracle-instantclient18.3-basiclite
$ echo /usr/lib/oracle/18.3/client64/lib > /etc/ld.so.conf.d/oracle-instantclient.conf

$ mkdir -p /usr/lib/oracle/18.3/network/admin
$ /home/opc/docker/wallet/* /usr/lib/oracle/18.3/network/admin/


### INSTALL PYTHON
$ yum install -y python3 python3-devel gcc


### CREATE VIRTUAL ENV
$ mkdir /var/www/
$ cp -r /home/opc/myproject /var/www

$ cd /var/www/

$ python3 -m venv venv

# 作成した仮想環境(venv)にactivateする
$ source venv/bin/activate
$ pip install -r /home/opc/docker/requirements.txt

#### INSTALL NGINX
$ yum install -y nginx

$ cp /home/opc/docker/conf/myproject_nginx.conf /etc/nginx/conf.d/ 
$ systemctl enable nginx

$ chown -R nginx.nginx /var/www
# $ chmod 755 /var/www

### SETUP uWSGI Emperor mode
$ mkdir -p /etc/uwsgi/vassals
$ cp /home/opc/docker/conf/myproject_uwsgi.ini /etc/uwsgi/vassals

# uWSGIのログディレクトリを作成
$ mkdir /var/log/uwsgi
$ chown -R nginx:nginx /var/log/uwsgi

# uWSGIをサービスに登録
$ cp /home/opc/docker/conf/uwsgi.service /etc/systemd/system/
$ systemctl enable uwsgi

##### ここから仮想インスタンス独自の設定

### Firewallの設定
# httpを追加する
$ firewall-cmd --permanent --add-service=http
# firewallを再起動して変更を反映
$ systemctl restart firewalld.service

### SELinuxの設定
$ restorecon -RF /var/www

### サービスの起動
$ systemctl restart nginx
$ systemctl restart uwsgi

一度、http://にアクセスして確認してみる。
エラーページが出ていたら、以下を実行

# 監査ログを確認
$ cat /var/log/audit/audit.log | grep nginx | audit2allow -m nginx
# ポリシーファイルを作成
$ cat /var/log/audit/audit.log | audit2allow -M nginx
# ポリシーファイルを適用
$ semodule -i nginx.pp

これで、http://にアクセスして、
Djangoの画面が表示されて、django-adminの画面が操作できればOK

おわりに

とりあえず、ローカルとインスタンス上の環境が作れたので、
色々することはできそう(´ω｀)

SSL対応、権限周りなど、本番としては足りないところがあるので、
そのあたりは他の記事を参照ください〜ヽ(=´▽`=)ﾉ

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイトさま

ニュースをランダムにガチャで読める「ガチャっとニュース」を4時間でリリースした話【個人開発】

2018-12-01T14:27:52+09:00

じぇいです！こんにちは。

ニュースをガチャすることで、ニュースをランダムに読める「ガチャっとニュース」をリリースしました！

https://gachat-news.herokuapp.com/

【拡散希望】ニュースをランダムにガチャして見れる「ガチャっとニュース」をリリースしました㊗️情報の偏りが問題になるこの世の中でランダムにニュースを見れたなら、偏りも減るのでは？と思って作りました楽しめるようにガチャ風にニュースが出るようになってますhttps://t.co/95AlF0d9Tr
— じぇい👨‍💻 (@jyouj__) November 29, 2018

ぜひいろんな人に触ってもらいたいのでリツイートしてもらえると泣いて喜びます:stuck_out_tongue_closed_eyes:

作った背景

上のツイートにも書いてあるように、情報の偏りを無くそうと思いました。ただランダムにニュースを閲覧できるようにしても面白くないので、ガチャというエンターテイメント性を入れました。

ガチャしてニュースを読むという新たなアプローチ方法です！

製作期間

水曜日3時間、木曜日1時間の計4時間で完成させました。

水曜日にメインの機能であるNewsAPIでニュースをランダムで取得するコードや大まかなサイトのレイアウトを作成しました。

木曜日はTwiiterでシェアされる画像の設定や細かいレイアウトを作成しました。

ガチャっとニュースってどんなサービス？

「ガチャっと」というボタンを押すとランダムでニュースが一つガチャされます。

1ページで完結している、シンプルなサービスです。

もちろんスマホ対応してます。

使ったもの

Django
- 使い慣れているから、サクッとできる
- Flaskとかでもよかったかも
Bulma
- 1ページだけだけどレイアウトはそれなりには整えたかった
- サクッとCSS適用できて便利
- モーダルウィンドウやボタン、画像サイズの部分で活躍しました
jQuery
- モーダルウィンドウの表示の部分で活用しました
- 小さな機能ならjQueryで十分
News API
- 国別、カテゴリー別など様々なニュースを取得できるAPI
- newsapi-pythonというパッケージがあってよかった
- 最新のニュースを常に取得できるのもいい！

NewsAPIについては僕自身が使い方をブログに記事書いてます(笑)

［Django］NewsAPIを使ってニュースサイトを作ってみる
 ［Django］NewsAPIを使って色々なニュースを取り出してみよう

Github
- 使わない選択肢がなかった
Heroku
- とりあえず無料のを使った
- サーバーの知識なくてもOKなのありがたい

最後に

今回で二つ目のサービスのリリースとなります。個人で色々開発する上のメリットは思い立ったらすぐ形にできたり、自分の気分の乗るときに作れるところだと思います。

まだまだ開発するぞ！

Qiitaにいいねくれたら舞って喜びます:sunglasses:

お読みいただきありがとうございました！

【個人開発】リレー式小説投稿サービス"Hundread"をリリースしました！

2018-11-03T22:40:22+09:00

じぇい(@jyouj__)です！

一週間ちょっとでリレー式小説投稿サービス"Hundread(ハンドレッド)"をリリースしました！

このサービスはもともと6月に行われたStartup Weekend Okayamaにて発表し、優勝したものです。

その後、別のサービスの開発で全然作れていなかったのですが、急に作りたくなってきてデザインを考え直し、急遽一週間ちょっとで作りリリースすることができました！

リレー式小説サービス"Hundread"をリリースしました！！Hundreadは自分が投稿した小説をツイッターにシェアして続きを他の人に書いてもらうことができます！もちろん、他の人の小説の続きを書くこともできちゃいます！ぜひ、使って拡散してください！https://t.co/qEbytWUukM
— じぇい👨‍💻Punizm作ってます (@jyouj__) October 31, 2018

個人開発ではあるものの、様々な方にDMでわからないことを教えていただき無事リリースしました。本当にありがとうございます。

どんなサービスなの？

Hundreadは

小説を投稿してツイッターで共有するとそのツイートを見た誰かがその続きを書いてくれる小説投稿サービスです。

もちろん他のユーザーの小説や文章の続きも書くことができます。

ログイン画面

トップページ

このサービスは質問箱のようなサービスのようにツイッターでのコミュニケーションの方法の一つになればと思っています。

次から次に小説をリレーで回すことでこの人はこんなことを書くのか！という新たな気づきを、新しいコミュニケーションの形を、楽しんでみてください！

モバイルにも対応

使ったもの

・Django
　Pythonのフレームワーク。一番なれてる。

・Bulma
　CSSのフレームワーク。モバイル対応も簡単でデザインもいい感じにできるので、これに頼りきりでした。

・Twitter API
　Twitterアカウントでログインできるようにしました。

・fontawesome
　とにかく便利

・Github
　使うよね:sunglasses:

・Heroku
　インフラ関連の知識がないので助かりました。hobbyプランにすると独自ドメインでもSSLになるのでとにかくありがたい。ただ、staticfileの扱いでハマってしまった。。。

助けられた記事

https://torina.top/detail/337/
　DetailViewとCreateViewの組み合わせを参考にさせていただきました。

https://qiita.com/okoppe8/items/76cdb202eb15aab566d1
　Herokuでのデプロイの時に参考にさせていただきました。

https://blog.mktia.com/how-to-use-environment-variables-on-heroku/
　Herokuで環境変数の設定をする際に参考にさせていただきました。

https://qiita.com/kenjikatooo/items/07c3d911210a4ca96781
　Herokuで独自ドメインを設定する際に参考にさせていただきました。

また、困っているDjango関連の質問をDjango-jaというグループにして、助けてもらいました。

最後に

僕は新しい文化を創造することを常に追求してます。

是非ともHundreadを遊んで、拡散してください！

ちなみに......

Hundreadというサービス名は

手(Hund)で書き、読む(read)

と

100の英単語であるHundred

をかけた造語です笑

お読みいただきありがとうございます！

Angular2アプリを全部無料で公開してみる-Django編

2016-11-26T02:25:46+09:00

Angular2で開発したアプリケーションを完全に無料で公開できる方法を考えてみた。

要件

上から順に重要度が高い。

Angular2
Angular2のサーバーサイドレンダリング対応
そこそこのDB容量
なるべく無料枠が大きいところ
開発しやすさ

考察

まず、Angular2をサーバーサイドレンダリングしようと思うと、node.jsでサーバーを動作させることが必要となる。
これは色々調べてみると、恐らく速度や無料枠を比較するとherokuがベストかと思う。
2016年現在は無料で停止なしで稼働できる。

上記は確定っぽいのでDB側を考えてみる。

容量の無料枠で一番大きいのは恐らくAmazon DynamoDBの25GB。

様々な言語のSDKがあるのでどのサーバーでも行けると思う。
Angular2からも直接行けるが接続情報が筒抜けになるし、直接DB接続だと複数の処理を1リクエストにまとめたりができないので、
費用が発生する可能性が高くなる。
やはり一度サーバーを経由したいところ。

Angular2 → Amazon lambda → Amazon DynamoDB

というのもなかなか良さそう。
ただし認証によってアクセスできる処理をきっちり整理する必要がある。
こちらはまた今後確認してみたい。

（追記）
調べてみたらcognito + lambda + DynamoDBを使用する必要がありそう。
ちょっとこれはめんどそうだしcognitoは未認証ユーザーという概念があるが、
もしそれも課金計算に含めるなら費用が発生する可能性は高くなりそう。

構成

今回は総合的なバランスを考えて下記を試してみた。

Angular2 → GAE (Python + Django) + Datastore

直接APIサーバーにアクセスするだけなのでサーバーを分けない場合とアクセス時間が変わらない。
Datastoreが1GB(?)無料なのでそこそこ。
Djangaeを使うとDjangoのモデルそのままでDatastoreにアクセスできるので、
この環境用の特別なプログラムで開発をする必要がない。
pythonはpython, python3, pip, pip3と分けてインストールされたり切り替えたりができたりするので、
python2しか使えないGAEでもローカルの開発環境を汚さずに開発しやすい。
pythonはリモートで本番のDjango用のコマンドを実行できるのでマイグレーションなども簡単。

Angular2側

GitHub - angular/universal-starter: Angular 2 Universal starter kit by @AngularClass

ng newしないで、上記をそのままcloneして改造していくのがいい。
デフォルトのコマンドでherokuでそのまま動くし、
Visual Studio Codeでもデバッグできる。

必要であればangular-cliで新規作成したプロジェクトから必要なファイルだけコピーしてくると良いと思う。

GAE側

GitHub - ottoyiu/django-cors-headers: Django app for handling the server headers required for Cross-Origin Resource Sharing (CORS)

別サーバーなのでこれをいれておけば動く。
いちいち全部のResponseにヘッダーを指定する必要はない。

接続や設定などはGAEの特別な仕様などがあり最初はつまずくが、
解決すればあとは普通と同じように開発ができる。

チュートリアルで操作させられるが、どうもGithubと連携できる開発環境みたいなのもあるようだ。

まとめ

たいしてアクセスやデータ量の無いアプリケーションは、こんな感じで無料でなるべく開発しやすい環境を模索すると面白そうだ。

APIサーバー側は、さくらレンタルなど安いサーバーを別途持っていればそれをそのまま使うのも簡単だ。

Twitterを作る第5回フォロー

2016-08-09T01:11:30+09:00

引き続き他のユーザーをフォローする部分を進める。

モデル

class Follow(models.Model):
    """フォロー"""
    user = models.ForeignKey(User, verbose_name='ユーザー', related_name='follows')
    target = models.ForeignKey(User, verbose_name='フォローユーザー', related_name='followers')
    created = models.DateTimeField(auto_now_add=True)

モデル定義はこれだけ。
view側ではこれの一覧をjsonで返したり、
あとは追加削除するだけで特筆することもない。

フォローボタン

ボタンはコンポーネント化し、画面のどこに配置しても同じように動作するようにする。
今回も実際に画面右のおすすめユーザーの一覧に表示したものと、
そこのユーザー名をクリックして他ユーザーのプロフィール画面に表示されるものは同じもの。

userでターゲットユーザーを指定。
followsは現在のフォロー一覧配列で、
ボタンを押して追加、削除するとこの配列から新たな配列を作り、
onFollowsUpdatedコールバックを呼び出して親にsetStateしてもらうことで適切に画面上が更新される。

自分のタイムラインの修正

フォロー機能ができたので、自分のタイムラインにはフォローしている人の投稿も表示する必要がある。
取得するPostのfilterをユーザー指定からin指定に変更するだけ。

今後

検索(MeCabで解析したワードやハッシュタグで検索）
ユーザープロフィールの変更
非ログイン状態でもアクセスできる箇所の調整
OAuth導入によるAPIの作成
切りが良いので一旦休載

Dumitter

https://alphabrend.sakura.ne.jp/dumitter/

Bash on Ubuntu on WindowsでDjango

2016-08-05T19:44:47+09:00

Windows10のアニバーサリーアップデートにて
Bash on Ubuntu on Windowsが使用できるようになった。
結構色々普通にちゃんと動くみたいなので、Djangoを動かしてみた。

python

最初からpython2もpython3も入っているらしい。

# python3 --version
Python 3.4.3

pip

pip3を入れる。

# apt-get install python3-pip

virtualenv

virtualenvをいれる。

# pip3 install virtualenv

仮想環境作成

# virtualenv test
# cd test
# source bin/activate
(test) pip install Django=1.10
(test) django-admin startproject testprj
(test) cd testprj
(test) ./manage.py startapp testapp
(test) ./manage.py runserver

これで表示されたURLにブラウザでアクセスすると普通に表示される。
Bash on Ubuntu on Windowsすごい。

Twitterを作る第3回投稿

2016-08-02T01:10:31+09:00

投稿機能の作成を進めた。実際の画面は下記のような感じでTwitterと構成は同じような形にしてある。
各パーツはmaterial-ui。すごく便利。

投稿ボタンを押すと下記のようなウィンドウが出てくる。

モデルの作成

モデルは下記のような感じになった。

class Post(models.Model):
    """投稿"""
    user = models.ForeignKey(User, verbose_name='ユーザー', related_name='posts')
    repost = models.ForeignKey(
        "Post",
        verbose_name='リポスト',
        related_name='reposts',
        null=True
    )
    citing = models.ForeignKey(
        "Post",
        verbose_name='引用',
        related_name='citings',
        null=True
    )
    thread = models.ForeignKey(
        "Post",
        verbose_name='コメント先',
        related_name='comments',
        null=True
    )
    body = models.CharField('内容', max_length=140)
    image = models.ImageField(upload_to='posts/')
    created = models.DateTimeField(auto_now_add=True)
    modified = models.DateTimeField(auto_now=True)
    deleted = models.BooleanField('削除済', default=False)

    def __str__(self):
        if len(self.body) > 10:
            return str(self.body)[:10] + '...'
        return self.body


class PostWord(models.Model):
    """単語"""
    post = models.ForeignKey(Post, verbose_name='投稿', related_name='post_words')
    word = models.CharField('単語', max_length=64)
    created = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.word


class PostTag(models.Model):
    """タグ"""
    post = models.ForeignKey(Post, verbose_name='投稿', related_name='post_tags')
    name = models.CharField('タグ', max_length=64)
    created = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

投稿フォームから投稿が行われると、Postとして保存される。
この時にハッシュタグは正規表現で解析してPostTagとして保存する。

あとはPostWordに投稿で使用されている単語などを保存してトレンド等に使う必要があると思うが、
MeCabの準備などが必要だったりして面倒なのでとりあえず後回し。
まずは大まかな流れを優先する。

投稿一覧

jsonで読み込んでsetStateするだけで勝手に表示してくれる。
各投稿はmaterial-uiのcardそのまま。

下にスクロールすると次の50件を読み込んで表示。
本家はガンガンスクロールできるのでレスポンスの良さや調整の努力がうかがえる。

jsonについて、エンティティから自動で変換も試したが、
リレーション部分を含ませることができなかったのと、
よくよく考えると最終的には他人の投稿も含まれるのでセキュリティな問題を考えて、
json用の辞書インスタンスの作成は手動で代入して作ることにした。

投稿

投稿すると現在の一覧よりも最新の投稿がjsonで返ってくるので既存の配列にマージするだけ。

まとめ

次はReactのComponentの構成考察や、あとはフォロー機能を作らないと何も進まなそうだ。
djangoのview側はデータ登録したり取得したりしてjsonを返すだけで何も特筆することがない。

Dumitter

https://alphabrend.sakura.ne.jp/dumitter/

Twitterを作る第4回コンポーネント構成考察

Twitterを作る第2回認証

2016-07-24T21:26:15+09:00

まずはユーザー登録。これがなければ何も話が進まない。
ひとまず下記の第3回までを見てさくっと動作確認とユーザーテーブル作成まで行う。

Python Django入門 (1)

Python Django入門 (3)

ログイン前トップページ

material-uiでさくっと作成。Twitterのトップ画面を見ると今回必要そうなコンテンツはこれだけ。
アカウント作成でsignupページヘ。

ユーザー登録ページ

こちらも同様にぱぱっと作成。
このページはユーザー登録とログインのサーバーへの通信が必要なのだが、
そのままだとCSRFでエラーになるのでensure_csrf_cookieを設定している。
また、後述するconfigライブラリを作成している。

ちなみにログインを押すとモーダルが出てくる。

configライブラリ

全体の共通機能として下記のようなファイルを作成した。

app/lib/config.js

const config = {
    defaultHeaders: {
        "X-CSRFToken": getCookie('csrftoken'),
        "Accept": "application/json",
    },
    url: (url) => {
        if (url.charAt(0) === '/') {
            url = url.substr(1);
        }
        return '/dumitter/' + url;
    },
}

module.exports = config;

現在さくらサーバーのそのままのURL(SSL)なので、
今後独自ドメインを使う場合全箇所の修正は大変になるためurl補正メソッドを作成。
(最初から独自ドメインなら絶対パスで良いのだが)

また、ajaxの際にCSRFのトークンを送信するため、共通のデフォルトヘッダを定義している。
(getCookieは検索すれば出てくる)

バリデーション & 登録処理

postするとjsonを返却するアクション。
resultがtrueなら成功でログイン済みなのでトップページへリダイレクト。
falseならjsonに各フィールド名のエラーメッセージが入っているのでmaterial-uiのTextFieldのerrorTextにセット。

バリデーションの処理は全部python側でやっている。
js側でもいいかと思ったのだが、パスワードの細かいバリデーションがdjango側に入っているのでそちらに統一した。
(設定ファイルで細かいパスワードのバリデーション方法を指定することができる）

本当はもっとちゃんとした書き方がありそうだが、この処理はここだけだしいいかと思いバリデーションもベタ書き。

from django.http.response import JsonResponse
from django.contrib.auth import authenticate, login as authLogin
from django.contrib.auth.models import User
from django.core.validators import validate_email
from django.contrib.auth.password_validation import validate_password
from django.db import IntegrityError
from django.core.exceptions import ValidationError
import re

def create(request):
    errors = {}

    if re.match(r'^[\da-zA-Z_]+$', request.POST['name']) is None:
        errors['name'] = '半角英数字で入力して下さい。'

    try:
        validate_email(request.POST['email'])
    except ValidationError as e:
        errors['email'] = e.messages

    try:
        validate_password(request.POST['password'])
    except ValidationError as e:
        errors['password'] = e.messages

    if len(errors) == 0:
        try:
            user = User.objects.create_user(
                username=request.POST['name'],
                email=request.POST['email'],
            )
        except IntegrityError as e:
            if 'email' in str(e):
                errors['email'] = 'そのメールアドレスは既に使用されています。'
            elif 'name' in str(e):
                errors['name'] = 'そのユーザー名は既に使用されています。'

    if len(errors) != 0:
        errors['result'] = False
        return JsonResponse(errors)

    user.set_password(request.POST['password'])
    user.save()

    return login(request)


def login(request):
    authed = authenticate(
        username=request.POST['name'],
        password=request.POST['password'],
    )
    result = {'result': True}

    if authed is not None:
        authLogin(request, authed)
    else:
        result['result'] = False

    return JsonResponse(result)

新規登録後は自動的にログインするが、通常のログインのプログラムと全く同じだったので関数を流用している。

ログイン後はトップページにリダイレクトするが、
ここではログインの場合別のテンプレートを表示するようにしている。

def index(request):
    if request.user.is_authenticated():
        template = 'main.html'
    else:
        template = 'index.html'
    return render(request, template)

React側

多分邪道かも知れないが下記のようなことを行っている。

const element = document.getElementById('auth-regist');
if (element != undefined) {
    ReactDOM.render(, element);
}

認証側はこれ以上ページを作るつもりはないので適当。
認証後はルーティングを使いたい。

これで認証が完成したので次は投稿を作っていく予定。

https://alphabrend.sakura.ne.jp/dumitter/

Twitterを作る第3回投稿

Twitterを作る第1回概要

2016-07-24T07:47:26+09:00

これからTwitterを作って行くところを少しずつ公開していきたいと思う。
下記のような環境で作成していく。

Django

Djangoはpythonのフレームワーク。
慣れているCakePHPの方が早いが面白くないのでDjangoを練習しつつ作成。
(python3.5 + Django1.9.7)

ちなみにtwitterはRuby on RailsからJavaVMに移行していっている様で、pythonとは何の関係もなさそう。
ただ、Instagramはdjangoで作成されているらしい。
また、pythonはGoogleでよく利用されているし、良い言語であることは間違いなさそう。

実際に、使ってみてまだちょっとしか経っていないがかなり好きになってきている。
ひとまず現状の理由としては下記のようなものがあげられる。

管理画面が勝手に作られる

adminページがあり、DBやモデルの作成が進んで行くと勝手に管理画面が作られていく。
仕様の細かい案件等では使いづらいかもしれないが、
こうやって一人で勝手に作っていったり要件のゆるい案件では非常に役立つし無駄な工数削減になる。

情報が見つかりやすい

公式のドキュメントにはわりと欲しい情報が載っているし、
検索すればそこそこすぐに情報が見つかりハマりにくい気がする。
もしかすると英語前提かも知れないがプログラムなのであまり関係ないだろう。

進化してきている

何かやりたいことがある時、古い情報が見つかると、「面倒だな…」と思うことがあるが、
最新の情報をよくよく見ていると結構洗練されていたりする。
最新のWEB開発が好きな人は結構ハマるのではないかと思う。

面倒な部分

慣れていないと環境構築が結構面倒かもしれない。
今のところWindowsでMySQLに接続する方法が分かっていなかったりする。
（サーバーにあげて動作確認している）

React + webpack + superagent + material-ui

Twitterは基本的にSPAっぽいので、基本的にjavascriptで作成し、サーバー側はAPIとして動かしていく必要がある。
そうなるとReactかAngular2になってくると思うが、今回はちょっと型管理が面倒なのでReactを選んだ。

サーバーとの通信はsuperagentを利用し、webpackでビルドする。
とりあえず、webpackで1ファイルになってくれるのはやはり非常に楽。
多くのストレスを軽減してくれる。

UIはmaterial-uiを使用する。
よく出来ていて、今回の様なアプリケーションの場合はすごく使いやすい。

アプリ名

Djangoで作成するdummyのtwitterなのでDumitterとする。

方針

可能な限り似せる。ただしすぐできる範囲。面倒なことは一切やらない。
（ほぼmaterial-uiそのまま）

あと記事の方針としてはなるべく進めていく状況や難しい箇所の説明を入れたいので、
他で調べれば出てくるような細かい技術は解説しない予定。
あくまで娯楽であり教材ではない。

公開場所

https://alphabrend.sakura.ne.jp/dumitter/
（さくらレンタルで無理やり動かしてるので非常に重いです）

次回から実際に開発状況を公開していく予定。

Twitterを作る第2回認証

さくらのレンタルスタンダードにdjangoを入れて公開

2016-07-19T04:14:38+09:00

さくらの共用レンタルのスタンダードでのdjango公開方法のメモ。
環境としては下記の通り。

python3.5
django1.9.7
virtualenv
MySQL接続

python3.5のインストール

ネットで調べてインストール。
.cshrcを見ると下記を追記していた。

pathにpython/binフォルダの追加
setenv PTYHON にpython/libフォルダの指定

仮想環境

作成（非公開フォルダで良い)と切り替え

virtualenv myenv
cd myenv
source bin/activate.csh

抜けるときはdeactivate

django & MySQL関連のインストール

pip install django==1.9.7
pip install PyMySQL
pip install mysqlclient

manage.pyに下記追加

import pymysql
pymysql.install_as_MySQLdb()

あとはcreatesuperuser等。
詳しくは分からないがPyMySQLとmysqlclient両方を追加しないと上手くいかなかった。

公開

公開フォルダにはdjango.cgiを設置するのだが、python3で動作するものを使う必要があるので下記を使用。

django-cgi/django-python3.cgi at master · chibiegg/django-cgi · GitHub

中身は下記を設定。
1行名は仮想環境のbin/pythonのパス。
sys.path.appendをしろ、というところに下記を追記。

sys.path.append('仮想環境パス/lib/python3.5/site-packages')
sys.path.append("仮想環境パス/プロジェクト名")

末尾あたりに

os.environ['DJANGO_SETTINGS_MODULE'] = 'プロジェクト名.settings'

あとは.htaccessも設置。
(RewriteBaseは適宜指定)

RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ django.cgi/$1 [QSA,L]

とりあえず上記でアクセスできるようになるのだが、
adminにアクセスしてみるとcss等が正しく反映されていない。

ローカル環境のrunserverと違い、staticが正しく表示されないので、
collectstaticを利用しファイルを公開フォルダにコピーする必要がある。
まずsettings.pyに下記を設定。(バーチャルホストを使わない例)

STATIC_ROOT = '/home/username/www/myapp/static'
STATIC_URL = '/myapp/static/'

この状態で下記を実行でコピーされる。

python manage.py collectstatic

これで公開までの一通りの準備が完了。
(この先の諸々も問題なく動作するかは不明）

「Django」の記事 - Crieit

匿名掲示板作ってみた

Djangoで開発を始める時にやっておくと良いこと

①app/models.pyに記述（appはアプリケーションディレクトリ名が入る）

②config/settings.pyにAUTH_USER_MODELを設定（configはプロジェクト作成時に作られる設定ディレクトリの名前）

django-import-exportで管理画面にCSVエクスポート機能を追加する

Oracle無料ティアでDjango+Nginx+uWSGIでサーバを立ててみる

ニュースをランダムにガチャで読める「ガチャっとニュース」を4時間でリリースした話【個人開発】

【個人開発】リレー式小説投稿サービス"Hundread"をリリースしました！

Angular2アプリを全部無料で公開してみる-Django編

Twitterを作る 第5回 フォロー

Bash on Ubuntu on WindowsでDjango

Twitterを作る 第3回 投稿

Twitterを作る 第2回 認証

Twitterを作る 第1回 概要

さくらのレンタルスタンダードにdjangoを入れて公開

①`app/models.py`に記述（`app`はアプリケーションディレクトリ名が入る）

②`config/settings.py`に`AUTH_USER_MODEL`を設定（`config`はプロジェクト作成時に作られる設定ディレクトリの名前）

Twitterを作る第5回フォロー

Twitterを作る第3回投稿

Twitterを作る第2回認証

Twitterを作る第1回概要