15
基本の地図アプリを作ってみよう!

基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

Embed Size (px)

Citation preview

Page 1: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

基本の地図アプリを作ってみよう!

Page 2: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

【地図アプリキット使い⽅】 JointApps に新しく搭載された地図アプリキットは、 ①『オリジナルマップアプリを作るために“⾃分だけの場所データ”を保存するアプリ」と ② ①でデータを登録して保存したデータを再⽣させる『おすすめマップアプリ』の

2種類を作る必要があります。 まずは、こちらをしっかりとご理解ください。 ① は⾃分で紹介したい場所を登録してデータを作成するアプリなので⾃分しか使えません。

(必ずアプリは⾮公開で保存。アプリ側の SETTING で ID とパスワードを⼊⼒し 同期してダウンロードしてアプリを使⽤してください)

② は①で作ったデータを組み込んだ地図アプリなので、ユーザー向けに公開するアプリです。 このアプリは他のユーザーがデータを変更したり追加することはできません。

今回はそのステップに関して、説明したいと思います。 1.まずは、ログインして、“新規アプリを制作する”ボタンで新規画⾯を出します。

2.エクスプレッションブロックから、地図ブロックを1列⽬につなぎます。

Page 3: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

3.保存してアプリ側で再⽣してみます。

4.まず、SETTING ボタンから、⾃分の ID/PW を⼊⼒して保存します。

Page 4: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

5.そ し て SEARCH ボ タ ン か ら 、 ⾃ 分 で 作 っ た ア プ リ を ダ ウ ン ロ ー ド し ま す 。

6.ダウンロードしたアプリを開きます。地図が表⽰されます。

次に地図の中⼼を今いる場所になるようにします。

Page 5: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

7.先ほどの地図ブロックの後ろに DATA ブロック列から GPS ブロックをつなげます。

8.保存してアプリを再⽣すると、現在地が中⼼に表⽰されました。

つづけて、今の地図の位置にピンを打てるようにしたいと思います。

Page 6: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

9.2列⽬にボタン⇒ピン変換⇒地図 とつなぎます。

10. ⼊⼒タブで、ボタンブロックに⽂字を⼊⼒、ボタンの⾊を選びます。

11. レイアウトタブで、レイアウトします。

Page 7: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

12. 保存して再⽣してみます。ピンボタンを押すと、地図にピンが打てます。

13.次にピンに情報を⼊れられる編集ボタンをつくります。

Page 8: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

14.⼊⼒タブでボタン名を⼊⼒、とボタンの⾊を選びます。

15.レイアウトタブでボタンをレイアウトします。

Page 9: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

16.保存して再⽣します。

タイトルと説明に⽂字を⼊⼒できます。 URL には、URL を⼊⼒してください。 画像設定は画像を選択して登録できます(なるべく 100×100 くらいの画像がいいです) 17.ピンを消すボタンを追加します。

Page 10: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

18.⼊⼒タブにきりかえ、ボタン名に⽂字⼊⼒、ボタンの⾊を選択します。

19.レイアウトタブでボタンをレイアウトします。

20.保存して再⽣します。ピン消去ボタンが追加されました。

Page 11: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

21.左上の“列をつくる”ボタンで列を追加します。

22.ピンのデータを保存するボタンを作ります。

23.⼊⼒タブでボタンにボタン名⼊⼒、ボタンの⾊を選びます。

24.地図保存ブロックの設定をします。保存地図名をつけ、保存先は″素材“にしてください。素材にすると、サーバーにデータが保存されます。

Page 12: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

25.レイアウトします。

26.再⽣してみます。ピンを打ち、情報を⼊⼒したデータを保存できます。

27.続いて、新規作成ボタンを押しいま保存した地図データを⼊れた、

「おすすめマップアプリ」を作ります。

Page 13: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

28.図のようにブロックをならべます。

29.⼊⼒タブで、⼊⼒します。2 列⽬の地図読込ブロックから、先ほど保存したデータを選びます。

30.GPS トリガーブロックに⼊⼒します。2 列⽬と同じデータを選び、検索距離は任意で調整、

Page 14: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

今回はその場所に来ると、⾳が鳴るというものにしますので繰り返しを選びます。

31.⾳声を選びます。

32.「場所紹介アプリ」を保存します。今回は公開設定で保存します。

Page 15: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る

33.アプリをダウンロードして再⽣してみましょう。

打たれたピンをクリックすると情報が出てきます。URL をタップするとサイトに⾶びます。 戻る場合は Android の下部分にある戻るボタンでアプリに戻れます。 その場所周辺の設定範囲(10m なら 10m 半径)に来ると⾳が鳴ります。 これを応⽤して、⾊々なアプリを作ってみてください。