このページでは

C

Qt Quick Ultralite 仮想キーボードの概要

Qt Quick のUltralite仮想キーボードモジュールを使用すると、アプリケーションで仮想キーボードのサポートが可能になります。

Qt Quick のUltralite仮想キーボードプロジェクトは、入力フレームワークとリファレンスとなるキーボードフロントエンドを提供します。この入力フレームワークは拡張可能であり、実行時にカスタム入力方式やキーボードレイアウトを読み込むことができます。

仮想キーボードは、QML内でInputPanel アイテムをインスタンス化することで、アプリケーション自体に組み込まれます。以下の例では、InputPanel の作成方法と、アプリケーションコンテナとの画面領域の分割方法を示しています。

InputPanel {
    id: keyboard
    width: StyleConstants.vkbScreenWidth
    y: root.height - keyboard.height
}

入力パネルの高さは、利用可能な幅に応じて自動的に更新されます。入力パネルのアスペクト比は一定です。

完全な例については、「Qt Quick Ultralite text_input」の例を参照してください。

このモジュールは、Qt Quick Ultralite バージョン 2.9 以降で完全にサポートされています。

機能

Qt Quick Ultralite 仮想キーボードの主な機能は以下の通りです:

  • カスタマイズ可能なキーボードレイアウトとスタイル。
  • さまざまな解像度への対応。
  • 文字のプレビューおよび代替文字の表示。
  • 単語候補表示機能付きピンイン入力。
  • さまざまな文字セット(ラテン文字、中国語、ヒンディー語、アラビア語、ヘブライ語など)に対応。
  • 最も一般的な入力言語に対応しており、言語サポートを簡単に拡張可能です。
  • 左から右、および右から左への入力に対応。
  • クロスプラットフォーム機能。

対応言語

仮想キーボードは、以下の言語に対応しています:

  • アルバニア語
  • アラビア語
  • ブルガリア語
  • ブルガリア語(ラテン文字)
  • クロアチア語
  • チェコ語
  • デンマーク語
  • オランダ語
  • 英語(イギリス)
  • 英語(アメリカ)
  • エストニア語
  • フィンランド語
  • フランス語
  • フランス語(カナダ)
  • ドイツ語
  • ギリシャ語
  • ギリシャ語(ラテン文字表記)
  • ヘブライ語
  • ヘブライ語(ラテン文字)
  • ヒンディー語
  • ハンガリー語
  • インドネシア語
  • イタリア語
  • マレー語
  • ノルウェー語
  • ペルシャ語/ファルシ語
  • ポーランド語
  • ポルトガル語
  • ルーマニア語
  • ロシア語
  • セルビア語
  • セルビア語(ラテン文字)
  • 簡体字中国語(ピンイン)
  • スロバキア語
  • スロベニア語
  • スペイン語
  • スウェーデン語
  • タイ語
  • トルコ語
  • ウクライナ語
  • ベトナム語

注:英語 (米国)、英語(英国)、オランダ語、マレー語、インドネシア語は、すべてバンドルされたレイアウトで「fallback/main.qml 」を使用しています。スペイン語とスペイン語(メキシコ)は同一です。ポルトガル語(ブラジル)とポルトガル語(ポルトガル)は同一です。

他の言語のサポートを追加するには、「言語の追加と削除」および「新しいキーボードレイアウトの追加」を参照してください。

モジュールの使用方法

Qt Quick のUltralite Virtual Keyboard QMLタイプを使用するには、.qmlproject 内のモジュールファイル一覧にQul::VirtualKeyboardを追加してください。

ModuleFiles {
    MCU.qulModules: ["Qul::VirtualKeyboard"]
}

モジュールファイルを追加した後、.qml ファイルに以下のimport文を追加してください:

import QtQuick.VirtualKeyboard

注: Qt Quick のUltralite Virtual Keyboardモジュール、その一部がqmlproject ファイルに依存しているため、非推奨となったCMake APIでは動作しません。

詳細については、「Qt Quick Ultralite text_input サンプル」を参照してください。

入力フレームワークの概念

このセクションでは、入力フレームワークの根底にある主要な概念について簡単に説明します。これらの概念を理解することは、高度なユースケースに取り組む上で不可欠です。

単に仮想キーボードをアプリケーションに組み込みたい場合は、「アプリケーション開発者向けAPI」を参照してください。

入力コンテキスト

仮想キーボードやその他の入力コンポーネントに関するコンテキスト情報を提供します。基盤となるテキスト入力コンポーネントへのインターフェースとして機能します。

入力コンテキストは、キーボードや具体的な入力メソッドによって使用されます。InputContext はシングルトンインスタンスです。アプリケーションは、入力コンテキストと直接やり取りしてはなりません。

