30 days AI challenge 27 日目 – day 27

本記事は 2026/02/01 ~ 2026/03/02 の間毎日 AI アプリケーション開発（AI を搭載したアプリ開発 or AI を使用した開発）をテーマに 30 days AI challenge を行う 27 日目のブログポストです。

昔々、あるところに MSN Games というサイト（今もある）と Shockwave というマルチメディア技術（プラグイン）がありました。

Shockwave は主に 3D や物理演算などリッチコンテンツを作ることができるブラウザ用プラグインで、Flash のようなイメージです。現代であれば、HTML5, CSS, Javascript でウェブアプリを作ることができますが、私が小さいころ、この Shockwave を使ったウェブアプリのようなものがたくさんあり、Windows 98 や Windows 2000 でいろいろと遊んでいた記憶があります。

その shockwave アプリのデータが手元にあるのですが、このデータは Adobe Director と呼ばれるソフトを使ってゲームの読み取りや編集ができます（.exe 化しましたがウェブアプリ化は失敗）。ただし、shockwave 自体はすでにサポート終了しており、Adobe Director 自体もすでに提供終了しています。

このような昔遊んでアプリを再現したいと思い今日のアプリを作りました。

アプリ概要
技術要素
終わりに

アプリ概要

AI といえどもバイナリデータを読み取ってゲームの再現はできませんでした。Shockwave アプリでは html でサイトを開きそこから shockwave ファイル（.dcr）を呼び出して実行します。
ただ html にはそのゲームの情報が少し残っており、また、画像データなども若干残っているのでそれらをもとに AI にアプリを再現してもらいました。

過去に shockwave アプリで遊んだことがあるひと、かつ私と同じアプリを遊んだことがある人しか共感できないと思うので、アプリ画面はさらっと流します。

いくつかのゲームがあり、それらを記憶と残った残骸データを頼りに再現した結果がこちらです（再現度は低いです）。

昔のゲームなのでゲームの内容については触れないでください笑
ジョークアプリもあり、以下のアプリはバーコードを読み取りその内容によっておじさんに髪の毛をはやしてあげるという謎アプリです。
今見返しても意味不明ですが、割と再現度が高いです。。。

アプリ自体から画像データを表示する仕組みにしていないので、記号や図形を混ぜたイラストを AI が生成してくれています。

できれば shockwave ファイルを binary 以外のデータとして取り出し、それを AI が理解してくれればもっと再現できると思うのですが、そのためにはすでに売られていない Adobe 製品を手に入れる必要がありますので、ほぼ不可能ですね。

技術要素

ゲームの再現アプリなので、技術ロジックとしては紹介する箇所があまりありません。

1 ページの中でタブでゲームを切り替える実装なので、そこだけ紹介します。
タブ切り替えは以下のような実装になります。@onclick で HTML 要素を取得、class の設定をしたり、DOM を削除/生成したりしています。

[ユーザークリック] 
    ↓
@onclick ラムダ実行: activeTab = "sushi"
    ↓
Blazor が StateHasChanged() を自動呼出
    ↓
コンポーネント再レンダリング
    ↓
├─ タブボタン: "sushi" のボタンだけ class="game-tab active"
├─ @if (activeTab == "barcode") → false → DOM 削除
├─ @if (activeTab == "bingo")   → false → DOM 削除
├─ @if (activeTab == "sushi")   → true  → DOM 生成 ✅
├─ @if (activeTab == "fishing") → false → DOM 削除
└─ @if (activeTab == "dragon")  → false → DOM 削除

@* タブ切り替え *@
<div class="game-tabs">
    <button class="game-tab @(activeTab == "barcode" ? "active" : "")"
            @onclick='() => activeTab = "barcode"'>
        🏷️ バーコードゲーム
    </button>
    <button class="game-tab @(activeTab == "bingo" ? "active" : "")"
            @onclick='() => activeTab = "bingo"'>
        🎱 ビンゴゲーム
    </button>
    <button class="game-tab @(activeTab == "sushi" ? "active" : "")"
            @onclick='() => activeTab = "sushi"'>
        🍣 寿司ゲーム
    </button>
    <button class="game-tab @(activeTab == "fishing" ? "active" : "")"
            @onclick='() => activeTab = "fishing"'>
        🎣 釣りゲーム
    </button>
    <button class="game-tab @(activeTab == "dragon" ? "active" : "")"
            @onclick='() => activeTab = "dragon"'>
        🐉 ドラゴンゲーム
    </button>
</div>