今回はTokyo Map Tourというアプリを作ります。

予め登録してある3つの場所をセレクトボタンから選択すると、その場所のマップやストリートビューが表示される、というものです。

Androidでは、あるアプリから別のアプリを起動して、それに処理を渡したり、別のアプリでの実行結果を受け取ったりすることが比較的簡単にできるのです。
Tokyo Map Tourでは、Android端末に用意されているGoogle Mapのアプリを利用します。

1.Map Tour

東京の観光地の地図を表示するアプリです。

image


[Choose Destination]のボタンを押すと、東京の観光地のリストが表示されます。

image

  • Tokyo Tower (東京タワー)
  • Imperial Palace(「皇居」二重橋)
  • Sensoji Temple(浅草寺)

リストの中から、行きたい場所を選択すると、

image

地図が表示されます。

では、チュートリアルに従って、作ってみます。

Designer

まずは、「Designer」ですね。

image

使用するコンポーネントは、Image、ListPicker、ActiveStarterです。

Table 6-1. Components for the Paris Map Tour

部品 Palette 名前 用途
Image User Interface Image1 東京画像
Label User Interface Label1 Androidで東京発見を表示
ListPicker User Interface ListPicker1 目的地リスト
ActivityStarter Connectivity ActivityStarter1 地図アプリを開く

Imageに、最初の画面で表示する地図の画像を設定します。

https://maps.googleapis.com/maps/api/staticmap?center=35.6585805,%20139.7432442%20&zoom=15&size=300×300&maptype=roadmap&markers=color:blue%7Clabel:T%7C35.6585805,%20139.7432442

ListPickerは、テキストデータのリストから一つのデータを選択するためのコンポーネントです。
観光地のリストを入れておくためのものです。
ActiveStarterは、アプリ内から別のアプリを起動するためのコンポーネントです。
ここでは、Google Mapを起動するように設定しています。

Table 6-2. ActivityStarter properties for launching Google Maps

属性
Action android.intent.action.VIEW
ActivityClass com.google.android.maps.MapsActivity
ActivityPackage com.google.android.apps.maps

Blocks Editor

続いて、「Blocks Editor」

destinationsというリストを用意して、観光地の名称を入れておきます。

Figure 6-2. Creating a list is easy in App Inventor
Screen1.Initializeは、スクリーンが初期化されるときに呼ばれるブロックでしたね。

Figure 6-3. Put anything you want to happen when the app starts in a Screen1.Initialize event handler
ListPickerの要素として、destinationsリストを設定します。
そして、ListPickerが押されたときの処理。
geo:0,0?q= の文字列の後に、選択された観光地の名称が連結されます。
別のアプリ(Google Map)を起動したとき、この文字列が渡されます。

Figure 6-4. Setting the DataURI to launch the selected map

「Blocks Editor」はこれだけです。

image

検索して、地図が表示するのは、Google Mapの処理です。
q= の後に、検索したい文字列をくっつけていたのですね。

バーチャルツアーに機能拡張

Figure 6-5. The list of maps for your virtual tour

Table 6-6. Virtual Tour URL’s for Google Maps

For example, you can show the Eiffel Tower map using only the GPS coordinates found in the long URL in Table 6-6 and the Maps geo: protocol:

geo:48.857942,2.294748?t=h&z=19

Figure 6-6. Choosing a list item based on the user’s selection

所要時間:20分

2.Map Tour Specific(Tokyo Map Tour パート2)

今度は、もう少し、凝ったGoogle Mapの使い方です。

リストから、行きたい場所を選択するまでは同じですが、

GPS を利用して、現在地を表示する機能を追加する。