🏠 TOP
※ 本資料は「サポート終了で IE でしか動かなくなった旧システム」を、IE 依存の3大類型（① ActiveX/COM ② IE 独自 DOM/VBScript/Trident ③ Java Applet(NPAPI)）で整理し、Edge ネイティブへ移行する代表モデルです（特定顧客の実データではありません。実在の IE 依存機構を Fabbi が忠実に再現し Chromium で実描画・キャプチャ）。
いずれも「そのままでは Edge で動かない」ため移行必須。御社 CANVAS契約 は主に ③ Java Applet ＋ ② IE専用 JS/CSS が該当します。当社は旧システムのモダナイゼーション（Flash→React / VB6→Java / 脱IE 等）で、これらの IE 依存を Edge へ移行する知見・経験があります。数値・框組は 概算お見積りご提案 deck と整合。

脱IE パターン① ActiveX / COM 依存 業務Web

参考モデル - 技術パターン（特定案件の実績値ではありません）
技術：ActiveX（アップロード/PKI/埋込Office/グリッド/TWAIN）　→　Web 標準 API（File API/WebAuthn/Web Crypto/Web grid/getUserMedia）

案件概要

想定対象メーカー系/金融系 社内業務Web（文書・契約管理）
IE 依存ActiveX / COM コントロール多用（ローカルデバイス・PKI・埋込Office）
代表画面アップロード / 電子署名 / 契約帳票編集 / 文書一覧グリッド / スキャナ取込
移行先Edge ネイティブ Web（各 ActiveX を HTML5 Web API へ再構築）
前提サーバ/DB は温存、UI プラグイン層のみ作り直し

課題（なぜ IE でしか動かないか）

  • ActiveX は COM ネイティブ実行。Edge/Chrome は一切非対応 →「そのまま」は不可能
  • ローカルデバイス連携（ファイル/スキャナ/ICカード）をプラグイン無しで再現する必要
  • 自己署名 .ocx の配布・更新（GPO/インストール）という運用負債

Fabbi の対応

  • FARE が ActiveX 呼び出し（classid / CreateObject / OWC）を横断抽出・棚卸
  • NEXA が Web 標準 API への置換パターンをテンプレート化（File API / WebAuthn / SheetJS / getUserMedia）
  • UI プラグイン層のみ再構築、サーバ/DB は温存

効果 / 結果

  • ActiveX 依存が消え、インストール・証明書配布が不要 → Edge でそのまま動作
  • ローカル機能は Web 標準 API で機能同等に再現（撮影 / 署名 / ファイル）
  • ※ 代表的な脱ActiveX 技術パターン（特定案件の実績値ではありません）

学び（この類型の核心）

  • IE 依存は ActiveX プラグイン層に集中 → その層だけ作り直せば良い
  • ローカルデバイス系は Web API（getUserMedia / File System Access / WebAuthn）で代替可能
  • .ocx の配布・更新負債が消えるのが運用上の最大メリット
移行方法・システム設計（層別アーキテクチャ）
脱IE パターン① ActiveX / COM 依存 業務Web 移行方法
AS-IS / TO-BE 画面モックアップ（代表 5画面）
画面 1文書アップロードActiveX ファイルアップロード移行：ActiveX 一括転送を HTML5 File API（D&D/分割/進捗）へ。インストール不要。
AS-ISIE 依存文書アップロード AS-IS
⚠ ActiveX コントロール（DocUploadCtrl.ocx）必須。Edge / 標準モードでは動作しません。
TO-BEEdge / Web標準文書アップロード TO-BE
画面 2電子署名（PKI）ActiveX スマートカード署名移行：ActiveX PKI/CAPICOM 署名を WebAuthn / Web Crypto へ。ICカードは PIV/FIDO2。
AS-ISIE 依存電子署名（PKI） AS-IS
⚠ ActiveX（CAPICOM / CSP）依存。Edge には ActiveX / CryptoAPI プラグイン機構が無く動作しません。
TO-BEEdge / Web標準電子署名（PKI） TO-BE
画面 3契約書 帳票編集ActiveX 埋め込み Excel (OWC)移行：埋込 Excel（OWC ActiveX）を Web スプレッドシート＋サーバ xlsx へ。
AS-ISIE 依存契約書 帳票編集 AS-IS
⚠ Office Web Components（ActiveX）依存。Edge では埋め込み Excel が表示できません。
TO-BEEdge / Web標準契約書 帳票編集 TO-BE
画面 4文書一覧ActiveX グリッドコントロール移行：ActiveX グリッド（MSFlexGrid）を Web データテーブルへ。VB6 ランタイム不要。
AS-ISIE 依存文書一覧 AS-IS
⚠ MSFlexGrid（ActiveX）依存。Edge ではグリッドが描画されません。
TO-BEEdge / Web標準文書一覧 TO-BE
画面 5スキャナ取込ActiveX TWAIN スキャナ移行：ActiveX TWAIN を ネットワークスキャナ＋モバイル撮影（getUserMedia）へ。
AS-ISIE 依存スキャナ取込 AS-IS
⚠ TWAIN 連携 ActiveX 依存。Edge にはローカルデバイス連携 ActiveX が無く動作しません。
TO-BEEdge / Web標準スキャナ取込 TO-BE

