🌐 外部デバイス向け中継サーバー構築マニュアル

⚠️ 注意： この機能は、Node.jsやターミナル（コマンドプロンプト）の基本的な操作がわかる開発者向けの応用機能です。

🤔 なぜ「Node.jsで専用のサーバー」を作らないの？

「スマホやIoT機器から変換APIを叩きたいなら、Node.jsで普通に漢字変換サーバーを組めばいいのでは？」と思うかもしれません。しかし、あえて「Node.jsを単なる土管（中継）として使い、Chromeブラウザに処理を丸投げする」のには、3つの強烈なメリットがあります。

🧠 1. 育てた「自分専用の脳みそ」を全デバイスで使い回せる

Node.jsで新しくサーバーを立てると、それは「生まれたての状態」です。しかしこの構成なら、PCのブラウザで一生懸命登録した単語や学習履歴を、スマホやIoT機器からそのまま引き継いで使うことができます。

🗂️ 2. 面倒な「管理画面の自作」が不要になる

辞書の追加や単語の削除を行うためのWeb画面をNode.js側に自作する必要がありません。管理はすべてChrome拡張機能の「総合管理パネル」で行えるため、中継サーバーのコードは驚くほどシンプルになります。

⚡ 3. サーバー（Node.js）のメモリ消費が「ほぼゼロ」

巨大なSKK辞書データをメモリに抱え込む重たい処理は、すべてPCのChromeが負担します。中継サーバー自体はただ通信を流すだけなので、Raspberry Piなどの非力なデバイス上で動かしても全く重くなりません。

⚙️ システムの全体構成図

📱 スマホ・IoT機器 ( 変換リクエスト )
⬇
🌐 Node.js 中継サーバー ( http://192.168.x.x:3000/api/convert )
⬇ WebSocket で通信をパス ⬇
💻 PCのChromeブラウザ ( http://localhost:3000 を開いて待機 )
⬇ 拡張機能へ sendMessage ⬇
🧩 ローカル漢字変換エンジン ( 辞書検索＆学習 )
⬇
変換結果を逆のルートでスマホへ返す！

🛠️ 構築ステップ

1 プロジェクトの準備

空のフォルダを作成し、ターミナルで以下のコマンドを実行して Node.js のプロジェクトを初期化し、必要なパッケージ（Express と Socket.io）をインストールします。

mkdir relay-server
cd relay-server
npm init -y
npm install express socket.io

2 サーバーコードの作成

以下のコードを server.js として保存します。これが「土管」の役割を果たすサーバーです。

server.js

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.use(express.json());
app.use(express.static('public')); // publicフォルダのファイルを返す

let chromeClient = null; // Chromeブラウザの接続を保持

// ChromeブラウザからのWebSocket接続を待受
io.on('connection', (socket) => {
    console.log('クライアントが接続しました:', socket.id);
    chromeClient = socket;

    socket.on('disconnect', () => {
        console.log('切断されました:', socket.id);
        chromeClient = null;
    });
});

// 外部デバイスからのAPIリクエスト（POST）を受け取る
app.post('/api/convert', (req, res) => {
    if (!chromeClient) {
        return res.status(503).json({ error: "Chromeブラウザが接続されていません" });
    }

    const requestData = req.body;
    
    // Chromeブラウザへ変換を依頼
    chromeClient.emit('request_convert', requestData, (response) => {
        // Chromeからの返事をそのまま外部デバイスへ返す
        res.json(response);
    });
});

const PORT = 3000;
server.listen(PORT, '0.0.0.0', () => {
    console.log(`中継サーバー起動: http://localhost:${PORT}`);
});

3 Chromeを繋ぐ「ブリッジ画面」の作成

プロジェクトフォルダの中に public というフォルダを作り、その中に以下の index.html を保存します。
このページが、中継サーバーとChrome拡張機能（エンジン）の間の通訳をします。

public/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>中継ブリッジ待機中</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body style="font-family: sans-serif; background: #2c3e50; color: white; text-align: center; padding: 50px;">
    
    <h1>🌐 変換エンジン 中継ブリッジ</h1>
    <p>このタブを開いている間、外部デバイスからの変換リクエストを処理します。</p>
    <div id="log" style="background: #1a252f; padding: 15px; border-radius: 5px; height: 300px; overflow-y: auto; text-align: left; font-family: monospace;"></div>

    <script>
        // ★ここにインストールした拡張機能のIDを入れます
        const ENGINE_ID = "cddamopplhdhbpgphpnaineilgecdiaa";
        const socket = io();
        const logEl = document.getElementById('log');

        function addLog(msg) {
            logEl.innerHTML += `<div>[${new Date().toLocaleTimeString()}] ${msg}</div>`;
            logEl.scrollTop = logEl.scrollHeight;
        }

        socket.on('connect', () => addLog("中継サーバーに接続しました。待機中..."));
        socket.on('disconnect', () => addLog("中継サーバーから切断されました。"));

        // サーバーから「変換して！」とお願いされた時の処理
        socket.on('request_convert', (data, callback) => {
            addLog(`リクエスト受信: ${data.text}`);

            // Chrome拡張機能のエンジンにそのまま投げる
            chrome.runtime.sendMessage(ENGINE_ID, {
                action: "CONVERT",
                text: data.text,
                mode: data.mode || "segmented"
            }, (response) => {
                
                if (chrome.runtime.lastError) {
                    addLog("❌ エラー: 拡張機能に接続できません。");
                    callback({ success: false, error: "Engine not found" });
                    return;
                }
                
                addLog(`✅ 変換完了`);
                // サーバー（外部デバイス）へ結果を返す
                callback(response);
            });
        });
    </script>
</body>
</html>

4 実際に動かしてみよう！

1. サーバーを起動する
ターミナルで以下のコマンドを実行し、サーバーを立ち上げます。

node server.js

2. Chromeでブリッジ画面を開く
PCのChromeブラウザで http://localhost:3000 にアクセスします。「待機中...」と表示されればOKです。
※このタブを開いている間だけ、通信が通ります。

3. 外部からAPIを叩く
同じWi-Fiに繋がっているスマホや別のPCから、APIに向けてデータをPOSTします。（以下の例はMac/Linuxのターミナル用です。192.168.x.x はサーバーPCのIPアドレスに変えてください）

curl -X POST http://192.168.x.x:3000/api/convert \
-H "Content-Type: application/json" \
-d '{"text": "きょうはいいてんき", "mode": "auto"}'

無事に漢字変換されたJSONデータがスマホ側に返ってくれば、中継サーバーの構築は成功です！この仕組みを応用すれば、自作のIoTキーボードやスマホアプリの「脳みそ」として、PCのエンジンをフル活用できます。