Download to read offline
日本Androidの会のハンズオンセミナー資料（20130315）
- 1. START CONTINUE かぶしきがいしゃ SMART DEVICE TECHNOLOGIES 1
- 2. START CONTINUE かぶしきがいしゃ SMART DEVICE TECHNOLOGIES 2
- 3. アジェンダ イントロダクション GOOGLE MAP APIV2のじっそう 3
- 4. アジェンダ イントロダクション GOOGLE MAP APIV2のじっそう 4
- 5.
- 6.
- 7. つっちー せいべつ ： おとこ ちから ： １０ しょくぎょう： ゆうしゃ ０ レベル：２６ すばやさ ： ２１ たいりょく： ９９ ９ スキル かしこさ ： ４７ ANDROID うんのよさ： ５５ JQUERYery PHP こうげき ： １６ しゅび ： ２６ 7
- 8. かんば せいべつ ： おとこ ちから ： ４８ しょくぎょう： プログラマ レベル：２８ すばやさ ： ２１ たいりょく： ２５ かしこさ ： ９９ ９ スキル ANDROID うんのよさ： ９７ UNITY 3Dity こうげき ： １６ PHP しゅび ： ２６ 8
- 9. くし せいべつ ： おとこ ちから ： ０ しょくぎょう： プログラマ レベル：３６ すばやさ ： ０ たいりょく： ０ かしこさ ： ０ スキル うんのよさ： ９９ ANDROID ９ IPHONEe こうげき ： ０ PHP しゅび ： ０ 9
- 10.
- 11. 今日のゴール 「... Google MapAndroid API V2を利用して、 スライムをタッチした位置へ移動させるアプリを作ってみよう」 11
- 12. Google Map V2の実装 GooglePlay servicesをダウンロードする APIキーを取得する Androidプロジェクトをつくる マニフェストを設定する 地図を実装する 地図にスライム等を設置する スライムをタッチした位置に移動させる 12
- 13. Google Map V2の実装 GooglePlay servicesをダウンロードする APIキーを取得する Androidプロジェクトをつくる マニフェストを設定する 地図を実装する 地図にスライム等を設置する スライムをタッチした位置に移動させる 13
- 14. Google Play servicesをダウンロードする ダウンロードする ライブラリを組み込む 14
- 15. Google Play servicesをダウンロードする ダウンロードする ライブラリを組み込む 15
- 16. Android SDK Manager 「Google Play servicesの最新版を ダウンロードする」 16
- 17. Eclipse 「File > New> Other ... を選んで Android Project from Existing codeを選ぶ。」 17
- 18. ☆Android-SDKをインス トールした場所 Eclipse C:Androidandroid-sdk 「ルートディレクトリに以下を指定する」 /extras/google/google_play_services/libproject/google- play-services_lib 18
- 19. Google Play servicesをダウンロードする ダウンロードする ライブラリを組み込む 19
- 20. Eclipse 「プロパティ > Android>ライブラリ>追加を選択 し、Google-play-services_libを追加」 20
- 21. Google Map v2の実装 GooglePlay servicesをダウンロードする APIキーを取得する Androidプロジェクトをつくる マニフェストを設定する 地図を実装する 地図にスライム等を設置する スライムをタッチした位置に移動させる 21
- 22. APIキーを取得する Google APIs Consoleにアクセス GoogleMaps Android API V2をONにする APIキーをメモる 22
- 23. APIキーを取得する Google APIs Consoleにアクセス GoogleMaps Android API V2をONにする APIキーをメモる 23
- 24. https://code.google.com /apis/console/ ブラウザ Google APIs Consoleにアクセスし、「Create Project」をクリックしてプロジェクトを作成す る。 24
- 25. APIキーを取得する Google APIs Consoleにアクセス GoogleMaps Android API V2をONにする APIキーをメモる 25
- 26.
- 27. ブラウザ サービス一覧の中から「Google Maps AndroidAPI v2をONにする」 27
- 28. APIキーを取得する Google APIs Consoleにアクセス GoogleMaps Android API V2をONにする APIキーをメモる 28
- 29. ブラウザ API Accessを選び、Simple APIAccess欄の「API key」をメモする 29
- 30. Google Map v2の実装 GooglePlay servicesをダウンロードする APIキーを取得する Androidプロジェクトをつくる マニフェストを設定する 地図を実装する 地図にスライム等を設置する スライムをタッチした位置に移動させる 30
- 31. Androidプロジェクトをつくる 今回は、以下のプロジェクトを作成します。 ・プロジェクト名 ：MoveMap ・パッケージ名 ：jp.smartdt.movemap ・Min SDK Version : 8(Android2.2) ・Target SDK Version : 8(Android2.2) ・Compile With : 8(Android2.2) 31
- 32. Google Map v2の実装 GooglePlay servicesをダウンロードする APIキーを取得する Androidプロジェクトをつくる マニフェストを設定する 地図を実装する 地図にスライム等を設置する スライムをタッチした位置に移動させる 32
- 33.
- 34. パッケージ名は、ご自分の環 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"/> <!-- Google API へのアクセス --> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERV ICES" /> <!-- インターネットへのアクセス --> <uses-permission android:name="android.permission.INTERNET" /> 34
- 35. AndroidManifest.xml <!-- 外部SDカードへの書き込み --> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <!-- 位置情報の取得 (Wi-Fi経由) --> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <!-- 位置情報の取得 (GPS経由) --> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <!-- OpenGL ES version 2 --> <uses-feature android:glEsVersion="0x00020000" android:required="true" /> 35
- 36. AndroidManifest.xml Google APIの認証キーを入力する。 （applicationタグの中,Activityタグの外） <!-- GoogleAPI の認証キー --> <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="your_api_key" /> ご自分のＡＰＩキーをセット 今回は、「AIzaSyAAG3hruz7sJH8ST3cx-nUDy14egjUehng」を 用してください。 36
- 37. Google Map v2の実装 GooglePlay servicesをダウンロードする APIキーを取得する Androidプロジェクトをつくる マニフェストを設定する 地図を実装する 地図にスライム等を設置する スライムをタッチした位置に移動させる 37
- 38.
- 39.
- 40. 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.
- 42. MainActivity.java 画面クラスを作成する。 import android.os.Bundle; import android.support.v4.app.FragmentActivity; publicclass MainActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } 42
- 43.
- 44.
- 45.
- 46. MainActivity.java 地図にアクセスするための準備をしよう /** * 初期座標 */ private static final LatLng START_POS = new LatLng(35.645185, 139.408532); /** * 地図 */ private GoogleMap map; /** * カメラ */ private CameraUpdate camera; /** * マーカーを設置する設定 */ private MarkerOptions markers; 46
- 47. 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
- 48. 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
- 49. MainActivity.java @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findView(); setup(); } 49
- 50.
- 51. Android 「やった！ 明星大学が表示された！！！」 51
- 52. Google Map v2の実装 GooglePlay servicesをダウンロードする APIキーを取得する Androidプロジェクトをつくる マニフェストを設定する 地図を実装する 地図にスライム等を設置する スライムをタッチした位置に移動させる 52
- 53. 地図にスライムを設置する 関連クラスの作成 スライムの配置 お城の配置 53
- 54. 地図にスライムを設置する 関連クラスの作成 スライムの配置 お城の配置 54
- 55.
- 56.
- 57. 地図にスライムを設置する 関連クラスの作成 スライムの配置 お城の配置 57
- 58. MainActivity.java /** * 画面に描画されるキャラクター */ private Player player; /** * マップに描画するプレイヤー以外のオブジェクト */ private final ArrayList<GameObject> objects = new ArrayList<GameObject>(); 58
- 59. MainActivity.java /** * 地図の設定 */ private void setup() { ～ 省略 ～ // マーカーの座標を決定 markers.position(MainActivity.STRAT_POS); // プレイヤー情報を設定 player = new Player(MainActivity.this, R.drawable.slime,MainActivity.START_POS); // マーカーの画像を決定 markers.icon(player.getIcon()); // マーカーを追加 map.addMarker(markers); } 59
- 60.
- 61.
- 62. 地図にスライムを設置する 関連クラスの作成 スライムの配置 お城の配置 62
- 63. MainActivity.java /** * SDT座標 */ private static final LatLng SDT_POS = new LatLng(35.710356,139.752034); /** * バックグラウンドからUIへ影響を与えるためのハンダラ */ private Handler handler; 63
- 64. MainActivity.java /** * プレイヤー以外のオブジェクトを描画するメソッド */ private void drawObject() { for (final GameObject obj : objects) { markers.icon(obj.getIcon()); markers.position(obj.getPos()); markers.title(obj.message.get(0)); map.addMarker(markers); } } 64
- 65. MainActivity.java /** * その他のデータをセット */ private void setup() { ～ ～ 省略 ～～ //ハンドラーを用意 handler = new Handler(); //お城を建てる objects.add(new GameObject(R.drawable.castle, SDT_POS, "すまーとでばいすて くのろじー へ ようこそ！")); drawObject(); } 65
- 66.
- 67.
- 68. Google Map v2の実装 GooglePlay servicesをダウンロードする APIキーを取得する Androidプロジェクトをつくる マニフェストを設定する 地図を実装する 地図にスライムを設置する スライムをタッチした位置に移動させる 68
- 69.
- 70.
- 71. MainActivity.java /** * 1フレーム時間 */ private final static int ONE_FRAME_TIME = 1000 / 60; /** * バックグラウンドで処理を行うためのスレッド */ private Thread thread; 71
- 72. 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
- 73. MainActivity.java ☆☆ runメソッド内に記載する☆☆ while (player.isMoving()) { long time = System.currentTimeMillis(); player.move(); markers.icon(player.getIcon()); // 前回までの描画を消去 map.clear(); // 画像の描画位置を決定 markers.position(player.getPosition()); // 画像を描画 map.addMarker(markers); camera = CameraUpdateFactory.newLatLng(player.getPosition()); map.moveCamera(camera); ～ 次のページへつづく ～ 73
- 74. 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.
- 76. MainActivity.java /** * イベントリスナーをセット */ private void setEventListener() { map.setOnMapClickListener(new OnMapClickListener() { @Override public void onMapClick(final LatLng end) { move(end); } }); } 76
- 77. MainActivity.java @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findView(); setup(); setEventListener(); } 77
- 78.
- 79.
- 80. まとめ Google Play Serviceは、便利！ 他にも、便利なサービスがいっぱい！ ・プッシュ通知 Google Cloud Messaging for Android ・Youtube連携 YouTube Data API v3 皆さんも、いろいろチャレンジしてみましょう！ 80