ウィジェットでリアルタイム位置情報を追跡する方法

ウィジェットでリアルタイム位置情報を追跡する方法

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

要件

デバイスの現在位置を共有し、追跡用にどこからでもアクセスできる地図上に表示します。

ユースケース

救急車が出動している際、最寄りの病院に時間どおり到着する必要があります。渋滞を回避するため、救急車の運転手は車両の位置情報を警察と共有します。警察官は、地図上で車両の現在位置を追跡し、渋滞を避けて最寄りの病院にできるだけ早く到着できるように誘導します。
動作を確認する

手順

1. アプリケーションを作成し、タイトルをTrackingとします。

2. 次の詳細を参照してフォームを作成します。

フォーム名

フォームリンク名

項目 タイプ

項目名

項目リンク名

Tracking

tracking

住所

住所

住所

小数

経度（小数点以下 7 桁）

経度

小数

緯度（小数点以下 7 桁）

緯度

救急車の運転手が位置情報を共有すると、その座標が 10 秒ごとにこの Tracking フォームに自動入力されます。
このアプリケーションには、次の目的で 2 つのウィジェットがあります。
  1. 救急車の運転手が自分の位置情報を共有するため。
  1. 警察が Google マップ上で救急車の現在位置を追跡・表示するため。

3. ウィジェットは、このドキュメントの末尾にあるサンプル ZIP 添付ファイルを使用して直接 Creator にアップロードするか、ターミナルで作成してから Creator にアップロードすることができます。

サンプル ZIP 添付ファイルを利用する
i) このドキュメントの末尾に添付されているサンプル ZIP ファイルをダウンロードします。これには、Tracking アプリに関連するすべての一次ファイルと二次ファイルが含まれています。
Notes
メモ : サンプル ZIP 添付ファイルを使用してウィジェットを作成する場合は、ダウンロード後に手順 4 までスキップできます。
(または)
ターミナルを使用してウィジェットを作成する
i) ターミナルでウィジェットを作成するには、CLI をインストールします。インストールが完了したら、ウィジェットのプロジェクトを作成したいファイルディレクトリにターミナルで移動します。
  1. cd ドキュメント

ii) ターミナルで次のコマンドを実行して、新規プロジェクトを作成します。
Notes
メモ : ここで説明するすべてのコマンドはターミナルでの操作を前提としています。同じスクリプトは、Windows のコマンドプロンプトでも使用できます。
  1. zet init

iii) Zoho サービスの一覧が表示されます。必須サービスとして Zoho Creator を選択します。


iv) プロジェクト名として Tracking と入力します。プロジェクトフォルダは、移動したファイルディレクトリ内に作成されます。ここでは、ファイルディレクトリフォルダは ドキュメント です。

v) 次のように widget。html ファイルに移動します。このファイル名を enableTracking。html に変更します。このウィジェット用のスクリプトをカスタマイズして、widget ファイルに挿入します。このウィジェットは、救急車の運転手が現在位置の追跡を有効にするために使用する 位置情報を共有 ボタンを作成します。
Notes
メモ : 代わりに、このドキュメントの末尾で提供している enableTracking。html ファイル内のサンプルスクリプトをコピー＆ペーストして、このウィジェットをすぐに作成することもできます。


vi) ターミナルで次のコマンドを入力し、ローカルストレージにもう 1 つウィジェットファイルを作成します。これは、警察が救急車の位置情報を表示できるように Google マップを表示します。
Notes
メモ : 以下のコマンドは、それぞれ下記の処理を実行します。

Command

操作

cd

ディレクトリに移動します

cd *ファイル名*

指定したファイル（ディレクトリ）に移動します

mkdir *フォルダー名*

フォルダーを作成します

touch *ファイル名*

ファイルを作成します


  1. cd tracking/app
  2. mkdir GMaps
  3. cd Gmaps
  4. touch watchPosition。html

vii) ローカルストレージに移動します。app フォルダー内で、独自のスクリプトを記述してセカンダリファイル（css と js）を作成・カスタマイズします。
Notes
メモ : または、セカンダリフォルダーをコピー＆ペーストして app フォルダー内に配置することもできます。

viii) watchPosition。html (GMaps) と対応する js ファイルのコードをカスタマイズします。
 
Notes
メモ : または、watchPosition。html (GMaps) と対応する js ファイルのコードをコピー＆ペーストしてもかまいません。

ix) 次のコマンドを実行して、プロジェクトを認証してパックします。

  1. cd
  2. cd Tracking
  3. zet 認証
  4. zet pack
ウィジェットプロジェクトのプライマリファイルとセカンダリファイルを含む 郵便番号 ファイルが、プロジェクトディレクトリの dist フォルダー内に作成されます。

 

4. Creator アプリケーションの 設定 に移動します。 Widgets をクリックします。


5. 作成 をクリックします。新規 Widget ペインがポップアップ表示されます。

6. 以下の表に記載された詳細に従って各項目を入力し、ウィジェットを 2 つ作成します。
Notes
メモ :
  1. Index file は、ウィジェットのスクリプトが組み込まれるプライマリファイルです。ウィジェットのすべての要素を相互に関連付けます。各 index ファイルは、それぞれのウィジェット専用です。
  2. ウィジェット 郵便番号 ファイルは、追加するすべてのウィジェットのプライマリファイルとセカンダリファイルをまとめたファイルです。

 

名前

Hosting

Widget File (Browse)

Index File

Widget 1

enableTracking

Internal

Tracking。郵便番号

/enableTracking.html

Widget 2

GMaps

Internal

Tracking。郵便番号

/GMaps/watchPosition.html


7. 以下のページを作成し、下表のとおり対応するウィジェットを追加します。

 

 

ページ名

ページリンク名

ウィジェット

説明

1

位置情報を共有

 

Share_Location

enableTracking

「位置情報を共有」ページには「自分の位置を共有」ボタンがあり、クリックすると救急車ドライバーの座標がTrackingフォームに更新されます。

2

GMaps - ライブトラッキング

 

GMaps_Live_Tracking

 

GMaps

「GMaps - ライブトラッキング」ページには GMaps が配置され、救急車のリアルタイムの移動位置が警察に表示されます。

注意事項

  1. GMaps を使用するか、別の地図サービスを使用するかを選択できます。本ドキュメントの末尾に、GMaps と OpenStreetMap 用のスクリプトを参考用として添付しています。
  1. 権限セットを追加し、アプリケーションの設定内にあるユーザー権限で救急車ドライバーと警察向けに、下記画像を参考に設定します。
  1. 救急車ドライバー向け:

  2. 警察向け:

  1. Creator アプリケーションの管理セクションでユーザーをクリックし、ユーザーを追加します。アプリケーション名、役割、権限を指定し、下記画像を参考に設定してください。
    1. 救急車ドライバー向け:

    2. 警察向け:

動作を確認する



  1. ウィジェットについて
  2. ページにウィジェットを追加する
  3. ページについて
  4. コマンドラインインターフェイスをインストールする
  5. 権限について
  6. ユーザーについて