Electronを活用したデスクトップアプリケーション、JavaScriptベースのフロントエンド、そしてTypeScriptベースのバックエンドを組み合わせ、VRChatの写真を解析・メタデータを抽出した上で友達ネットワークを可視化するフルスタックアプリケーションを作ってみました。
ダウンロードやSource Codeに関しては下記のリンクを確認してください。
1. 使用技術スタックと開発環境
バックエンド
-
言語/フレームワーク: TypeScript, Node.js, Express
→ バックエンドAPIサーバーはExpress/RESTful APIをベースに構築され、TypeScriptの強力な型検査とモジュールシステムにより、安定したコード構造が保たれています。 -
ファイルシステム操作: Node.js組み込みモジュール（fs, path）および fs-extra
→ 画像ディレクトリの探索、メタデータファイルの読み書き作業を行います。 -
HTTPリクエスト処理および外部連携: node-fetch, form-data
→ 画像アップロード時に外部一時ファイルホスティングサービス（tmpfiles.org）と連携します。 -
リアルタイム進捗状況更新: Server-Sent Events (SSE)
→ メタデータ生成作業の進捗状況をリアルタイムでクライアントにストリーミングします。
フロントエンド
-
言語/ライブラリ: JavaScript, HTML, CSS, d3.js
→ VRChatの友達ネットワークの可視化は、d3.jsのforce simulationを活用して実装され、ユーザーとのインタラクション（検索、スライダー、ズーム、ドラッグなど）をサポートします。 - UIフレームワークとスタイリング: CSS
-
通信: fetch API, EventSource (SSE)
→ バックエンドとのデータ通信や、リアルタイムの進捗状況更新に使用されます。 -
Electronレンダラープロセス
→ Electron内でHTML/CSS/JavaScriptで作成されたフロントエンドが、デスクトップアプリケーションとして動作します。
2. バックエンド：画像メタデータのパースとAPIサーバー
2-1. 画像メタデータのパース
バックエンドの主要機能のひとつは、VRChatの写真（PNGファイル）内に含まれるメタデータを抽出することです。写真には、PNG標準のiTXtチャンクを利用してJSON形式のメタデータが埋め込まれています。
主要な実装ロジックは src/utils/pngParser.ts に実装され、以下の手順でメタデータを抽出します。
- PNG形式の検証: PNGファイルのシグネチャ（137,80,78,71,13,10,26,10）を確認します。
- チャンクのパース: ファイルデータを順次読み込み、各チャンクの長さ、タイプ、データ、CRC値をパースします。
-
iTXtチャンクの抽出とパース: iTXtチャンクが存在する場合、そのチャンクからテキストデータを抽出し、JSONとしてパースします。
もしiTXtチャンクが存在しない場合は、デフォルトで現在の時刻とファイル名を含む空のメタデータオブジェクトを返します。
pngParser.ts 主要コードスニペット
private extractMetadata(data: Buffer): any { if (!this.isPNG(data)) { throw new Error("Invalid PNG format"); } const chunks = this.parseChunks(data); const iTXtChunk = chunks.find(chunk => chunk.type === "iTXt"); if (!iTXtChunk) { return { timestamp: new Date().toISOString(), filename: path.basename(this.filePath), metadata: {} }; } try { const metadata = this.parseITXtChunk(iTXtChunk.data); return { ...JSON.parse(metadata), timestamp: new Date().toISOString(), filename: path.basename(this.filePath) }; } catch (error) { throw new Error(`Failed to parse metadata: ${error instanceof Error ? error.message : "Unknown error"}`); } }
2-2. メタデータの構造と含まれる情報
メタデータはPNGファイルのiTXtチャンク内にJSON文字列として保存されます。一般的に含まれる情報は以下の通りです:
- timestamp: メタデータ生成時刻（バックエンドでデフォルト値として追加）
- filename: 元のPNGファイル名
-
metadata: ユーザーまたはシステムによって挿入された追加情報
→ 例として、VRChat内での友達関係を表現するためのfriend ID、友達間の相互作用回数、タグ情報などが含まれる可能性があります。
この構造により、バックエンドは各JSONファイルを読み込み、VRChatの友達ネットワークデータに変換し、d3.jsによる可視化に必要なノードとリンクのデータを生成できます。
2-3. APIサーバーとSSEによる進捗状況更新
バックエンドのExpressサーバーは、さまざまなAPIエンドポイントを提供しています。代表的なエンドポイントは以下の通りです:
- /api/metadata/generate: PNGファイルをスキャンし、メタデータを生成する作業を開始し、SSEを通じて "start"、"progress"、"complete" などのイベントをストリーミングします。
- /api/metadata/date-range, /api/metadata/filter: メタデータファイルの日付範囲を計算したり、特定期間内のファイルのみをフィルタリングします。
- /api/upload/image: クライアントから送信されたBase64画像データを外部ホスティングサービスにアップロードします。
SSEを使用したリアルタイム更新により、ユーザーはメタデータ生成作業の進捗状況を確認し、必要に応じて作業を中断することが可能です。
3. フロントエンド：VRChat友達ネットワークの可視化
3-1. データの可視化とd3.js
フロントエンドでは、d3.jsを利用して友達ネットワークを可視化します。主要な実装は public/js/network-visualization.js にあり、force simulationを通じてノードとリンクの物理的な配置を計算します。
例えば、以下のコードでは各ノードの大きさと色は出現回数（友達関係の頻度など）に基づいて決定され、リンクは関係強度により線の太さと透明度が調整されます。
ネットワーク可視化コードスニペット
const simulation = d3.forceSimulation(filteredNodes) .force('link', d3.forceLink(currentLinks) .id(d => d.id) .distance(d => 200 / (d.strength || 1))) .force('charge', d3.forceManyBody().strength(d => -500 * Math.sqrt(d.count))) .force('collide', d3.forceCollide().radius(d => Math.sqrt(d.count) * 10 + 20)) .force('x', d3.forceX(width / 2).strength(0.03)) .force('y', d3.forceY(height / 2).strength(0.03));
3-2. UIとインタラクション機能
フロントエンドはElectronのレンダラープロセス内で動作し、ユーザーとの多様なインタラクションをサポートします。
- 検索機能: 特定の友達名でノードをハイライトし、関連するリンクのみを強調表示します。
- 日付スライダー: メタデータの日付範囲に基づいてフィルタリングし、特定期間のデータのみを可視化します。
- 共有およびエクスポート: SVGエクスポートやPNG変換を通じて生成されたネットワークグラフを外部に共有可能にします。
- ローディングオーバーレイと進捗状況表示: メタデータ生成作業中は、ローディングスピナーとともに現在の進捗状況をリアルタイムでユーザーに表示します。