Sailfish OSの開発：マップとジオロケーションの操作

こんにちは この記事は、Sailfish OSモバイルプラットフォーム向けのアプリケーション開発に関する一連の記事の続きです。 今回は、アプリケーションを実装して、デバイスの地理的位置に関する情報を取得し、現在の位置と移動したルートの地図を表示する方法について説明します。

GPSトラッカーアプリケーション

位置情報APIの機能を実証するために、位置情報に関連するすべての基本機能を含むGPSトラッカーアプリケーションを使用します。

• 電話画面でエリアの地図を表示します。
• 地図上の移動距離を表示します。
• デバイスのメモリから記録およびダウンロードされたGPSトラックを表示します。
• マップ上の表示を有効/無効にする機能を使用して、関心のあるポイントのリストを維持します。
• 選択した関心のあるポイントにマップを移動します。

地理ツール

Sailfish OSプラットフォームは、標準のQtフレームワーククラスを使用して、アプリケーションに位置情報へのアクセスを提供します。 次に、Qtフレームワークは、データを操作するための2つのモジュール、 Qt PositioningとQt Locationを提供します。 最初のサブシステムでは、デバイスの現在の場所に関する情報を取得でき、2番目のサブシステムでは、この情報をジオコーディングして地図上に表示する手段を提供します。 この記事では、アプリケーションで座標を使用する基本的なシナリオを実装するには通常これで十分であるため、QML型（C ++クラスなし）の使用のみを検討します。

Qt Positioningで位置データを取得する

ポジショニングAPIの座標の説明

座標を記述するために、 Positionタイプが使用されます。これには、いくつかのグループに分割できる多数のフィールドが含まれています。 すべてのPositionフィールドが必須というわけではないことに注意してください。



フィールドの最初のグループには位置情報が含まれます。これには、対応する座標タイプのインスタンスを参照する座標プロパティと、対応するプロパティが受信されたかどうかを示すtitudeValid 、 lattitudeValidおよびlongitudeValidプロパティが含まれます。 また、各座標には、受信した時刻（ タイムスタンプ ）が保存されます。



2番目のグループには、座標に関連するプロパティが含まれます。これは、GPSセンサーから追加で取得するか、一連の測定座標を集計することで計算できます：地表面の移動速度（ speed ）、垂直移動の速度（ verticalSpeed ）、移動方向（ direction ）、また、対応するプロパティが取得されたかどうかを示す、接尾辞がValidの対応するプロパティも含まれます。



座標タイプ自体は非常に単純で、地理的位置（ 緯度 、 経度 、 高度 ）および指定された幅と経度が正しいかどうか（ isValid ）に関する情報が含まれています。 このタイプは、座標間の距離（ distanceTo ）、座標間の方位角 （ azimuth ）を計算し、距離と方位角（ atDistanceAndAzimuth ）で座標を計算するための追加のメソッドを提供します。

ロケーションデータソース

デバイスの現在の座標を取得するには、 PositionSourceタイプを使用する必要があります。 このオブジェクトは、 positionプロパティを通じて現在の位置へのアクセスを提供します。 情報を取得するためのソースはインストールされていませんが、このプロパティは空です。



まず、アプリケーションに必要な情報のソースを決定する必要があります。モバイルオペレーターの塔に基づいて取得された近似座標には十分であるか、全地球測位システムを使用した高い測位精度が必要です。 supportedPositioningMethodsプロパティを参照して、プラットフォームでサポートされているメソッドを確認できます。

• NoPositioningMethods-メソッドはサポートされていません。
• SatellitePositioningMethods-衛星データを取得できます。
• NonSatellitePosititiongMethods-モバイルネットワークからデータを取得できます。
  
  
• AllPosititiongMethods-すべてのタイプの位置決めがサポートされています。

