✌🏼 🤽🏼 🤽🏾 モバイルHTML5アプリケーションの開発におけるQtWebKit固有 🛌🏼 🕺🏼 🧔🏿

この投稿は、コンテスト「 Smart Posts for Smart Posts 」に参加しています

はじめに

HTML5の出現により、開発の焦点が徐々にWebに移行し始めたことは秘密ではありません。これらは、完全にHTML5を使用して記述された単純なWebサイトと動的アプリケーション、さらにはモバイルアプリケーションです。プラットフォームと実行環境に依存せず、標準への疑う余地のないコンプライアンスのみを必要とします。しかし、それにもかかわらず、新しいHTML標準によって導入されたテクノロジのスタック全体がどれほど優れていても、ネイティブ開発ツールの使用を必要とするタスクがまだいくつかあります。

このような問題は、たとえば、システム情報へのアクセスの取得、システム内の何かの管理と変更です。 HTML5からモバイルデバイスの連絡先、カレンダー、オーガナイザーなどへのアクセス。繰り返しになりますが、アプリケーションが本格的な計算を実行する場合、遅いJSから速いC ++に転送できます。この記事では、例としてQtWebKitモジュールを使用したWebアプリケーションとネイティブコードの相互作用のいくつかの手法を検討します。

JavaScriptからC ++メソッドを呼び出す

この場合、理論的には、クラスの1つにアクセスできるHTMLページに新しいJSオブジェクトを追加する必要があります。 QtWebKitはそのようなオブジェクトをWebページに埋め込む機能を提供しますが、1つの条件があります。ブラウザコンポーネントでページをリロードするたびに新しいオブジェクトを追加する必要があります。つまり、DOMツリーとJSオブジェクトのツリーの両方をクリアするたびに。

実際には、Qt Creatorで新しい「Qtモバイルアプリケーション」を作成する必要があります。これはQtシミュレータプロファイルです。残りは好みに合わせて作成します。次に、QWebViewコンポーネントをフォームにドロップし、.proファイルに行を追加します

QT += webkit

ヘッダーmainwindow.hで、1つのプライベートスロットと1つのパブリックスロットを宣言します。

 private slots: void addJSObject(); public slots: void webViewQuitClicked ();

また、mainwindow.cpp実装ファイルにQWebFrameヘッダーを含め、コンストラクターを少し変更して、mainwindow.hに追加されたスロットの実装を記述します。

 ... #include <QWebFrame> #include <QMessageBox> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(addJSObject())); } void MainWindow::addJSObject() { ui->webView->page()->mainFrame()->addToJavaScriptWindowObject(QString("mainWindow"), this); } void MainWindow::webViewQuitClicked () { qApp->quit(); } ...

それでは、このコードを見てみましょう。

プライベートスロットaddJSObject（）-現在のフォームを指すJSオブジェクトを各新規ページに追加する役割を果たします。同時に、Webページがリロードされるたびに呼び出されます。 javaScriptWindowObjectCleared（）シグナルがこれを担当します。コードからわかるように、Webページでは、オブジェクトの名前は「mainWindow」になります。
webViewQuitClicked（）パブリックスロットは、WebページにあるJavaScriptコードから使用できるスロットです。当然、類推により、JSから呼び出される他のメソッドを追加できます。

さらに進みます。次に、このコードをWebページから呼び出す必要があります。これを行うには、次の内容のHTMLファイルを作成します。

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Application Example</title> <script> function quitApplication() { mainWindow.webViewQuitClicked (); } </script> </head> <body> <a href="#" onclick='quitApplication();'>Quit Application</a> </body> </html>

そして、アプリケーションコンストラクターを少し編集します。つまり、1行追加します。

 ui->webView->load("file:///"+QApplication::applicationDirPath() + "/../../html5caller/example.htm");

もちろん、インターネット上のどこからでもページをダウンロードできます。

うん、悪くない。しかし、C ++関数にパラメーターを渡したい場合はどうでしょうか？これ以上簡単なことはありません！ C ++コードで、目的のパラメーターを持つ新しいパブリックスロットを簡単に記述します。例-ユーザーへのメッセージの表示：

mainwindow.h：

 public slots: void webViewQuitClicked (); void webViewShowMessageClicked (QString message, int number);

mainwindow.cpp：

 ... void MainWindow::webViewShowMessageClicked (QString message, int number) { QMessageBox::information(this, "From Web", message+QString::number(number)); } ...

