[連載] Twitterを作るの投稿 - Crieit

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/

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

2016-08-03T05:38:25+09:00

Reactのコンポーネントの構成にちょっと悩んだのでメモ。

現在ログイン後の画面はreact-routerでルーティングしている。（まだ１画面しかないが）
コンポーネントの構成は下記のようになっている。

Main (routing)
- MainIndex (メインページ)
- MainHeader (共通ヘッダ)
- MainPosts (投稿一覧)
  - MainPost (投稿表示)

一体何を悩んだかというと、MainHeaderは各ページで共通で利用するため、本当は元々下記のようにしていた。

Main (routing)
- MainHeader
- MainIndex (メインページ。ここをroutingで切り替える)
- MainHeader (共通ヘッダ)
- MainPosts (投稿一覧)
  - MainPost (投稿表示)

問題1

ただ、これだと問題があった。
投稿はMainHeader内にネストするフォームで行うが、その際に最新の投稿一覧をMainPosts側に読み込ませたい。
しかしMainHeaderとMainPostsは親子関係で連なっていないため、連携ができない。

問題2

posts(投稿配列)のstateをどこに持たせるかという問題。
なるべくMainで持たせたかった。何故かと言うと、MainHeaderには検索ボックスなどもあるので、
それのハンドリングのコードも記述しなければならないが、
MainHeaderを下の方においてrender時にDOM指定するとそのコードを何度も書かなければならない。

構成の解決

DOMにrefを付けることによって子コンポーネントのメソッドを呼べたりするのでその辺りも考えたが、

Refsの詳細 | React 0.13 日本語リファレンス | js STUDIO

の下の注意を読んで欲しい。

Reactを使用したプログラムの開発経験が乏しいと、アプリケーションで"何かを実現する"のに、すぐにrefsを使いたくなるかもしれません。

このような場合は、stateがコンポーネント階層の何処で所有されるべきなのかを、もう少し注意深く考えてみて下さい。その結果、より高い階層でstateが"所有"されるべきであると判明することがよくあります。

つまり色々なところで使いまわしたい値はなるべく高い階層に置けということだ。
なのでMainIndex、つまりルーティングで切り替えられる各ページのトップに置くことに決めた。

コード重複の解決

上記方法で対応すると、各ページごとに同じコードを書かなければならなくなる。
なのでそれは各ページのRootはMainBaseRouteComponentという継承用クラスを作り、
全てのrouterから呼び出されるページ(MainIndex等）はこれを継承することにした。
これで全部のページでMainHeaderを配置してもいちいちhandlerメソッドを書かなくてよくなった。

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

Twitterを作る第5回フォロー

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でよく利用されているし、良い言語であることは間違いなさそう。

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

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

Twitterを作る第2回認証

[連載] Twitterを作るの投稿 - Crieit

Twitterを作る第5回フォロー

モデル

フォローボタン

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

今後

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

問題1

問題2

構成の解決

コード重複の解決

Twitterを作る第3回投稿

モデルの作成

投稿一覧

投稿

まとめ

Twitterを作る第2回認証

ログイン前トップページ

ユーザー登録ページ

configライブラリ

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

React側

Twitterを作る第1回概要

Django

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

情報が見つかりやすい

進化してきている

面倒な部分

React + webpack + superagent + material-ui

アプリ名

方針

公開場所

[連載] Twitterを作るの投稿 - Crieit

Twitterを作る 第5回 フォロー

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

Twitterを作る 第3回 投稿

Twitterを作る 第2回 認証

Twitterを作る 第1回 概要

Twitterを作る第5回フォロー

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

Twitterを作る第3回投稿

Twitterを作る第2回認証

Twitterを作る第1回概要