例としてD3.jsを使用したQtのハイブリッドアプリケーション

D3は、データを視覚化するための強力なJavaScriptライブラリです。 私の意見では、これはWeb開発者にとっては楽園に過ぎず、Qtプログラマにはアクセスできないように見えます。 しかし、Qtフレームワークの柔軟性により、 Qt Web Bridgeメカニズムを使用してWebフロントエンドをシッククライアントに統合できます。 このようなアプリケーションは、ハイブリッド（ Qt Hybrid Apps ）と呼ばれます。



JavaScriptプログラマーにとって朗報は、ソリューションをデスクトップアプリケーションに簡単に統合できることです。これにより、開発されたライブラリのユーザーのターゲットオーディエンスが増加する可能性があります（いずれにせよ、これはQtアプリケーションの世界に当てはまります）。



以下のスクリーンショットは、D3.jsを使用してレンダリングされ、データと表示がQtを使用して制御される、 Dependency Wheelウィジェット（Circle of Dependencies）を示しています。 ポインターが対応する円弧の上にある場合、その関係は「強調表示」され、残りは半桁になります。 このウィジェットを使用して、さまざまな種類の依存関係（ライブラリーなど）を視覚化できます。



元のJSソリューションとは異なり、チャートはウィジェットに合わせて動的にサイズ変更され、データはJSONファイルをロードするのではなくQt側で設定されます。



この記事は、Qtプログラマーに焦点を当てていますが、JSプログラマーにとっても興味深いかもしれません。

ハイブリッドアプリケーションのアイデア

ハイブリッドアプリケーションのアイデアの出発点は、ネイティブアプリケーションに固有の多くの制限です。

• システムのクライアント部分の実装とメンテナンスのための追加費用。
• 一意のユーザーインターフェイスを記述することは、簡単な作業ではない場合があります。
• 既存のWebアプリケーションのAPIを再利用できない。

ハイブリッドアプリケーションは、これらの問題を次の方法で解決します。

• 展開は、Webアプリケーションと同様に実行されます。
• 複雑なインターフェースは、Webテクノロジー（HTML、CSS、SVG、Canvas）を使用して作成されます。
• 既存のWebアプリケーションのAPIを再利用しました。

ハイブリッドアプリケーションアーキテクチャは、

• Qt-applicationはブラウザとして機能します。
• ユーザーインタラクションとアプリケーションロジックはJavaScriptでプログラムされます。
• 追加機能は、アプリケーションのQt部分のC ++で実装されます。

したがって、ハイブリッドアプリケーションはシンクライアントの概念を実装します。

Qtのハイブリッドアプリケーションの一例は、 WebKit Image Analyzerです。



この記事で検討する例では、ハイブリッドアプリケーションアプローチの一部、つまりJavaScriptを使用してコンポーネントを表示する方法のみを使用します。 この場合、従来のStandAloneアプリケーションのように、必要なすべてのJSファイルはリソースに配置されます（スタンドアロンであり、イントラネット/インターネットネットワーク接続が必要ないため）。

プロジェクト構造

プロジェクトファイルの一般的な構造を図に示します。











基本ディレクトリには以下が含まれます。

• d3viewer.hおよびd3viewer.cpp- QWidgetから継承され、 QWebViewとの相互作用をカプセル化するベースビュークラスD3Viewerの定義と実装。
• d3webpage.hおよびd3webpage.cpp-D3WebPageの定義と実装-QWebPageの子孫（ QWebPage :: javaScriptConsoleMessageのエラーメッセージとデバッグ情報の出力をサポートするため）。

charts / pieディレクトリで：

• dependencywheelwidget.hおよびdependencywheelwidget.cpp- QWidgetから継承され、 QWebViewとの相互作用をカプセル化するベースビュークラスの定義と実装。

リソースディレクトリは、jsとhtmlの2つに分かれています。 htmlには、ウィジェットにロードされるページと、Qtとのすべての対話コードが含まれるページが含まれます。jsには、DependencyWheelが機能するために必要なjsファイルが含まれます。 js。

クラス図

VisualParadigmツールを使用して記事のボリュームを減らすために、簡単な図が作成されました。説明された技術に直接関係しないクラスの属性とメソッドは省略されました。 実装の詳細については、ソースをご覧ください。リンクは記事の最後にあります。

Qt <-> JSインタラクション

ハイブリッドアプリケーションでは、特別なオブジェクトがJavaScriptで実装され、そのメソッド呼び出しはQt側で処理されます。

void D3Viewer::addContextObject(const QString &name, QObject *object) { frame()->addToJavaScriptWindowObject( name, object ); //frame() - QWebFrame }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このメソッドは、ページがロードされる前に、コンストラクターのD3Viewer派生クラスで呼び出されます。

 addContextObject("api", this);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、QtとJSの相互作用は4つのメカニズムによって可能です。

1. オブジェクトのプロパティにアクセスする。
   
   これを行うには、オブジェクトのプロパティを定義する必要があります。これは、JSのコンテキストオブジェクト（「api」）です。
   
   
   
   

    public: Q_PROPERTY(float padding READ padding WRITE setPadding) public slots: float padding(); //getter void setPadding(const float padding); //setter
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   その後、JSからこれらのプロパティにアクセスできます。
   
   
   
   

     var chart = d3.chart.dependencyWheel() .width(api.width) .height(api.height) .margin(api.margin) .padding(api.padding);
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
2. JSでQtシグナルを処理するには、JSでこのために、対応する関数ハンドラーをシグナルに接続する必要があります。
   
   
   
   

    api.update.connect(redraw);
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
3. たとえば、要素のクリックを処理するときに、JSでQtスロットを呼び出すことにより：
   
   
   
   

     g.append("svg:path") .style("fill", fill) .style("stroke", fill) .attr("d", arc) .on("mouseover", fade(0.1)) .on("mouseout", fade(1)) .on('click', function (d) { api.itemClicked(packageNames[d.index]) } ); //  
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
4. JSで他のQtメソッドを呼び出すには、このために、メソッド宣言の前にQ_INVOKABLEマクロを置く必要があります。
   
   
   
   

    Q_INVOKABLE void thisMethodIsInvokableInJavaScript();
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
5. JSコードの直接実行。
   
   
   
   

    void D3Viewer::evaluateScript(const QString &script) { frame()->evaluateJavaScript(script); }
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

この例では、方法4と5は使用されていません。

ハイブリッドアプリケーションでのJavaScriptデバッグ

JSアプリケーションをデバッグするには（DOMの表示、ネットワークアクティビティの表示、リソースの読み込みなど）、D3Viewerコンストラクターで次のプロパティを設定する必要があります。

 #ifdef QT_DEBUG //           page()->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true); #endif
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、実行時に、コンテキストメニューの項目「検査」がコンテキストメニューで使用可能になります（QWebViewを右クリック）。











Web-inspector-aが表示されるウィンドウを選択することにより。











このウィンドウの[スクリプト]タブで、デバッグを有効にできます。











ブレークポイントのインストールは、左側の対応する行番号をクリックすることにより行われます。

PS Qt 4.8.6では、ブレークポイントをインターセプトすることができませんでした。 5.3.0では、すべてが正常に機能します。

短所

いずれのソリューションにも長所と短所があります。 この場合、D3.jsは「可愛さ」の代価を支払う必要があります。

• 追加のオーバーヘッド（主にメモリ）。
  
  QWebViewがWebkitを「プル」し、新しい「ハイブリッド」ウィジェットを作成するという事実に加えて、かなり重いQWebViewオブジェクトを再作成します。 UI全体が1つのQWebViewにロードされている場合（ハイブリッドアプリケーションの元のアイデアで提案されているように）、これはそれほど真実ではありません。
  
  
• JSを変更した後、Webでの再利用を元に戻せなくなるリスク。 Qtのニーズに合わせて、JavaScriptコードを変更して、Webアプリケーションで使用できなくなるようにすることができます。 したがって、api Qtオブジェクトへのすべての呼び出しを1か所で分離することが望ましい-たとえば、htmlファイルのスクリプトセクションでは、この場合、WebアプリケーションとQtアプリケーションでは異なり、接続されたファイルのJSコードは同じになります。
• Qt 4.8.6のWebKitバグ
  
  D3では、ツリー構造が積極的に使用されており、その説明はJSONファイルにあります。 Qt側では、同じJSONオブジェクトがQVariantMap / QVariantListの組み合わせによって形成され、QVariantになります。 そのようなオブジェクトの構造は同一であるという事実にもかかわらず、Qt 4.8.6ではまだ違いがあります。そのようなオブジェクトは直接認識されず、JS側のメモリにJSONオブジェクトを繰り返し「再作成」する必要があるからです。 Qt 5.3.0では、このような松葉杖は使用できません-すべてが直接機能します。
  
  
  
  

   function recreateJsonObject(obj) { var jsonObj = {}; for(key in obj) { jsonObj[key] = obj[key]; var dependencies = []; for (var i = 0 ; i < obj[key].length ; i++ ) { dependencies.push(obj[key][i]); } jsonObj[key] = dependencies; } return jsonObj; }
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
  
  Qt 4.8.6でさえ、ウィジェットの15〜20秒のサイズ変更後、アプリケーションは正常に動作を停止し、JSのエラーメッセージのヒープが落ちます。 Qt 5.3.0では、すべてが適切に機能します。これは、WebKit自体の実装に問題があることを示唆しています（私は間違っている可能性があります）。 ただし、JS側でのメモリの割り当てと解放の問題は引き続き重要です。
  
  

ソースコード

サンプルのソースコードは、 ここから入手できます 。

例が構築され、Qt 4.8.6および5.3.0で実行されました。