
2022/1/2 14:7
プロフィール帳っぽいものを作ろうと思います2021/12/14 13:43
動画から自動作曲するやつ#2 ベース音がつきましたベース音を追加しました。
ChelloだからPianoがあるだうと思ったらなくて困ってたんですが、普通にwikipediaに一覧がありました。
チェロはちょっと音がキツめの印象がしたので、メロはAcoustic Pianoに変更し、ベースはElectric Bass (pick)で追加しました。
次はドラムかなあ。
2021/12/13 22:38
動画から自動作曲するやつを作ってます #1動画から自動作曲するやつを作っています。
大学生時代に作ってたやつなんですが、学生時代にやりきれなかったこととかあるので、また再開しようかと思ってベースを作り中。学生時代は1年がっつり使って作り上げたけど、今ならもうちょっとはやくできるやろと思いつつ、結構苦戦中。
Electron x Next.js x Flask構成にしてます。バックエンドRustもやりたかったけど、midiライブラリがどうしてもうまく動かせず断念。
今はこんな↓音楽がでる感じです。ちょっとズレている気はしてる。
https://youtu.be/R3CsM_QWmEc
2021/11/28 14:49
技術の見た目をアプデ【ポートフォリオ】技術の見た目をアプデしました
旧
新
詳細
- svgをsimple iconsに統一
- スキルマップの情報を前に作ったスキルマップに寄せつつ、内容をバランスよくならうようにしました
ひっかかりポイント
- svg useがNuxt.jsだとうまく動かない…公式いわくuseタグ自体がわりと謎挙動が多いとのことなので、vue-svg-loaderを利用しました。Reactは似たような記事が見つからないので、Reactでは問題ないんだろうか
2021/10/3 7:31
ポートフォリオを自動デプロイにした- ちょっと前に自動デプロイができるようにした。actions、わりとたまってきた。
やり方
- NuxtアプリをSSGでビルドしてCI/CDをお手軽に設定する【GitHub Actions × Firebase Hosting】 - Qiita
- firebase initってもう1回叩いて大丈夫だったので、上記の通りにやって、できたファイルを色々書き換え
- 違う手段もあるみたいだが、このやり方がkeyを隠蔽できて1番楽な印象。他のやり方でもKMS使えばできると思う。
- 最終的な成果ファイルはこんな感じ
まとめ
- いままでびるどしてーでぷろいしてーを手動でやってたので、pushしてご飯食べて戻ってきたら終わってるのは楽
- vercelみたいにデプロイ終わったら連絡くるようにしたいな
2021/9/28 12:35
githubプロフィールをキラキラさせた概要
- githubのプロフィールをキラキラさせました!!
結果
流れ
- githubが結構前から自己紹介を追加しよう!みたいな文言があるのは気になってた
- GitHubProfileのページを可能な限りキラキラさせる方法というのを見かけたのでチャレンジ。
- といってもグラフがあんまり長いとピンどめしてるリポジトリとか見えなくなっちゃうので、statとトロフィーだけにした。
- このトロフィーは更新できたら自分に焼肉をおごってあげるために表示してる。噂のひとり焼肉ってやつ、やってみたい。
2021/9/23 14:48
ブログアプデ 2021/09/23概要
- コードブロックにハイライトを追加
- 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の表示を参考にした。個人的には、リンクは明確に下線ある方がわかりやすいと思う。特にブログにおいては、リンクは頻出するものではないので、下線があっても鬱陶しくはならないはず
- こっちはhoverした時にunderline消えるので、
つぶやき
- 表示がかっこよくなるとウキウキするね
- そういえば今日のアプデではないけれど、こっそりヘッダ画像もタテを少し短くしました。新しい写真、撮りたい。
2021/9/12 15:40
ポートフォリオアプデ 2021/09/12概要
- スキルカードのデザインを修正
- その他、文言など古かったところを修正
- ブログをこっちのブログに置き換え
詳細
スキルカードのデザイン
- Before。シャドウのボックスにシャドウのボックスが入ることで重苦しい上に、角丸が揃ってなくてちょっとイケてない印象
-
- After。枠を外して、すっきりとした印象に。あと、Ubuntu Serverのスタイル崩れもなおして、Reactも加入。スキルの区分は永遠の悩みどころ。
- クリック(タップ)できるのわかりづらいので、見せ方をもうちょっと考えたい。テーブルの方がいいのかなあ。
-
文言とブログリンク貼り替え
- 文言がwebpack勉強中だったので修正したりとか。このへんは永遠に修正し続けられる気がする
- ブログのリンクがはてブの方だったので、こっちにした。こっちの方がエディタがシンプルで楽。
- noteは最近かいてないので一旦外し。アイキャッチ用意するのめんどいがハードルになりがち。
2021/9/5 8:59
ブログアプデ - 2021/09/05概要
- カテゴリを追加
- フッタも追加
手順
ざっくりカテゴリリストの作り方
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を使うような機能作りたいんだけど、ブログじゃ難しいかな…思いつかん。
2021/8/30 9:51
ブログアプデ - 2021/08/30概要
- 個別ページを整備
- OGP設定
- コンポーネント化、CSSを分割整理とか
詳細
個別ページ
- 元からあったけど、前回のアプデ時にトップページのタイトルから個別ページに行くリンクを外してしまったので、リンクを戻す。
- 見た目がデフォ + トップへ戻る方法がなかったので調整
- before
-
- after
-
- before
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)は1つのコンポーネントを作るのにCSSとHTMLを行き来しなきゃいけないしんどさの解消のために生まれたものだと思うのだが、私は逆に『HTMLとCSSが混ざるのは嫌』で、『HTMLとCSSが分離してる環境に慣れている』ので、パフォーマンスデメリットのあるならstyled-componentsをわざわざ導入する理由はかなり薄いかなあ、と思う。
- 前述のスクラップではstyleディレクトリをコンポーネントディレクトリと同じ構造にしてるが、上の画像の通りコンポーネントディレクトリ内が結構細かいパーツで区切っているので、パーツごとのディレクトリにtsxと一緒に格納にした。
- Vue.jsならば1ファイルになるのを2ファイルになってしまっているわけだが、Vue.jsでは『スタイルだけ切り出す』ということが結構困難なので『ロジックは違うけどスタイルは同じ』なのはすごい良い。
2021/09/23追記
- CSS Modules、メンテナンスオンリーなのを知ってその後emotionに以降しました。コンポーネントガッツリわけていたおかげで結構簡単でよかった。