入力エンジン

ユーザー入力イベント(キー押下)を統合するためのAPIを提供し、入力メソッドのホストとして機能します。

InputEngine オブジェクトには、InputContext 項目のinputEngine プロパティを介してアクセスできます。InputContext と同様に、入力エンジンのインスタンスは1つだけです。入力エンジンには、キーの押下や離しといったユーザー操作をインプットメソッドにマッピングするためにキーボードが使用するAPI関数が含まれています。

入力方式

入力メソッドは、キープレスハンドラの具体的な実装です。その主な機能は、キープレスイベントを処理し、ユーザー入力の状態情報を維持することです。InputContext を通じてテキストエディタと連携します。

入力メソッドのインスタンスは、ユースケースに応じてさまざまな方法で作成できます:

  • KeyboardLayout::inputMethod: キーボードレイアウトは、そのキーボードレイアウト専用に入力メソッドのインスタンスを作成することができます。
  • 入力エンジンは起動時にデフォルトの入力メソッドを作成します。このインスタンスは、キーボードレイアウトがカスタム入力メソッドを使用していない限り、すべてのキーボードレイアウトにわたってデフォルトの入力メソッドとして使用されます。

注: 現時点では、カスタム入力メソッドを作成するための公開APIは提供されていません

仮想キーボードの拡大・縮小

MCU.Config.Experimental.vkbScreenWidthを使用して、仮想キーボードの画面幅を設定します。この値は、StyleConstants.vkbScreenWidth に反映されます。

InputPanel {
    id: keyboard
    anchors.horizontalCenter: parent.horizontalCenter
    width: StyleConstants.vkbScreenWidth
    y: root.height - keyboard.height
}

前述の例では、物理画面の幅が `1000` であることを前提としています。以下の画像でわかるように、左側では`MCU.Config.Experimental.vkbScreenWidth` が `800 ` に設定されており、右側では `1000` に設定されています。

MCU.Config.Experimental.vkbScreenWidth800MCU.Config.Experimental.vkbScreenWidth1000

また、前述の例では、ImageFiles.MCU.Experimental.resourceSVGScaleプロパティを使用して、仮想キーボードのデフォルトスタイルの画像アセットのスケール係数を調整しています。

注:これらの スケーリングAPIQt Quick には直接対応する機能がないため、実験的機能としてマークされています。

ピンインのサポート

Qt Quick Ultralite Virtual Keyboardは、簡体字中国語向けのピンイン入力方式をサポートしています。この入力方式には辞書ファイルと多数のグリフが必要となるため、Qt for MCUs アプリケーションの最終的なバイナリサイズに大きな影響を与える可能性があります。 このため、Qt Quick のUltralite仮想キーボードモジュールでは、デフォルトで空の辞書が使用され、事実上ピンイン入力方式が無効になっています。アプリケーションの.qmlproject ファイル内で、MCU.Config.vkbPinyinSupportというQmlProjectプロパティを設定し、最も一般的な単語や文字を含む辞書を使用してピンイン入力方式を有効にしてください。 文字や単語を追加・削除するために辞書ファイルをカスタマイズする必要がある場合は、qulpinyingeneratorツールを使用して生データから辞書ファイルを生成し、MCU.Config.vkbPinyinDictionaryQmlProject プロパティを使用して、アプリケーションがカスタム辞書を使用するように設定してください。

すべてが正しく設定されていれば、次の画像に示すように、ピンインを入力すると候補が表示されます。なお、表示される候補は、アプリケーションに同梱されている辞書によって異なります。

qulpinyingenerator

qulpinyindgenerator ツールは、生の辞書ファイルに基づいて、Qt Quick のUltralite Virtual Keyboardモジュールでピンイン辞書として使用可能なヘッダーファイルを生成します。デフォルトの辞書を生成するために使用される辞書ファイルは、${QUL_ROOT}/src/3rdparty/pinyin/data/rawdict_utf16_65105_freq.txt にあります。

入力ファイル

--file 引数を使用して、カスタム辞書を生成するための生の辞書データを指定します。このデータは、${QUL_ROOT}/src/3rdparty/pinyin/data/rawdict_utf16_65105_freq.txt にあるデフォルトのピンイン辞書の生成に使用された辞書と同じ形式である必要があります。

生データの形式では、1行に1つのエントリが記述されます。各行は漢字で始まり、その後にその漢字の出現頻度を示す数値、続いてその漢字がGBKエンコーディングを使用するかどうかを示す0または1、そして最後にそのエントリのピンイン表記が続きます。

