dala00の100DaysOfCode

2019-01-10に作成

頑張って100日間コードを書き続けます。

所有者限定モードのためこのボードには投稿できません ボードとは?

Day19

  • 記事詳細ページの無駄な処理を改善した
  • ボードやボード内投稿にツイートやCodePenを埋め込めるようにした
  • 不具合を一つ修正した

以前MarkdownでグラフやUMLを使えるようにしていたが、無意味なのでその機能を削除したことでフロント側でHTMLに変換する必要がなくなった。

そのため全部SSR側で変換するようにし、フロント側で無駄に2重になっていた処理を全部削除した。

アクセス数の追加だけはレガシーなクローラのアクセスなどの関係でSSR側でカウントするわけにはいかないので、そのあたりの必要な部分だけそれ用のコンポーネントを作ってあれこれ処理するようにした。


Day18
記事のフロント側での描画処理を削除した。明日デプロイする。


Day17

  • 不具合が2つもみつかったので直した…。
  • 記事詳細画面のフロント側の処理を削除できることがわかったのでそれに向けて対応中。全部SSR側に移動中。

Day16
スマホ用のグローバルナビを付けた。最近のスマホは画面が大きいから下部に全てを寄せるような感じ。徐々に全体的に改善していきたい。


Day15

  • プロフィールに連載一覧表示を追加
  • ボード内投稿のコメント通知機能を作成
  • ボード一覧の表示を調整中

無限スクロールコンポーネントを作成した。HTMLをそのまま追加する場合はinnerHTMLを使うんじゃなくて下記でいけるらしい。

        container.insertAdjacentHTML('beforeend', data.html)

Day14

最低限の連載機能を完成させてリリースしました。

Magazine.phpのメソッドで下記のようにして記事を取得しています。(仕様的に単純なhasManyではないため)

    public function getPostsQuery()
    {
        $postIds = PostTag::where('user_id', $this->user_id)
            ->where('tag_id', $this->tag_id)
            ->get()
            ->pluck('post_id');
        return Post::with('tags')
            ->whereIn('id', $postIds);
    }

    public function getPosts()
    {
        return $this->getPostsQuery()
            ->orderBy('created_at')
            ->get();
    }

Day13

  • 記事一覧画面でも自分の記事のアクセス数を表示するようにした
  • 連載機能の詳細ページ作成

Day12

  • タグ設定可能なボードに、ブログのカテゴリ一覧のようなタグ一覧を追加した
  • 連載機能を作成中

下記は連載機能のマイグレーション。既存のデータを使うだけにして、なるべく簡単に設定、開発できるようにしている。

    $table->increments('id');
    $table->unsignedInteger('user_id')->index();
    $table->unsignedInteger('tag_id')->index();
    $table->string('name')->nullable();
    $table->mediumText('body')->nullable();
    $table->timestamps();

bodyは単なるtextareaかMarkdownエディタか悩み中…。


Day11

ボードページにブログのカテゴリ一覧みたいなタグ一覧を作成中。細かいデータ構成が気になって慎重にやってたらあまり進まず…。


Day10

  • ツイート文の調整
  • iPhoneの場合エディタの入力時に問題があったので修正した。

Vueのクラスも普通に継承できるっぽかった。記事書いときたいけどもう遅いし明日にしとこう…。


Day9

  • ボード本文内のマージンをちょっと調整
  • グローバルナビに自分のボードへのリンクを表示するようにした。
      <a class="dropdown-item" href="/drafts">下書き一覧</a>
      <div class="dropdown-divider"></div>
      <template v-if="boards.length > 0">
        <a v-for="board in boards" :key="board.unique_id" class="dropdown-item" :href="`/boards/${board.unique_id}`">
          {{ board.name }}
        </a>
        <div class="dropdown-divider"></div>
      </template>
      <a class="dropdown-item" href="/users/edit">設定</a>

Day8

  • 構造化マークアップを追加した
  • ボード一覧を作った
  • 本文文字数カウントを追加した

Day7

  • ボード投稿にコメント機能を追加した。
  • 広告の位置や文言などを調整

コメント投稿時と削除時に、下記のようなコードでコメント数を集計して保存している。こうすることでコメント数を表示する時に集計しなくて良いので全体として負荷が小さくなる。

    public static function updateCommentCount($id)
    {
        $count = BoardComment::where('board_post_id', $id)->count();

        DB::table('board_posts')
            ->where('id', $id)
            ->update([
                'comment_count' => $count,
            ]);
    }

ちなみにDB::tableを使っているのは該当データのタイムスタンプを更新しないようにするため。


Day6

  • 細かいレスポンシブ対応や文言変更
  • ボードの投稿にコメント付ける機能は大体できた。あとはコメント数の集計とか付けたらリリースする。

削除されたコメントはこんな感じで置き換えてる。同じIDのデータは内部で共通化されて色んな所で使い回されてるっぽいので、こんな感じでnewしたものを使わないと連動して色々おかしなことになるため。

    public function getCommentsForJson($viewUserId)
    {
        return $this->boardComments
            ->map(function ($comment) use ($viewUserId) {
                if ($comment->deleted_at) {
                    $deletedComment = new BoardComment;
                    $deletedComment->id = $comment->id;
                    $deletedComment->deleted_at = $comment->deleted_at;
                    return $deletedComment;
                }

                $comment->isMine = $comment->user_id == $viewUserId;

                return $comment;
            });
    }

Day5
ボードの投稿にコメントできる機能を作成中。記事と同様にレス形式にしようか悩んだが、ボードの場合はコメント自体がレスみたいなものだし、最悪あとで変更もできるからシンプルな一覧形式にすることにした。