概要

Adobe Flash PlayerのエミュレータであるRuffleにおいて、日本語の文章が正しく表示されないという問題があります。

問題の原因は複数考えられますが、原因の一つとして、Ruffleがデフォルト設定において使用するフォントがNoto Sansであり、日本語の文字が含まれていないことがあります。

本記事では、上記の原因に起因する問題の解決方法を紹介します。

解決方法① Ruffleに日本語のフォントファイルを読み込ませる

日本語フォントファイルを用意する

Ruffleでは、*.ttf, *.otf, *.ttc, *.otc, *.swfのフォントファイルを読み込むことができます。
ここでは、Noto Sans JapaneseのNotoSansJP-Regular.ttfを利用することにします。

利用するフォントのフォント名を確認する

Windowsであれば、プロパティの詳細タブから確認できます。

Ruffleが日本語フォントファイルを利用するように設定する

Ruffleのオプションとして、以下の2つを設定することで日本語フォントファイルを利用することができるようになります。

fontSources
利用する日本語フォントファイルへのパス
defaultFonts
利用するフォントの名前

index.html

<html>
	<script>
		window.RufflePlayer = window.RufflePlayer || {};
		window.RufflePlayer.config = {
			fontSources: ["path/to/NotoSansJP-Regular.ttf"], 
			defaultFonts: {
				sans: ["Noto Sans JP Regular"], 
			}, 
		};
		window.addEventListener("load", (event) => {
			const ruffle = window.RufflePlayer.newest();
			const player = ruffle.createPlayer();
			const container = document.getElementById("container");
			container.appendChild(player);
			player.ruffle().load("path/to/movie.swf"); // movie.swf: 表示したいSWFファイル
		});
	</script>
	<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>

	<body>
		<!-- Ruffle playerが挿入される位置 -->
		<div id="container"></div>
	</body>
</html>

解決方法② Ruffle 日本語対応デモを利用する

有志によって、日本語関連の不具合を修正したRuffleが公開されています。

本家とは異なり、デフォルトのフォントとしてNoto-Sans-CJK-JPを利用しているため、日本語が表示されないという問題が起きないようになっています。

Ruffle 日本語対応デモをサーバー上にダウンロードする

ビルド済みのリリースからWebホストに利用するruffle-nightly-20XX_XX_XX-web-selfhosted.zipをダウンロードし展開します。

ダウンロードしたRuffleを利用する

htmlに以下のタグを追加することで、サーバー上にある日本語対応版のRuffleを利用したRuffle playerが起動されます。

<script src="path/to/ruffle/ruffle.js"></script>

参考文献