// hanzi, frequency, GBK, spelling
...
嗒 322.010219858 0 da
哒 1540.35530331 0 da
搭 2238.62771494 0 da
...

出力パス

--outputPath コマンドライン引数を使用して、生成されたファイルを保存する場所を指定します。ファイル名は「qul_pinyin_custom_dict.h」となり、指定されたパスに直接保存されます。 アプリケーションの.qmlproject ファイル内のMCU.Config.vkbPinyinDictionaryプロパティにこのパスを指定することで、アプリケーションでカスタム辞書を使用できるようになります。

最小出現頻度

生の辞書データには、各エントリの出現頻度が記載されています。qulpinyingenerator ツールでは、--minFrequency コマンドラインオプションを使用して、出現頻度の低いエントリを除外することができます。生成される辞書には、指定された最小出現頻度よりも高い出現頻度を持つエントリのみが使用されます。

このフィルタリング処理により、単語を構成する個々の文字が除外される場合があります。ツールが複数文字からなる単語を辞書に含めた場合でも、その単語を構成する個々の文字の出現頻度が低い場合は、その文字を除外することができます。その結果、ユーザーは、辞書に含まれている単語について、利用可能な文字のみを使用することになります。

たとえば、以下の生の辞書データに対して、最小出現頻度のしきい値が1000 である場合:

尬 231.735198139 0 ga
尴 13.7430867735 0 gan
尴尬 2908.26886413 0 gan ga

このツールは、単語「尴尬」の出現頻度が閾値を超えているため、辞書に収録しています。しかし、個々の文字「尴」と「尴」については、その出現頻度が1000 を下回っているため除外されます。その結果、ユーザーは「尴尬」の一部としてこれらの文字を入力することができます。

Qt for MCUs 2.10以降、ある文字が辞書に含まれる単語の一部である場合、その出現頻度にかかわらず辞書に保持されるようになりました。これにより、前述の例では「尴」と「尴」を含めることが可能となり、ユーザーはより多様な文字を利用できるようになります。

Unicode範囲

辞書本体に加え、qulpinyingenerator からの出力ファイルには、利便性を考慮して、辞書内の項目で使用されているグリフを網羅するUnicode範囲も含まれています。 これらの範囲を使用して、QMLでfont.unicodeCoverage を設定したり、Monotype FontmapEditorのSubsetter機能を使ってフォントファイルを修正し、未使用のグリフを削除したりすることができます。短い範囲が多数あり、それらの間にわずかな隙間がある場合、エントリ一覧の件数が非常に多くなる可能性があります。 サポートするUnicode範囲のリストを簡略化するには、--unicodeRangeTolerance というコマンドライン引数を使用して、隣接する範囲を統合することができます(その際、一部の未使用グリフが含まれることになります)。--unicodeRangeTolerance は、Unicode範囲のリストが長すぎる場合にMonotype FontmapEditor Subsetterで発生するクラッシュを回避するために導入されました。

使用例:

qulpinyingenerator --file=${QUL_ROOT}/src/3rdparty/pinyin/data/rawdict_utf16_65105_freq.txt --outputPath=pinyin/my_custom_dict --minFrequency=1000 --unicodeRangeTolerance=6

フォントの Unicode カバレッジ設定」も参照してください。

キーボードレイアウト

キーボードレイアウトは、src/virtualkeyboard/layoutsディレクトリにあります。layouts ディレクトリの各サブディレクトリは、1つのロケールを表しています。ロケールディレクトリ名は、キーボードレイアウトを一意に識別するQLocale::bcp47Name文字列です。 このロケール情報を利用することで、入力言語が左から右へ書かれるか、右から左へ書かれるかを判断したり、特定の言語に適した「コンマ」のUnicode文字を特定したり、その言語の現地語名を表示したりすることができます。

エンジンは、ロケールテーブルに記載されているbcp47Name 名を認識します。

レイアウトの種類

入力モードごとに異なるキーボードレイアウトタイプが使用されます。通常のテキスト入力に使用されるデフォルトのレイアウトは、「main 」レイアウトと呼ばれます。レイアウトタイプはレイアウトファイル名によって決定され、main レイアウトの場合はmain.qml となります。

注: 内部的な技術的な理由により、 レイアウト名にはロケールディレクトリ名をプレフィックスとして付ける必要があります。たとえば、「./uk/uk_main.qml 」は「uk 」ロケール用のレイアウトファイルです。

サポートされているレイアウトタイプのリスト:

  • main 通常のテキスト入力用のメインレイアウト
  • symbols 特殊文字用の記号レイアウト(メインレイアウトから有効化)
  • numbers 書式付き数値用の数値レイアウト(Qt.ImhFormattedNumbersOnly で有効化)
  • digits 数字専用レイアウト(Qt.ImhDigitsOnly で有効化)
  • dialpad 電話番号入力用のダイヤルパッドレイアウト(Qt.ImhDialableCharactersOnly で有効化)

