Xenoahロゴ

Portfolio / Build Log

FA・制御系の視点で、実用寄りのWebツールと試作環境を作る。

制御盤・電装・現場作業で得た問題意識を起点に、ブラウザアプリ、ローカル処理ツール、信号処理、CAD風UI、データベース、学習コンテンツを実装しています。 外部サービスに依存しすぎない静的Web構成、ローカル処理、GitHub Pages公開、AI支援を使った高速な試作と検証が主な制作スタイルです。

AI利用について: 一部のプロジェクトでは、ChatGPT / Claude / Codex などのAIコーディング支援を使っています。 担当範囲は、課題設定、要件定義、仕様化、AIへの実装指示、動作確認、改善判断、ドキュメント整理です。 コードの完全自筆性よりも、課題を整理して動作する形に落とし込む工程を重視しています。
10+公開または公開予定のWebツール
7扱っている技術領域: PDF, GIS, CAD, Audio, OCR, DB, Game
Local-firstPDFや音声など、可能な範囲でブラウザ内処理を優先
FA視点現場作業、帳票、制御、配線、G-codeを題材にした試作
踏破/走破徒歩で日光街道・しまなみ海道・山手線一周、自転車で東海道&国道一号線を完走

External Summary

外部の人にまず伝えたい要点。詳細は各プロジェクトを開くと確認できます。

実装の幅

静的Webアプリ、PDF処理、地図UI、VJ/音声処理、2D CAD風UI、学習サイト、ミニゲーム、データベースまで横断して作成。

現場寄りの課題設定

FA、帳票、G-code、配線、ローカル処理など、実務に近い問題を小さく分解してプロトタイプ化。

公開までの完走

アイデアで止めず、GitHub Pagesで動くURLまで出す。実装範囲、制約、次の改善点も記録。

AIの使い方

AI任せにせず、要件定義、実装指示、レビュー、検証、改善判断を自分で担当する開発補助として利用。

長距離を完走する計画力

徒歩で日光街道(東京→日光)、しまなみ海道(尾道→今治)、一日での山手線一周を制覇。自転車では東海道&国道一号線(東京→京都、大阪)を走破し、体力・計画・継続力を実地で積み上げている。

BOOTH Pickups

3D配布物の中から、外部向けに制作力が伝わりやすいものを選定。画像はローカル保存した軽量版を使用しています。

VRChat想定アバター 葵那 Aona

VRChat想定アバター「葵那(Aona)」

3D Character / VRChat / Blender / Unity

完全オリジナルの3Dアバターモデル。PC/Android両対応、FBX・テクスチャ・Unity Packageまで含めた構成で、キャラクターモデリングから配布形式までまとめている。

商品ページ
VRChat対応 LEDマトリクスなバッジ

LEDマトリクスなバッジ

VRChat Accessory / Material Animation

電子工作モチーフのVRC向けアクセサリ。LED表示部のマテリアルを差し替え、Offsetアニメーションでスクロール表示できる設計になっている。

商品ページ
はんだリール作業スタンド

はんだリール作業スタンド

3D Print / Practical Tool / STL

作業中のはんだリール転がりと絡まりを抑える3Dプリント用スタンド。内径・外径条件、材質、しなり動作まで考慮した実用寄りの設計。

商品ページ
七輪 しちりん 3Dモデル

七輪(しちりん) ~餅を添えて~

3D Model / Blender / FBX

和風小物を題材にした3Dモデル。FBXとBlenderファイルを同梱し、テクスチャに依存しないマテリアル構成で扱いやすくしている。

商品ページ
自作ゲーム DODGE THE FALLING

自作ゲーム DODGE THE FALLING

Game / DxLib / Windows

DxLibで制作したWindows向け自作ゲーム。上から降ってくるエラーを避けるシンプルなルールで、入力処理、当たり判定、ゲームループ、配布物化まで含めた初期ゲーム制作の成果物。

商品ページ
卓球台 3Dモデル

卓球台 3Dモデル

3D Model / VRChat / Blender / FBX / Unity

実物サイズを基準に作成したVRChat向け3Dモデル。物理演算を適用した利用を想定し、blend・fbx・unitypackageを同梱して、ワールド組み込みまで進めやすい構成にしている。

商品ページ

Featured Projects

主要プロジェクト。各カードは折りたたみ式です。

XNH_news-atlas / World News Map Viewer

世界ニュース、災害、自然イベントを地図・時間・カテゴリで俯瞰する静的Webアプリ。

