PureQML Webアプリケーションの例

エントリー

私たちは最近、世界に門戸を開いて（いわば出てきた）、私たちの控えめなフレームワーク に関する記事を公​​開しました （ GitHubのソース）。 関心のある参加者と話をした後（ありがとうございました！）、このトピックを拡大するには、実際の例に関するチュートリアルを書く必要があるという結論に達しました。 プロジェクトのWebサイトにはレッスンのセクションがありますが、これらのレッスンは全体像よりも特定の状況を説明する可能性が高くなります。 それが小さなガイドを書くことにした理由です。 リアリズムのために、WebからSmartTVへのソリューションの移植性をよく示す、シンプルだが実際のプロジェクトを作成する手順を説明します。 はい、このガイドの結果は、WebOSベースのテレビ向けにLG Smart Worldで既に利用可能です（このアプリケーションは「Earth Online」という名前で見つけることができます）。 この記事では、デスクトップブラウザーとモバイルブラウザー用のまったく同じアプリケーションの作成について説明します。

アイデア

構想は非常に単純です。ISSから地球の景色を示すことです（この機会のために、NASA、つまり高解像度地球観測システムプロジェクトに感謝​​する必要があります）。 ビデオに加えて、アプリケーションは地球の上のISSの現在の位置を示します。 これらの目的のために、ISSの場所を使用しますか？ 。 さあ始めましょう！

開始する

プロジェクト用のフォルダーを作成します。

$ mkdir earth-online $ cd earth-online
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

新しいプロジェクトを作成するには、 qmlcoreをプロジェクトフォルダーにコピーする必要があります。 コンテンツをダウンロードしてコピーするか、GITを使用してクローンを作成できます。

 $ git clone git@github.com:pureqml/qmlcore.git
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

手で書く量を減らすために、アプリケーションフレームワークを生成します。

 $ qmlcore/build --boilerplate
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コマンドを実行すると、プロジェクトフォルダーに2つの新しいファイルが表示されます。

• src / app.qml -PureQMLアプリケーションコード
• .manifest-アプリケーションを説明する最小限のマニフェスト

srcフォルダーは、プロジェクトのqmlソースを保存するために使用されます。



