Web & Experimental

boyscout-tajimiは、ボーイスカウト多治見第一団の公式Webサイト兼CMSです。Node.js、Express v5、EJS、Tailwind CSSで公開ページと管理機能を構成し、SQLiteとPostgreSQLを環境に応じて使い分ける地域団体向けWebプラットフォームです。

成果: 実運用される地域団体サイトとして、SSR公開ページ、管理画面、認証、SQLite/PostgreSQL切替を継続保守できる構成で実装しました。

地域社会を支えるモダンなプラットフォーム

ボーイスカウト多治見第一団の公式ウェブサイト兼コンテンツ管理システム（CMS）です。一般ユーザー向けの高速な情報発信と、指導者が手軽に更新できるSPAライクな管理画面を両立させています。1年以上の長期にわたり実運用・継続保守されています。

SSR による高速ページ表示

Alpine.js SPA ライク管理 UI

環境適応型・ハイブリッドデータベース構成

開発環境では設定不要の SQLite（と session-file-store）を使用し、本番環境(PaaS)では堅牢な PostgreSQL（と connect-pg-simple）へと自動で切り替わる「アダプタパターン」を実装。インフラに依存しない開発体験を提供しています。

SSRによるSEO最適化

Express v5 + EJS テンプレートエンジンによるSSR。セマンティックなHTML構造とメタタグの適切な出力により、地域団体として重要なSEOとアクセシビリティを確保。

軽量フロントエンド設計

Tailwind CSS + Alpine.js を採用し、jQueryを完全排除。宣言的かつ軽量なDOM操作でSPAライクな管理画面を実現。

セキュアな認証基盤

bcryptによるパスワードのハッシュ化と、セッションベースの堅牢な管理者認証システムを自作・統合しています。

設計の意図

実際のユーザーに使われ、長期間保守されることを前提とした設計を心がけました。情報の伝え方やWeb標準技術への理解は、ゲーム開発とは異なる軸での経験として直接役立っています。

運用サイト

現在も実際の運用が続いているウェブサイトです。

tajimibs.org を見る ↗

DownloadExは、Chromeのダウンロードファイルをルールベースで指定フォルダへ自動振り分けする拡張機能です。URL一致、完全一致、正規表現、拡張子フィルター、優先度、動的プレースホルダー、コンテキストメニューからのルール作成に対応しています。

成果: Chrome Web Store公開を前提に、ルール作成UI、URL/拡張子判定、優先度処理、コンテキストメニュー連携を実装しました。

ブラウザの利便性を向上させる拡張機能

日常のブラウジング作業を効率化するために開発したChrome拡張機能です。Chromeウェブストアで一般公開され、実際に利用されています。

ダウンロードの振り分けルール一覧UI

細かな条件設定が可能なルール作成ダイアログ

使いやすいUI設計

誰でも直感的に操作できるシンプルなインターフェースを心がけて設計しました。

Chrome APIの活用

ブラウザのネイティブAPIを直接叩き、高速かつ安定した動作を実現しています。

設計の意図

自分が不便だと感じたことを、自分で解決するツールのひとつとして作成しました。Chromeウェブストアでの公開プロセスも経験しています。

配布サイト

この拡張機能はChromeウェブストアからインストールできます。

Chrome ウェブストア ↗

PNGtoTGAは、ブラウザ内で複数のPNG画像をTGA形式へ変換するWebコンバーターです。WebWorkerのプールで並列変換し、TGAプレビュー、個別ダウンロード、変換結果のZIP生成、ライト／ダーク／システムテーマ切り替えを備えています。

成果: WebWorker並列処理とZIP生成により、複数PNGのTGA変換をブラウザ内で完結できるツールにしました。

ブラウザの制約を突破する低レイヤー処理

ブラウザ上でPNG画像をTGA形式に高速変換する実験的なツールです。メインスレッドを停止させず、快適なUXを維持したまま数メガバイトの重いバイナリ処理を行うことを目標としました。

Transferable Objects によるゼロコピー通信

純粋なバイナリ操作

ライブラリに頼らず、TypedArray（Uint8Array等）を用いてTGAフォーマットのヘッダーからピクセルデータまでを直接バイナリレベルで構築。

Transferable Objects活用

WebWorkerによるマルチスレッド処理に加え、Transferable Objectsでスレッド間の無駄なメモリコピーを防止。JSエンジン限界性能のゼロコピー通信を実現。

設計の意図

フロントエンドで重い処理をどう逃がし、ユーザーの時間を奪わないか。この課題への回答として、バイナリ操作とスレッド間通信の最適化を組み合わせる実験として位置づけています。