Sailfish OSオペレーティングシステムを実行しているデバイスは、上記のすべての方法をサポートしています。 また、 preferredPosititioningMethodsプロパティを上記の値のいずれかに設定することにより、必要なものを選択できます。 最初にこれらのソースが使用され、次にデフォルトのソースが使用されます。 リストされたソースのいずれも利用できない場合、 有効なプロパティはfalseになります 。



Sailfish OSエミュレーターでは、上記のデータソースのいずれも使用できないことに注意してください。 この問題を解決するには、後で説明する別のメカニズムに頼らなければなりません。



位置情報を更新する頻度は、 updateIntervalプロパティを使用して決定されます。 この値を短すぎて設定しないでください-頻繁に更新しすぎると、電力が過剰に消費されます。 データの受信を制御するには、次の方法を使用できます。

• 開始する
• 停止する停止;
• NonSatellitePosititiongMethods-モバイルネットワークからデータを取得できます。
  
  
• 更新して場所の更新を強制します。

宣言的な方法で開始および停止することもできます-activeプロパティを設定することで：正の値を割り当てることは、 startメソッドを呼び出すことと同等です。



データソースがアクティブになると、 positionプロパティの更新が開始されます。 QMLのバインディングメカニズムを使用して、他のプロパティにバインドできます。 さらに、 onPositionChanged信号を使用して、データソースから受信した新しい座標値を処理できます。

Sailfish OSでのQtポジショニングの使用

アプリケーションで地理情報を使用するには、 qt5-qtdeclarative-import-positioningパッケージを依存関係のリストに追加します（ネイティブクラスのみを使用する場合は、 qt5-qtpositioningパッケージで十分です）。 プロジェクトのYAMLファイルのRequiresリストで指定する必要があります。 追加後、コンテンツは次のようになります。

