ここまで、Qt Insightでのデータ確認方法やそれを利用した実践的なユーザー行動分析の方法についてご説明しました。
本稿では、いよいよQtアプリケーションにQt Insight Tracker APIを追加して、クラウドにデータを送信し、Qt Insight Web Console（ブラウザで表示されるページ）で送信されたデータを確認する方法についてご紹介します。
目次
Qt Insight Trackerは、Qtフレームワークで実装されるアプリケーションを前提としています。
そのため、まずはQtをインストールする必要があります。
「Qt インストール」と検索エンジンで調べて、インストールのページに進みましょう。
「ダウンロード」とあるリンクを開くと、以下のページが開きます。
よく見ると、Qtには２つの選択肢があることがわかります。「無料評価ライセンス（商用ライセンス）」と「オープンソース版」です。
Qt Insightは、商用ライセンスであってもオープンソース版であっても使用可能なので、それぞれの説明を読んだうえで、自分に合った方を選択して先に進んでください。
「無料評価ライセンスをリクエスト」を選択した場合、以下のような画面が表示されます。
こちらに情報を入力すると、最終的にはqtaccount@qt.ioから以下のようなメールが届きます。以下で赤くハイライトされている「downloads via the Qt Account portal」をクリックしましょう。
すると「Qt Customer Portal」が表示されます。左側のメニューから「Downloads」を選択しすると、中央に「Online Installer」という画面が表示されるので、中央にある３つの「Unified Qt Installer」から、ご自身のPCのOSにあったインストーラをダウンロードしてください。私はWindowsを使っているので、一番右の「Unified Qt Installer 4.6.1. for Windows」をダウンロードします。
すると「qt-unified-windows-x64-4.6.1-online.exe」がダウンロードされます。
「オープンソース版をダウンロード」を選択した場合、以下のような画面が表示され、使用しているOSに合ったUnifiedインストーラが自動的にダウンロードされます。もしされない場合は、以下の画像で赤くハイライトされている「here」をクリックしてください。
Unifiedインストーラがダウンロードできたところで、早速実行していきましょう。
インストーラを起動すると、以下のような画面が表示されます。
Qtのインストールには、Qtアカウントにログインする必要があります。アカウントに登録済みの場合は、Eメールとパスワードを入力したうえで右下の「次へ」をクリックして次に進んでください。
もしQtアカウントに心当たりがない場合は、「Qtアカウントをお持ちでない場合 登録」からアカウントの登録を行いましょう。
ログイン後は、以下の画面が出るまで「次へ」を押して進んでください。
この画面では「カスタムインストール」を選択し、「次へ」をクリックします。
今回は、Qt 6.5.3を選択します。もしQt 6.5.3が表示されない場合は、右上の「Archive」をチェックした後「フィルター」をクリックしてください。
以下の画像の通り、Qt 6.5.3の下にある「MinGW 11.2.0 64-bit」「Qt Quick 3D」「Qt Insight Tracker(TP)」「Qt MQTT」にチェックを入れ、右下の「次へ」をクリックしてください。ここでは「Qt Insight Tracker(TP)」がQt Insight Tracker APIを使用するために必要なモジュールです。
※2023年11月現在、オープンソース版ではまだQt Insight Tracker APIがリリースされていない可能性があります。しかし、順次オープンソース版にもリリースされて参りますので、しばしお待ちください。
使用許諾規約を確認し、チェックをした後に「次へ」で次の画面に進みます。この後は、インストールが終了するまで「次へ」で次の画面に進んでください。
Windowsの場合、デフォルトではCドライブ直下の「Qt」というフォルダ内にQtがインストールされます。
Qtには、Qt CreatorというIDE（統合開発環境）が付属しています。
Qt Creatorを開いていきましょう。
Qt Creatorは、<Qtのインストールフォルダ>/Tools/QtCreator/bin/qtcreator.exeを実行することで開くことができます。
Qt Creatorには、様々なアプリケーションのサンプルがソースコードと一緒に用意されています。
Welcome画面の左側のメニューから「Examples」を選択し、ドロップダウンメニューでQtのバージョンを選択すると、そのバージョンのQtのサンプルアプリの一覧が表示されます。
Qt Insightのサンプルも用意されています。
検索ボックスで「Insight」と入力すると、「Qt Insight - Qt Quick Application」というサンプルが表示されるので、ダブルクリックしてプロジェクトを開きましょう。
ダブルクリックすると、サンプルを説明するウィンドウが開くと思いますが、それはいったん閉じても大丈夫です。
Qt Creatorの左側の「Projects」からビルドの設定を選ぶことができます。「Desktop Qt 6.5.3 MinGW 64-bit」をダブルクリックすると、プロジェクトのビルド設定が走ります。成功すると、左下の再生ボタンが緑色に変化します。
プロジェクトの中身を確認しましょう。
左側のメニューから「Edit」を選択すると、プロジェクトのファイル構成を確認することができます。
Qtのプロジェクトは、基本的にフロントエンドのGUIを.qmlファイル、バックエンドのビジネスロジックをC++またはPythonで記述する形をとります。そして、プロジェクトのコンフィグレーションは最新バージョンではCMakeで行われます。
Qt Insightは、C++とQMLのAPIを用意しています。それらを活用することで、データをクラウドに送信することができます。
それらのAPIを使用するためには、まずCMakeLists.txtに必要な記述をしなければなりません。
CMakeLists.txtをダブルクリックして、エディタで開いてみましょう。
Qt Insight TrackerのAPIは、InsightTrackerライブラリをアプリケーションにリンクすることで使用可能になります。下記のように、15行目のfind_package()と26行目のtarget_link_libraries()にInsightTrackerを追加する必要があります。
Qt Insightには、もう１つ重要な要素があります。それは、「qtinsight.conf」ファイルです。
CMakeLists.txtの86行目では、下記のようにqt6_add_resources()関数の引数として与えられています。
qtinsight.confファイルは、Qt Insightの設定を行うファイルです。
左側のプロジェクト構成の中にあるので、ダブルクリックで開いてみましょう。
qtinsight.confの設定項目をいくつかご紹介します。
これらの設定項目がどのように扱われているかは、Qtのソースコードにある関数QInsightConfiguration::load()を確認することで理解することができます。この関数はqinsightconfiguration.cppにあります。気になる方は、是非見てみてください。
では、QMLファイルでの実際のTracker APIの使用例を見てみましょう。
Qt Insight Tracker APIを使用するためには、QtInsightTrackerのインポートと、Qt Insight Tracker APIの有効化を行う必要があります。
main.qmlを開いてみましょう。これは、エントリーポイントとなる.qmlファイルです。
内容を確認すると、８行目でQtInsightTrackerモジュールをインポートしており、２１行目でInsightTracker.enabledプロパティをtrueに変更することでQt Insight Trackerを有効化しています。
このアプリでは、Component.onCompletedシグナルが発生した際にenabledがtrueになるようにしているので、アプリケーション起動時に自動的にQt Insight Trackerが有効化されるようになっています。
通常、この有効化は、アプリ起動時にダイアログを表示したりして、ユーザーに合意を得たりした後で行うなどが一般的ですが、実際の製品では、アプリケーションの用途と、法規に合った形で有効化することが重要になります。
ちなみに、このサンプルアプリでは、C++側でもQt InsightのAPIを使用しています。
main.cppを開くと、16行目から18行目でQtInsightTrackerクラスのインスタンスを作成し、そこからQt Insight Trackerの有効化(17行目)、Qt Insight Trackerのイベント送信インターバルの設定(18行目)を行っていることがわかります。
こちらは今回不要になりますので、コメントアウトしてしまいましょう。
Qt Insight TrackerのC++ APIに関してはこちらをご覧ください。
まず、CoffeeButton.qmlを開きます。
このファイルは、名前の通り、アプリ起動時に左に出てくるコーヒー選択ボタンに相当します。
今回注目すべきは、18行目から29行目までのエリアです。
QtでGUI(Graphics User Interface)を記述するのに使用するQML言語では、「QMLタイプ」というものを階層的に記述し、その属性値を設定していくことで簡単に動的なGUIを作成することができます。
18行目で使われているMouseAreaは、その名の通りマウスやタッチイベントに対応するためのQMLタイプです。この中でonClickedやonPressedといった記述をすると、その中に記述した処理がそれぞれMouseAreaのエリアをクリックや押下した際に実行されます。
このプログラムでは、20行目でonClickedハンドラが使用されており、その中でInsightTracker.sendClickEvent()が使用されています。これが、クリックイベントをクラウドに送信するAPIです。
sendClickEvent(string name, string category, int x, int y, string contextKey, double contextValue)
実際にどのように使用されているか、確認してみましょう。以下がコール箇所です。
実際にアプリを起動して、クラウドに値が送信されるかを確認してみましょう。qtinsight.confのtokenに、作成したオーガニゼーションで発行したトークンを設定すれば、実際に送信されたデータをQt Insight Web Consoleで確認することができます。
まずは、左下の緑色の再生ボタンを押して、アプリケーションをビルド/実行します。
このアプリでは、ApplicationOutputの欄にアプリケーションからのデバッグアウトプットが表示されるようになっており、そこにQt Insight Tracker APIのログも出力されるようになっています。
試しに、コーヒーマシンアプリの左側にあるコーヒーのボタンをクリックしてみてください。イベントの発生がApplication Outputに出力されるはずです。
この時点ではイベントはSQLITEのデータベースに保存され、qtinsight.confのsyncに指定された周期でクラウドに送信されます。送信時にも、Application Outputにログが出力されるようになっています。
(最新のQt Insightでは、sendScreenView()は、transition()という関数に置き換わっています。最新のQt Insight TrackerのAPIについては、ドキュメンテーションをご確認ください）
次に、画面遷移イベントを記録するAPIを確認してみましょう。
ApplicationFlow.qmlを開きます。すると15行目にInsightTracker.sendScreenViewをコールしている行があります。
sendScreenView(string name)
sendScreenViewは、画面遷移が発生した際にコールするのが一般的です。
引数として渡されているnameでは、スクリーンの名前を指定するのが一般的です。
このコードでは、applicationFlow.stateを指定しています。
applicationFlowは8行目にあるApplicationFlowFormというQMLタイプのidの値であり、stateはApplicationFlowFormのプロパティの１つです。このプロパティには、それぞれ28行目、32行目、37行目、43行目で画面が変化するイベントが変化するたびに画面の名前が設定されており、また15行目のonStateChangedシグナルハンドラーはstateプロパティが変化したときに毎回実行されるので、このタイミングでInsightTracker.sendScreenViewがコールされることになり、結果的に画面が遷移するたびにクラウドにイベントが送信されることになります。
Qt Insight Trackerには、startNewSession()というAPIがあります。
このAPIを使うとセッションのリセットが可能です。セッションはAverage session lengthや、
User flowsにおける一連のナビゲーションの区切りなどに使用されます。
CoffeeMachineアプリケーションでは、ApplicationFlow.qmlの87行目で使用されています。
ここでは、53行目のSequentialAnimationの最後のアクションとしてInsightTracker.startNewSession()が実行されています。
このfinalAnimationはCoffeeMachineアプリでユーザーがコーヒーを選択し、コーヒーが淹れられた後に実行されるようになっているので、このアプリケーションでは、「ユーザーが選択したコーヒーが入るまで」をひとつのセッションとして区切っているということがわかります。
では最後に、実際にこのアプリケーションを使ってみましょう。
まだqtinsight.confのtokenを変更していない方は、以下の手順に従って変更してください。
Qt Insight Web Consoleで、まずは最初に作ったオーガニゼーションを選択しましょう。
次に、「Organization management」を開きます。
「Organization management」の「Tokens」タブを開くと、Defaultのトークンが表示されます。
表示されない場合や、新しいトークンを作成したい場合は、右上の「Add new」ボタンで追加可能です。
ここに表示されているトークンの値をコピーします。
コピーした値をqtinsight.confのtoken欄にペーストします。これで、クラウドに送信したデータが自分のQt Insight Web Consoleのオーガニゼーションに表示されるようになります。
さらに、結果をすぐにQt Insight Web Consoleで確認したいので、今回はsyncのintervalを1にして、イベントが毎秒クラウドに送信されるようにしましょう。
では、アプリケーションを起動してみましょう。Qt Creatorの左下の緑の再生ボタンをクリックすることで、アプリケーションを起動することができます。実際に操作を行って、しばらくするとQt Insight Web Consoleにデータが反映されるはずです！
組み込みアプリでは特に、常にインターネットにつながっているわけではないものもあると思います。
そういったデバイスに対してQt Insightを使用する場合は、Qt Insight TrackerモジュールをMaintenanceToolでインストールした際に<Qtインストールフォルダ>/<Qtバージョン>/<プラットフォーム>/binフォルダにインストールされるinsightuploader.exeを使用します。
このコマンドラインツールにQt Insightトラッカーを含むアプリケーションがイベントデータを保存する.dbファイルをわたすことで、オフラインデバイスの.dbファイルに保存されたデータもクラウドに送信することができます。以下では、その方法を順を追ってご説明します！
.dbファイルがどこに保存されているかは、以下の手順で確認することができます。
まず、先程のCoffee Machineサンプルアプリのmain.cppを開いてみましょう。
すると、以下のように14行目にQLoggingCategory::setFilterRules("qt.singht*=true");というコマンドが確認できます。これは、5行目の#include <QtCore/QLoggingCategory>を追加することで使用できるようになる関数で、こうすることでQt Insight系のデバッグメッセージがQt CreatorのApplication Outputに出力されるようになります。
この状態で再度CoffeeMachineアプリを起動すると、以下のような出力がApplication Outputに表示されます。これによると、CoffeeMachineアプリのイベントは"C:/Users/81808/AppData/Roaming/coffee_insight/InsightTracker.db"に保存されていることがわかります。組み込みアプリの場合も同様の出力がされますので、イベントが入ったInsightTracker.dbファイルをデバイスから回収し、PCに移動する必要があります。
では、実際にこのInsightTracker.dbファイルにinsightuploader.exeを使用してイベントデータをクラウドにアップロードしてみましょう。
以下のように、--serverにqtinsight.confのserverで指定している値を指定しつつ、InsightTracker.dbのパスを引数として与えることで、クラウドにデータをアップロードすることができます。
実際にイベントはアップロードされましたでしょうか？少し時間はかかるかもしれませんが、アップロードされたイベントはEvelt logで確認可能です。
タイムスタンプを確認すると、イベントはinsightpuloader.exeを使ってイベントをアップロードした日時ではなく、実際にイベントが発生した日時を示していることがわかります。
ネットワークにつながっていないデバイスは、周期的にイベントをクラウドに送信する必要がありません。その代わり、InsightTracker.dbファイルにイベントをため込んでいきます。そのため、「イベントを送信しなくてもよい」旨をqtinsight.confファイルに指定してあげる必要があります。
そのためには、以下のようにintervalに何も指定しないという設定を行います。また、明示的に0を指定することでも同じ効果を得ることができます。
storage_sizeにはInsightTracker.dbに保存する最大レコード数を記述します。例えば、ここに1000と指定した場合は、最新の1000イベントのみがデータベースに保持されるため、InsightTrakcer.dbが無制限に膨張していってしまうことはなくなります。0とした場合はイベント数に制限を設けないため、発生したイベントはすべて保存されます。
では最後に、Qt Insight Trackerが挿入されたもう少し本格的なデモをご紹介して、この記事を締めくくりたいと思います。
今回ご紹介するのは、Qtで実装されたAutomotive HVACデモに、Qt Insight Tracker APIを挿入したものです。
まずはプロジェクトを入手しましょう。以下のリンクから、gitlabのページにアクセスすることができます。
https://git.qt.io/se_japan_public/qt-insight/qt-insight-outrun-hvac-demo
gitをインストールしている方は青い「Clone」ボタンから、また、そうでない方もその左にあるダウンロードボタンから圧縮されたプロジェクトフォルダを入手することができます。
プロジェクトがダウンロードできたら、その中にあるCMakeLists.txtをQt Creatorから開きましょう。
「Open Project」からCMakeLists.txtを選択します。
Kitは「Desktop Qt 6.5.2 MinGW 64-bit」を選択します。
qtinsightconf/MinGW/qtinsight.confを開き、3行目の「token」に自分のQt Insight Web Consoleのtokenを指定します。
ここまで出来たら、実際にアプリケーションを実行してみましょう！行った操作は30秒ごとにクラウドに送信され、Qt Insight Web Consoleでデータが確認可能になるはずです。
皆様、いかがでしたでしょうか？この記事はだいぶ長くなりましたが、Qt Insightをどのように使えばよいのか、理解を深めることができたでしょうか？
UI/UXは製品の競争力の源泉であり、重要な差別化要因です。ユーザーが真に望むものをつかみ、皆様が最高のGUIを作っていくうえで少しでもQt Insightがお役に立つことができれば、とてもうれしいです！
Qt Insight お問い合わせフォームはこちら