技術の見た目をアプデしました

PR

旧

新

詳細

• svgをsimple iconsに統一
• スキルマップの情報を前に作ったスキルマップに寄せつつ、内容をバランスよくならうようにしました

ひっかかりポイント

• svg useがNuxt.jsだとうまく動かない…公式いわくuseタグ自体がわりと謎挙動が多いとのことなので、vue-svg-loaderを利用しました。Reactは似たような記事が見つからないので、Reactでは問題ないんだろうか

• ちょっと前に自動デプロイができるようにした。actions、わりとたまってきた。

やり方

• NuxtアプリをSSGでビルドしてCI/CDをお手軽に設定する【GitHub Actions × Firebase Hosting】 - Qiita
• firebase initってもう1回叩いて大丈夫だったので、上記の通りにやって、できたファイルを色々書き換え
• 違う手段もあるみたいだが、このやり方がkeyを隠蔽できて1番楽な印象。他のやり方でもKMS使えばできると思う。
• 最終的な成果ファイルはこんな感じ

まとめ

• いままでびるどしてーでぷろいしてーを手動でやってたので、pushしてご飯食べて戻ってきたら終わってるのは楽
• vercelみたいにデプロイ終わったら連絡くるようにしたいな

概要

• githubのプロフィールをキラキラさせました！！

結果

流れ

• githubが結構前から自己紹介を追加しよう！みたいな文言があるのは気になってた
• GitHubProfileのページを可能な限りキラキラさせる方法というのを見かけたのでチャレンジ。
• といってもグラフがあんまり長いとピンどめしてるリポジトリとか見えなくなっちゃうので、statとトロフィーだけにした。
  • このトロフィーは更新できたら自分に焼肉をおごってあげるために表示してる。噂のひとり焼肉ってやつ、やってみたい。

概要

• コードブロックにハイライトを追加
• aタグ系にスタイル追加

詳細

コードブロックにハイライト追加

• next.js+microcmsでシンタックスハイライトの導入 - Qiitaを参考に、highlight.jsで実装
• びふぉー
  • 
• あふたー
  • 
• 色はデモ一覧と相談しながら『github dark dimmed』をチョイス。dimmedじゃないやつは、白背景には目に痛すぎるかな…？と思ったので。
• highlight.jsを利用しているのはコードブロックのみ。インラインのコードはhighlight.jsの出力見ながらCSSで設定。
• 元々prism.jsを利用するつもりだったが、dangerouslySetInnerHTML did not matchというエラーを消すことができなかったため断念。
  • useEffect内のprism.jsの発火オフでエラーが解消されるため、prism.jsによる変換が原因である可能性が高い。しかし、原因を究明してもuseEffectの後にHTMLを書き換えるくらいしか対処が思いつかず、他のライブラリがあるならそこまで無理して利用する必要はないと判断して、他ライブラリを利用することにした。
  • pをdivにしたりすると解消されるエラーらしいが、元々divだし…出力されるコードの親子関係も調べてみたが、怪しい点はなかった
  • 今思うと、SSR時と表示時で『同じ内容でない』というエラーの可能性もありそうな気がする。useEffectでなく、もっと前時点で変換する必要があったのかもしれない。

aタグ系にスタイル追加

• ヘッダ下のカテゴリのリスト、タイトル、文章内のリンクに追加
  • ヘッダ下のカテゴリリストはボタンごとhoverスタイルほしかったのでHTML/CSSをがっつり書き換え
  • タイトルはopacity: 0.5を追加。カテゴリより重めなのは、背景がないこともあって、0.7だと変化が見えづらいから。
  • 文章内のリンクはリンク自体が見えづらかったので、text-decoration: underlineを追加
    • こっちはhoverした時にunderline消えるので、opacity: 0.7
    • ホバー時下線でなく、ホバー時に下線が消えるのはMDNの表示を参考にした。個人的には、リンクは明確に下線ある方がわかりやすいと思う。特にブログにおいては、リンクは頻出するものではないので、下線があっても鬱陶しくはならないはず

つぶやき

• 表示がかっこよくなるとウキウキするね
• そういえば今日のアプデではないけれど、こっそりヘッダ画像もタテを少し短くしました。新しい写真、撮りたい。