Requires: - sailfishsilica-qt5 >= 0.10.9 - qt5-qtdeclarative-import-positioning
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、QMLファイルで、Qt Positioningモジュールを接続し、 PositionSource要素を作成する必要があります。 短い例を考えてみましょう。

 import QtPositioning 5.3 PositionSource { id: src updateInterval: 1000 active: true onPositionChanged: { var coordinate = src.position.coordinate; console.log("Coordinate:", coordinate.longitude, coordinate.latitude); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、ほとんどのPositionSourceプロパティを構成せず、デフォルト値を使用します。 アクティブなプロパティのみが設定され、 trueに設定されます 。 この要素を持つページが読み込まれるとすぐに、場所の検索が開始されます。



onPositionChangedイベントハンドラーを定義します。このハンドラーでは、まず現在の座標にアクセスしてから、結果のリンクを使用して現在の座標の幅と経度を表示します。 さらに、単にconsole.log（coordinate）を使用することもできます。この場合、行は度と分の形式で表示されます。

PositionSourceを使用した作業のデバッグロジック

前述したように、エミュレータでアプリケーションを実行するときに位置データを取得することはできません。 また、アプリケーションの開発中に、対応するページを開くたびに最初の場所の決定に費やされる時間を節約することができます。



これらの問題を解決するには、 PositionSource型のnmeaSourceプロパティを使用すると便利です。 このプロパティは、GPSトラックがNMEA形式で記録されているファイルのURLを受け入れます。 この形式は、GPXと比較して一般的ではありませんが、オンラインコンバーターのいずれかを使用して、既存のGPXトラックからそのようなファイルを取得できます。 または、たとえば、 NMEA Generatorサービスを使用してNMEAトラックを作成します。



ファイルを受け取ったら、アプリケーションパッケージに追加する必要があります。 これを行うには、プロジェクトのプロファイルで、次の構成を使用してインストール済みリソースとして指定するだけで十分です（詳細については、 こちらを参照してください）。



OTHER_FILES += nmea/*

nmea.files = nmea/*.nmea

nmea.path = /usr/share/$$TARGET/nmea

INSTALLS += nmea







したがって、アプリケーションのインストール後、このファイルはデバイスでも使用可能になります。 このプロパティの使用は次のようになります。

 PositionSource { id: positionSource active: true nmeaSource: "/usr/share/%1/nmea/path.nmea".arg(Qt.application.name) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、 PositionSourceは指定されたファイルからデータを提供します。 したがって、 nmeaSourceプロパティを使用して、デバイスに既に保存されているNMEAトラックを表示することもできます。 この値を設定すると、 PositionSourceオブジェクトが実際のデータソースから切断されることに注意してください。 実際のソースを使用する場合は、そのようなオブジェクトを再作成する必要があります。



これで、ユーザーの座標を追跡する任意の形式を実装でき、地図上にこの情報の表示を実装できます。

Qt Locationを使用してマップとそれらの情報を表示する

Qt Locationモジュールは、ユーザーが地図、この地図に関する情報を表示し、ルートをプロットし、現在の地理座標に関連するPOI（point of interest）を検索できるようにする幅広いクラスを提供します。 このモジュールのほとんどの機能の優れた紹介は、 公式ドキュメントにあります 。 マップを操作するすべての機能を強調することはできないため、アプリケーションでマップ表示を整理する方法、マップにマーカーを表示する方法、移動距離を表示する方法に焦点を当てます。

Qt Locationの主要なタイプの簡単な概要

このシナリオでは、重要な要素はマップMapです。 この要素を使用すると、衛星または地理的地図から地球の表面の画像を表示できます。 画像データやその他の有用な情報のソースは、プラットフォーム開発者と独立した開発者の両方が提供できるプラグインです。



Sailfish OSプラットフォームでは、 OpenStreetMapとHERE WeGoの 2つのプラグインを使用できます。 カードのプラグインプロパティをそれぞれosmまたはhereに設定することで、それらのいずれかを選択できます（ ここで使用するには、APIキーを取得する必要があります）。 マップの選択は、アプリケーションを使用する特定の地域のカバレッジの品質に依存します。 以下に示すように、アプリケーションの依存関係で必要なプラグインも指定する必要があります。



地図の表示領域を制御するには、画像の中心の座標を示すcenterプロパティと、ズームレベルを示すzoomLevelプロパティを使用する必要があります。 centerプロパティでは、座標のタイプに従って座標を記述する必要があります。これについては、前述のPositioning APIの操作に関するセクションで説明しました。

Sailfish OSでの地図表示

アプリケーションでQt Locationモジュールを使用するには、少なくとも1つの地理データプロバイダーをインストールする必要があります。

 Requires: - qt5-qtdeclarative-import-location - qt5-plugin-geoservices-osm - qt5-plugin-geoservices-here
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

1つの地理情報プロバイダーのみを使用する場合は、最後の2つのパッケージのいずれかを残すことができます。



これで、必要なすべてのコンポーネントをアプリケーションページに配置できます。 最小限の地図表示例を考えてみましょう。

 import QtPositioning 5.3 import QtLocation 5.0 import Sailfish.Silica 1.0 import QtQuick 2.0 Page { PositionSource { id: positionSource active: true } Plugin { id: osmPlugin allowExperimental: true preferred: ["osm"] } Map { id: map anchors.fill: paren plugin: osmPlugin center: positionSource.position.coordinate } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、必要なすべてのタイプがページで利用できるように、Qt PositioningモジュールとQt Locationモジュールを接続します。



このページは、Sailfish Silicaライブラリが提供するPageオブジェクトに基づいています。 このページでは、地理データのプラグインと同様に、すぐにアクティブ化する位置データソースを作成します。 このデータのソースとしてOpenStreetMapを使用します。



ページの主な表示要素は、ページで使用可能なすべてのスペースを埋めるマップです。 次のように構成します。プラグインを構成し、マップのcenterプロパティをデータソースが提供する座標にバインドします。

マップへのアイテムの追加

マップ上に要素を作成するには、静的と動的の2つのアプローチがあります。 Staticは、数が時間とともに変化しないオブジェクトに適しています。 私たちのアプリケーションでは、このようなオブジェクトは現在の場所へのポインターであり、ルートが移動しました。 アプリケーションの動的要素は、ユーザーが自分で追加する関心ポイントのポインターです。



現在の場所を表示するために、 MapQuickItemタイプを使用しました 。 これにより、マーカーを表示する画像オブジェクトなど、マップ表面に任意のオブジェクトを配置できます。 その使用を詳細に検討してみましょう。

 Map { MapQuickItem { coordinate: positionSource.position.coordinate anchorPoint.x: image.width / 2 anchorPoint.y: image.height sourceItem: Image { id: image width: 35 height: 50 source: "file:buttons/main_marker.png” } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このオブジェクトをMapの子として宣言したため、それらをリンクします。 オブジェクトを配置するために、モバイルデバイスの現在の地理的位置に関連付けられている座標プロパティを指定しました。 anchorPointプロパティも使用されたため、マーカー画像を移動して、先端が現在の位置を指すようになりました。



移動したルートを表示するために、 MapPolyLineタイプを使用しました 。これにより、任意のルートを破線の形で表示できます。 そのアプリケーションをさらに詳しく考えてみましょう。

 Map { MapPolyline { id: mapline line.width: 3 line.color: 'blue } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このタイプのオブジェクトは、 Mapの子として宣言する必要があります。 現在のトラックの色と表示幅も設定します。



行に新しいポイントを追加するには、次のコードが答えます。

 PositionSource { id: positionSource active: true onPositionChanged: { mapline.addCoordinate(position.coordinate) } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

場所の変更が発生すると、ラインに別のポイントを追加します。そのため、渡されたルートの次のセクションがアプリケーションユーザーに表示されます。



一連の関心ポイントを表示するために、 MapItemViewタイプを使用しました 。 このタイプは、マップに対するMVCアプローチの実装です。表示するモデルと、このモデルの各要素のビューを定義する必要があります。 QMLの要素のリストを埋める方法に精通している場合、このコンポーネントでの作業は難しくありません。



アプリケーションでのこのモデルのアプリケーションの主な側面を考慮してください。

 Map { MapItemView { id: mapView model: MapViewModel { } delegate: mapPlace } Component { id: mapPlace MapQuickItem { coordinate: QtPositioning.coordinate(latitude, longitude) anchorPoint.x: imagePlace.width / 2 anchorPoint.y: imagePlace.height sourceItem: Image { id: imagePlace width: 35 height: 50 source: "file:buttons/additional_marker.png" } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

MapItemViewオブジェクトを Mapの子として定義しました。これにより、その要素もマップに表示されます。 モデルとして、独自のMapViewModelモデルを使用しました。これは実際には、要素を追加および更新するためのメソッドが追加される標準ListModelの拡張です。 モデルの要素は、指定された緯度と経度のプロパティを持つオブジェクトです。 新しい関心のあるポイントをマップに追加するには、モデルのaddView（）メソッドを呼び出して、ポイントの識別子、その緯度と経度を渡す必要があります。 メソッドの実装は次のとおりです。

 function addView(id, latitude, longitude) { append({ id: id, latitude: latitude, longitude: longitude }) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

mapViewオブジェクトのデリゲートでは、使い慣れたMapQuickItemを含むmapPlaceコンポーネントを指定しました 。 この要素と前の要素との違いは、 QtPositioning型の適切なメソッドを使用して明示的に座標型を作成する必要があることと、関心のあるポイントのマーカーを表示する別の画像を指定することです。

おわりに

この記事では、Sailfish OS用に開発する際にジオロケーションツールを使用する機能について検討しました。 この記事の一部として開発されたアプリケーションは、 OpenRepos.netリソースを使用して携帯電話にインストールできます。 また、アプリケーションのソースコードを確認することもできます。これは、 bitbucketリポジトリで入手できます。