example.htmを変更します。

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Application Example</title> <script> function quitApplication() { mainWindow.webViewQuitClicked (); } function calculate(val1, val2) { result = eval(parseFloat(document.calc.val1.value)+parseFloat(document.calc.val2.value)) mainWindow.webViewShowMessageClicked ("Result: ", result); } </script> </head> <body> <a href="#" onclick='quitApplication();'>Quit Application</a> <FORM name="calc"> <input name="val1" type="text" value="3" size="4">+ <input name="val2" type="text" value="4" size="4"> <input type="button" value=" + " onclick="calculate(val1, val2)"> </FORM> </body> </html>

これで、アプリケーションを閉じるだけでなく、通常のデータ型の制御で任意のパラメーターをアプリケーションに渡すこともできます。そして、ここで何が起こったのです：

さて、最後。このトピックに追加できるもの。言ってみよう。いくつかのデータをC ++に送信し、そこでデータが処理され、それを取り戻したいと考えています。これを行うには、たとえば次のように、スロットの戻りデータ型を記述するだけです。

 ... QString readResult(int val1, int val2) { ... return QString(); } ...

JSコードから、他のメソッドと同様にこのメソッドを呼び出しますが、唯一の違いは、戻り値を追加する場所に変数を設定することです。

 var lolo = mainWindow.readResult();

それだけです...先に進みます...

C ++メソッドからJavaScriptコードを呼び出す

私たちは長い間これについて語りません。 JSコードを呼び出すには、QWebFrameクラスのメソッドを使用する必要があります。次に例を示します。ページ上のすべての写真のURLを取得する必要があります。

 QVariant listOfImages = webView.page()->mainFrame()->evaluateJavaScript("document.getElementsByTagName(\"img\").length;"); double numberOfImages = listOfImages.toDouble(); for (double i = 0; i < numberOfImages; ++i) { srcOfImages = webView.page()->mainFrame()->evaluateJavaScript(QString("document.getElementsByTagName(\"img\")[%1].src;").arg(i)); imageUrl = srcOfImages.toString(); }

最初にimg型のタグの数を取得し、次にこのリストを調べて、必要なURLを引き出します。例からわかるように、ページ上のオブジェクトに簡単にアクセスし、それに応じてメソッドを実行できます。

QWidgetをWebページに統合する

これは、私が話したい2番目の大きなトピックです。それは、非常に標準的な手順ではないという問題になります...私たちのアプリケーションのウィジェットをWebページに実際に含めます。

これは、QWebPluginFactoryクラスを使用して実行できます。始めましょう。まず、Qt Creatorの左側のプロジェクトツリーで、プロジェクトを右クリックします。連絡先メニューから[新規追加]-> [C ++クラス]を選択します。クラス名MyWidgetFactory、基本クラスQWebPluginFactory、タイプQObject、完了。プラグインが完全に機能するようにするには、基本クラスの2つのメソッドを再定義する必要があります。

 QObject *create(const QString &mimeType, const QUrl &url, const QStringList &argumentNames, const QStringList &argumentValues) const; QList<QWebPluginFactory::Plugin> plugins() const;

1つは、オンデマンドWebページでウィジェットを作成することです。 2番目は、プラグインが応答する必要があり、新しいウィジェットを作成する必要があるMimeタイプを説明しています。一般に、最初は、数年前にVkontakte.ruのメッセンジャーを書いたときに、同様のアプローチを使用しました。次に、ユーザーが音楽を共有しやすくするために、ページに音楽プレーヤーウィジェットを埋め込む必要がありました。 code.google.com/p/vimka/source/browse/#svn%2Ftrunk%2Fchatsファイルvkmediafactory.hおよびvkmediafactory.cppで完全な実装を確認できます。

これからもっと簡単なことをします。したがって、結果のクラステンプレートを変更することから始めましょう。

mywidgetfactory.h：

 #ifndef MYWIDGETFACTORY_H #define MYWIDGETFACTORY_H #include <QWebPluginFactory> class MyWidgetFactory : public QWebPluginFactory { Q_OBJECT public: explicit MyWidgetFactory(QObject *parent = 0); QObject *create(const QString &mimeType, const QUrl &url, const QStringList &argumentNames, const QStringList &argumentValues) const; QList<QWebPluginFactory::Plugin> plugins() const; signals: public slots: }; #endif // MYWIDGETFACTORY_H

