Twitterを作る 第3回 投稿

投稿機能の作成を進めた。実際の画面は下記のような感じで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回 コンポーネント構成考察