入力ロケール

仮想キーボードエンジンは、src/virtualkeyboard/layouts/ にあるロケール固有のレイアウトディレクトリから、サポートされるロケールのリストを生成します。layouts/ ディレクトリには、fallback/ サブディレクトリが含まれていなければなりません。このサブディレクトリには、各レイアウトタイプ(dialpaddigitsmainnumberssymbols )の定義が含まれています。

各レイアウトディレクトリには、1つ以上のレイアウトタイプの定義が含まれている場合があります。ロケール固有のレイアウトがフォールバックロケールのレイアウトと同一である場合、仮想キーボードはfallback/ ディレクトリからこのレイアウトタイプを検索します。ロケール固有のディレクトリに要求されたレイアウトタイプが存在しない場合、QULVkbは代わりにfallback/ のレイアウトのいずれかを使用します。

たとえば、フィンランド語用のロケール固有のレイアウトを追加する場合、fi_main.qml ディレクトリにメインのレイアウトを定義し、その他のレイアウトタイプについてはフォールバック機構を採用することができます。その場合、layouts/ ツリーは次のようになります:

.
├── fallback
│   ├── dialpad.qml
│   ├── digits.qml
│   ├── handwriting.qml
│   ├── main.qml
│   ├── numbers.qml
│   └── symbols.qml
└── fi
    └── fi_main.qml

src/virtualkeyboard/layouts/fallback ディレクトリには、常に完全な実装ファイル一式が含まれていることが不可欠です。

アプリケーションは、VirtualKeyboardSettings.locale を使用してアクティブなロケールを指定できます。KeyboardLayout には、ChangeLanguageKey ボタンを含めることで、ユーザーが利用可能な言語を切り替えられるようにすることができます。

新しいキーボードレイアウトの追加

キーボードレイアウト要素は、レイアウトのルートアイテムであるKeyboardLayout QMLタイプに基づいている必要があります。

KeyboardRow タイプを使用して、キーボードレイアウトに新しい行を追加します。その子要素のキーウェイトは、KeyboardLayout の .keyWeight プロパティから継承されます。

Key タイプ、または特殊化されたキータイプのいずれかを使用して、新しいキーボード行にキーを追加します。以下に、すべての組み込みキータイプのリストを示します:

BackspaceKey

キーボードレイアウト用のBackspaceキー

ChangeLanguageKey

キーボードレイアウト用の言語変更キー

EnterKey

キーボードレイアウト用のEnterキー

FillerKey

キーボードレイアウト用のフィラーキー

HideKeyboardKey

キーボードレイアウトの「キーボードを非表示」キー

InputModeKey

キーボードレイアウトの入力モードキー

Key

キーボードレイアウト用の通常文字キー

ModeKey

キーボードレイアウト用の汎用モードキー

ShiftKey

キーボードレイアウト用のShiftキー

SpaceKey

キーボードレイアウト用のスペースキー

SymbolModeKey

キーボードレイアウト用の記号モードキー

たとえば、入力方式にキーイベントを送信する通常のキーを追加するには:

import QtQuick
import QtQuick.VirtualKeyboard
import QtQuick.VirtualKeyboard.Components

KeyboardLayout {
    keyWeight: 160
    KeyboardRow {
        Key {
            key: Qt.Key_Q
            text: "q"
        }
    }
}

キーサイズの計算

キーボードレイアウトはスケーラブルであるため、レイアウト内のどの項目に対しても固定サイズを設定することはできません。その代わりに、各キーの幅は、他のキーとの相対的な重要度と高さを基に計算され、キーボードの各行のスペースが均等に分割されます。

前述の例では、キーのサイズはKeyboardLayout から継承されています。

キーの重みの実効値は 160 になります。例として、カスタムキーの重みを指定するキーをもう 1 つ追加してみましょう。

import QtQuick
import QtQuick.VirtualKeyboard
import QtQuick.VirtualKeyboard.Components

KeyboardLayout {
    keyWeight: 160
    KeyboardRow {
        Key {
            key: Qt.Key_Q
            text: "q"
        }
        Key {
            key: Qt.Key_W
            text: "w"
            weight: 200
        }
    }
}

これで、1行のキーウェイトの合計は160 + 200 = 360 となります。キーボードレイアウトが有効になると、個々のキーの幅は次のように計算されます:

キーの幅(ピクセル) = キーの重み / 行内のキーの重みの合計 * 行の幅(ピクセル)

