Back to Qt.io
Contact Us Blog Download Qt
このページでは

C

Qt Quick ウルトラライト翻訳例

Qt Quick Ultraliteアプリケーションに翻訳を実装する方法を示します。

概要

translation の例では、 Qt Quick Ultraliteによる国際化とローカライゼーションで説明したテクニックを使用しています。この例では、ローカライズされたリソースをアプリケーションに埋め込む方法と、既存の QML API を使用して実行時に UI 言語を変更する方法を示します。

画面をタップすると、利用可能な言語（英語、ノルウェー語、ラトビア語、日本語、アラビア語、タイ語）を切り替えることができます。アプリケーションの言語を変更すると、国旗画像、Text 、StaticText の項目が更新されます。StaticText のみ、 複雑用字系を静的フ ォ ン ト エ ン ジ ン で正 し く 表現 し ます。

こ のアプ リ ケーシ ョ ンには以下のオプシ ョ ンがあ り ます：

  • Elide text - テキス ト 項目内のテキス ト を消去。StaticText アイテムのテキストはエライデ ィ ングに対応していないので、このオプシ ョ ンの影響は受けません。
  • Show text background - テキストアイテムにピンクの背景を追加し、テキストがどの境界で消去されるかを視覚化します。

対象プラットフォーム

プロジェクト構成

CMakeプロジェクトファイル

この例のCMakeLists.txtは、3つの別々のCMakeターゲットを定義しています：

  • translation_all - すべての翻訳を含むアプリケーションをビルドします。
  • translation_lv - ラトビア語翻訳のみを含むアプリケーションをビルドします。
  • translation_spark - すべての翻訳とMonotype Spark フォントエンジンを使用してアプリケーションをビルドします。
QmlProject ファイル

アプリケーションで使用するテキストは、Qt Quick Ultralite に同梱されているデフォルトフォントにはないグリフをレンダリングするため、各ターゲットのプロジェクトにカスタムフォントが追加されます。

    // Qul ships some default fonts. Since they don't contain glyphs for
    // all the characters that are needed for this application,
    // add some extra fonts.
    FontFiles {
        files: [
            "fonts/kosugi/Kosugi-Regular.ttf",
            "fonts/sarabun/Sarabun-Regular.ttf"
        ]
    }
translation_all

このアプリケーションのバリアントには、利用可能なすべての翻訳が含まれています。

    TranslationFiles {
        files: [
            "translation.ar_SA.ts",
            "translation.ja_JP.ts",
            "translation.lv_LV.ts",
            "translation.nb_NO.ts",
            "translation.th_TH.ts"
        ]
    }

    // Qul ships some default fonts. Since they don't contain glyphs for
translation_lv

ここではラトビア語だけが利用可能で、デフォルトのアプリケーション言語として設定されています。

    TranslationFiles {
        files: ["translation.lv_LV.ts"]
        MCU.omitSourceLanguage: true
    }
translation_spark

このアプリケーションはtranslation_all とほとんど同じですが、Monotype Spark フォントレンダリングエンジンを使っています。

...
        TranslationFiles {
                files: [
                "translation.ar_SA.ts",
                "translation.ja_JP.ts",
                "translation.lv_LV.ts",
                "translation.nb_NO.ts",
                "translation.th_TH.ts"
                ]
        }

        FontFiles {
                files: [
                        "fonts/monotype/TranslationsSampleFontmap.fmp"
                ]
        }

        MCU.Config {
                fontEngine: "Spark"
                defaultFontFamily: "arabic-style-font"
                fontCacheSize: 1 // Disable the cache
        }
...
アプリケーション UI

translation.qmlファイルはアプリケーションのユーザーインターフェースを定義します。

ローカライズ可能な文字列をマークするには、qStr() メソッドを使用します。

StaticText {
    width: root.textMaxWidth
    text: qsTr("orange", "color")
}
StaticText {
    width: root.textMaxWidth
    text: qsTr("orange", "fruit")
}
StaticText {
    width: root.textMaxWidth
    text: qsTr("sunrise")
}
StaticText {
    // This string is not translated in the .ts files and
    // will just fall back to the source string.
    width: root.textMaxWidth
    text: qsTr("hello")
}

