Javascript

Astro.js で PDF.js を利用する

by

2023年は割とAstro.jsを使ってた気がする。ちょっとしたLPを作るのにちょうどいいなって。

AstroでPDF.js が動かないのなんでなん？という質問をコミュニティで見かけたので、試しに実装してみたものを載せておく。

続きを読む

TypeScript 環境での Chart.js の利用について

by

ブラウザで折れ線グラフとかを表示したいな〜と思ったときは大抵Chart.jsという超有名ライブラリを使うことになる。Chart.jsの使い方は実に簡単で、グラフの設定とデータを投げるだけで大変見目麗しいグラフを表示してくれる。

最近はプラグインを自作するに至ったんだけど、それ以前にもちょいちょいつまづきがあったので忘備録としてメモっておく。

続きを読む

Vue3+Vite+Piniaで計算アプリ作ってみたメモ

by

陰陽師のマラソン中手持ち無沙汰だったから表題の構成でマラソン用ポイント計算アプリつくってみた。

https://onmyojigame-emaki.vercel.app/

https://github.com/Tenderfeel/onmyojigame-emaki

最初はNuxt3で作ってみてたんだけど、Codepenの落書きがLocalStorage利用してたために、現状SSRしかないNuxt3だといささか面倒なことになるので諦めてVue3+Viteに切り替えた。という経緯がある。

続きを読む

Web Speech API 検証用のサンプル

by

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

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

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

やってる間に、

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

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

続きを読む

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

by

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

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

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

続きを読む

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

by

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

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

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

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

続きを読む

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

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

続きを読む