Web AppMapLibreGitHub Actions公開中
概要
ニュース記事や自然イベントを地理情報に結び、地図、イベント一覧、ヒートマップ、トレンド表示で確認するWebアプリ。
実装範囲
  • MapLibre GL JSによるダークテーマ地図UI
  • ニュースイベント一覧、カテゴリフィルタ、検索、時間範囲フィルタ
  • RSS / GeoRSS / GeoJSON / 静的JSONを扱う更新フロー
  • バックエンドを持たないGitHub Pages公開構成
評価される点
地図、時系列、カテゴリを同一UIで扱うため、単なるリンク集ではなく「どこで何が起きているか」を可視化できる。
技術課題
非ジオタグ記事の位置推定、誤配置の信頼度表示、ソース偏り、データ量増加時の表示負荷。
Tech
HTML / CSS / JavaScript / MapLibre GL JS / Python / GitHub Actions / RSS / GeoRSS / GeoJSON

XNH WebApp PDF Editor

ブラウザだけでPDFの読み込み、ページ編集、注釈、保存を行うローカル処理型PDFエディタ。

PDFVanilla JSLocal Processing公開中
概要
外部サービスへPDFを送信せず、ブラウザ内でページ操作と注釈追加を行うツール。
実装範囲
  • PDF読み込み、ページサムネイル、ページ並び替え、削除、回転、結合、抽出
  • 図形・テキスト注釈、Undo / Redo、保存処理
  • CDN非依存、静的ホスティングで動く構成
評価される点
PDFを外部に送らない設計方針と、静的Webだけで実用的な編集操作を成立させている点。
技術課題
PDF本文は描画命令の集合であり、Wordのような意味的全文編集は難しい。編集可能範囲の明示が必要。
Tech
HTML / CSS / JavaScript / pdf.js / pdf-lib / Canvas / GitHub Pages

VJ FX Maker

画像・動画・音声を読み込み、WebGL / Web Audio / Web MIDIで映像エフェクトを生成するVJツール。

Creative CodingWebGLAudio Reactive公開中
概要
ブラウザ単体で映像素材、音声反応、シーン切替、タイムライン操作を検証するVJ用エフェクトメーカー。
実装範囲
  • 素材読み込み、エフェクトレイヤー、A/Bシーン、クロスフェード
  • BPM同期、音声反応、タイムライン、キーフレーム
  • MIDI Learnによる外部操作の検証
評価される点
WebGL、Web Audio、Web MIDIを1画面にまとめ、ブラウザ上でライブ映像系UIの主要要素を検証している点。
技術課題
機能追加に伴うUI複雑化、ブラウザ差分、描画負荷、ライブ用途での安定性。
Tech
HTML / CSS / JavaScript / Canvas / WebGL / Web Audio API / Web MIDI API

SYNTH MATCH SPECTRA

Web Audio APIでシンセ音色を作り、耳と波形で一致を狙うブラウザゲーム。

GameWeb AudioMIDI公開中
概要
周波数、波形、フィルタ、歪み、空間系FXなどを調整し、ターゲット音色に近づけるミニゲーム兼シンセ実験環境。
実装範囲
  • Web Audio APIによるオシレータ、フィルタ、FX、リミッタ
  • フリープレイ、PCキーボード演奏、MIDI入力
  • 波形表示、FFT風ビジュアル、レベル制のパラメータ解放
評価される点
音声合成、ゲームUI、入力処理、可視化を単一HTMLでまとめ、操作しながら音響パラメータを確認できる点。
技術課題
ブラウザごとのAudioContext制約、MIDI権限、FXを重ねた際の音量管理、モバイル操作性。
Links

2D CAD

ブラウザで図形編集やCAD風操作系を検証する2D CADプロトタイプ。

CAD-like UIWeb AppAI Studio公開中
概要
本格CADではなく、Web上で作図UI、図形編集、スナップや寸法操作の方向性を検証するプロトタイプ。
評価される点
FA/CAD系UIへの関心を、静的Webで触れる形に落とし込んでいる点。今後のDXF/SVG入出力や寸法線実装につなげやすい。
技術課題
拘束、寸法、スナップ、座標精度、保存形式、Undo / Redo。現状は作図UIの検証段階。
Tech
HTML / CSS / JavaScript / GitHub Pages / AI Studio

DTMF Converter / DTMFの仕組み

