Back to Qt.io
Contact Us Blog Download Qt

WebEngine ウィジェット スペルチェッカーの例

シンプルな HTML フォームにスペルチェッカーを統合します。

Spellcheckerは、ユーザがスペルチェックされたメッセージを送信できるようにする HTML フォームにスペルチェックのサポートを統合する方法を示します。

例の実行

からサンプルを実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳しくは、Building and Running an Exampleをご覧ください。

辞書

スペルをチェックするためには、スペルチェッカーに辞書を提供する必要があります。Qt WebEngine のスペルチェッカーは、すべてのプラットフォームでHunspell プロジェクトが提供する辞書と、macOS が提供するネイティブ辞書をサポートしています。この例では、英語とドイツ語をサポートしたい。

Hunspell辞書をサポートするには、特別なバイナリ形式にコンパイルする必要がある。Hunspell辞書は2つのファイルで構成される：

  • その言語の単語を含む辞書である.dic ファイル。
  • 辞書内の特別なフラグの意味を定義する.aff ファイル。

これらの2つのファイルは、Qtに同梱されているqwebengine_convert_dict ツールを使って、bdic 形式に変換することができます。

この例では、en_USとde_DEの辞書をコンパイルします。しかし、実際の辞書はこの例では容量が大きすぎます。そこで、以下の単語を含む2つのダミー辞書を作成し、変換処理のデモンストレーションに使用します：

  • 英語辞書：英語辞書：I, you, he, she, it, we, they, love, loves, qt
  • ドイツ語辞書：ich, du, er, sie, es, wir, ihr, sie, Sie, liebe, liebst, liebt, lieben, liebt, qt

辞書の各単語の先頭には、q を付けることができる。dic およびaff ファイルの作成方法の詳細については、Hunspell Project の Hunspell 辞書ファイル形式仕様を参照。

辞書ファイルの検索方法については、スペルチェッカー機能のドキュメントを参照してください。

プロジェクト・ファイルでQMAKE_EXTRA_COMPILERSパラメーターを指定して、ビルド・プロセスに変換ステップを追加します：

qtPrepareTool(CONVERT_TOOL, qwebengine_convert_dict, "", "", $$[QT_INSTALL_LIBEXECS])

debug_and_release {
    CONFIG(debug, debug|release): DICTIONARIES_DIR = debug/qtwebengine_dictionaries
    else: DICTIONARIES_DIR = release/qtwebengine_dictionaries
} else {
    DICTIONARIES_DIR = qtwebengine_dictionaries
}

dict_base_paths = en/en-US de/de-DE
for (base_path, dict_base_paths) {
    dict.files += $$PWD/dict/$${base_path}.dic
}

dictoolbuild.input = dict.files
dictoolbuild.output = $${DICTIONARIES_DIR}/${QMAKE_FILE_BASE}.bdic
dictoolbuild.depends = ${QMAKE_FILE_PATH}/${QMAKE_FILE_BASE}.aff
dictoolbuild.commands = $${CONVERT_TOOL} ${QMAKE_FILE_IN} ${QMAKE_FILE_OUT}
dictoolbuild.name = Build ${QMAKE_FILE_IN_BASE}
dictoolbuild.CONFIG = no_link target_predeps
QMAKE_EXTRA_COMPILERS += dictoolbuild

辞書をセットアップするために、dic とbdic 辞書のファイルパスを渡して、qwebengine_convert_dict を実行します。aff ファイルとオプションのdelta ファイルも、convert プロセスによってピックアップされる。出力されたbdic ファイルはqtwebengine_dictionariesローカル・ディレクトリー（またはResourcesディレクトリー）に置かれ、そこからアプリケーション・バイナリーが実行されます。

スペルチェッカーの設定

このクラスのコンストラクタは簡単です。

WebView::WebView(QWidget *parent)
    : QWebEngineView(parent)
{
    m_spellCheckLanguages["English"] = "en-US";
    m_spellCheckLanguages["German"] = "de-DE";
    QWebEngineProfile *profile = page()->profile();
    profile->setSpellCheckEnabled(true);
    profile->setSpellCheckLanguages({"en-US"});

辞書ファイル名と実際の言語表示名の間の簡単なマッピングを定義します。このマッピングを使用して、コンテキスト・メニューに辞書の名前を表示します。デフォルトではスペルチェックは無効になっている。そのため、スペルチェッカーも有効にして、英語辞書を設定します。Qt WebEngine のスペルチェック・サービスが初期化されると、bdict の辞書をロードし、整合性をチェックしようとします。エラーが発生した場合は、qWarning() 関数を使用してログに記録される。

スペルチェック言語の切り替え

スペルチェックに使用される現在の言語はプロファイルごとに定義され、QWebEngineProfile::setSpellCheckLanguage メソッドを使用して設定できます。ユーザがスペルミスした単語の下線をクリックすると、デフォルトのコンテキストメニューに最大 4 つの候補が表示されます。1つを選択すると、スペルミスの単語が置換されます。QWebEngineView::contextMenuEvent をオーバーライドして QWebEngineContextMenuData::spellCheckerSuggestions を使用すれば、多くの候補を再実装できますが、ここでは代わりにコンテキストメニューに言語オプションを追加する方法を示します：

void WebView::contextMenuEvent(QContextMenuEvent *event)
{
    QWebEngineContextMenuRequest *data = lastContextMenuRequest();
    Q_ASSERT(data);

    if (!data->isContentEditable()) {
        QWebEngineView::contextMenuEvent(event);
        return;
    }

    QWebEngineProfile *profile = page()->profile();
    const QStringList &languages = profile->spellCheckLanguages();
    QMenu *menu = createStandardContextMenu();
    menu->addSeparator();

    QAction *spellcheckAction = new QAction(tr("Check Spelling"), nullptr);
    spellcheckAction->setCheckable(true);
    spellcheckAction->setChecked(profile->isSpellCheckEnabled());
    connect(spellcheckAction, &QAction::toggled, this, [profile](bool toogled) {
        profile->setSpellCheckEnabled(toogled);
    });
    menu->addAction(spellcheckAction);

    if (profile->isSpellCheckEnabled()) {
        QMenu *subMenu = menu->addMenu(tr("Select Language"));
        const QStringList keys = m_spellCheckLanguages.keys();
        for (const QString &str : keys) {
            QAction *action = subMenu->addAction(str);
            action->setCheckable(true);
            QString lang = m_spellCheckLanguages[str];
            action->setChecked(languages.contains(lang));
            connect(action, &QAction::triggered, this, [profile, lang](){
               profile->setSpellCheckLanguages(QStringList()<<lang);
            });
        }
    }
    connect(menu, &QMenu::aboutToHide, menu, &QObject::deleteLater);
    menu->popup(event->globalPos());
}

上記では、QWebEnginePage::contextMenuData メソッドを使用して QWebEngineContextMenuData インスタンスを取得しています。これを使用して、ユーザが編集可能なフィールドをクリックしたときに通知を受け、コンテキストメニューにCheck Spelling の項目を表示します。さらに、スペルチェックが有効になっている場合は、サポートされている言語を含むSelect Language サブメニューも追加します。アクションがトリガーされると、QWebEngineProfile::setSpellCheckLanguage 呼び出しで言語を設定します。

プロジェクト例 @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.