はじめに

ActiveXは、かつてWebサイトで動画やゲームといったインタラクティブなコンテンツを提供するために利用されてきた小さなアプリケーション技術だ。
また、株価表示やツールバーといったコンテンツを操作可能にする機能も備えていた。
しかし、自動更新されないActiveXコントロールも多く、脆弱性を悪用した攻撃の温床となりやすい。
これにより、誤動作や不要なコンテンツの表示だけでなく、次のようなセキュリティリスクが発生することがある。

PCから情報を収集される
情報を破壊される
許可なくソフトウェアをインストールされる
PCを第三者にリモート制御される

現在、主要なブラウザがActiveXのサポートを終了し、セキュリティの観点からも利用が推奨されない状況にある。

本記事では、ActiveXをHTML Living Standard（モダンなWeb技術）へ移行する手順を解説する。
これにより、安全かつ効率的なWebアプリケーションを構築できるようになる。

手順

1. 移行が必要な理由を整理する

ActiveXは便利な機能を提供してきたが、以下の理由から現代のWeb標準技術への移行が急務である。

セキュリティの脆弱性: 自動更新されないコントロールは攻撃の標的となる。
主要ブラウザの非対応: Internet Explorerを除くほとんどのブラウザで動作しない。
保守性の低下: ActiveXはレガシー技術として扱われており、更新やサポートが期待できない。

これらの問題を解決するため、HTML Living Standardを活用した安全な仕組みを構築する必要がある。

2. ActiveXの利用状況を調査する

現在の用途を把握する

まず、ActiveXがどのような機能を提供しているかを調査する。
以下の観点を確認する。 - 動画再生やゲームなどのコンテンツ提供

データ表示（例: 株価や天気情報）
ユーザーインターフェースのカスタマイズ（ツールバーやフォーム）
サーバーとの通信やデータ処理

セキュリティリスクを分析

ActiveXを使用している箇所で、以下のようなリスクが発生していないか確認する。 - コンテンツが誤動作していないか - 不要なプラグインが動作していないか - 既知の脆弱性がないか（例: 不正アクセスやリモート制御）

3. HTML Living Standardへの移行

利用シナリオごとの代替技術

ActiveXで実現されていた機能を、HTML Living Standardで実装するために以下の技術を採用する。

動画再生: <video>要素とJavaScriptを組み合わせて実装
データ表示: Fetch APIやWebSocketを利用してリアルタイムでデータを更新
ゲームや高度な処理: WebGLまたはWebAssemblyを使用
カスタムUI要素: CSSとJavaScriptを用いたモダンなデザインに移行

サンプルコード: 動画再生をHTML5で実装する

ActiveXで動画を再生していた箇所をHTML5の要素で置き換える。

ActiveX版（旧）

以下はActiveXを利用して動画を再生するコードの例。

<object classid="clsid:XXXXX" width="640" height="360">
    <param name="src" value="movie.mp4">
</object>

HTML版（新）

HTMLの<video>要素を使ったモダンな実装例。

<video id="myVideo" controls width="640" height="360">
    <source src="movie.mp4" type="video/mp4">
    お使いのブラウザは動画再生に対応していません。
</video>

JavaScriptで操作する例：以下のコードで、再生・停止ボタンを追加して、インタラクティブな操作を実現する。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Video Example</title>
</head>
<body>
    <video id="myVideo" controls width="640" height="360">
        <source src="movie.mp4" type="video/mp4">
        お使いのブラウザは動画再生に対応していません。
    </video>
    <br>
    <button id="playBtn">再生</button>
    <button id="pauseBtn">一時停止</button>

    <script>
        const video = document.getElementById("myVideo");
        const playBtn = document.getElementById("playBtn");
        const pauseBtn = document.getElementById("pauseBtn");

        playBtn.addEventListener("click", () => {
            video.play();
        });

        pauseBtn.addEventListener("click", () => {
            video.pause();
        });
    </script>
</body>
</html>

サンプルコード: サーバー通信をFetch APIで置き換える

ActiveXを利用したHTTP通信を、Fetch APIで実現する方法を紹介する。

ActiveX版（旧）

以下はActiveXを使用してHTTPリクエストを送信するコード。

var xhr = new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("GET", "https://example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

Fetch API版（新）

Fetch APIを使用して同じHTTP通信を実現する例。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Fetch API Example</title>
</head>
<body>
    <button id="fetchDataBtn">データを取得</button>
    <div id="output"></div>

    <script>
        document.getElementById("fetchDataBtn").addEventListener("click", () => {
            fetch("https://jsonplaceholder.typicode.com/posts/1")
                .then(response => {
                    if (!response.ok) {
                        throw new Error("HTTP error " + response.status);
                    }
                    return response.json();
                })
                .then(data => {
                    document.getElementById("output").textContent = JSON.stringify(data, null, 2);
                })
                .catch(error => {
                    console.error("Fetch error:", error);
                });
        });
    </script>
</body>
</html>

このコードでは、Fetch APIを使い、ボタンをクリックするとデータを取得し、画面に表示する仕組みを実現している。

サンプルコード: リアルタイム通信をWebSocketで置き換える

リアルタイム通信をActiveXからWebSocketへ移行する例を示す。

WebSocket版（新）

以下のコードで、サーバーとのリアルタイム通信を行う。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
</head>
<body>
    <button id="connectBtn">接続</button>
    <div id="messages"></div>

    <script>
        let socket;

        document.getElementById("connectBtn").addEventListener("click", () => {
            socket = new WebSocket("wss://example.com/socket");

            socket.onopen = () => {
                console.log("WebSocket 接続が確立しました");
                socket.send("Hello Server!");
            };

            socket.onmessage = (event) => {
                const messagesDiv = document.getElementById("messages");
                const newMessage = document.createElement("div");
                newMessage.textContent = "受信: " + event.data;
                messagesDiv.appendChild(newMessage);
            };

            socket.onerror = (error) => {
                console.error("WebSocket エラー:", error);
            };

            socket.onclose = () => {
                console.log("WebSocket 接続が切断されました");
            };
        });
    </script>
</body>
</html>