Back to Qt.io
Contact Us Blog Download Qt

WebEngine コンテンツ操作の例

Web コンテンツを読み込んで操作する方法を示します。

コンテンツ操作では、Qt WebEngine ウィジェットを使用して JQuery を使用し、特殊効果とコンテンツ操作を備えた Web ブラウザを作成する方法を示します。

このアプリケーションでは、QWebEnginePage::runJavaScript （）を呼び出して jQuery JavaScript コードを実行します。QWebEngineView を中心ウィジェットとしてQMainWindow を実装し、ブラウザ自体を構築します。

例の実行

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

MainWindow クラスの定義

MainWindow クラスはQMainWindow を継承しています。このクラスは、アプリケーションとウェブ・コンテンツの両方に対してアクショ ンを実行するための、いくつかのスロットを実装しています：

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(const QUrl& url);

protected slots:

    void adjustLocation();
    void changeLocation();
    void adjustTitle();
    void setProgress(int p);
    void finishLoading(bool);

    void viewSource();

    void highlightAllLinks();
    void rotateImages(bool invert);
    void removeGifImages();
    void removeInlineFrames();
    void removeObjectElements();
    void removeEmbeddedElements();

private:
    QString jQuery;
    QWebEngineView *view;
    QLineEdit *locationEdit;
    QAction *rotateAction;
    int progress;
};

また、jQueryを含むQString 、ウェブ・コンテンツを表示するQWebEngineView 、アドレス・バーとして動作するQLineEdit 。

MainWindowクラスの実装

コンストラクタの実装から始めます。コンストラクタの最初の部分では、progress の値を 0 に設定します。この値は、後のコードで Web ページの読み込みを視覚化するために使用します：

MainWindow::MainWindow(const QUrl& url)
{
    setAttribute(Qt::WA_DeleteOnClose, true);
    progress = 0;

次に、QFile 、ファイルの内容を読み込むことで、jQueryライブラリがロードされます。jQueryライブラリは、HTMLを操作するためのさまざまな関数を提供するJavaScriptライブラリです：

    QFile file;
    file.setFileName(":/jquery.min.js");
    file.open(QIODevice::ReadOnly);
    jQuery = file.readAll();
    jQuery.append("\nvar qt = { 'jQuery': jQuery.noConflict(true) };");
    file.close();

コンストラクタの後半では、QWebEngineView を作成し、スロットをビューのシグナルに接続します：

    view = new QWebEngineView(this);
    view->load(url);
    connect(view, &QWebEngineView::loadFinished, this, &MainWindow::adjustLocation);
    connect(view, &QWebEngineView::titleChanged, this, &MainWindow::adjustTitle);
    connect(view, &QWebEngineView::loadProgress, this, &MainWindow::setProgress);
    connect(view, &QWebEngineView::loadFinished, this, &MainWindow::finishLoading);

さらに、ブラウザのアドレス・バーとしてQLineEdit 。さらに、ブラウザのアドレス・バーとしてQSizePolicy を作成し、ブラウザの利用可能な領域を常に埋めるように を設定します。QWebEngineView::pageAction()からナビゲーション・アクションのセットとともに、QLineEdit をQToolBar に追加します：

    locationEdit = new QLineEdit(this);
    locationEdit->setSizePolicy(QSizePolicy::Expanding, locationEdit->sizePolicy().verticalPolicy());
    connect(locationEdit, &QLineEdit::returnPressed, this, &MainWindow::changeLocation);

    QToolBar *toolBar = addToolBar(tr("Navigation"));
    toolBar->addAction(view->pageAction(QWebEnginePage::Back));
    toolBar->addAction(view->pageAction(QWebEnginePage::Forward));
    toolBar->addAction(view->pageAction(QWebEnginePage::Reload));
    toolBar->addAction(view->pageAction(QWebEnginePage::Stop));
    toolBar->addWidget(locationEdit);

コンストラクタの3番目の部分は、2つのQMenu ウィジェットを実装し、アクションのセットを割り当てています：

    QMenu *viewMenu = menuBar()->addMenu(tr("&View"));
    QAction *viewSourceAction = new QAction(tr("Page Source"), this);
    connect(viewSourceAction, &QAction::triggered, this, &MainWindow::viewSource);
    viewMenu->addAction(viewSourceAction);

    QMenu *effectMenu = menuBar()->addMenu(tr("&Effect"));
    effectMenu->addAction(tr("Highlight all links"), this, &MainWindow::highlightAllLinks);

    rotateAction = new QAction(this);
    rotateAction->setIcon(style()->standardIcon(QStyle::SP_FileDialogDetailedView));
    rotateAction->setCheckable(true);
    rotateAction->setText(tr("Turn images upside down"));
    connect(rotateAction, &QAction::toggled, this, &MainWindow::rotateImages);
    effectMenu->addAction(rotateAction);

    QMenu *toolsMenu = menuBar()->addMenu(tr("&Tools"));
    toolsMenu->addAction(tr("Remove GIF images"), this, &MainWindow::removeGifImages);
    toolsMenu->addAction(tr("Remove all inline frames"), this, &MainWindow::removeInlineFrames);
    toolsMenu->addAction(tr("Remove all object elements"), this, &MainWindow::removeObjectElements);
    toolsMenu->addAction(tr("Remove all embedded elements"), this, &MainWindow::removeEmbeddedElements);

最後の行は、QWebEngineView をQMainWindow の中心ウィジェットとして設定します：

    setCentralWidget(view);
}

ページがロードされると、QWebEngineView のloadFinished() シグナルによってadjustLocation() がトリガーされ、アドレス・バーが更新されます：

void MainWindow::adjustLocation()
{
    locationEdit->setText(view->url().toString());
}

changeLocation() では、QUrl オブジェクトを作成し、QWebEngineView にページをロードするために使用します。新しいウェブページのロードが終了すると、adjustLocation() がもう一度実行され、アドレスバーが更新されます：

void MainWindow::changeLocation()
{
    QUrl url = QUrl::fromUserInput(locationEdit->text());
    view->load(url);
    view->setFocus();
}

adjustTitle() メソッドはウィンドウのタイトルを設定し、ロードの進捗状況を表示します：

void MainWindow::adjustTitle()
{
    if (progress <= 0 || progress >= 100)
        setWindowTitle(view->title());
    else
        setWindowTitle(QStringLiteral("%1 (%2%)").arg(view->title()).arg(progress));
}

void MainWindow::setProgress(int p)
{
    progress = p;
    adjustTitle();
}

このスロットはQWebEngineView のtitleChanged() シグナルによってトリガーされます。

ウェブページがロードされると、QWebEngineView のloadFinished() シグナルによってfinishLoading() メソッドがトリガーされます。このメソッドは、タイトルバーの進行状況を更新し、runJavaScript() を呼び出して、現在のウェブページに対して jQuery ライブラリを評価します：

void MainWindow::finishLoading(bool)
{
    progress = 100;
    adjustTitle();
    view->page()->runJavaScript(jQuery);

    rotateImages(rotateAction->isChecked());
}

つまり、JavaScriptはQWebEngineView にロードされたコンテンツの一部として見ることができるため、新しいページがロードされるたびにロードする必要があります。jQueryライブラリがロードされると、ブラウザでさまざまなjQuery関数を実行し始めることができます。

その後、rotateImages() 関数が明示的に呼び出され、新しく読み込まれたページの画像が toggle アクションの状態を尊重することを確認します。

最初のjQueryベースの関数、highlightAllLinks() は、現在のウェブページ内のすべてのリンクをハイライトするように設計されています。JavaScriptのコードは、ハイパーリンクのタグであるaという名前のウェブ要素を探します。そのような要素ごとに、CSSを使って背景色を黄色に設定します：

void MainWindow::highlightAllLinks()
{
    QString code = QStringLiteral("qt.jQuery('a').each( function () { qt.jQuery(this).css('background-color', 'yellow') } )");
    view->page()->runJavaScript(code);
}

rotateImages() 関数は、現在のウェブページ上の画像を回転させます。このJavaScriptコードは、CSS transformsに依存しています。すべてのimg要素を検索し、画像を180度回転させ、また元に戻します：

void MainWindow::rotateImages(bool invert)
{
    QString code;

    if (invert)
        code = QStringLiteral("qt.jQuery('img').each( function () { qt.jQuery(this).css('transition', 'transform 2s'); qt.jQuery(this).css('transform', 'rotate(180deg)') } )");
    else
        code = QStringLiteral("qt.jQuery('img').each( function () { qt.jQuery(this).css('transition', 'transform 2s'); qt.jQuery(this).css('transform', 'rotate(0deg)') } )");
    view->page()->runJavaScript(code);
}

残りのメソッドは、現在のウェブページからさまざまな要素を削除します。removeGifImages() は、ウェブページ上のすべての要素のsrc属性を検索して、ページ上のすべての GIF 画像を削除します。gifファイルをソースとするすべての要素が削除されます：

void MainWindow::removeGifImages()
{
    QString code = QStringLiteral("qt.jQuery('[src*=gif]').remove()");
    view->page()->runJavaScript(code);
}

removeInlineFrames() メソッドは、すべてのiframe要素またはインライン要素を削除します：

void MainWindow::removeInlineFrames()
{
    QString code = QStringLiteral("qt.jQuery('iframe').remove()");
    view->page()->runJavaScript(code);
}

removeObjectElements() メソッドは、すべてのobject要素を削除します：

void MainWindow::removeObjectElements()
{
    QString code = QStringLiteral("qt.jQuery('object').remove()");
    view->page()->runJavaScript(code);
}

removeEmbeddedElements() メソッドは、ページに埋め込まれたプラグインなど、embedタグを使用している要素をすべて削除します：

void MainWindow::removeEmbeddedElements()
{
    QString code = QStringLiteral("qt.jQuery('embed').remove()");
    view->page()->runJavaScript(code);
}

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

©2024 The Qt Company Ltd. 本書に含まれるドキュメントの著作権は、それぞれの所有者に帰属します。 ここで提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。