脱IE パターン② IE 独自 DOM / VBScript / Trident 依存 業務Web

参考モデル - 技術パターン（特定案件の実績値ではありません）
技術：IE専用 JS/DOM/CSS（showModalDialog/document.all/attachEvent/VBScript/Trident CSS）　→　標準 DOM/CSS

案件概要

想定対象社内 申請・承認ワークフロー（JSP / ASP 系）
IE 依存プラグイン無し・純 JS/CSS の IE 独自構文
代表画面showModalDialog / VBScript検証 / Trident CSS / attachEvent / showModelessDialog
移行先Edge 標準モード（IE専用構文を標準へ in-place 置換）
前提サーバ/DB は温存、画面単位の最小改修

課題（なぜ IE でしか動かないか）

  • showModalDialog / showModelessDialog は全モダンブラウザで廃止済
  • document.all / attachEvent / VBScript は非標準・IE のみ
  • Trident CSS（filter:progid / expression()）＋ 条件付きコメント・互換モード依存

Fabbi の対応

  • FARE が IE 独自構文を横断抽出（自動化率 90%級）
  • NEXA が標準置換テンプレを同型画面へ一括適用（<dialog> / querySelector / addEventListener / 標準CSS）
  • 画面単位の in-place 改修（全面刷新より安価・短期）

効果 / 結果

  • ブラウザ分岐コード（条件付きコメント）が消え保守性向上
  • モーダル / イベント / CSS が標準化され Edge で安定動作
  • ※ 代表的な脱IE-DOM 技術パターン（特定案件の実績値ではありません）

学び（この類型の核心）

  • プラグイン依存が無いシステムは最も軽い脱IE（最小改修で完了）
  • 最大の工数は修正でなく「IE 依存箇所の発見」→ 機械走査が効く
  • 互換モード（X-UA-Compatible）撤去まで含めて標準化する
移行方法・システム設計（層別アーキテクチャ）
脱IE パターン② IE 独自 DOM / VBScript / Trident 依存 業務Web 移行方法
AS-IS / TO-BE 画面モックアップ（代表 5画面）
画面 1showModalDialog 申請入力showModalDialog（IE専用モーダル）移行：window.showModalDialog を 標準 <dialog> / React モーダルへ。
AS-ISIE 依存showModalDialog 申請入力 AS-IS
⚠ window.showModalDialog() で入力ダイアログを表示。Edge / モダンブラウザは showModalDialog を廃止済で動作しません。
TO-BEEdge / Web標準showModalDialog 申請入力 TO-BE
画面 2document.all + VBScript 検証document.all / VBScript バリデーション移行：VBScript + document.all 検証を 標準 DOM + TypeScript 検証へ。
AS-ISIE 依存document.all + VBScript 検証 AS-IS
⚠ <script language="vbscript"> ＋ document.all("txtAmount") でフォーム検証。VBScript は IE のみ、document.all は非標準。Edge で動作しません。
TO-BEEdge / Web標準document.all + VBScript 検証 TO-BE
画面 3Trident CSS レイアウトfilter / expression / Trident CSS移行：filter:DXImageTransform / expression() を 標準 CSS へ。互換モード撤去。
AS-ISIE 依存Trident CSS レイアウト AS-IS
⚠ CSS filter:progid:DXImageTransform / width:expression() / zoom は Trident 専用。Edge では effect が無効・レイアウト崩れが発生します。
TO-BEEdge / Web標準Trident CSS レイアウト TO-BE
画面 4条件付きコメント + attachEvent条件付きコメント / attachEvent移行：条件付きコメント + attachEvent を 単一標準コード（addEventListener）へ。
AS-ISIE 依存条件付きコメント + attachEvent AS-IS
⚠ 条件付きコメント <!--[if IE]> と attachEvent/detachEvent（IE専用）でイベント登録。Edge は両方とも非対応。
TO-BEEdge / Web標準条件付きコメント + attachEvent TO-BE
画面 5showModelessDialog 検索補助showModelessDialog（IE専用）移行：showModelessDialog を 非モーダルのサイドパネル/ドロワーへ。
AS-ISIE 依存showModelessDialog 検索補助 AS-IS
⚠ window.showModelessDialog() で検索補助のフローティング窓を表示。Edge は showModelessDialog を廃止済。
TO-BEEdge / Web標準showModelessDialog 検索補助 TO-BE

