アソバースの日本語・英語切り替え
遊びを届ける執筆にClaudeを使用しています。
「アソバースのゲームを英語でも遊べるようにしたい」「日本語と英語を切り替えるボタンを付けたい」——そう考えたとき、まず知っておきたいのは、言語切り替えはプラットフォーム側が自動でやってくれる機能ではなく、ゲームの中にあなたが組み込む仕組みだということです。アソバースはHTMLファイルやZIPファイルを投稿して公開するプラットフォームなので、ゲーム内の文章・ボタン・説明文を何語で表示するかは、すべて作者のコード次第になります。 この記事では、言語切り替えを実装するときの考え方と手順を整理します。AIツールでゲームを作っている人も、自分でコードを書いている人も、最後まで読むと「どこに何を書けばよいか」の見通しが立つ構成になっています。
なぜ言語切り替えが必要になるのか
ゲームを公開すると、日本語を読めないプレイヤーにも届く可能性があります。タイトルや操作説明が日本語だけだと、ルール自体は理解できても最初の一歩で詰まることがあります。一方で、英語しか用意しないと日本語話者にとって入口が高くなります。両方の言語を選べる仕組みを入れると、届く範囲が広がります。
また、学校や家庭での学習用途を想定するなら、「日本語と英語を並べて見せる」「切り替えながら読む」という使い方そのものがコンテンツになることもあります。言語切り替えはアクセシビリティの工夫であると同時に、ゲームの遊び方を広げる設計でもあります。
実装の基本構造
言語切り替えの仕組みは、大きく分けると次の三つの部分から成ります。
- テキストデータをまとめておく場所（辞書オブジェクト）
- 現在の言語を記憶する変数
- 言語を切り替えたときに画面のテキストを書き換える関数
JavaScriptで書く場合、テキストデータは次のようにオブジェクトとして定義しておくと管理しやすくなります。
const texts = {
ja: {
start: "スタート",
score: "スコア",
gameover: "ゲームオーバー"
},
en: {
start: "Start",
score: "Score",
gameover: "Game Over"
}
};
let currentLang = "ja";画面にテキストを表示するときは、texts[currentLang].start のように参照します。言語を切り替えるボタンを押したら currentLang を書き換えて、表示中のテキストを全部更新する関数を呼び出すだけです。
この構造の利点は、テキストの中身だけを一か所で管理できることです。ゲームのロジックを触らずに文言を直したり、後から言語を追加したりするときも変更箇所が限定されます。
AIツールで作る場合の指示の出し方
ChatGPTやClaudeなどのAIにゲームのコードを作ってもらうとき、「日本語・英語切り替え付きで」と一行加えるだけで対応コードが出ることが多いです。ただし、出力されたコードをそのままアソバースに投稿する前に、次の点を確認してください。
- テキストが辞書オブジェクトに集まっているか：コードの中にテキストが散らばっていると、後で修正や翻訳のし直しが大変になります。
- 切り替えボタンがゲーム画面に収まっているか：HTMLのどこに置くかも指定しておくと、意図しない位置に配置されることを防げます。
- 言語の初期値が指定されているか：ページを開いた瞬間にどちらの言語で表示するかをコードで決めておかないと、ブラウザや環境によって見え方が変わることがあります。
初期言語を自動判定したい場合は、navigator.language でブラウザの設定言語を取得して、"ja" を含むなら日本語、そうでなければ英語にするという分岐を入れることができます。ただし、自動判定が必ず正確とは限らないため、手動で切り替えるボタンも併せて用意しておくのが安全です。
設計で迷ったときの判断基準
言語切り替えを実装するときに迷いやすい点と、その判断の目安を整理します。
Q：タイトル画面だけ二言語にすれば十分か？ゲーム中のUI（スコア・ライフ・ボタンのラベルなど）も英語で表示されていないと、プレイ中に詰まる箇所が出ます。最低限、ゲームの操作に関わるすべての文字列を切り替え対象に含めることをおすすめします。
Q：選んだ言語をリロード後も維持すべきか？セッションをまたいで設定を保持したい場合は localStorage に言語設定を保存できます。ただし、短いゲームや一回完結の体験では毎回選ばせても大きな手間にはなりません。複雑さを避けたいなら、保存なしで問題ないケースも多いです。
Q：翻訳はどこに頼めばよいか？短い文字列ならAIで十分な精度が出ます。ゲームのストーリーや長い説明文を含む場合は、出力された英語をネイティブスピーカーに確認してもらうか、自分で読んで不自然さがないかチェックする手間をかける価値があります。誤った英語がそのまま公開されると、英語話者に違和感を与えます。
ZIPファイルで投稿するときの注意点
アソバースにZIPファイルで投稿する場合、HTMLとJavaScriptが別ファイルに分かれていることがあります。テキストデータを専用のJSONファイルにまとめておく方法も使えます。
// texts_ja.json
{ "start": "スタート", "score": "スコア" }
// texts_en.json
{ "start": "Start", "score": "Score" }JavaScriptから fetch でJSONを読み込み、選ばれた言語に対応するファイルを切り替える構造にすると、テキストの管理が翻訳者にも扱いやすい形になります。ただし、fetch はローカルファイルを直接開いた状態（file:// プロトコル）では動作しないため、投稿前のローカル確認は簡易サーバーを立てて行うか、オブジェクト形式でまとめてテストする方法が確実です。
次の行動
まずはシンプルな辞書オブジェクトと切り替えボタンだけを実装したミニゲームを一つ作り、日本語と英語が正しく切り替わるかをブラウザで確認してみてください。動作が確認できたら、その構造をアソバースへ投稿して実際の環境でも試すと、表示崩れや文字化けがないかをあわせてチェックできます。アソバースへの投稿方法はアソバース公式サイトのヘルプを参照してください。