概要

• スキルカードのデザインを修正
• その他、文言など古かったところを修正
• ブログをこっちのブログに置き換え

詳細

スキルカードのデザイン

• Before。シャドウのボックスにシャドウのボックスが入ることで重苦しい上に、角丸が揃ってなくてちょっとイケてない印象
  • 
• After。枠を外して、すっきりとした印象に。あと、Ubuntu Serverのスタイル崩れもなおして、Reactも加入。スキルの区分は永遠の悩みどころ。
  • クリック（タップ）できるのわかりづらいので、見せ方をもうちょっと考えたい。テーブルの方がいいのかなあ。
  • 

文言とブログリンク貼り替え

• 文言がwebpack勉強中だったので修正したりとか。このへんは永遠に修正し続けられる気がする
• ブログのリンクがはてブの方だったので、こっちにした。こっちの方がエディタがシンプルで楽。
• noteは最近かいてないので一旦外し。アイキャッチ用意するのめんどいがハードルになりがち。

概要

• カテゴリを追加
• フッタも追加

手順

• 公式のよくある質問『カテゴリーやタグは作成できますか？』を参考に実装

ざっくりカテゴリリストの作り方

• getStaticPathsを利用してカテゴリごとの静的ページを生成する
  • 前回はblog/[blogのコンテンツID]を公式の導きのまま作ったので、今回はcategory/[categoryのID]で生成されるように下みたいなコードを組んだ

export const getStaticPaths = async () => {
  const data:CategoryContentList = await client.get({ endpoint: "categories" });

  const paths = data.contents.map((content) => `/category/${content.id}`);
  return { paths, fallback: false };
};

• このページに、カテゴリごとのコンテンツの取得を仕込む
• クエリの書き方はmicroCMSの管理画面の右上にあるAPIプレビューを利用すればプレビューもできるし書き方のサンプルもでてくる。

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const id = context.params.id;
  const data:BlogContentList = await client.get({ endpoint: "blog", queries: {filters: `category[equals]${id}`} });

  return {
    props: {
      blog: data.contents,
    },
  };
};

• これでカテゴリごとの静的ページの作成は終わり
• あとはリストを作る。カテゴリを増やす予定はないので今回はハードコーディング
  • カテゴリにカテゴリー名もつけれるので、GETして自動生成するようにもできそう。また今度。
  • 色味は個別ページの薄い水色カラーだとちょっと薄すぎるのでちょっと濃いめに。
    • そういえば、現在いるページを色変更とか忘れた。これも今度。
  • 

つぶやき

• だいぶいい感じになってきた気がする。
• フッタにポートフォリオへのリンクをつけてみた。ので、来週からはポートフォリオの更新をしてこうかな。
• React hooksを使うような機能作りたいんだけど、ブログじゃ難しいかな…思いつかん。

概要

• 個別ページを整備
• OGP設定
• コンポーネント化、CSSを分割整理とか

詳細

個別ページ

• 元からあったけど、前回のアプデ時にトップページのタイトルから個別ページに行くリンクを外してしまったので、リンクを戻す。
• 見た目がデフォ + トップへ戻る方法がなかったので調整
  • before
    • 
  • after
    • 

OGP設定

• Next.js でメタ情報を出し分ける方法（SG/SSR/CSR） - to-R Mediaを参考にcommonMetaを作成
• ポートフォリオサイト（Nuxt.js）のを参考にしようとしたら、npm_package_descriptionという値になってて、package.jsonとかにあるのかな？と思ったらなくて、ﾅﾝﾃﾞ！？と思ったらREADME.mdの文章を設定してくれるらしい。それは読みとくのむずかしすぎるよ。

コンポーネント化

• 個別ページ整備の時に、個別ページとindexで共通のパーツが増えてきたのでコンポーネント化
• CSSがだいぶ増えてきたのでcss in jsを導入しようと思ったけれど、Zennの開発者のCatNosesさんのスクラップとかを見て.module.scssと対応する.tsxを同じディレクトリにいれて整理する運用にした。
  • ↓こういうかんじ。
  • 

CSSの運用を考える上で考えたこと

