気ままに綴る独学メモ帳
Tenderfeel 先月の陰陽師のイベントでドンジャラみたいなカードゲームが追加された時、選択されたカードから関連する役が確認できるツールを作った。
https://onmyojigame-paper-role.vercel.app/
https://github.com/Tenderfeel/onmyojigame-paper-role
結果全ての役をコンプリートできて大満足だったんだけども、
ゲームをしながらゲームで選んだカードをツールで選択するというのがなかなか難しかった。
やってる間に、
「マウス選択が無理なら音声認識すればいいのでは…？」
と思ったので、Web Speech APIのサンプルを作って確認してみたのだ。
WordPressの自作テーマではテーマ関数が生成するマークアップを変更するのは基本中の基本である。
今回は「カテゴリーリストをアコーディオン風に開閉できるようにしたい」というオーダーを受けてやっつけたものの没になったのでここで供養する。
2014年に書いたナビゲーションメニューの改造話と一部かぶるところがあるのだが、カスタムウォーカーによるマークアップ変更についてより具体的に書いてみた。
GatsbyでMarkdownをソースにするブログを作ったらサイト内検索が欲しくなった。
検索自前で作るの面倒…とはいえ検索がないブログは不便なんだよなあ…。
他所に頼るならお手軽なGoogleのカスタム検索か、有能なAlgoliaを使うのが手っ取り早いが、Googleのカスタム検索はUIがカスタムしづらく、Algoliaは有料プランだとお値段が結構高い。
結果自前で渋々実装しなければならないケースもままあると思う。
で、実際にサイト内検索の実装をやってみた結果このメモが生まれたわけだが、これくらいの手間をかけないと日本語の検索として満足な動作を得られなかった。
復習がてら公式のスターター（gatsby-starter-minimal、gatsby-starter-wordpress-blog）をTypeScript化したメモ。
それは100MBくらいある巨大な画像をWebサイトで表示したいというオーダーだった。
今ならそれくらいあっても1枚で許されるか…？と思ったが、選択肢が色々増えたご時世だからこそ制限付きの4G回線しかない人もいるわけで、画像何度も見たらパケ死なんてことになったら笑えない。
そして細かいところまで見れるようにその超巨大な画像を拡大表示もしたいと言う。
そうなるともうGoogleMapのようにするしかないかなあ？と思ったがしばらくやってない芸当だったので最近どうなってるかがよくわからないのだった。
GoogleMapのAPIが出た時は無意味に地図画像を置き換えて遊んでたものじゃがのう…。
3月からGatsbyでWebサイトを4つ作った。
ずっとVue(Nuxt)とちちくりあっていたのでReactを触るのは3〜4年ぶりだった。
最近はWordpress+Gatsbyでサイト作ってる。
WordPressではないHeadressCMSを使うか、WordpressをHeadressCMS代わりにするかという二択になったとき、コストの低い方や運用の手間の少ない方が当然選ばれやすいのだが、「編集者が使いやすいもの」という条件を増やすと後者になりやすいし、長年運用されてたWordpressのリニューアルだと継続してWorpdressになりがちである。
しばらくLessやらCSS-in-JSに浮気してたワイ、久しぶりにSassを使ったらWARNINGまみれになってびっくりした。
昔から、Sassで / （スラッシュ）使うと、割り算なのか区切りなのかぱっと見判別できなくてややこしいなあと思ってたんだけど、中の人もそう思ってたようだ。とうとう割り算としての利用が廃止になるらしい。
Dart Sass v1.33以上で未対応のSASS/SCSSをビルドすると表題の警告が嵐のように流れる様を見ることができる。
Breaking Change: Slash as Division
公式ブログでも【破壊的変化】と銘打ってるけど、流れるWARNINGの量でお察し案件だった。
ちょっと使おうと思って入れたUIライブラリが未対応だったりしてたので、直近メンテされてないものを使う時は注意した方がいいと思った。
元同僚の依頼でShopifyのテーマをカスタマイズしたので、
その時調べた内容を勿体ぶって小出しにしていこうかなと。
（とはいえ続きを書くかわからんので続いたら番号振るつもり）
私の中ではECのカスタマイズは楽天だとかColorMeだとかで止まっていて、
最近の動向は把握してなかったんですが…このShopify…すげえぞ…！
WordPressのREST APIの代わりにGraphQLを使ってみたところ、カスタムエンドポイントをいちいち書かなくていいので、大量にエンドポイントが必要なほど楽になるなあと思いました。
ドキュメントの言語選択で日本語にしてるとまだ説明が出ないが、
警告は5月にリリースされててアップデートしたら洗礼を受ける。
よく使ってたのが対象になってるのでテストが多いと対応がしんどい😫
CodeSandboxとNowでアプリを作る話の続き。（読んでなくてもOK）create-nuxt-app で作ったNuxt.jsアプリをVercelでデプロイする話です。
いつの間にやらZEITは新たなるブランドVercelに生まれ変わったそうで、NowもVercelという名称に変わってました🙄
よってこれからはNowとは言わずVercelと呼ぶことにします。
Firebase Authentication に備わっている匿名ユーザーを作成する機能についてのメモ。
※ Firebaseの覚書には連番が付いてますが内容は繋がっていません。
何かしら外部のライブラリを追加したときこんな感じのエラーが出ることがある
ERROR in ./.nuxt/client.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/Users/**/**/.nuxt'
@ ./.nuxt/client.js 4:0-41
@ multi ./.nuxt/client.js
ERROR in ./.nuxt/utils.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/Users/**/**/.nuxt'
@ ./.nuxt/utils.js 2:0-41
@ ./.nuxt/client.js
@ multi ./.nuxt/client.js
コンソールが真っ赤に染まってびっくりするよ😩
正しいURL構文かどうかをチェックするものではなく、文章中にURLが含まれるかどうかを調べるための正規表現について。