kenji7157 / kk-blog

ブログサイトのリポジトリ

モノレポ環境の構築

参考記事：https://qiita.com/kyasbal_1994/items/e9c5a918f4d2ddf10a28

• kk-blog直下で以下を実行

npm init
npm install lerna --save-dev

• kk-blog直下で以下を実行
  • packagesフォルダの作成

npx lerna init

ブログサイトのディレクトリ作成

• kk-blog/packages直下で以下を実行

create-nuxt-app apps 

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in apps
? Project name: kk-nuxt-blog
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier, Lint staged files
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

• apps直下で起動を確認

npm run dev

※モノレポの作りにしているのでapps配下のgit管理は上位ディレクトリに合わせるよう修正

appsディレクトリで

• nuxt-property-decoratorの導入
  • デコレータを利用してコンポーネントを記述する

npm install --save nuxt-property-decorator

WF

• FigamaでWFを作成 https://www.figma.com/file/VCOPYhlLWG18MMXkbGgUiU/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%B5%E3%82%A4%E3%83%88?node-id=6%3A2

vuexにて vuex-module-decoratorsの導入

参考記事：https://qiita.com/suzukenz/items/0b5c0eb5196646599377

アイキャッチ画像について

• フォントはTimes
• 大きさは140pt
• templateをつかう

kk-blog's Issues

OGP機能の追加

背景

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

要求事項

• OGP機能を実装する

仕様

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

備考

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

参考記事

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

関連記事の導線を作成する

背景

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

要求事項

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

仕様

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

備考

• 優先度は低い

バンドルサイズの調査

背景

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

要求事項

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

対応結果

• ファイルサイズ

対応前	対応後
529.93kb	112.91kb

その他

記事検索機能の追加

背景

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

要求事項

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

仕様

• 空白でOR検索が可能

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

• 検索処理の内容

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

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

備考

本番環境で読み込みが遅い

背景

• 本番環境では、サイトの動作が重い
• 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

npm run generateの実行時間を短縮する

背景

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

要求事項

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

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

仕様

その他

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

事象

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

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

恒久対応

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

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

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

twitterシェア機能の追加

背景

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

要求事項

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

仕様

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

備考

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