ぴよたそってサイトさんが大好きなんですが、このサイトの素材を使ったサイトを作りたいなとずっと思ってて
で、movie2musicもだいぶバックエンドよりでフロントエンドやりたい欲望が溢れてきたので、
プロフ帳を作ろうと思いました。ぴよたそのかわいいワクワクキラキラ感を最大限活用するにはプロフ帳しかないと思ったんです。
Next.js + firebaseはまだやってないので、それも兼ねて作成しようかなと思います

リポジトリはこちら。
movie2musicもエターならせないです大丈夫大丈夫…。

ベース音を追加しました。
ChelloだからPianoがあるだうと思ったらなくて困ってたんですが、普通にwikipediaに一覧がありました。
チェロはちょっと音がキツめの印象がしたので、メロはAcoustic Pianoに変更し、ベースはElectric Bass (pick)で追加しました。
次はドラムかなあ。

動画から自動作曲するやつを作っています。
大学生時代に作ってたやつなんですが、学生時代にやりきれなかったこととかあるので、また再開しようかと思ってベースを作り中。学生時代は1年がっつり使って作り上げたけど、今ならもうちょっとはやくできるやろと思いつつ、結構苦戦中。

Electron x Next.js x Flask構成にしてます。バックエンドRustもやりたかったけど、midiライブラリがどうしてもうまく動かせず断念。

今はこんな↓音楽がでる感じです。ちょっとズレている気はしてる。
https://youtu.be/R3CsM_QWmEc

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

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に以降しました。コンポーネントガッツリわけていたおかげで結構簡単でよかった。