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

by

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

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

続きを読む

Go言語入門メモ② スクレイピングを試す

by

Goに入門して1ヶ月、研修の最終課題は提出できたが、覚えるならなんか作りながらだよな〜と思ったので、しばらくサボってた陰陽師中国版公式サイトの壁紙ダウンロードをGoでやってみることにした。

Goバージョンは 1.19

続きを読む

NTT東の光ネクスト ギガマンション・スマートタイプから光クロスに乗り換えた話

by

2017年にBフレッツからギガマンション・スマートタイプに乗り換えて以来、上り下り500M程度は出ていてそれほど不満に思ったことはなかったのだけど、2020年にNTTも10Gサービスである光クロスの提供を開始すると発表して以来、ずっと乗り換えたいなあと思っていたのだ。

2年前から思ってたんだよ…！

続きを読む

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

by

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

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

続きを読む

[Shopify] 簡単なセクションの作り方

by

前記事からの続き。コード編集によるセクションの自作方法について。

大抵の機能はアプリでどうにかできるShopifyだけど、作り方さえわかっていれば自分で作れてしまうものも多いのだ。

画像のカルーセルをセクションで自作したので過程をメモっておいた。
ライブラリはSwiperを使うことにします。

※ Dawnにはスライドショーのセクションが含まれているので、それを使うこともできる

続きを読む

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

by

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

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

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

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

続きを読む

[Photoshop, Figma, XD, Ai] SVG出力のあれこれ

by

見出しやボタンにおしゃなフォントが使われているのにもかかわらず、大人の事情でWebフォントが使えないという場合は結構ある。

そういう時は画像にするしかないのだけど、昨今のデザインツールにはSVG出力が備わっているので、SVGにするのがお手軽だ。

複雑なSVGだと表示が崩れるというブラウザ側のバグもここ数年は見なくなったし、使いやすくなったと思う。

続きを読む

Web Speech API 検証用のサンプル

by

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

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

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

やってる間に、

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

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

続きを読む

[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が出た時は無意味に地図画像を置き換えて遊んでたものじゃがのう…。

続きを読む