つまり、キーボードは任意のサイズに拡大・縮小でき、キーの相対的なサイズは変わらないということです。

代替キー

Key オブジェクトは alternativeKeys プロパティを指定でき、QULVkb はこのプロパティを使用して、ユーザーがキーを長押しした際に代替キーの一覧を表示するポップアップを表示します。

alternativeKeys には、文字列または文字列のリストを指定できます。alternativeKeys が文字列の場合、ユーザーはその文字列に含まれる文字の中から選択することができます。

スタイルとレイアウト

キーボードレイアウトでは、視覚的な要素を指定することはできません。その代わりに、レイアウトはキーボードスタイルによって視覚化されます。一方、キーボードスタイルはキーボードレイアウトのサイズに影響を与えることはできません。

複数のページにまたがるキーを持つキーボードレイアウト

記号レイアウトなど、一部のキーボードレイアウトには、単一のキーボードレイアウトに表示できる範囲を超える数のキーが含まれている場合があります。そのような場合は、KeyboardLayoutLoader を使用して、複数のキーボードレイアウトを同じコンテキストに埋め込んでください。

KeyboardLayoutLoader をキーボードレイアウトのルートアイテムとして使用する場合、実際のキーボードレイアウトはComponent要素で囲まれます。キーボードレイアウトは、activeコンポーネントのidをsourceComponentプロパティに割り当てることで有効化されます。

例:

import QtQuick
import QtQuick.VirtualKeyboard
import QtQuick.VirtualKeyboard.Components

KeyboardLayoutLoader {
    property bool secondPage
    onVisibleChanged: if (!visible) secondPage = false
    sourceComponent: secondPage ? page2 : page1
    Component {
        id: page1
        KeyboardLayout {
            KeyboardRow {
                Key {
                    displayText: "1/2"
                    functionKey: true
                    onClicked: secondPage = !secondPage
                }
            }
        }
    }
    Component {
        id: page2
        KeyboardLayout {
            KeyboardRow {
                Key {
                    displayText: "2/2"
                    functionKey: true
                    onClicked: secondPage = !secondPage
                }
            }
        }
    }
}

言語の追加と削除

Qt Quick のUltralite Virtual Keyboardモジュールで構築されたレイアウトや言語を追加・削除することができます。 レイアウトはモジュールの他の部分と一緒にビルドされるため、レイアウトの変更、追加、削除を行うには、モジュールを再エクスポートして再ビルドする必要があります。アプリケーションは実行時にキーボードレイアウトを動的に変更できますが、モジュールのビルド完了後に新しいレイアウトを追加または削除することはできません。

Qt Quick のUltralite仮想キーボードビルドから不要なレイアウトを削除するには、Qt Quick のUltraliteインストールディレクトリ内にあるモジュールの.qmlproject ファイル(src/virtualkeyboard/virtualkeyboard/VirtualKeyboardAssets.qmlproject )で、除外したいレイアウトをコメントアウトしてください。

新しい言語やレイアウトを追加するには、Qt Quick Ultraliteのインストールディレクトリ内のsrc/virtualkeyboard/layouts 配下に、そのレイアウトを使用するロケールにちなんで名付けたディレクトリを作成してください。例えば、ノルウェー語(ニーノシュク)の場合はsrc/virtualkeyboard/layouts/nn となります。上記の手順に従って、新しい言語に対応するレイアウトを追加してください。 最後に、Qt Quick Ultralite インストールに属する `VirtualKeyboardAssets.qmlproject ` ファイル内の `QmlFiles ` ノードにエントリを追加し、Qt Quick Ultralite 仮想キーボードビルドに新しいロケールディレクトリを登録してください。

# Snippet from VirtualKeyboardAssets.qmlproject:
...
QmlFiles {
    files: [
        // styles
        "../styles/SelectionListItem.qml",
        "../styles/KeyboardStyle.qml",
        ...
        // layouts
// Place your custom layouts here vvvv
        "../layouts/nn/nn_main.qml",
        "../layouts/nn/nn_symbols.qml",
// Place your custom layouts here ^^^^

        // Unused language/layout is commented out
        //"../layouts/nb/nb_main.qml",
        // The following built-in layouts will be included
        "../layouts/sr/sr_main.qml",
        "../layouts/pt/pt_main.qml",
        "../layouts/bg/bg_main.qml",
        "../layouts/sl/sl_main.qml",
        "../layouts/zh/zh_main.qml",
        "../layouts/zh/zh_symbols.qml",
        "../layouts/ru/ru_main.qml",
        "../layouts/tr/tr_main.qml",
        "../layouts/fa/fa_main.qml",
        "../layouts/fa/fa_digits.qml",
        "../layouts/fa/fa_symbols.qml",
        "../layouts/fa/fa_numbers.qml",
        "../layouts/pl/pl_main.qml",
        ...
    ]
}
...

