キャラクターシート翻訳

2024年11月06日 11:06

文字シートの国際化（i18n）は、あなたの文字シートをデザインすることを可能にします。キャラクターシートをデザインすることができるようになり、翻訳者のコミュニティがあなたのシートをそれぞれの言語に翻訳することができるようになります。あなたのシートが他の言語、例えばフランス語に翻訳され、あなたのシートを使用する人のアカウントの言語がフランス語に設定されている場合、あなたのシートはそのユーザーの翻訳されたテキストで表示されます。

シートのデザイン

シートの設定シートを国際化サービスに応答できるように設定するのはとても簡単です。あなたのシートが翻訳されるようにするには、2つのステップを踏む必要があります。ステップ1、翻訳されたテキストを入れたい要素をマークする。ステップ2では、翻訳される文字列をすべて含む翻訳ファイルを作成する。このファイルは翻訳サービスのCrowdinに送られ、ボランティアが文字列を1つ1つ調べて別の言語に翻訳する。これにより、他のすべての言語で同じ翻訳ファイルが生成され、誰かがRoll20でその言語を選択したときに、それに応じて使用されます。

複数のサイズの翻訳テキストに対応する1つのデザインを作成するのは難しいため、親要素である "charsheet "にクラスを追加しました。クラスは "lang-[2文字の言語コード]"なので、英語なら "lang-en"、フランス語なら "lang-fr "となる。これにより、シートが翻訳された後、その言語の新しいテキストが現在のデザインに合わない場合、ある言語専用のスタイルを変更することができます。

ステップ1 シートの書式設定

data-i18n=[unique-key]"属性を、翻訳したいテキストを含むすべての要素に追加します。要素にすでにあるテキストはすべて残しておいてください。後で説明しますが、翻訳が終わったときに翻訳ファイルを生成するのに使うことができるからです。特に重要なのは、sheet-i18nのコードがDevにしかない間、テキストがそこにとどまることです。そうでなければ、sheet-i18nがmainに到達するまで、あなたのシートはmainサイトで動作しません。i18n翻訳がどのように動作するかのさらなる例が必要なら第5版OGL by Roll20シートをご覧ください。

標準テキスト

<div class="col">
    <div class="row">
        <span data-i18n="acrobatics-u">ACROBATICS <span>(Dex)</span></span>
        <input class="num" type="text" name="attr_npc_acrobatics" placeholder="0">
    </div>
    <div class="row">
        <span data-i18n="animal-handling-u" ANIMAL HANDLING /span input class="num" type="text" name="attr_npc_animal_handling" placeholder="0u">ANIMAL HANDLING</span>
        <input class="num" type="text" name="attr_npc_animal_handling" placeholder="0">
    </div>
    <div class="row">
        <span data-i18n="arcana-u">ARCANA</span>
        <input class="num" type="text" name="attr_npc_arcana" placeholder="0">
    </div>
    <div class="row">
        <span data-i18n="athletics-u">ATHLETICS</span>
        <input class="num" type="text" name="attr_npc_athletics" placeholder="0">
    </div>
    <div class="row">
        <span data-i18n="deception-u" DECEPTIONu">DECEPTION</span>
        <input class="num" type="text" name="attr_npc_deception" placeholder="0">
    </div>
    <div class="row">
        <span data-i18n="history-u">HISTORY</span>
        <input class="num" type="text" name="attr_npc_history" placeholder="0">
    </div>
</div>

このコード・ブロックのすべてのスパンが、スパンに含まれるテキストを参照するキーを持つdata-i18n属性を持っていることに注目してください。また、スパンの中にHTMLがあることにお気づきだろうか。 HTMLはCrowdinによってマークされるので、翻訳者がHTMLをコピー＆ペーストするのは簡単です。翻訳中にHTMLを使用することは問題ありませんが、翻訳者はコードに精通していない可能性が高く、単純でなければコードをコピーする際に問題が発生する可能性があるため、できるだけシンプルなHTMLを心がけてください。このテキストはすべて大文字なので、各キーの最後に-uをつけていることに注目してほしい。なぜなら、これらの単語はシートの後半に現れるが、普通に大文字で表記されるからだ。

略語のように、翻訳者がテキストからだけでは読み取れないような文脈をキーに追加したい場合もあるでしょう。

