2018-10-02に更新

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回 コンポーネント構成考察


view_list [連載] Twitterを作る
第1回 Twitterを作る 第1回 概要
第2回 Twitterを作る 第2回 認証
第3回 Twitterを作る 第3回 投稿
第4回 Twitterを作る 第4回 コンポーネント構成考察
第5回 Twitterを作る 第5回 フォロー

だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント