Flashを再生したいのでReactのcomponentDidMount()にRuffleを書きたい

前提・実現したいこと

Ruffle js を利用して、Flashの遺産を再利用しようとしています。

Reactでreact-router-domでURLが切り替わった後に、
id='flash001'のタグがあれば
そこにflashコンテンツを埋め込んで再生させたいです。

発生している問題・エラーメッセージ

現状のコードで、id='flash001'が存在するURLに直接アクセスした時には、loadイベントが起きるので再生されます。
ところが、Reactの{ Router, Link, Switch }を利用したURL遷移をした時には、loadイベントが起きないので、再生されません。

該当のソースコード

id='flash001'があるのはmaincontent.jsです。

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8" />
6  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7  <meta name="viewport" content="width=device-width, initial-scale=1" />
8  <meta name="theme-color" content="#000000" />
9  <meta name="description" content="Web site created using create-react-app" />
10  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12  <title>React App</title>
13  <script src="%PUBLIC_URL%/ruffle/ruffle-nightly-2021_05_17-web-selfhosted/ruffle.js"></script>
14</head>
15
16<body>
17  <noscript>You need to enable JavaScript to run this app.</noscript>
18  <div id="root"></div>
19</body>
20
21<script>
22  window.addEventListener("load", () => {
23    const ruffle = window.RufflePlayer.newest();
24    const player = ruffle.createPlayer();
25    const container = document.getElementById("flash001");
26    container.appendChild(player);
27    player.load("%PUBLIC_URL%/flash/top.swf");
28    player.config = {
29      // Options affecting the whole page
30      "publicPath": "Failed to load the video!",
31      "polyfills": true,
32      // Options affecting files only
33      "autoplay": "true",
34      "unmuteOverlay": "hidden",
35      "backgroundColor": null,
36      "letterbox": "fullscreen",
37      "warnOnUnsupportedContent": true,
38      "contextMenu": false,
39      "upgradeToHttps": window.location.protocol === "https:",
40      "logLevel": "error",
41    };
42  });
43</script>
44
45</html>

index.js

react
1import React from 'react';
2import ReactDOM from 'react-dom';
3// import BrowserRouter from "react-router-dom";
4import './index.sass';
5// import App from './App';
6import reportWebVitals from './reportWebVitals';
7import MainApp from "./components/main";
8import HeaderApp from "./components/header";
9import FooterApp from "./components/footer";
10import { createBrowserHistory } from "history"
11import { Router } from 'react-router';
12
13const history = createBrowserHistory({ basename: '/new_web' });
14ReactDOM.render(
15  <React.StrictMode>
16    <Router history = {history}>
17      <HeaderApp></HeaderApp>
18      <MainApp></MainApp>
19      <FooterApp></FooterApp>
20      </Router>
21  </React.StrictMode>,
22  document.getElementById('root')
23);
24
25// If you want to start measuring performance in your app, pass a function
26// to log results (for example: reportWebVitals(console.log))
27// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
28reportWebVitals();

main.js

react
1import React from 'react';
2import { Route, Switch } from 'react-router-dom';
3import FixedSubNavApp from "./fixed_subnav";
4import OutlineApp from './outline';
5import OutlineNavApp from './subnav_outline';
6import MainContentApp from './maincontent';
7
8class MainApp extends React.Component {
9    render() {
10        return (
11            <main id="wrap_main">
12                <div id="sidearea">
13                    <div id="sidebar">
14                        <article class="sidebar-content">
15                            <ul>
16                                <Switch>
17                                    <Route exact path="/" render={() => <div></div>} />
18                                    <Route path="/outline" component={OutlineNavApp} />
19                                    <Route render={() => <li>NotFound</li>} />
20                                </Switch>
21                            </ul>
22                        </article>
23                        <article class="sidebar-content">
24                            <ul>
25                                <FixedSubNavApp />
26                            </ul>
27                        </article>
28                    </div>
29                </div>
30                <div id="wrap_contents">
31                    <Switch>
32                        <Route exact path="/" component={MainContentApp} />
33                        <Route exact path="/outline/" component={OutlineApp} />
34                        <Route render={() => <li>NotFound</li>} />
35                    </Switch>
36                </div>
37                <div id="main-right-spacer"></div>
38            </main >
39        );
40    }
41}
42
43export default MainApp;

maincontent.js

import React from 'react';

class MainContentApp extends React.Component {
    render() {
        return (
            <React.StrictMode>
                <div id="wrap_topicPath">
                    <ul>
                        <li><a href="/">ホーム</a></li>
                    </ul>
                </div>
                <div id="wrap_contentsBox">
                    <section className="mainbox">
                        <div id="flash001"></div>
                    </section>
                </div>
            </React.StrictMode>
        );
    }
}

export default MainContentApp;

header.js

react
1import React from 'react';
2import { NavLink } from 'react-router-dom';
3import FixedMainNavApp from "./fixed_mainnav";
4import FixedSubNavApp from "./fixed_subnav";
5
6class HeaderApp extends React.Component {
7    render() {
8        return (
9            <React.StrictMode>
10                <header id="wrap_header">
11                    <div id="wrap_logo">
12                        <a href="/">
13                            <img id="mainlogo" alt="OO株式会社" />
14                        </a>
15                    </div>
16                    <nav id="wrap_gmenu">
17                        <ul>
18                            <FixedMainNavApp />
19                        </ul>
20                    </nav>
21                    <div id="wrap_gmenu_lang">
22                        <ul>
23                            <li><NavLink to="/eng/">ENGLISH</NavLink></li>
24                            <li><NavLink to="/china/">CHINESE</NavLink></li>
25                        </ul>
26                    </div>
27                    <div id="nav-drawer">
28                        <input id="nav-input" type="checkbox" class="nav-unshown" />
29                        <label id="nav-open" for="nav-input">
30                            <div></div>
31                        </label>
32                        <label class="nav-unshown" id="nav-close" for="nav-input"></label>
33                        <div id="nav-content">
34                            <ul>
35                                <FixedMainNavApp />
36                                <FixedSubNavApp />
37                            </ul>
38                        </div>
39                    </div>
40                </header>
41            </React.StrictMode>
42        );
43    }
44}
45
46export default HeaderApp;

fixed_mainnav.js

react
1import React from 'react';
2import { Link } from 'react-router-dom';
3
4class FixedMainNavApp extends React.Component {
5    render() {
6        return (
7            <React.StrictMode>
8                    <li><Link to="/">ホーム</Link></li>
9                    <li><Link to="/outline/">会社概要</Link></li>
10                    <li><Link to="/tool/">ツール事業</Link></li>
11                    <li><Link to="/digital/">デジタル事業</Link></li>
12                    <li><Link to="/quality/">品質事業</Link></li>
13                    <li><Link to="/recruit/">リクルート</Link></li>
14                    <li><Link to="/sitemap/">サイトマップ</Link></li>
15            </React.StrictMode>
16        );
17    }
18}
19
20export default FixedMainNavApp;

試したこと

MDNのイベント一覧を見て、index.htmlのwindow.addEventListener("load", () => {});のloadをhashchangeなど変えてみましたが、
欲しい動作のイベントが見つかりませんでした。

index.htmlの<script src="%PUBLIC_URL%/ruffle/ruffle-nightly-2021_05_17-web-selfhosted/ruffle.js"></script>がJSXに組み込めれば、解決できるか検証してみました。~~ところが、ruffle.jsの中で*.wasmファイルを読み込んでいたり、Reactとの共存を前提とした公式ドキュメントが無いことなどから困難でした。~~Rustからコンパイルして、componentDidMount()でイベント登録すれば行けそうですが、コンパイルが済んだ後に具体的な方法が分かりませんでした。

補足情報（FW/ツールのバージョンなど）

package.json

json
1{
2  "name": "make",
3  "version": "0.1.0",
4  "private": true,
5  "dependencies": {
6    "@testing-library/jest-dom": "^5.12.0",
7    "@testing-library/react": "^11.2.7",
8    "@testing-library/user-event": "^12.8.3",
9    "history": "^4.10.1",
10    "react": "^17.0.2",
11    "react-dom": "^17.0.2",
12    "react-router-dom": "^5.2.0",
13    "react-scripts": "4.0.3",
14    "web-vitals": "^1.1.2"
15  },
16  "scripts": {
17    "start": "react-scripts start",
18    "build": "react-scripts build",
19    "test": "react-scripts test",
20    "eject": "react-scripts eject"
21  },
22  "eslintConfig": {
23    "extends": [
24      "react-app",
25      "react-app/jest"
26    ]
27  },
28  "browserslist": {
29    "production": [
30      ">0.2%",
31      "not dead",
32      "not op_mini all"
33    ],
34    "development": [
35      "last 1 chrome version",
36      "last 1 firefox version",
37      "last 1 safari version"
38    ]
39  },
40  "homepage": "/new_web/",
41  "devDependencies": {
42    "node-sass": "^6.0.0"
43  }
44}

行動規範の内容に同意します

回答1件

自己解決

カスタムイベントで解決しました。

maincontent.jsの
importの辺りにとカスタムイベントを作成して、

let FlashEvent = new CustomEvent('playflash', { bubbles: true });

同じくmaincontent.jsの
reactコンポーネントのマウント後にイベントを発火させるようにしました。

    componentDidMount() {
        window.dispatchEvent(FlashEvent);
    }

そして、index.htmlに書いていた、addEventListenerでカスタムイベントに登録するように変更しました。

window.addEventListener("playflash", () => {

投稿2021/06/11 01:41

ShortArrow

総合スコア141

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！