公式のやつと被るものもある。
WebデザインでPhotoshopを使うのはもうやめて欲しい
かれこれ15年くらいWebフロントドカタしてて、Adobe製品とは長いお付き合いしてるけど、もうPhotoshopで作られたデザインをどうにかするのやだなーというお気持ちになってしまった。
[Shopify] コード編集によるテーマのカスタマイズ
Shopifyについては前に知人に頼まれてカスタムしたきり、もう触ることはないだろうと思ってたら、自社ショップを作ることになった。のでカスタマイズついて思い出すところから始めた🙄この記事はShopifyテ … 続きを読む
Vue3+Vite+Piniaで計算アプリ作ってみたメモ
陰陽師のマラソン中手持ち無沙汰だったから表題の構成でマラソン用ポイント計算アプリつくってみた。
https://onmyojigame-emaki.vercel.app/
https://github.com/Tenderfeel/onmyojigame-emaki
最初はNuxt3で作ってみてたんだけど、Codepenの落書きがLocalStorage利用してたために、現状SSRしかないNuxt3だといささか面倒なことになるので諦めてVue3+Viteに切り替えた。という経緯がある。
[Photoshop, Figma, XD, Ai] SVG出力のあれこれ
見出しやボタンにおしゃなフォントが使われているのにもかかわらず、大人の事情でWebフォントが使えないという場合は結構ある。
そういう時は画像にするしかないのだけど、昨今のデザインツールにはSVG出力が備わっているので、SVGにするのがお手軽だ。
複雑なSVGだと表示が崩れるというブラウザ側のバグもここ数年は見なくなったし、使いやすくなったと思う。
Web Speech API 検証用のサンプル
先月の陰陽師のイベントでドンジャラみたいなカードゲームが追加された時、選択されたカードから関連する役が確認できるツールを作った。
https://onmyojigame-paper-role.vercel.app/
https://github.com/Tenderfeel/onmyojigame-paper-role
結果全ての役をコンプリートできて大満足だったんだけども、
ゲームをしながらゲームで選んだカードをツールで選択するというのがなかなか難しかった。
やってる間に、
「マウス選択が無理なら音声認識すればいいのでは…?」
と思ったので、Web Speech APIのサンプルを作って確認してみたのだ。
[WordPress] カテゴリーリストのマークアップを変更する
WordPressの自作テーマではテーマ関数が生成するマークアップを変更するのは基本中の基本である。
今回は「カテゴリーリストをアコーディオン風に開閉できるようにしたい」というオーダーを受けてやっつけたものの没になったのでここで供養する。
2014年に書いたナビゲーションメニューの改造話と一部かぶるところがあるのだが、カスタムウォーカーによるマークアップ変更についてより具体的に書いてみた。
[Gatsby] Flexsearch × Kuromoji による日本語フレンドリーなサイト内検索の追加
GatsbyでMarkdownをソースにするブログを作ったらサイト内検索が欲しくなった。
検索自前で作るの面倒…とはいえ検索がないブログは不便なんだよなあ…。
他所に頼るならお手軽なGoogleのカスタム検索か、有能なAlgoliaを使うのが手っ取り早いが、Googleのカスタム検索はUIがカスタムしづらく、Algoliaは有料プランだとお値段が結構高い。
結果自前で渋々実装しなければならないケースもままあると思う。
で、実際にサイト内検索の実装をやってみた結果このメモが生まれたわけだが、これくらいの手間をかけないと日本語の検索として満足な動作を得られなかった。
[Gatsby] TypeScript化とWordPressの型
復習がてら公式のスターター(gatsby-starter-minimal、gatsby-starter-wordpress-blog)をTypeScript化したメモ。
[JS] Deep Zoom Image 規格の画像生成と表示
それは100MBくらいある巨大な画像をWebサイトで表示したいというオーダーだった。
今ならそれくらいあっても1枚で許されるか…?と思ったが、選択肢が色々増えたご時世だからこそ制限付きの4G回線しかない人もいるわけで、画像何度も見たらパケ死なんてことになったら笑えない。
そして細かいところまで見れるようにその超巨大な画像を拡大表示もしたいと言う。
そうなるともうGoogleMapのようにするしかないかなあ?と思ったがしばらくやってない芸当だったので最近どうなってるかがよくわからないのだった。
GoogleMapのAPIが出た時は無意味に地図画像を置き換えて遊んでたものじゃがのう…。
GatsbyでWebサイトを4つ作ってみたメモ
3月からGatsbyでWebサイトを4つ作った。
ずっとVue(Nuxt)とちちくりあっていたのでReactを触るのは3〜4年ぶりだった。
[WordPress] GraphQLフィールドの追加とGatsbyでの利用
最近はWordpress+Gatsbyでサイト作ってる。
WordPressではないHeadressCMSを使うか、WordpressをHeadressCMS代わりにするかという二択になったとき、コストの低い方や運用の手間の少ない方が当然選ばれやすいのだが、「編集者が使いやすいもの」という条件を増やすと後者になりやすいし、長年運用されてたWordpressのリニューアルだと継続してWorpdressになりがちである。
[Sass] SassError: There is no module with the namespace “math”.
しばらくLessやらCSS-in-JSに浮気してたワイ、久しぶりにSassを使ったらWARNINGまみれになってびっくりした。
昔から、Sassで /
(スラッシュ)使うと、割り算なのか区切りなのかぱっと見判別できなくてややこしいなあと思ってたんだけど、中の人もそう思ってたようだ。とうとう割り算としての利用が廃止になるらしい。
Dart Sass v1.33以上で未対応のSASS/SCSSをビルドすると表題の警告が嵐のように流れる様を見ることができる。
Breaking Change: Slash as Division
公式ブログでも【破壊的変化】と銘打ってるけど、流れるWARNINGの量でお察し案件だった。
ちょっと使おうと思って入れたUIライブラリが未対応だったりしてたので、直近メンテされてないものを使う時は注意した方がいいと思った。
Shopifyのカスタマイズをして気づいたこと
元同僚の依頼でShopifyのテーマをカスタマイズしたので、
その時調べた内容を勿体ぶって小出しにしていこうかなと。
(とはいえ続きを書くかわからんので続いたら番号振るつもり)
私の中ではECのカスタマイズは楽天だとかColorMeだとかで止まっていて、
最近の動向は把握してなかったんですが…このShopify…すげえぞ…!
WordPress GraphQL対応のカスタム投稿タイプ設定
WordPressのREST APIの代わりにGraphQLを使ってみたところ、カスタムエンドポイントをいちいち書かなくていいので、大量にエンドポイントが必要なほど楽になるなあと思いました。
[Vue] vue-test-utils の Deprecation warning への対応
ドキュメントの言語選択で日本語にしてるとまだ説明が出ないが、
警告は5月にリリースされててアップデートしたら洗礼を受ける。
よく使ってたのが対象になってるのでテストが多いと対応がしんどい😫
Vercel+Nuxt.jsで爆速Webアプリ作成
CodeSandboxとNowでアプリを作る話の続き。(読んでなくてもOK)create-nuxt-app
で作ったNuxt.jsアプリをVercelでデプロイする話です。
いつの間にやらZEITは新たなるブランドVercelに生まれ変わったそうで、NowもVercelという名称に変わってました🙄
よってこれからはNowとは言わずVercelと呼ぶことにします。