概要
ブラウザ上でノノグラムの盤面を扱い、解答支援、問題作成、印刷、画像保存まで行えるWebアプリです。
Canvas合成、非同期ループ、A4印刷向きの自動判定、多言語対応など、軽量Webアプリで使い回せる実装を多く含んでいます。
このTech Blogでは、実装中に切り出した汎用パターンをVanilla JS記事として整理しています。
使用技術
Vanilla JSCanvasCSS Printi18nVercel
実装・設計のポイント
- ヒント数字を含めたCanvas画像出力
- 長時間処理中も固まらない非同期ループ
- 盤面サイズに応じたA4縦横自動判定
- ビルドツール不要の多言語対応
- SVGとPythonによるファビコン生成