電話のプッシュ音を周波数の組み合わせとして生成・検出する信号処理学習プロジェクト。

SignalWeb AudioStudy公開中
概要
DTMFの低群/高群周波数、生成、検出、Goertzel法、Web Audio APIでの扱いを整理した実装・解説ページ。
評価される点
通信・信号処理をWeb上で確認できる形にしており、電子工作やFAの信号理解にも接続しやすい。
技術課題
実マイク入力ではノイズ、しきい値、twist、継続時間の判定が効く。誤検出ログの可視化が次の課題。
Tech
HTML / CSS / JavaScript / Web Audio API / DTMF / 周波数解析

Site Inventory

ホームページ全体の公開物。カテゴリごとに折りたたみで整理しています。

便利ツール / Web Apps
  • QRコード読取・生成
  • PDFエディター
  • Audio Converter: 音声ファイル変換
  • SVGコンバーター
  • GIFコンバーター
  • 科学計算機: 関数・単位・グラフ系の電卓
  • 2D CADモドキ
  • DTMFコンバーター
  • VJ背景簡易映像エフェクトジェネレーター
ミニゲーム / Interactive
  • SYNTH MATCH SPECTRA: Web Audioシンセ音色マッチゲーム
  • FPVドローンゲーム
  • ランダム俳句ジェネレーター
Study / Database
  • インタラクティブ数学: 三角関数、カオス、フーリエ、確率などの視覚教材
  • 世界ニュースマップ
  • 日本の人工衛星/探査機DB
  • 日本の科学研究機関DB
Creative / Profile
  • VRChat活動記録
  • Blender / Unity / VRChat向け制作
  • 使用ソフト一覧: VS Code, Fusion 360, Blender, KiCad, GIMP, DaVinci Resolve, FL Studio Mobile
  • Blog: 制作ログ、VRChat記事、サイト更新記録

Prototype / Study Backlog

まだ公開ページとして整っていない試作・学習テーマ。各項目は検証中です。

Penplot-Gcoder

SVG / DXF / 画像からペンプロッタ用G-codeを生成するデスクトップアプリ構想。

Python GUIG-codeToolpath試作中
狙い
描画順序、ペン上下、塗りつぶし、プレビュー、実機向けG-code調整をまとめて扱う。
検証項目
SVG読み込み、2Dプレビュー、ペン上下G-code、単純な描画順最適化、実機制御を想定した安全確認。
Tech
Python / PyQt6 or PySide6 / svgpathtools / ezdxf / OpenCV / Shapely / NumPy / G-code

PDF ROI OCR Renamer

PDFの指定範囲をOCRし、抽出文字列からファイル名を生成する業務改善ツール構想。

Python GUIOCRPDF試作中
狙い
帳票PDFのファイル名変更や分類を、ROI指定と正規表現抽出で半自動化する。
検証項目
ROI保存、プレビュー、リネーム前確認、衝突時suffix、ログ出力、誤リネーム防止。
Tech
Python / PySide6 / PyMuPDF / PaddleOCR or Tesseract / Pillow / JSON設定 / 正規表現

MazeRouter_forKicad

KiCad向け自動配線ルータ。DSN/SES形式を介して外部ルータとして動かす研究テーマ。

KiCadAlgorithmRust / R&D構想中
狙い
基板配線の制約処理、迷路探索、設計ルール、ビア、ネット、クリアランスを扱う外部ルータの検証。
検証項目
小規模DSNの読み込み、グリッド化、単一ネット配線、SES出力の最小実験。
Tech
KiCad / DSN / SES / Rust / Python補助 / Maze Routing / EDA

Capability Map

経験のある領域と、試作・学習段階の領域を分けて記載しています。

実務寄り

FA、電装、PLC周辺、センサ、リレー、AC200 V系、Excel/CSV、帳票、現場トラブルの切り分け。

試作で使用

HTML/CSS/JavaScript、GitHub Pages、Python GUI、PDF処理、OCR、Web Audio、Canvas/WebGL、Web MIDI。

学習・研究中

G-code、ツールパス生成、KiCad自動配線、Rust、3Dプリンタ用スライサー、AIエージェント運用。

創作・表現

VRChat、Blender、Unity、VJ表現、俳句ジェネレーター、Web上の小規模実験。

How I Build

現場課題 / 作りたい機能

要件を短く書く

AI支援で実装案を比較する

動作確認・エラー確認・ログ確認

リスク箇所と操作性を修正する

Demo / GitHub / Note として残す