<div class="row">
    <span data-i18n="components:-u">COMPONENTS：</span>
    <input type="checkbox" name="attr_spellcomp_v" value="{{v=1}}" checked="checked">
    <span data="spell-component-verbal">V</span>
    <input type="checkbox" name="attr_spellcomp_s" value="{{s=1}}" checked="checked">
    <span data="spell-component-somatic">S</span>
    <input type="checkbox" name="attr_spellcomp_m" value="{{m=1}}" checked="checked">
    <span data-i18n="spell-component-material">M</span>
    <input type="text" name="attr_spellcomp_materials" accept="Material" style="margin-left：17px; width: 215px;" placeholder="ruby dust worth 50gp" data-i18n-place="ruby-dust-place">
</div>

V、S、Mのテキストキーは、その一文字が何を指しているのかを正確に示している。そうでなければ、翻訳者は "V "が何を意味するのかわからない。こうすることで、翻訳者はVを自国語の "Verbal "の頭文字に変えることができる。

要素属性テキスト

例えば、プレースホルダーやタイトルなど、要素の属性内に翻訳が必要なテキストがあることがよくあります。これらの属性内のテキストを置き換えるには、"data-i18n-[attribute]='key'"を使って、指定された属性内のテキストを置き換えるのに指定されたキーが使われることをパーサーに伝えることができます。例えば、プレースホルダー属性のテキストを置き換える場合：

<input name="attr_weapon_name" data-i18n-placeholder="weapon-name" placeholder="Hand Axe" />

サポートされている属性は、title, alt, aria-label, label, placeholder です。

バリアブル交換

特別なケースとして、文字列の中に翻訳されたくないテキストがある場合、特別な変数と "data-i18n-vars "属性を使うことができます。

<span data-i18n="var-test" data-i18n-vars="翻訳されません">このテキスト {{0}} {{1}}</span>

data-i18n-vars属性の中のテキストは"|"文字で分割され、配列に置かれます。そして、 {{[index]}} を使ってその配列を参照し、配列の特定の行を参照することができる。

ダイナミック・キー交換

変化するキーに基づいて翻訳を取得する必要がある状況があります。例えば、ユーザーが自分のクラスを選択できる「クラス選択」ドロップダウンメニューがあるとします。このリストに表示されたクラス名は、通常のツールを使って翻訳できる。しかし、セレクトボックスのオプションの中の値を変換することはできません。 (言語が変わっても、シートデータを翻訳する必要がないようにするためです）。翻訳システムは純粋にフロントエンドにとどまり、データレイヤーにはありません)代わりに、翻訳されたこのクラス名を表示したい場所で、"data-i18n-dynamic "属性でspanをマークします。これはパーサーに、通常スパンに表示される値を翻訳を取得するためのキーとして使用するように指示します。

// この部分は変更する必要はない
<select class="hiding" name="attr_class" style="width：64px；">
	<option value="Barbarian" data-i18n="barbarian">バーバロ</option>
	<option value="Bard" data-i18n="bard">バルド</option>
	<option value="Cleric" data-i18n="cleric">Clerigo</option>
	<option value="Druid" data-i18n="druid">Druida</option>
</select>

<span data-i18n="class-options">クラスオプション</span> (<span name="attr_class" data-i18n-dynamic></span>)

{ "Barbarian": "Bárbaro", "Bard": "Bardo", "Cleric": "Clerigo", "Druid": "Druida" }.

上記のコードで、セレクトボックスから「バーバロ」を選択すると、attr_classの下に「バーバリアン」が保存される。しかし、シートがリフレッシュされ、name="attr_class "を持つスパンが通常なら "Barbarian "で埋められるところ、代わりに "Barbarian "が翻訳JSONを参照するキーとして使用され、代わりに "Bárbaro "が表示されます。

ロールクエリー

ロールクエリ内のテキストは、キャラクタシートHTML内で翻訳することはできません。シートワーカースクリプトと属性を使用することで、テキストをJavaScriptで翻訳し、ロールクエリに代入することができます。

<script type="text/worker">

on("sheet:opened", function(eventInfo){
    
    setAttrs({
        bonusmacro: getTranslationByKey("ask-bonus")
    });     
    
});

</cript>

<span style="display: none" data-i18n="ask-bonus">ボーナスはいくらですか？</span> <button type='roll' value='[[d20 + ?{@{bonusmacro}|0}]]'. ></button>

<span> タグは表示されませんが、生成される翻訳ファイルに "ask-bonus "というキーが含まれるようになります。スクリプトは "bonusmacro "という属性に "What is your bonus? "という値を作り、ロールボタンはその値を使って"[[d20 + ?{あなたのボーナスは何ですか?|0}]"というコマンドを送る。］別の翻訳ファイルがアクティブな状態でシートを開くと、"bonusmacro "の属性に新しい翻訳値が設定されます。このテクニックは、個々のキーを置き換えるために使用することができます。また、単一の属性を使用して複雑なクエリを格納し、Sheet Worker Scriptが必要に応じてクエリコードに変換キーを挿入することもできます。

