日本Androidの会のハンズオンセミナー資料（20130315）

START
CONTINUE

かぶしきがいしゃ SMART DEVICE TECHNOLOGIES

1

START
CONTINUE

かぶしきがいしゃ SMART DEVICE TECHNOLOGIES

2

アジェンダ

イントロダクション

GOOGLE MAP API V2のじっそう

3

アジェンダ

イントロダクション

GOOGLE MAP API V2のじっそう

4

イントロダク
ション
こうししょうかい

きょうのゴール

5

イントロダク
ション


6

つっちー

せいべつ：おとこ
ちから：１０
しょくぎょう：ゆうしゃ０
レベル：２６
すばやさ：２１

たいりょく：９９
９

スキルかしこさ：４７
ANDROID
うんのよさ：５５
JQUERYery
PHP こうげき：１６

しゅび：２６

7

かんば

ちから：４８
しょくぎょう：プログラマ
レベル：２８すばやさ：２１

たいりょく：２５

かしこさ：９９
９
スキル
ANDROID うんのよさ：９７
UNITY 3Dity
こうげき：１６
PHP
しゅび：２６

8

くし

ちから：０
しょくぎょう：プログラマ
レベル：３６すばやさ：０

たいりょく：０

かしこさ：０

スキルうんのよさ：９９
ANDROID ９
IPHONEe
こうげき：０
PHP
しゅび：０

9

イントロダク
ション


10

今日のゴール

「... Google Map Android API V2を利用して、
スライムをタッチした位置へ移動させるアプリを作ってみよう」

11

Google Map V2の実装

Google Play servicesをダウンロードする

APIキーを取得する

Androidプロジェクトをつくる

マニフェストを設定する

地図を実装する

地図にスライム等を設置する

スライムをタッチした位置に移動させる
12

Google Map V2の実装







13


ダウンロードする

ライブラリを組み込む

14




15

Android SDK Manager

「Google Play servicesの最新版を
ダウンロードする」

16

Eclipse

「File > New > Other ... を選んで
Android Project from Existing codeを選ぶ。」

17

☆Android-SDKをインス
トールした場所
Eclipse C:Androidandroid-sdk

「ルートディレクトリに以下を指定する」

/extras/google/google_play_services/libproject/google-
play-services_lib

18




19

Eclipse

「プロパティ > Android >ライブラリ>追加を選択
し、Google-play-services_libを追加」

20

Google Map v2の実装







21


Google APIs Consoleにアクセス

Google Maps Android API V2をONにする

APIキーをメモる

22





23

https://code.google.com
/apis/console/

ブラウザ

Google APIs Consoleにアクセスし、「Create
Project」をクリックしてプロジェクトを作成す
る。

24





25

ブラウザ

Create > プロジェクト名を入力し、Create
projectを選択する。

26

ブラウザ

サービス一覧の中から「Google Maps Android API
v2をONにする」

27





28

ブラウザ

API Accessを選び、Simple API Access欄の「API
key」をメモする

29








30


今回は、以下のプロジェクトを作成します。

・プロジェクト名：MoveMap
・パッケージ名：jp.smartdt.movemap
・Min SDK Version : 8(Android2.2)
・Target SDK Version : 8(Android2.2)
・Compile With : 8(Android2.2)

31








32


地図データ受信の許可

Google APIへのアクセス許可

インターネットへのアクセス許可

地図のキャッシュ保存（SDカードへのアクセス）許可

位置情報へのアクセス許可

OpenGL ESの設定

APIキーの設定

33

パッケージ名は、ご自分の環
AndroidManifest.xml 境に合わせてください。

<permission
android:name="jp.smartdt.movemap.permission.MAPS_RECEIVE"
android:protectionLevel="signature"></permission>

<uses-permission
android:name="jp.smartdt.movemap.permission.MAPS_RECEIVE"/>


<uses-permission
android:name="com.google.android.providers.gsf.permission.READ_GSERV
ICES" />


<uses-permission android:name="android.permission.INTERNET" />

34

AndroidManifest.xml


<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE" />


<uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION" />


<uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION" />


<uses-feature
android:glEsVersion="0x00020000"
android:required="true" />

35

AndroidManifest.xml

Google APIの認証キーを入力する。
（applicationタグの中,Activityタグの外）


<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="your_api_key" />

ご自分のＡＰＩキーをセット

今回は、「AIzaSyAAG3hruz7sJH8ST3cx-nUDy14egjUehng」を
用してください。

36








37


画面レイアウトの作成

画面クラスの作成

地図へのアクセス

38





39

activity_main.xml

地図表示用のXMLファイルを設定する。

<fragment
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.SupportMapFragment" />

40





41

MainActivity.java

画面クラスを作成する。

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

42

Eclipse

「出来たら、RUNボタンを押して、実行してみよう。」

43

Android

「地図が表示された …
でも、赤道直下だった。明星大学を表示させてみよう」

44





45

MainActivity.java

地図にアクセスするための準備をしよう

/**
* 初期座標
*/
private static final LatLng START_POS = new LatLng(35.645185, 139.408532);

/**
* 地図
*/
private GoogleMap map;

/**
* カメラ
*/
private CameraUpdate camera;

/**
* マーカーを設置する設定
*/
private MarkerOptions markers;

46

MainActivity.java

/**
* XMLレイアウトのロード
*/
private void findView() {
// FragmentManagerのロード
final FragmentManager manager = getSupportFragmentManager();

// MapFragmentのロード
final SupportMapFragment frag = (SupportMapFragment)
manager.findFragmentById(R.id.map);

// Map内容のロード
map = frag.getMap();
}

