kenji7157 / kk-blog Goto Github PK

事象

日本語のカテゴリページが表示されない

http://localhost:3000/archive/category/%E9%9B%91%E5%A4%9A%E3%81%AA%E6%8A%80%E8%A1%93%E3%83%8D%E3%82%BF/page/1

コンソールに出力されるエラー

Uncaught (in promise) TypeError: Cannot read property 'category' of undefined
    at value (5bbe263.js:1)
    at P (d519b26.js:2)
    at d519b26.js:2

調査内容

• カテゴリ名を英語表記にするとエラーは出なくなる
• ContentList.vueをレンダリング対象から外しても同様の事象が発生する
• リンクの日本語部分が_categoryに該当しているが実際はURLエンコードされた値のためバグがでているっぽい

以下とかが関係していそう

• URLエンコード
  • 日本語をURL用の文字列に変換する
• URLデコード
  • エンコード文字列(%E31%75..)を日本語に変換する

原因

• URLとなるカテゴリのパスが日本語表記の場合にデコードされたパスに遷移しようとしているため本事象が発生しているっぽい

対応方法

暫定対応

• microCMSの方で、日本語のカテゴリの場合はカンマ区切りで英語のエイリアスを付加する
• 付加した値を使ってパス周りはアプリで操作する

恒久対応

• 日本語のパスでも遷移できるようにする

背景

• 本番環境では、サイトの動作が重い
• pagespeedによるスコア：17点（修正前）
• ダイナミックインポート/バンドルの分割後は：24点
• 画像読み込みの遅延化対応後もあまり変わらない(同じ画像をつかっているため)

https://developers.google.com/speed/pagespeed/insights/?hl=ja

要求事項

• 以下の記事で改善するか確認する
  https://qiita.com/mumuMun/items/187da43df5cb9101b700
  https://qiita.com/harhogefoo/items/8323eebcbdb36e3ba09a

仕様

• TBW

その他

generateの改善記事
https://b.0218.jp/20190221012117.html

vuetifyの改善
https://qiita.com/hareku/items/d9f92c96697163356bd3

背景

• バンドルされたファイルサイズが大きいと初期読込時間が長くなる

要求事項

• バンドルファイルのサイズを確認する
• 不要なモジュールをバンドルしないよう修正する

対応結果

• ファイルサイズ

その他

背景

• 記事ページにtwitterのシェア機能が存在していないため、集客しづらい

要求事項

• 記事ページにtwitterのシェア機能を実装する

仕様

• 記事ページのカテゴリの下にシェアボタンを設置
• 以下のテキスト内容を呟くwindowを表示する
  • [タイトル] [URL] [ハッシュタグ（カテゴリ）] [via @kenji7157 ]

備考

• 参考記事
  https://qiita.com/coconeko/items/dcd3a004578e02f63da5

背景

• twitterや他のサイトでリンクが共有された場合にアイキャッチとなる画像が現状表示されない

要求事項

• OGP機能を実装する

仕様

• サイト名/記事名/概要/画像を出力する

備考

• 画像は絶対パスでないと動作しないっぽい

参考記事

• https://qiita.com/TK-C/items/317a02620fe3f5b92673

背景

• 記事ページから別の記事に遷移する際に一覧に戻る必要があり、導線がよくない

要求事項

• 記事ページの最後に関連記事の導線を作成する

仕様

• はてなブログ/qiitaなどのサイトのUIを参考に仕様を決める

備考

• 優先度は低い

記事ページに関連記事の導線を作成する

背景

• サイドバーに検索窓が実装されているが動作しない

要求事項

• 記事を固定のワードで検索できるようにする

仕様

• 空白でOR検索が可能

• 検索後は記事一覧ページに検索結果を表示する

• 検索処理の内容

  • タイトル or 概要 or 本文 で対象となる記事を抽出
  • 検索結果ページに遷移
  • 抽出記事を作成日順に表示

• マッチした文言(タイトル/概要)はハイライトされる

備考

背景

• npm run generateの実行時間が長くなってきているので短縮したい

要求事項

• npm run generateの実行時間が長くなってきているので短縮する

generateの改善記事
https://b.0218.jp/20190221012117.html

仕様

その他