Web Speech API 検証用のサンプル

先月の陰陽師のイベントでドンジャラみたいなカードゲームが追加された時、選択されたカードから関連する役が確認できるツールを作った。

https://onmyojigame-paper-role.vercel.app/
https://github.com/Tenderfeel/onmyojigame-paper-role

結果全ての役をコンプリートできて大満足だったんだけども、
ゲームをしながらゲームで選んだカードをツールで選択するというのがなかなか難しかった。

やってる間に、

「マウス選択が無理なら音声認識すればいいのでは…?」

と思ったので、Web Speech APIのサンプルを作って確認してみたのだ。

続きを読む

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

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

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

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

続きを読む

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

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

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

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

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

続きを読む

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

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

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

続きを読む

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

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

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

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

続きを読む

Electronでデスクトップアプリを作ろうとしたメモ

月曜日の祝日、陰陽師の週替りイベントの好機を逃すという悲しい思いをしまして。
いつも開いてるPC版の隣で通知とかするアプリがあればなーと思ったとき、Electronで作れるんでは?とその存在を思い出したのでした。
いつの時代も悔しさは己の闘志を奮起してくれるものです。

続きを読む