• 最初はcss in js（styled-componentとemotion）化を検討
  • Reactといったらcss in js、ってイメージ。
  • 実装見てみたら、cssが1つ1つで独立する感じの印象。現状既にrelative/absoluteを利用しているCSSがあるので、そこのscssなら見える階層関係が見えなくなってしまうのがちょっと不安要素だなあと思った
  • + もともとVue.jsに比べてHTMLとCSSがごちゃってしまう懸念はしてた
• Zennを開発してるCatNoseさんのスクラップ『Next.jsにCSS Modulesを導入する』をみて、styled-componentはパフォーマンス上のデメリットもあるのか！！とわかってCSS Modulesのままを決意
  • おそらくcss in js(styled-components)は１つのコンポーネントを作るのにCSSとHTMLを行き来しなきゃいけないしんどさの解消のために生まれたものだと思うのだが、私は逆に『HTMLとCSSが混ざるのは嫌』で、『HTMLとCSSが分離してる環境に慣れている』ので、パフォーマンスデメリットのあるならstyled-componentsをわざわざ導入する理由はかなり薄いかなあ、と思う。
• 前述のスクラップではstyleディレクトリをコンポーネントディレクトリと同じ構造にしてるが、上の画像の通りコンポーネントディレクトリ内が結構細かいパーツで区切っているので、パーツごとのディレクトリにtsxと一緒に格納にした。
  • Vue.jsならば1ファイルになるのを2ファイルになってしまっているわけだが、Vue.jsでは『スタイルだけ切り出す』ということが結構困難なので『ロジックは違うけどスタイルは同じ』なのはすごい良い。

2021/09/23追記

• CSS Modules、メンテナンスオンリーなのを知ってその後emotionに以降しました。コンポーネントガッツリわけていたおかげで結構簡単でよかった。

流れ

• さいしょ
  • 公式さんが導いてくれるのはここまで
  • 
• 中間。
  • グラスモーフィズムやりたかったんだけどダサすぎわろたすぎてやめた
  • 
• 結果
  • 『マグネットでメモをはりつけてるホワイトボード』みたいなイメージ
  • アザラシはfavicon大活躍
    • 仮置きのつもりだったけど結構気に入ってる
  • 

記録

ビルド落ちてデプロイされてなかった問題

• 最初の2データにはアイキャッチがあったんが、追加した3データ目にアイキャッチがなかったのでアイキャッチのURLが取得できなくてビルド落ちてデプロイされてなかった
  • optionalなデータへの対処は実務でもやりがちなので気をつける
  • 今回に関してはテストケースの不足みたいなもんでもあるので網羅するようにする

Next.jsのイメージがabsolute効かない問題

• 枠上アザラシがposition: absolute;効くかなくてコードみたらNext.jsのImageタグはimgをdivでwrapしてるのでなんか上手い感じに効かない。Imageタグをdivで囲ってdivnいクラス付与したらうまくいったので、imgタグ自体に効かせるようなもの以外は、divに付与がよさそう

今後

• 10件以上になったら続きを読み込むみたいな機能を作りたい
• 月別表示か草生やす機能とか作りたい　青ベースだから青濃淡にしたいなあ
• ブログ内容自体のhtml特に触ってないので、そこもちょっとカスタマイズいれたい

てすと３だよ〜〜〜〜

よく躓くのでメモ

重要ポイント

• 0.0.0.0でアクセスできるようにしておくこと
  • vue-cliで生成したアプリだと初期設定が0.0.0.0でアクセスできるようになっていないので、その設定を追加してやる必要がある

手順

1. webpack-dev-serverでモバイルからアクセス可能なローカル開発サーバーを立ち上げる(in vue-cli) - Qiita を参考に下記を実施
   1. 0.0.0.0でserveするようにする
      1. 初期状態ではlocalhostのみで接続できる状態になっており、その状態では2の手順でアクセスできない
2. iPhoneからlocalhostで開発中のサイトを確認する方法 - Qiita を参考に下記を実施
   1. iPhoneとMacのwifiをあわせる
   2. MacのIPアドレスを調べる
   3. 『MacのIPアドレス:serve中のport番号』でアクセスする
3. これでアクセスできるはず。