<script type="text/worker">
on("sheet:opened", function(eventInfo){
    
    setAttrs({
        rollquery："?{" + getTranslationByKey("advantageordisadvantage") +"|"+ getTranslationByKey("neither") + ",d20|"+ getTranslationByKey("advantage") + ",2d20kh1[" + getTranslationByKey("withadvantage") + "]|"+ getTranslationByKey("disadvantage") + ",2d20kl1[" + getTranslationByKey("withdisadvantage") + "]}",
    });
    
});

</script>

<span style="display: none" data-i18n="advantageordisadvantage">あなたはアドバンテージとディスアドバンテージのどちらでローリングしていますか？</span> 
<span style="display: none" data-i18n="neither">どちらでもない</span> 
<span style="display: none" data-i18n="advantage">アドバンテージ</span> 
<span style="display: none" data-i18n="withadvantage">アドバンテージあり</span> 
<span style="display：none" data-i18n="disadvantage">デメリットあり</span> 
<span style="display: none" data-i18n="withdisadvantage">デメリットあり</span> 
<button type='roll' value='[[@{rollquery}]]'. ></button>

この例では、デフォルトの翻訳ファイルを使用して以下のロールを作成します。

[[?{アドバンテージとディスアドバンテージのどちらでロールしていますか|どちらでもない,d20|アドバンテージ,2d20kh1[アドバンテージあり]|ディスアドバンテージ,2d20kl1[ディスアドバンテージあり]}]]。

ロール・テンプレート

シートのロール・テンプレート定義内の静的HTMLは、ダイナミック・キーを含む上記のすべてのツールを使用できます。シートのロールテンプレートの定義にそれがあれば、{{strength-key}}のようなコードは、 {{strength-key}}の値を翻訳した値を与える。ロール関数の中で動的に翻訳された値を送信したい場合は、以下のツールを使用してください。

ロール関数の内部では、ロールテンプレートを使って、任意のテキストを"^{ [key] }"でくくることができる。このテキストは、そのキーに関連付けられた翻訳版に置き換えられます。このステップは、キャラクターシートの値が入れ替わった後に行われるので、 ability_key = STRENGTH の場合、"^{ @{ability_key} }" は "^{STRENGTH}" として解析され、"STRENGTH" の翻訳値が何であれ表示される。これは、allprops()関数で使用されるキーと値のペアのキーに対しても機能する。例えば例えば、"{{^{TEXT}=@{content} }}" は、allprops() 関数の中で、"TEXT" の翻訳値が "{{key}}" となる。

リスト注文

英語でアルファベット順に並べられたコンテナ内の項目リストがあり、他の言語でも並び順を変更したい場合、このツールを使用することができます。再順序付けはリスト内のすべての現在の書式を尊重するので、リストが複数のサブコンテナにまたがっていても、すべての書式は同じままです。

容器を特定する。リスト項目はすべてコンテナ内になければならない：

data-i18n-list="list-key"

リストの個々の項目を特定する。これらの項目はHTMLのブロックにすることができる。順番が入れ替わると、ブロック全体が移動する。

data-i18n-list-item="item-key"

(オプション) リストの「開始」順序は、HTMLで上から下に読まれることを想定している。順序が異なる場合は、手動で（1から始まる）番号を付けて順序を設定することができます。

data-i18n-list-item-num="1"