注: Qt Quick のUltralite仮想キーボードモジュールのビルドからレイアウトを追加・除外するこの方法は 、今後のQt for MCUs のリリースにおいて変更される可能性があります。

注: 組み込み言語の中には fallback のロケールにのみ依存しているものがあります 。ビルドツールは、ロケールディレクトリ内にalias.fallback が見つかった場合、そのようなディレクトリを登録します。

キーボードのスタイル

Qt Quick のUltralite仮想キーボードのスタイリングシステムは、組み込みスタイルとカスタムスタイルの両方をサポートしています。アプリケーションでQt Quick のUltralite仮想キーボードを使用する場合、仮想キーボードのスタイル、およびそのスタイルを直接使用するモジュール内のコンポーネントはすべて、Qt Quick のUltraliteアプリケーションのビルド時にエクスポートおよびビルドされます。 つまり、一度に利用可能なスタイルは1つだけであり、スタイルを変更するにはアプリケーションの再エクスポートとビルドが必要となります。実行時に新しいスタイルを読み込むことはできません。

Qt for MCUs 2.9 以降では、ファイルセレクタを使用して仮想キーボードのスタイルを選択できるようになりました。このモジュールには、デフォルトのスタイルと「retro」という名前の代替スタイルの 2 つの組み込みスタイルが含まれています。 ファイルセレクタを使用して、希望するスタイルを選択してください。これは、qul_add_target() 内で指定するか、コマンドラインから直接qmlprojectexporterを実行する際に--selectorコマンドライン引数を使用して指定します。

## Applies the "retro" style to the VirtualKeyboard module
qul_add_target(MyQulApp
    QML_PROJECT MyApp.qmlproject
    SELECTORS "retro"
)

ファイルセレクタが指定されていない場合、または指定されたセレクタに一致するスタイルがない場合、Qt Quick Ultralite Virtual Keyboard はデフォルトのスタイルを適用します。

スタイル設定 API

Qt Virtual Keyboard のスタイリングと、Qt Quick Ultralite 仮想キーボードのスタイリング設定の間には、顕著な違いがあります。

Qt では:

  • スタイル全体は、KeyboardStyle コンポーネントによって定義されます。
  • KeyboardStyle style.qml という名前のファイル内のルートアイテムです。

ただし、Qt Quick Ultralite では、QML 言語サポートの現在の制限により、KeyboardStyle の API 定義が複数のファイルに分割されています。そのため、スタイリング API は次の表にリストされているコンポーネントで構成されています。組み込みのリファレンススタイルでは、StyleConfig シングルトンを使用して、スタイルコンポーネント間で共通のプロパティを保存および共有しています。

注: 今後のリリースでは、 Qt Virtual Keyboard

AlternateKeysListBackground

代替キー一覧の背景用テンプレート

AlternateKeysListDelegate

代替キー一覧のデリゲート用テンプレート

AlternateKeysListHighlight

代替キー一覧のハイライト用テンプレート

BackspaceKeyPanel

BackspaceKey用のテンプレート

CharacterPreviewDelegate

文字プレビューポップアップ用テンプレート

DefaultKeyboardStyle

具体的なスタイル用のKeyboardStyle実装

EnterKeyPanel

EnterKey用のテンプレート

HideKeyPanel

HideKeyboardKey用のテンプレート

KeyPanelDelegate

通常のキー用テンプレート

KeyboardBackground

キーボードの背景用テンプレート

KeyboardStyle

仮想キーボード用のスタイリングインターフェースを提供します

LanguageKeyPanel

言語変更キーのテンプレート

SelectionListBackground

選択リストの背景用テンプレート

SelectionListDelegate

選択リストのデリゲート用テンプレート

SelectionListHighlight

選択リストのハイライト用テンプレート

ShiftKeyPanel

Shiftキー用のテンプレート

SpaceKeyPanel

SpaceKey用テンプレート

StyleConstants

キーボードのスタイル定数を含むシングルトン

SymbolKeyPanel

SymbolModeKeyおよびInputModeKey用のテンプレート

カスタムスタイルの追加

新しいスタイルを作成するには、まずQt for MCUs のインストールディレクトリ内に、"retro" スタイルの隣に、そのスタイル用の新しいサブディレクトリを作成することから始めます。${QUL_ROOT}/src/virtualkeyboard/styles/builtin の下に、スタイル名に「"+" 」という接頭辞を付けた新しいディレクトリを作成します。例:${QUL_ROOT}/src/virtualkeyboard/styles/builtin/+my_style

