dala00の100DaysOfCode

2019-01-10に作成

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

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

Day22

puppeteerサーバーに不正アクセスが大量に来てクラッシュするので特定のURLでしか動作しないように調整した。

function isValidPath(path) {
  if (!process.env.URL_FILTER || process.env.URL_FILTER == '') {
    return true
  }
  const validUrls = process.env.URL_FILTER.split(/,/)
  return (
    validUrls.find(validUrl => path.substr(0, validUrl.length) === validUrl) !==
    undefined
  )
}

Day21

ボード詳細ページにブログみたいな月毎の集計を追加した。全然知らなかったけどLaravelのCacheには(モデルにもついてるみたい)remember的なメソッドがあってキャッシュがなければクロージャを実行して値取得、みたいな便利なことができた。

        $monthSummary = Cache::remember($key, $minutes, function () use ($board) {
            return $board->getMonthSummary();
        });

分を指定しないrememberForeverもある。


Day20

  • puppeteerでWebページを画像にしてくれるサーバーを作った
  • CrieitのOGPにそれをつけてコードを表示できるようにした

puppeteerはこんな感じで最初にブラウザだけ起動しておいてExpressに渡しておく。(リクエストが来た時はその起動されたブラウザでページを開くだけなので速い…はず)これができないのでfunctions系は断念した。

  const options = {
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-gpu'],
    executablePath: '/usr/bin/google-chrome'
  }
  const browser = await puppeteer
    .launch(options)
    .catch(error => console.error(error))
  app.set('browser', browser)

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

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