[WordPress] カテゴリーリストのマークアップを変更する

by

WordPressの自作テーマではテーマ関数が生成するマークアップを変更するのは基本中の基本である。

今回は「カテゴリーリストをアコーディオン風に開閉できるようにしたい」というオーダーを受けてやっつけたものの没になったのでここで供養する。

2014年に書いたナビゲーションメニューの改造話と一部かぶるところがあるのだが、カスタムウォーカーによるマークアップ変更についてより具体的に書いてみた。

続きを読む

[Gatsby] Flexsearch × Kuromoji による日本語フレンドリーなサイト内検索の追加

by

GatsbyでMarkdownをソースにするブログを作ったらサイト内検索が欲しくなった。
検索自前で作るの面倒…とはいえ検索がないブログは不便なんだよなあ…。

他所に頼るならお手軽なGoogleのカスタム検索か、有能なAlgoliaを使うのが手っ取り早いが、Googleのカスタム検索はUIがカスタムしづらく、Algoliaは有料プランだとお値段が結構高い。
結果自前で渋々実装しなければならないケースもままあると思う。

で、実際にサイト内検索の実装をやってみた結果このメモが生まれたわけだが、これくらいの手間をかけないと日本語の検索として満足な動作を得られなかった。

続きを読む

[JS] Deep Zoom Image 規格の画像生成と表示

by

それは100MBくらいある巨大な画像をWebサイトで表示したいというオーダーだった。

今ならそれくらいあっても1枚で許されるか…？と思ったが、選択肢が色々増えたご時世だからこそ制限付きの4G回線しかない人もいるわけで、画像何度も見たらパケ死なんてことになったら笑えない。

そして細かいところまで見れるようにその超巨大な画像を拡大表示もしたいと言う。

そうなるともうGoogleMapのようにするしかないかなあ？と思ったがしばらくやってない芸当だったので最近どうなってるかがよくわからないのだった。
GoogleMapのAPIが出た時は無意味に地図画像を置き換えて遊んでたものじゃがのう…。

続きを読む

[WordPress] GraphQLフィールドの追加とGatsbyでの利用

by

最近はWordpress+Gatsbyでサイト作ってる。
WordPressではないHeadressCMSを使うか、WordpressをHeadressCMS代わりにするかという二択になったとき、コストの低い方や運用の手間の少ない方が当然選ばれやすいのだが、「編集者が使いやすいもの」という条件を増やすと後者になりやすいし、長年運用されてたWordpressのリニューアルだと継続してWorpdressになりがちである。

続きを読む

[Sass] SassError: There is no module with the namespace “math”.

by

しばらくLessやらCSS-in-JSに浮気してたワイ、久しぶりにSassを使ったらWARNINGまみれになってびっくりした。

昔から、Sassで / （スラッシュ）使うと、割り算なのか区切りなのかぱっと見判別できなくてややこしいなあと思ってたんだけど、中の人もそう思ってたようだ。とうとう割り算としての利用が廃止になるらしい。
Dart Sass v1.33以上で未対応のSASS/SCSSをビルドすると表題の警告が嵐のように流れる様を見ることができる。

Breaking Change: Slash as Division

公式ブログでも【破壊的変化】と銘打ってるけど、流れるWARNINGの量でお察し案件だった。
ちょっと使おうと思って入れたUIライブラリが未対応だったりしてたので、直近メンテされてないものを使う時は注意した方がいいと思った。

続きを読む

Shopifyのカスタマイズをして気づいたこと

by

元同僚の依頼でShopifyのテーマをカスタマイズしたので、
その時調べた内容を勿体ぶって小出しにしていこうかなと。
（とはいえ続きを書くかわからんので続いたら番号振るつもり）

私の中ではECのカスタマイズは楽天だとかColorMeだとかで止まっていて、
最近の動向は把握してなかったんですが…このShopify…すげえぞ…！

続きを読む

Vercel+Nuxt.jsで爆速Webアプリ作成

by

CodeSandboxとNowでアプリを作る話の続き。（読んでなくてもOK）
create-nuxt-app で作ったNuxt.jsアプリをVercelでデプロイする話です。

いつの間にやらZEITは新たなるブランドVercelに生まれ変わったそうで、NowもVercelという名称に変わってました🙄
よってこれからはNowとは言わずVercelと呼ぶことにします。

続きを読む

[Nuxt.js] core-jsエラーへの対処

by

何かしら外部のライブラリを追加したときこんな感じのエラーが出ることがある

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

コンソールが真っ赤に染まってびっくりするよ😩

続きを読む