基本の地図アプリを作ってみよう! - · pdf...
TRANSCRIPT
![Page 1: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/1.jpg)
基本の地図アプリを作ってみよう!
![Page 2: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/2.jpg)
【地図アプリキット使い⽅】 JointApps に新しく搭載された地図アプリキットは、 ①『オリジナルマップアプリを作るために“⾃分だけの場所データ”を保存するアプリ」と ② ①でデータを登録して保存したデータを再⽣させる『おすすめマップアプリ』の
2種類を作る必要があります。 まずは、こちらをしっかりとご理解ください。 ① は⾃分で紹介したい場所を登録してデータを作成するアプリなので⾃分しか使えません。
(必ずアプリは⾮公開で保存。アプリ側の SETTING で ID とパスワードを⼊⼒し 同期してダウンロードしてアプリを使⽤してください)
② は①で作ったデータを組み込んだ地図アプリなので、ユーザー向けに公開するアプリです。 このアプリは他のユーザーがデータを変更したり追加することはできません。
今回はそのステップに関して、説明したいと思います。 1.まずは、ログインして、“新規アプリを制作する”ボタンで新規画⾯を出します。
2.エクスプレッションブロックから、地図ブロックを1列⽬につなぎます。
![Page 3: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/3.jpg)
3.保存してアプリ側で再⽣してみます。
4.まず、SETTING ボタンから、⾃分の ID/PW を⼊⼒して保存します。
![Page 4: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/4.jpg)
5.そ し て SEARCH ボ タ ン か ら 、 ⾃ 分 で 作 っ た ア プ リ を ダ ウ ン ロ ー ド し ま す 。
6.ダウンロードしたアプリを開きます。地図が表⽰されます。
次に地図の中⼼を今いる場所になるようにします。
![Page 5: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/5.jpg)
7.先ほどの地図ブロックの後ろに DATA ブロック列から GPS ブロックをつなげます。
8.保存してアプリを再⽣すると、現在地が中⼼に表⽰されました。
つづけて、今の地図の位置にピンを打てるようにしたいと思います。
![Page 6: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/6.jpg)
9.2列⽬にボタン⇒ピン変換⇒地図 とつなぎます。
10. ⼊⼒タブで、ボタンブロックに⽂字を⼊⼒、ボタンの⾊を選びます。
11. レイアウトタブで、レイアウトします。
![Page 7: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/7.jpg)
12. 保存して再⽣してみます。ピンボタンを押すと、地図にピンが打てます。
13.次にピンに情報を⼊れられる編集ボタンをつくります。
![Page 8: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/8.jpg)
14.⼊⼒タブでボタン名を⼊⼒、とボタンの⾊を選びます。
15.レイアウトタブでボタンをレイアウトします。
![Page 9: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/9.jpg)
16.保存して再⽣します。
タイトルと説明に⽂字を⼊⼒できます。 URL には、URL を⼊⼒してください。 画像設定は画像を選択して登録できます(なるべく 100×100 くらいの画像がいいです) 17.ピンを消すボタンを追加します。
![Page 10: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/10.jpg)
18.⼊⼒タブにきりかえ、ボタン名に⽂字⼊⼒、ボタンの⾊を選択します。
19.レイアウトタブでボタンをレイアウトします。
20.保存して再⽣します。ピン消去ボタンが追加されました。
![Page 11: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/11.jpg)
21.左上の“列をつくる”ボタンで列を追加します。
22.ピンのデータを保存するボタンを作ります。
23.⼊⼒タブでボタンにボタン名⼊⼒、ボタンの⾊を選びます。
24.地図保存ブロックの設定をします。保存地図名をつけ、保存先は″素材“にしてください。素材にすると、サーバーにデータが保存されます。
![Page 12: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/12.jpg)
25.レイアウトします。
26.再⽣してみます。ピンを打ち、情報を⼊⼒したデータを保存できます。
27.続いて、新規作成ボタンを押しいま保存した地図データを⼊れた、
「おすすめマップアプリ」を作ります。
![Page 13: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/13.jpg)
28.図のようにブロックをならべます。
29.⼊⼒タブで、⼊⼒します。2 列⽬の地図読込ブロックから、先ほど保存したデータを選びます。
30.GPS トリガーブロックに⼊⼒します。2 列⽬と同じデータを選び、検索距離は任意で調整、
![Page 14: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/14.jpg)
今回はその場所に来ると、⾳が鳴るというものにしますので繰り返しを選びます。
31.⾳声を選びます。
32.「場所紹介アプリ」を保存します。今回は公開設定で保存します。
![Page 15: 基本の地図アプリを作ってみよう! - · PDF file21.左上の“列をつくる”ボタンで列 ... 33.アプリをダウンロードして ... 戻る場合はAndroidの下部分にある戻る](https://reader034.vdocuments.net/reader034/viewer/2022042508/5a6fa6f87f8b9aac538b4996/html5/thumbnails/15.jpg)
33.アプリをダウンロードして再⽣してみましょう。
打たれたピンをクリックすると情報が出てきます。URL をタップするとサイトに⾶びます。 戻る場合は Android の下部分にある戻るボタンでアプリに戻れます。 その場所周辺の設定範囲(10m なら 10m 半径)に来ると⾳が鳴ります。 これを応⽤して、⾊々なアプリを作ってみてください。