app.qmlでは、次のコードのみを残します。

 Item { anchors.fill: context; //  Item     }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アプリケーションをビルドするには、次のコマンドを実行する必要があります。

 $ qmlcore/build
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、すべてがうまくいった場合、新しいbuild.webフォルダーがプロジェクトフォルダーに表示され、結果のファイルが表示されます。

 $ ls build.web/ flashlsChromeless.swf index.html modernizr-custom.js qml.app.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

少し脱線して、どんな種類のファイルか見てみましょう。

• index.html-結果のHTMLページ
• qml.app.js -index.htmlにロードされるjsファイルを受け取りました
• modernizr-custom.js-使用されるカスタムmodernizrファイル
• flashlsChromeless.swf-フラッシュ（bue）を使用してビデオを再生するために使用されるファイル。この場合は必要ありませんが、Webプラットフォームプロジェクトに自動的に追加されます。

コントロール

プロジェクトの必要かつ最も安定した部分であるqmlcoreに加えて、すぐに使用できる便利なコンポーネントが多数ある個別のコントロールモジュールもあります。 このモジュールを接続するには、 srcのプロジェクトフォルダーにコピーするか、クローンを作成するだけで十分です。

 $ cd src $ git clone git@github.com:pureqml/controls.git
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このアプリケーションでは、コントロールから1つのコンポーネントが必要です。これにより、YouTubeからライブストリームビデオを再生できます。これはYouTubeと呼ばれます。 app.qmlに追加します 。

 Item { anchors.fill: context; //  Item     YouTube { anchors.fill: parent; source: "https://www.youtube.com/embed/ddFvjfvPnqk?autoplay=1&controls=0&showinfo=0"; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、ブラウザでIndex.htmlを開くと、ISSからビデオを見ることができます。

地図

私たちはビデオを理解しました。 それでは、ステーションの場所に移りましょう。 タスクでは、地球の上のステーションの位置を表示するだけで十分なので、現在の座標に従って、惑星の表面を展開した写真を使用し、それに沿ってポイントを移動するだけです（ただし、コントロールにはマップを操作するためのYandexMapコンポーネントがあります）







地球の地図を含む写真を用意しました。 画像または他のリソースがアセンブリに入るためには、プロジェクトルート-distに特別なフォルダーを作成する必要があります。

 $ mkdir dist
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

build.webでのアセンブリ後に、このフォルダーのすべてのコンテンツがコピーされます。 地図付きの写真をdistに追加します。

 $ mkdir dist/res $ cp <path-to-map-image> dist/res
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでプロジェクトをビルドしようとすると、追加された画像を含むresフォルダーがbuild.webにどのように表示されるかがわかります。

 $ ls build.web/res/ map.png
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マップを操作するロジックは別のコンポーネントにあり、 srcでIssMap.qmlの新しいファイルを作成して、次のコードを記述します。

 Item { anchors.fill: context; //      //    Image { anchors.fill: parent; //     source: "res/map.png"; //    fillMode: Image.Stretch; //  , Stretch    Image //      Rectangle { id: station; // id,       width: 30; height: width; //    radius: width / 2; // ,      visible: false; //      color: "red"; } } //       long   lat setPos(long, lat): { //    station.visible = true //        // ,     station.x = (long + 180) * this.width / 360 - (this.width / 28.4) station.y = (90 - lat) * this.height / 180 + (this.height / 19.45) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ステーションの座標を取得し、ポイントを目的の位置に設定する必要があります。 これを行うには、上記のAPIを使用します 。



コントロールでHTTPリクエストを実行するには、特別なRequestオブジェクトがあります。srcフォルダー内のIssRequest.qmlファイル内の座標の非同期リクエストに基づいてコントロールを作成します。

 Request { //    // callback - ,        call(callback): { this.ajax({ url: "https://api.wheretheiss.at/v1/satellites/25544", done: callback, withCredentials: true }) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、すべてを1か所に配置し、ステーションの座標でテキストを追加する必要があります。 このコントロールをOSDと呼び、次のコードを使用してOsd.qmlファイルを作成します。

 // WebItem -   Item //     hover  click    WebItem { property bool active: false; //  bool  -   OSD anchors.fill: parent; opacity: active ? 1.0 : 0.0; //      active //   IssRequest { id: request; } //     IssMap.qml IssMap { id: map; } //     (    ) //      Text { id: visibilityText; anchors.right: parent.right; anchors.bottom: parent.bottom; anchors.margins: 10; font.pixelSize: 24; color: "#fff"; text: "Earth visibility: -"; } //   :    //       Text { id: positionText; anchors.left: parent.left; anchors.bottom: parent.bottom; anchors.margins: 10; font.pixelSize: 24; color: "#fff"; text: "Lon: -<br>Lat: -"; //     html  } //     Timer { running: parent.active; //     OSD triggeredOnStart: true; //     interval: 10000; //   10  repeat: true; //   //  ,   updatePositionRequest onTriggered: { this.parent.updatePositionRequest() } } //   ,      //    doUpdatePosition updatePositionRequest: { var self = this request.call(function(res) { var data = JSON.parse(res.target.response) if (data) self.doUpdatePosition(data) else log("Request error") }) } //    doUpdatePosition(data): { var long = parseFloat(data.longitude) //  var lat = parseFloat(data.latitude) //  //      positionText.text = "Lon: " + Number((long).toFixed(1)) + "<br>Lat: " + Number((lat).toFixed(1)) //    data.visibility   'eclipsed'  'daylight' visibilityText.text = "Earth visibility: " + data.visibility map.setPos(long, lat) //     } //      //   300  Behavior on opacity { Animation { duration: 300; } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、OSDをアプリケーションのビデオの上に配置し、画面上でマウスクリックして（クリックして）閉じて表示する必要があります。 これで、 app.qmlは次の形式になります。

 Item { anchors.fill: context; Youtube { anchors.fill: parent; source: "https://www.youtube.com/embed/ddFvjfvPnqk?autoplay=1&controls=0&showinfo=0"; } Osd { //    //    OSD   onClicked: { this.active = !this.active } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトを組み立て、ブラウザでbuild.web / index.htmlを開き、画面をクリックすると、OSDが透明なアニメーションで表示されます！

最後の仕上げ

少し改善してみましょう：座標のあるテキストが揃っていれば素晴らしいでしょう：









この問題を解決するには、ある種の等幅フォントを使用できます。



新しいフォントを追加するには、出力index.htmlファイルを編集する必要があります。 ビルド後にファイルをbuild.webに追加するためにdistフォルダーをどのように使用したか覚えていますか？ 重要な点は、正確にはアセンブリ後にコピーが発生するという事実です。したがって、 index.htmlをオーバーライドできます。 現在のindex.htmlを基礎としてください：

 $ cp build.web/index.html dist
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

新しいフォントへのリンクを追加します。 少し編集した後、 dist / index.htmlは次のようになります。

 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet" type='text/css'> <script src="modernizr-custom.js"></script> </head> <body style="font-family: 'Space Mono'"> <script src="qml.app.js"></script> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

座標を含むテキストは次のようになります。

おわりに

もちろん、このアプリケーションはフレームワークのすべての機能を明らかにするわけではありませんが、コードをSmartTVプラットフォームに移植できるQMLで単一ページアプリケーションを迅速かつ簡単に記述する方法を視覚的に表現します。

参照資料

• 高解像度地球観測システム -ISSからの放送
• ISSはどこですか？ -ステーション座標を取得するためのAPIを提供するサービス
• earth-online-既製のアプリケーション
• githubのearth-online-このガイドのソースコード
• PureQML -PureQMLプロジェクトページ