(特殊）これは「使用する」タグではなく、フォーマットにエラーがあった場合に作成されるタグです。リストオーダーコードにエラーがある場合、リストは無視され、エラーのあるリストコンテナ要素にこのタグが作成されます。リストが期待通りに並び替えられない場合は、親要素にエラーがないか確認してください。

data-i18n-error="エラーメッセージ"

キーを翻訳ファイルに追加します。これには、翻訳元の言語で、すべての項目キーのカンマ区切りのリストが含まれます。これらのキーを並び替えると、アイテムの順番が入れ替わる。ソートされる項目がすべて「同じ」項目であれば、リスト・キーは複数のリストに使用できる。 HTMLは同じである必要はない。例えば、D&Dの "Skills "のリストは、シート上のいくつかの場所でまったく異なるHTMLで表示されるかもしれないが、それらはすべて同じリストキーを使うことができる。以下のコード例を使って、リスト・キーを生成してみよう。

"技能一覧": "アクロバット、アルカナ、スライト・オブ・ハンド、サバイバル"

このリストをチェコ語用に並べ替えると、リストのキー・バリューは次のようになる：

 "スキルリスト": "アクロバット、スライト・オブ・ハンド、アルカナ、サバイバル"

例

<div data-i18n-list="skills-list"> // リストコンテナにラベルを付け、順序を設定するために使用するキーを指定する
    <div> // アイテムがサブコンテナ内にあることに注意。これらの列は、並び替えが行われた後も存在する
        <div data-i18n-list-item="acrobatics"> // リストアイテムにラベルを付ける、これらは並び替えられるブロックです
            <span data-i18n="acrobatics-u">ACROBATICS</span>
            <input type="text" name="attr_npc_acrobatics" placeholder="0">
        </div>
        <div data-i18n-list-item="arcana">
            <span data-i18n="arcana-u">ARCANA</span>
            <input type="text" name="attr_npc_arcana" placeholder="0">
        </div>
    </div>
    <div>
        <div data-.i18n-list-item="sleight-of-hand">
            <span data-i18n="sleight-of-hand-u">SLEIGHT OF HAND</span>
            <input type="text" name="attr_npc_sleight_of_hand" placeholder="0">
        </div>
        <div data-i18n-list-item="survival">
            <span data-i18n="survival-u">SURVIVAL</span>
            <input type="text" name="attr_npc_survival" placeholder="0">
        </div>
    </div>
</div>

同じ例だが、リストが列を下ってから横切るのではなく、リストが列を横切ってから下るようにする：

<div data-i18n-list="skills-list">
    <div>
        <div data-i18n-list-item="acrobatics" data-i18n-list-item-num="1">
            <span data-i18n="acrobatics-u">ACROBATICS</span>
            <input type="text" name="attr_npc_acrobatics" placeholder="0">
        </div>
        <div data-i18n-list-item="sleight-of-hand" data-i18n-list-item-num="3">
            <span data-i18n="sleight-of-hand-u">SLEIGHT OF HAND</span>
            <input type="text" name="attr_npc_sleight_of_hand" placeholder="0">
        </div>
    </div>
    <div>
        <div data-.i18n-list-item="arcana" data-i18n-list-item-num="2">
            <span data-i18n="arcana-u">ARCANA</span>
            <input type="text" name="attr_npc_arcana" placeholder="0">
        </div>
        <div data-i18n-list-item="survival" data-i18n-list-item-num="4">
            <span data-i18n="survival-u">SURVIVAL</span>
            <input type="text" name="attr_npc_survival" placeholder="0">
        </div>
    </div>
</div>

ステップ2、翻訳ファイルの作成

上記の手順に従ってシートの書式を整えたら、翻訳ファイルをとても簡単に作成することができます。エディターでシートをロードした後、ゲームに入り、ブラウザのデベロッパーツールを開き、コンソールに移動します。コンソールの一番下、コードを入力する場所に "i18nOutput "と入力する。 (エンターキーを押してこのオブジェクトを取得すると、エレメント／プレースホルダー内で使用したすべてのキーと対応するテキストを含むJSON文字列がダンプされます。このテキストをお好きなJSONフォーマット（オプションですが、推奨します）にコピーし、ゲーム設定カスタムシートエリアの「翻訳」タブにコピーしてください。

translation.jsonを手動で作成する場合は、以下のフォーマットを使用できます：

{
    "key"："string",
    "key-2"："別の文字列"
}

フォーマットされたシートとカスタムシートの翻訳JSONが保存されれば、すべてが正しく行われたと仮定して、すべてを翻訳する前とまったく同じように見えるはずです。

もし[translation-key]のような赤いテキストが表示されたら、これはシステムに使用するように指示しているキーですが、翻訳JSONには入力されていません。システムによって生成されたJSONを使用する場合、これらのものは表示されないはずだ。

翻訳ファイルが完成したら、残りのシートコードと一緒に "translation.json "としてキャラクターシートフォルダのルートにアップロードしてください。これは自動的に私たちのシステムによってピックアップされ、Crowdinにアップロードされます。

翻訳の変更

すでに翻訳が生成された後で翻訳を変更したい場合、translation.jsonファイルを編集することができ、変更は次回翻訳が更新されたときに言語ファイルに反映されます。しかし、まだ翻訳されていない値であっても、特定の変更によって翻訳値が上書きされることはありません。言い換えれば、translation.jsonの変更がシートに反映されないことがあるということだ。

アップデートのトリガーとならない変更には、空白または特殊文字のみの変更、および文字を削除するだけで、新しい文字を変更または追加しない変更が含まれます。

変更をRoll20に提出する

参照 GitHub入門ガイド

こちらも参照

ACSI - 自動文字シート国際化ツール. 言語タグの挿入や作成にかかる時間を節約できるLinuxツール。