mywidgetfactory.cpp：

 #include "mywidgetfactory.h" #include <QTabWidget> #include <QPushButton> #include <QProgressBar> #include <QDebug> #include <QApplication> #include <QUrl> MyWidgetFactory::MyWidgetFactory(QObject *parent) : QWebPluginFactory(parent) { } QList<QWebPluginFactory::Plugin> MyWidgetFactory::plugins() const { QWebPluginFactory::MimeType mimeType; mimeType.name = "text/qtexample"; mimeType.description = "Comma-separated values"; mimeType.fileExtensions = QStringList() << "txt"; QWebPluginFactory::Plugin plugin; plugin.name = "PluginFactory Example"; plugin.description = "PluginFactory Example"; plugin.mimeTypes = QList<MimeType>() << mimeType; return QList<QWebPluginFactory::Plugin>() << plugin; } QObject *MyWidgetFactory::create(const QString &mimeType, const QUrl &url, const QStringList &argumentNames, const QStringList &argumentValues) const { qDebug() << mimeType << url << argumentNames << argumentValues; if (mimeType != "text/qtexample") return 0; QTabWidget *tab = new QTabWidget(); int max = argumentValues.last().split(",").first().toInt(); int val = argumentValues.last().split(",").last().toInt(); QProgressBar *progressBar = new QProgressBar(); tab->addTab(progressBar, "Progress"); progressBar->setMaximum(max); progressBar->setValue(val); QPushButton *pb = new QPushButton("Click me!"); tab->addTab(pb, "Button"); connect(pb, SIGNAL(clicked()),QApplication::instance(), SLOT(quit())); return tab; }

私たちは何をしましたか？ plugins（）関数で、応答したいMimeタイプを記述しました。そして、プラグイン自体について説明しました。このプラグインは、ロードされたすべてのページでこのMimeタイプの存在を監視し、検出されたらcreate（）メソッドを呼び出して、結果のウィジェットをページ自体に埋め込みます。

さらに、create（）メソッドでは、データを受け入れてコンソールに出力し、MIMEタイプが適切かどうかを確認し（text / qtexample）、MIMEタイプが一致する場合は空でないウィジェットを返します。もう少しわかりやすくするために、この関数が受信したデータのコンソール出力を次に示します。

 "text/qtexample" QUrl( "file:///D:/devel/html5caller/100,28" ) ("type", "data", "width", "height", "src") ("text/qtexample", "100,28", "300", "300", "100,28")

これは工場用です...

次のステップでは、独自のプラグインファクトリの可用性についてアプリケーションに通知します。これを行うには、最初にmainwondow.cppファイルに2つの新しいヘッダーを追加します。

 #include <QWebSettings> #include "mywidgetfactory.h"

そして、このクラスのコンストラクターを変更します。

 MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { QWebSettings::globalSettings()->setAttribute( QWebSettings::PluginsEnabled, true); ui->setupUi(this); connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(addJSObject())); MyWidgetFactory *factory = new MyWidgetFactory(ui->webView); ui->webView->page()->setPluginFactory(factory); ui->webView->load("file:///"+QApplication::applicationDirPath() + "/../../html5caller/example.htm"); }

ここでは、まずグローバルなQtWebKit設定でプラグインサポートを有効にしました。次に、Factoryクラスのオブジェクトを作成し、webViewに関連するQWebPageオブジェクトのプラグインファクトリとして設定します。

最後の最後の仕上げが残っています-web-cnhfybxreにプラグインを何らかの形で埋め込む必要があります/これを行うには、example.htmを開き、フォームの説明の後に次のような行を追加します。

 <object type="text/qtexample" data="100,28" width="300" height="300"></object>

ご想像のとおり、ここでは、作成されたプラグインが応答するようにMIMEタイプを指定し、将来のウィジェットのサイズを設定し、初期化のためにデータを渡します。

作業の結果は次のウィンドウになります。

ウィジェットを移動したり、タブを切り替えたり、2番目のタブのボタンをクリックすると、アプリケーションがクリックを処理して閉じます。

今回は基本的にそれだけです。アプリケーションのソースコードはここから取得でき、例として使用できます： code.google.com/p/html5cppmixer/downloads/list

誰かが私の経験を役立ててくれることを願っています。

モバイルHTML5アプリケーションの開発におけるQtWebKit固有

はじめに

目次

JavaScriptからC ++メソッドを呼び出す

C ++メソッドからJavaScriptコードを呼び出す

QWidgetをWebページに統合する

More articles: