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

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

要件

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

ユースケース

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

動作を確認する

手順

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

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

フォーム名	フォームリンク名	項目タイプ	項目名	項目リンク名
Tracking	tracking	住所	住所	住所
		小数	経度（小数点以下 7 桁）	経度
		小数	緯度（小数点以下 7 桁）	緯度

救急車の運転手が位置情報を共有すると、その座標が 10 秒ごとにこの Tracking フォームに自動入力されます。

このアプリケーションには、次の目的で 2 つのウィジェットがあります。

救急車の運転手が自分の位置情報を共有するため。

警察が Google マップ上で救急車の現在位置を追跡・表示するため。

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

サンプル ZIP 添付ファイルを利用する

i) このドキュメントの末尾に添付されているサンプル ZIP ファイルをダウンロードします。これには、Tracking アプリに関連するすべての一次ファイルと二次ファイルが含まれています。

メモ : サンプル ZIP 添付ファイルを使用してウィジェットを作成する場合は、ダウンロード後に手順 4 までスキップできます。

(または)

ターミナルを使用してウィジェットを作成する

i) ターミナルでウィジェットを作成するには、CLI をインストールします。インストールが完了したら、ウィジェットのプロジェクトを作成したいファイルディレクトリにターミナルで移動します。

cd ドキュメント

ii) ターミナルで次のコマンドを実行して、新規プロジェクトを作成します。

メモ : ここで説明するすべてのコマンドはターミナルでの操作を前提としています。同じスクリプトは、Windows のコマンドプロンプトでも使用できます。

zet init

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

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

v) 次のように widget。html ファイルに移動します。このファイル名を enableTracking。html に変更します。このウィジェット用のスクリプトをカスタマイズして、widget ファイルに挿入します。このウィジェットは、救急車の運転手が現在位置の追跡を有効にするために使用する 位置情報を共有 ボタンを作成します。

メモ : 代わりに、このドキュメントの末尾で提供している enableTracking。html ファイル内のサンプルスクリプトをコピー＆ペーストして、このウィジェットをすぐに作成することもできます。

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

メモ : 以下のコマンドは、それぞれ下記の処理を実行します。

Command	操作
cd	ディレクトリに移動します
cd ファイル名	指定したファイル（ディレクトリ）に移動します
mkdir フォルダー名	フォルダーを作成します
touch ファイル名	ファイルを作成します

cd tracking/app
mkdir GMaps
cd Gmaps
touch watchPosition。html

vii) ローカルストレージに移動します。app フォルダー内で、独自のスクリプトを記述してセカンダリファイル（css と js）を作成・カスタマイズします。

メモ : または、セカンダリフォルダーをコピー＆ペーストして app フォルダー内に配置することもできます。

viii) watchPosition。html (GMaps) と対応する js ファイルのコードをカスタマイズします。

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

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

cd
cd Tracking
zet 認証
zet pack

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

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

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

6. 以下の表に記載された詳細に従って各項目を入力し、ウィジェットを 2 つ作成します。

メモ :

Index file は、ウィジェットのスクリプトが組み込まれるプライマリファイルです。ウィジェットのすべての要素を相互に関連付けます。各 index ファイルは、それぞれのウィジェット専用です。
ウィジェット郵便番号ファイルは、追加するすべてのウィジェットのプライマリファイルとセカンダリファイルをまとめたファイルです。

	名前	Hosting	Widget File (Browse)	Index File
Widget 1	enableTracking	Internal	Tracking。郵便番号	/enableTracking.html
Widget 2	GMaps	Internal	Tracking。郵便番号	/GMaps/watchPosition.html