注: Qt for MCUs 2.9以降 、仮想キーボードモジュールがカスタムスタイルを認識できるようにするには、Qt for MCUs のインストールディレクトリ内の組み込みスタイルの隣にカスタムスタイルを配置する必要があります。これは将来のリリースで変更される可能性があります。

新しいスタイルを作成する際のよい出発点は、既存の組み込みスタイルをテンプレートとして使用し、それを編集することです。組み込みスタイルを含むディレクトリのいずれかの内容を、自分のスタイル用に作成したディレクトリにコピーします。これで、スタイルディレクトリには、前述のすべての QML ファイルと、"images" ディレクトリが含まれるようになります。

スタイルでは任意の数の画像を使用できますが、スタイルで使用する画像ファイルは、他の場所やimages ディレクトリ内にネストさせるのではなく、スタイルのimages サブディレクトリに直接配置する必要があります。

注: Qt Quick Ultralite Virtual Keyboardの他の部分がコンポーネントとして使用しているため、スタイルのQMLファイルの名前 を変更しないでください。カスタムスタイルに新しいQMLファイルを追加することはできません。

スタイルをテストするには、キーボードの背景色を別の色に設定し、正しいスタイルが適用されていることが一目でわかるようにしてください:

## In your style's KeyboardBackground.qml:
Rectangle {
    color: "#FF0000"
}

最後のステップは、カスタムスタイルを適用した状態でサンプルアプリケーションを実行することです:

## Applies the "my_style" custom style to the VirtualKeyboard module
qul_add_target(MyQulApp_CustomStyle
    QML_PROJECT MyApp.qmlproject
    SELECTORS "my_style"
)

カスタムスタイルでのスケーリング

スタイルでさまざまな画面サイズに対応する必要がある場合は、画像アセットのサイズ選定に注意が必要です。Qt Quick のUltralite仮想キーボードモジュールは、ターゲットプラットフォームのBoardDefaults.qmlproject で設定されたMCU.Config.Experimental.vkbScreenWidthから、仮想キーボードの画面サイズに関する情報を取得します。 同ファイルには、さまざまな画面サイズに対応するために、選択されたSVG画像に適用されるカスタムSVG画像のスケーリング係数も含まれています。これは組み込みスタイルで使用されます。このスケーリングはカスタムスタイルで使用される画像にも適用されるため、カスタムスタイルで使用されるSVG画像が、スケーリング後に適切なサイズになるよう確認してください。

フォントの Unicode 対応範囲の設定

このセクションでは、静的フォントエンジンを使用する場合の `font.unicodeCoverage ` 設定の取り扱いについて説明します。十分なカバレッジを確保する責任は、主にアプリケーション開発者側にあります。ROM使用量を最適化するためには、選択したキーボードスタイルでどのフォント設定が使用され、それらがどのように使用されているかを理解することが重要です。以下のセクションで、これについてさらに詳しく説明します。

アプリケーションにボックスグリフが表示される場合は、フォントのUnicodeカバレッジが十分に設定されていないことを示す明確な兆候です。その他の原因としては、選択したフォントに要求されたUnicode値が含まれていないことが考えられます。

MCU.Config.autoGenerateGlyphs も参照してください。

EnterKeyAction.label

アプリケーション内でEnterKeyAction.labelを使用すると、EnterKeydisplayText プロパティが設定されます。キーボードスタイルに、以下のコードスニペットのようにdisplayTextへのバインディングが設定されている場合:

// EnterKeyPanel.qml
Text {
    id: enterKeyText
    text: control.displayText
    font: StyleFonts.enterKeyFont

その場合、アプリケーションが、そのスタイル(この場合はStyleFonts.enterKeyFont )で使用されているものと同等のフォント設定に対して、十分なunicodeCoverageを持っていることを確認する必要があります。そうしないと、EnterKey 内のテキストがボックスグリフのみでレンダリングされる可能性があります。

CharacterPreviewDelegate

組み込みのスタイルでは、ボタン(KeyPanelDelegate )とプレビューポップアップ(CharacterPreviewDelegate )で同じフォント設定が使用されます。デザインコンセプトに合致するのであれば、例えばプレビューポップアップで2px大きいテキストを使用することも可能ですが、その場合は2セットのグリフ(各サイズごとに1セットずつ)をバンドルする必要があります。 デフォルトのスタイルでは、ROM内のフォントの保存容量を最適化するように設計されています。

中国語のグリフ

中国語のグリフセットは通常、容量が大きくなりがちです。Qt Quick のUltralite text_inputの例では、テキスト入力フィールドとSelectionListDelegate (仮想キーボードUIで候補語を表示するために使用される)に同等のフォント設定を採用することで、2セットの中国語グリフをバンドルすることを回避しています。これは、アプリケーション開発者が仮想キーボードスタイルの実装に精通することで、ROMを大幅に最適化できることを示す良い例です。

// CustomTextField.qml
readonly property font textFieldFont: Qt.font({
    // static font engine optimization:
    // Using the same font configuration for text input field as used by the keyboard style
    // so we can avoid bundling 2 sets of Chinese glyphs (one for each font configuration).
    // See PinyinSupport.qml
    pixelSize: StyleConstants.wordSuggestionSize * StyleConstants.scaleHint,
      unicodeCoverage: [
       "..."
      ]
})

// PinyinSupport.qml
readonly property font unicodeRegister: Qt.font({
    pixelSize: StyleConstants.wordSuggestionSize * StyleConstants.scaleHint,
    unicodeCoverage: [
        // Chinese characters
        "..."

キーボードレイアウトの対応範囲

バンドルされている各レイアウトファイルには、そのレイアウトのUnicodeカバレッジを設定する独自のフォント設定が含まれています。src/virtualkeyboard/layouts/cs/cs_main.qml からの例:

readonly property font registerCoverage: Qt.font({
                                           "pixelSize": StyleConstants.keyboardKeySize * StyleConstants.scaleHint,
                                           "unicodeCoverage": ["!,.?abcdefghijklmnopqrstuvwxyzáäåéíóöúýćčďěńřšťůž"],
                                           "unicodeCoverageIncludeUpperCase": true
                                       })

これにはいくつかの利点があります:

  • あるレイアウトが削除された場合、そのレイアウトのグリフは登録されず、アプリケーションに同梱されることもありません。
  • アプリケーション開発者は、キーボードのボタンに表示されるグリフを手動で登録する必要がありません。ボタン用の組み込みスタイルでは、例のregisterCoverage フォントと同等のフォント設定が使用されています。カスタムレイアウトも同様のパターンに従うか、必要に応じてコードを適応させる必要があります。

アプリケーション内のテキスト入力フィールドで、registerCoverage フォントで定義されているものとは異なるフォント設定(例えば、より大きなピクセルサイズなど)が使用される場合、開発者は、このテキストフィールドへの入力に使用されることが想定されるレイアウトファイルからカバレッジをコピーすることができます。

レイアウトを追加または変更する際、特定のレイアウトファイルに対応するUnicodeカバレッジを.fonts ファイルから簡単に抽出できます。.fonts ファイルの先頭には、characters フィールドがあります。このフィールドには、qmltocpp ツールによってqmlファイル内のすべての文字列から検出された、ソート済みの固有の文字が含まれています。

el_main.qml ファイルのel_main.fonts にある `characters ` の例:

"characters": "!,.?@abcdefghijklmnopqrstuvwxyzàáâãäåçèéêëìíîïòóôõöøùúûüýÿćċčďđĝğġģĩīĺļľŀłńņňœŕřśşšţťŧũūűŷżžΐάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώ"

注: .fonts ファイルの内容、公開 API の一部ではありません。

注: 静的フォントエンジンでサポートされていない言語のレイアウトファイルには、フォント登録含まれていません。

アプリケーション向け仮想キーボード API

QML タイプは、.qml ファイル内で以下のインポート文を使用することで、アプリケーションにインポートできます:

仮想キーボード

QML タイプはimport QtQuick.VirtualKeyboard

EnterKeyAction

Enterキーをカスタマイズするためのアタッチドプロパティを提供します

InputPanel

仮想キーボードのUIを提供します

仮想キーボードの設定

以下のQML型import QtQuick.VirtualKeyboard.Settings

VirtualKeyboardSettings

仮想キーボードの設定を提供します

高度なユースケース向けの仮想キーボードAPI

これらのQML型は、仮想キーボード拡張ベンダー、スタイルプロバイダー、およびキーボードレイアウトの各カテゴリに分類されます。アプリケーションやミドルウェアでは使用しないでください。

以下のQML型import QtQuick.VirtualKeyboard

InputContext

入力コンテキストへのアクセスを提供します

InputEngine

ユーザー入力を入力方式にマッピングします

および以下のすべての型

  • import QtQuick.VirtualKeyboard.Components
  • import QtQuick.VirtualKeyboard.Styles

参照

Virtual Keyboardのすべてのモジュールおよびコンポーネントの一覧を表示するには、モジュール概要ページにアクセスしてください。

特定のQtライセンスの下で利用可能です。
詳細はこちらをご覧ください。