脱IE パターン③ Java Applet (NPAPI) 依存 業務Web

参考モデル - 技術パターン（特定案件の実績値ではありません）
技術：Java Applet（作図/計測/帳票/署名/ファイル）　→　Canvas/SVG + Web API（A案）/ OpenWebStart（B案）

案件概要

想定対象生産・図面システム（Applet ビューア / 帳票 / 署名）
IE 依存Java Applet（NPAPI）多用
代表画面図面ビューア / 帳票印刷 / ファイル入出力 / 電子署名 / Applet+ダイアログ複合
移行先Edge ネイティブ（A案：Canvas/SVG Web再構築 / B案：OpenWebStart）
前提サーバ/DB は温存、Applet は別費目で明示

課題（なぜ IE でしか動かないか）

  • NPAPI は全モダンブラウザで廃止 → Applet は「そのまま」動かせない
  • Java Web Start も JDK9 非推奨/JDK11 削除、JDK26 で Applet API 完全削除
  • Applet が業務ロジック/ローカルアクセス/印刷を抱えるほど工数が増える（最大変数）

Fabbi の対応

  • FARE が Applet の call-graph（java.awt.print / java.io / Java Security）を解析
  • A案：React/TS + Canvas/SVG + Web API（File / Web Crypto / CSS印刷）で恒久再構築
  • B案：OpenWebStart でデスクトップ延命（証明書 / JRE 配布負債は残る）

効果 / 結果

  • A案なら Edge ネイティブ化 ＋ 将来再利用可能な Web 資産を同時獲得
  • 印刷 / 署名 / ファイルは Web 標準 API で機能同等に再現
  • ※ 代表的な脱Applet 技術パターン（特定案件の実績値ではありません）

学び（この類型の核心）

  • Applet を「そのまま動く」と扱わず費目を分離して明示 = 誠実な概算
  • 印刷まわりは実際の印刷物での確認が必須（プレビュー不十分）
  • 業務ロジック有無で A案 / B案 を判断
移行方法・システム設計（層別アーキテクチャ）
脱IE パターン③ Java Applet (NPAPI) 依存 業務Web 移行方法
AS-IS / TO-BE 画面モックアップ（代表 5画面）
画面 1Applet 図面ビューアJava Applet 作図/計測移行：Applet 作図/計測を Canvas/SVG + TypeScript へ再構築。
AS-ISIE 依存Applet 図面ビューア AS-IS
⚠ Java Applet（NPAPI）依存。Edge は NPAPI 非対応で Applet が起動しません。
TO-BEEdge / Web標準Applet 図面ビューア TO-BE
画面 2Applet 帳票プレビュー/印刷Java Applet 帳票印刷移行：Applet プリンタ制御を サーバ帳票（PDF）＋ CSS印刷へ。
AS-ISIE 依存Applet 帳票プレビュー/印刷 AS-IS
⚠ Applet がプリンタを直接制御（java.awt.print）。NPAPI 廃止で Edge では起動不可。
TO-BEEdge / Web標準Applet 帳票プレビュー/印刷 TO-BE
画面 3Applet ファイル入出力Java Applet ローカルファイル移行：署名付き Applet のローカルファイルを File System Access API へ。
AS-ISIE 依存Applet ファイル入出力 AS-IS
⚠ 署名付き Applet の java.io でローカル C:\ を直接読み書き。NPAPI 廃止＋セキュリティ制約で Edge 不可。
TO-BEEdge / Web標準Applet ファイル入出力 TO-BE
画面 4Applet 電子署名Java Applet 署名移行：Applet keystore 署名を Web Crypto / WebAuthn へ。
AS-ISIE 依存Applet 電子署名 AS-IS
⚠ Applet が keystore / ICカードで署名（Java Security）。NPAPI 廃止で Edge 起動不可。
TO-BEEdge / Web標準Applet 電子署名 TO-BE
画面 5Applet + showModalDialog 連携Applet + showModalDialog（複合）移行：Applet + showModalDialog の複合依存を 単一SPA（Canvas+<dialog>）へ。
AS-ISIE 依存Applet + showModalDialog 連携 AS-IS
⚠ Applet（NPAPI）と showModalDialog（IE専用）の複合依存。Edge では両方とも動作しません。
TO-BEEdge / Web標準Applet + showModalDialog 連携 TO-BE