Qt.uiLanguage プロパティは、翻訳を扱う際の中心的なポイントです。

アプリケーションが利用可能な言語の1つだけでビルドされている場合、Qt.uiLanguage プロパティは空になります。

// Disable language switching when this is compiled with
// a single language.
Component.onCompleted: allowLangSwitch = (Qt.uiLanguage == "")

現在のUI表示言語を変更するには、Qt.uiLanguage プロパティの値を変更します。

MouseArea {
    anchors.fill: parent
    onClicked: {
        if (!root.allowLangSwitch)
            return

        var lang = Qt.uiLanguage
        switch (lang) {
            case "nb_NO": lang = "lv_LV"; break;
            case "lv_LV": lang = "ja_JP"; break;
            case "ja_JP": lang = "ar_SA"; break;
            case "ar_SA": lang = "th_TH"; break;
            case "th_TH": lang = ""; break;
            default: lang = "nb_NO"; break;
        }
        Qt.uiLanguage = lang
    }
}

注意： 空の文字列を設定することは、qStr() でラップされたオリジナルのテキストが使用される「デフォルト」言語を使用する（.ts ファイルをアンロードする）ことを意味します。

翻訳固有の画像

Text.StyledText フォーマットされた文字列はqsTr() でサポートされています。こ の方式に よ っ て、 翻訳者は、 翻訳文字列内の語順に基づいて、 テ キ ス ト 内の画像の位置を変え る 柔軟性を得 る こ と がで き ます。

StaticText {
    width: root.width
    topPadding: 8
    textFormat: Text.StyledText
    text: qsTr("English language (US) <img src=\"usa-flag-small-icon.png\" width=\"38\" height=\"20\">")
}

あるいは、Image アイテムを使用し、source プロパティをQt.uiLanguage にバインドすることもできます。

Image {
    readonly property bool horizontalScreen: root.width > root.height
    width: horizontalScreen ? root.width / 4 : root.width / 3
    height: horizontalScreen ? root.height / 4 : root.height / 8
    // If this application is build with, for example, only one translation
    // (see translation_lv.qmlproject), then only one of flag PNGs
    // is needed in the binary (registered with the resouce system).
    // By using a function here we prevent qmltocpp from trying to
    // resolve file paths to images at build-time. Instead
    // a code is generated that will try to resolve the path to
    // image at run-time.
    source: flagForLanguage()
}

翻訳ファイル(.ts)

アプリケーションが初めてビルドされるとき、.ts ファイルがプロジェクトのルートディレクトリに生成されます。

翻訳ファイルはプレーンなXMLファイルです：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS>
<TS version="2.1" language="nb_NO">
<context>
    <name>translation</name>
    <message>
        <location filename="translation.qml" line="108"/>
        <source>English language (US) &lt;img src=&quot;usa-flag-small-icon.png&quot; width=&quot;38&quot; height=&quot;20&quot;&gt;</source>
        <oldsource>English language (US) &lt;img src=&quot;usa-flag-small-icon.png&quot;&gt; width=&quot;38&quot; height=&quot;20&quot;</oldsource>
        <translation>Norsk språk &lt;img src=&quot;norway-flag-small-icon.png&quot; width=&quot;27&quot; height=&quot;20&quot;&gt;</translation>
    </message>
    ...

任意のテキスト/xmlエディタを使用して、<translation> ノードに適切な値を指定できます。また Qt LinguistGUIエディタも翻訳ファイルを扱うのに最適です。

自動生成されたupdate_translations CMake ターゲットのビルドをトリガーして、ソースコードから新規および変更された翻訳可能な文字列で.ts ファイルを作成または更新します。

.ts ファイルを編集した後、アプリケーションターゲットを再構築して翻訳を更新します。

qStr() でラップされた文字列が翻訳ファイルに見つからない場合は、元の（ソース）文字列が使用されます。

ファイル

画像

Qt Quick Ultraliteによる国際化とローカライズも参照して ください。

特定の Qt ライセンスの下で利用可能。
詳細を見る。