47

MainActivity.java
/**
* 地図の設定
*/
private void setup() {
// カメラの基本的な設定をセット
final CameraPosition pos = new CameraPosition(START_POS,16, 0, 0);

// カメラにセット
camera = CameraUpdateFactory.newCameraPosition(pos);

// カメラの位置に移動
map.moveCamera(camera);

// マーカーの準備
markers = new MarkerOptions();

// マーカーの座標を決定
markers.position(START_POS);

// マーカーを追加
map.addMarker(markers);
}

48

MainActivity.java

@Override
protected void onCreate(final Bundle savedInstanceState) {
findView();
setup();
}

49

Eclipse


50

Android

「やった！明星大学が表示された！！！」

51








52

地図にスライムを設置する

関連クラスの作成

スライムの配置

お城の配置

53




お城の配置

54

講師

スライム用クラス等をつくりましょう。

今回は、時間の都合上、以下のファイルをご自分のプロジェクトへコ
ピーしてください。

【実装ファイル】
・Player.java
・GameObject.java
・Message.java

◆ファイルのコピー先は、
jp.smartdt.movemapの配下

55

講師

MoveMap/resの配下にdrawableフォルダを作成する。

作成したフォルダに、以下の３ファイルをコピーする

【画像ファイル】
・castle.png
・slime_b.png
・slime.png

56




お城の配置

57

MainActivity.java

/**
* 画面に描画されるキャラクター
*/
private Player player;

/**
* マップに描画するプレイヤー以外のオブジェクト
*/
private final ArrayList<GameObject> objects = new ArrayList<GameObject>();

58

MainActivity.java
/**
* 地図の設定
*/
～省略～

// マーカーの座標を決定
markers.position(MainActivity.STRAT_POS);

// プレイヤー情報を設定
player = new
Player(MainActivity.this, R.drawable.slime,MainActivity.START_POS);

// マーカーの画像を決定
markers.icon(player.getIcon());

// マーカーを追加
}

59

Eclipse


60

Android

「明星大学の位置にスライムが出現 …
おー！」

61




お城の配置

62

MainActivity.java

/**
* SDT座標
*/
private static final LatLng SDT_POS = new LatLng(35.710356,139.752034);

/**
* バックグラウンドからUIへ影響を与えるためのハンダラ
*/
private Handler handler;

63

MainActivity.java

/**
* プレイヤー以外のオブジェクトを描画するメソッド
*/
private void drawObject() {

for (final GameObject obj : objects) {
markers.icon(obj.getIcon());
markers.position(obj.getPos());
markers.title(obj.message.get(0));
}
}

64

MainActivity.java

/**
* その他のデータをセット
*/

～～省略～～

//ハンドラーを用意
handler = new Handler();

//お城を建てる
objects.add(new GameObject(R.drawable.castle, SDT_POS, "すまーとでばいすて
くのろじーへようこそ！"));
drawObject();
}

65

Eclipse


66

Android

「お城が出現 …した」

67








68


移動するメソッドを実装する

クリックイベントを設定する

69




70

MainActivity.java

/**
* 1フレーム時間
*/
private final static int ONE_FRAME_TIME = 1000 / 60;

/**
* バックグラウンドで処理を行うためのスレッド
*/
private Thread thread;

71

MainActivity.java
/**
* 移動を行うメソッド
* @param end 移動先の緯度・経度
*/
private void move(final LatLng end) {

// 目的地と現在の縮尺を渡す
player.setEndPosition(end, map.getCameraPosition().zoom);

thread = new Thread(new Runnable() {
@Override
public void run() {
handler.post(new Runnable() {
@Override
public void run() {
//～メソッドの中身は、次ページ～
}
});
}
});
thread.start();
}

72

MainActivity.java
☆☆ runメソッド内に記載する ☆☆

while (player.isMoving()) {
long time = System.currentTimeMillis();
player.move();

markers.icon(player.getIcon());

// 前回までの描画を消去
map.clear();

// 画像の描画位置を決定
markers.position(player.getPosition());

// 画像を描画
camera = CameraUpdateFactory.newLatLng(player.getPosition());
map.moveCamera(camera);

～次のページへつづく～

73

MainActivity.java

// プレイヤー以外のオブジェクトを描画
drawObject();

// 規定時間内なら規定時間まで処理を中断する
time = System.currentTimeMillis() - time;

if (time < ONE_FRAME_TIME) {
try {
Thread.sleep(ONE_FRAME_TIME- time);
} catch (final InterruptedException e) {
e.printStackTrace();
}
} //end of if
}//end of while

74




75

MainActivity.java
/**
* イベントリスナーをセット
*/
private void setEventListener() {

map.setOnMapClickListener(new OnMapClickListener() {
@Override
public void onMapClick(final LatLng end) {
move(end);
}
});
}

76

MainActivity.java

@Override
protected void onCreate(final Bundle savedInstanceState) {
findView();
setup();
setEventListener();
}

77

MainActivity.java


78

Android

「スライムが移動した。感動？？」

79

まとめ

Google Play Serviceは、便利！

他にも、便利なサービスがいっぱい！

・プッシュ通知
Google Cloud Messaging for Android

・Youtube連携
YouTube Data API v3

皆さんも、いろいろチャレンジしてみましょう！

80

日本Androidの会のハンズオンセミナー資料（20130315）

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (13)

Similar to 日本Androidの会のハンズオンセミナー資料（20130315）

Similar to 日本Androidの会のハンズオンセミナー資料（20130315） (20)

Recently uploaded

Recently uploaded (7)

日本Androidの会のハンズオンセミナー資料（20130315）