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

1,211 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,211
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. START CONTINUEかぶしきがいしゃ SMART DEVICE TECHNOLOGIES 1
  2. 2. START CONTINUEかぶしきがいしゃ SMART DEVICE TECHNOLOGIES 2
  3. 3. アジェンダイントロダクションGOOGLE MAP API V2のじっそう 3
  4. 4. アジェンダイントロダクションGOOGLE MAP API V2のじっそう 4
  5. 5. イントロダク ションこうししょうかいきょうのゴール 5
  6. 6. イントロダクションこうししょうかいきょうのゴール 6
  7. 7. つっちーせいべつ : おとこ ちから : 10しょくぎょう: ゆうしゃ 0 レベル:26 すばやさ : 21 たいりょく: 99 9 スキル かしこさ : 47 ANDROID うんのよさ: 55 JQUERYery PHP こうげき : 16 しゅび : 26 7
  8. 8. かんばせいべつ : おとこ ちから : 48しょくぎょう: プログラマ レベル:28 すばやさ : 21 たいりょく: 25 かしこさ : 99 9 スキル ANDROID うんのよさ: 97 UNITY 3Dity こうげき : 16 PHP しゅび : 26 8
  9. 9. くしせいべつ : おとこ ちから : 0しょくぎょう: プログラマ レベル:36 すばやさ : 0 たいりょく: 0 かしこさ : 0 スキル うんのよさ: 99 ANDROID 9 IPHONEe こうげき : 0 PHP しゅび : 0 9
  10. 10. イントロダクションこうししょうかいきょうのゴール 10
  11. 11. 今日のゴール「... Google Map Android API V2を利用して、 スライムをタッチした位置へ移動させるアプリを作ってみよう」 11
  12. 12. Google Map V2の実装Google Play servicesをダウンロードするAPIキーを取得するAndroidプロジェクトをつくるマニフェストを設定する地図を実装する地図にスライム等を設置するスライムをタッチした位置に移動させる 12
  13. 13. Google Map V2の実装Google Play servicesをダウンロードするAPIキーを取得するAndroidプロジェクトをつくるマニフェストを設定する地図を実装する地図にスライム等を設置するスライムをタッチした位置に移動させる 13
  14. 14. Google Play servicesをダウンロードする ダウンロードする ライブラリを組み込む 14
  15. 15. Google Play servicesをダウンロードする ダウンロードする ライブラリを組み込む 15
  16. 16. Android SDK Manager「Google Play servicesの最新版を ダウンロードする」 16
  17. 17. Eclipse「File > New > Other ... を選んでAndroid Project from Existing codeを選ぶ。」 17
  18. 18. ☆Android-SDKをインス トールした場所 Eclipse C:Androidandroid-sdk「ルートディレクトリに以下を指定する」/extras/google/google_play_services/libproject/google-play-services_lib 18
  19. 19. Google Play servicesをダウンロードする ダウンロードする ライブラリを組み込む 19
  20. 20. Eclipse「プロパティ > Android >ライブラリ>追加を選択し、Google-play-services_libを追加」 20
  21. 21. Google Map v2の実装Google Play servicesをダウンロードするAPIキーを取得するAndroidプロジェクトをつくるマニフェストを設定する地図を実装する地図にスライム等を設置するスライムをタッチした位置に移動させる 21
  22. 22. APIキーを取得するGoogle APIs ConsoleにアクセスGoogle Maps Android API V2をONにするAPIキーをメモる 22
  23. 23. APIキーを取得するGoogle APIs ConsoleにアクセスGoogle Maps Android API V2をONにするAPIキーをメモる 23
  24. 24. https://code.google.com /apis/console/ブラウザGoogle APIs Consoleにアクセスし、「CreateProject」をクリックしてプロジェクトを作成する。 24
  25. 25. APIキーを取得するGoogle APIs ConsoleにアクセスGoogle Maps Android API V2をONにするAPIキーをメモる 25
  26. 26. ブラウザCreate > プロジェクト名を入力し、Createprojectを選択する。 26
  27. 27. ブラウザサービス一覧の中から「Google Maps Android APIv2をONにする」 27
  28. 28. APIキーを取得するGoogle APIs ConsoleにアクセスGoogle Maps Android API V2をONにするAPIキーをメモる 28
  29. 29. ブラウザAPI Accessを選び、Simple API Access欄の「APIkey」をメモする 29
  30. 30. Google Map v2の実装Google Play servicesをダウンロードするAPIキーを取得するAndroidプロジェクトをつくるマニフェストを設定する地図を実装する地図にスライム等を設置するスライムをタッチした位置に移動させる 30
  31. 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. 32. Google Map v2の実装Google Play servicesをダウンロードするAPIキーを取得するAndroidプロジェクトをつくるマニフェストを設定する地図を実装する地図にスライム等を設置するスライムをタッチした位置に移動させる 32
  33. 33. マニフェストを設定する地図データ受信の許可Google APIへのアクセス許可インターネットへのアクセス許可地図のキャッシュ保存(SDカードへのアクセス)許可位置情報へのアクセス許可OpenGL ESの設定APIキーの設定 33
  34. 34. パッケージ名は、ご自分の環AndroidManifest.xml 境に合わせてください。<permissionandroid:name="jp.smartdt.movemap.permission.MAPS_RECEIVE"android:protectionLevel="signature"></permission><uses-permissionandroid:name="jp.smartdt.movemap.permission.MAPS_RECEIVE"/><!-- Google API へのアクセス --><uses-permissionandroid:name="com.google.android.providers.gsf.permission.READ_GSERVICES" /><!-- インターネットへのアクセス --><uses-permission android:name="android.permission.INTERNET" /> 34
  35. 35. AndroidManifest.xml<!-- 外部SDカードへの書き込み --><uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE" /><!-- 位置情報の取得 (Wi-Fi経由) --><uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION" /><!-- 位置情報の取得 (GPS経由) --><uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION" /> <!-- OpenGL ES version 2 --> <uses-feature android:glEsVersion="0x00020000" android:required="true" /> 35
  36. 36. AndroidManifest.xmlGoogle APIの認証キーを入力する。(applicationタグの中,Activityタグの外)<!-- Google API の認証キー --><meta-dataandroid:name="com.google.android.maps.v2.API_KEY"android:value="your_api_key" /> ご自分のAPIキーをセット 今回は、「AIzaSyAAG3hruz7sJH8ST3cx-nUDy14egjUehng」を 用してください。 36
  37. 37. Google Map v2の実装Google Play servicesをダウンロードするAPIキーを取得するAndroidプロジェクトをつくるマニフェストを設定する地図を実装する地図にスライム等を設置するスライムをタッチした位置に移動させる 37
  38. 38. 地図を実装する画面レイアウトの作成画面クラスの作成地図へのアクセス 38
  39. 39. 地図を実装する画面レイアウトの作成画面クラスの作成地図へのアクセス 39
  40. 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. 41. 地図を実装する画面レイアウトの作成画面クラスの作成地図へのアクセス 41
  42. 42. 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
  43. 43. Eclipse「出来たら、RUNボタンを押して、実行してみよう。」 43
  44. 44. Android「地図が表示された … でも、赤道直下だった。明星大学を表示させてみよう」 44
  45. 45. 地図を実装する画面レイアウトの作成画面クラスの作成地図へのアクセス 45
  46. 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. 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. 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. 49. MainActivity.java @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findView(); setup(); } 49
  50. 50. Eclipse「出来たら、RUNボタンを押して、実行してみよう。」 50
  51. 51. Android「やった! 明星大学が表示された!!!」 51
  52. 52. Google Map v2の実装Google Play servicesをダウンロードするAPIキーを取得するAndroidプロジェクトをつくるマニフェストを設定する地図を実装する地図にスライム等を設置するスライムをタッチした位置に移動させる 52
  53. 53. 地図にスライムを設置する 関連クラスの作成 スライムの配置 お城の配置 53
  54. 54. 地図にスライムを設置する 関連クラスの作成 スライムの配置 お城の配置 54
  55. 55. 講師スライム用クラス等をつくりましょう。今回は、時間の都合上、以下のファイルをご自分のプロジェクトへコピーしてください。【実装ファイル】・Player.java・GameObject.java・Message.java◆ファイルのコピー先は、 jp.smartdt.movemapの配下 55
  56. 56. 講師MoveMap/resの配下にdrawableフォルダを作成する。作成したフォルダに、以下の3ファイルをコピーする【画像ファイル】・castle.png・slime_b.png・slime.png 56
  57. 57. 地図にスライムを設置する 関連クラスの作成 スライムの配置 お城の配置 57
  58. 58. MainActivity.java /** * 画面に描画されるキャラクター */ private Player player; /** * マップに描画するプレイヤー以外のオブジェクト */ private final ArrayList<GameObject> objects = new ArrayList<GameObject>(); 58
  59. 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. 60. Eclipse「出来たら、RUNボタンを押して、実行してみよう。」 60
  61. 61. Android「明星大学の位置にスライムが出現 … おー!」 61
  62. 62. 地図にスライムを設置する 関連クラスの作成 スライムの配置 お城の配置 62
  63. 63. MainActivity.java /** * SDT座標 */ private static final LatLng SDT_POS = new LatLng(35.710356,139.752034); /** * バックグラウンドからUIへ影響を与えるためのハンダラ */ private Handler handler; 63
  64. 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. 65. MainActivity.java /** * その他のデータをセット */ private void setup() { ~ ~ 省略 ~~ //ハンドラーを用意 handler = new Handler(); //お城を建てる objects.add(new GameObject(R.drawable.castle, SDT_POS, "すまーとでばいすて くのろじー へ ようこそ!")); drawObject(); } 65
  66. 66. Eclipse「出来たら、RUNボタンを押して、実行してみよう。」 66
  67. 67. Android「お城が出現 …した」 67
  68. 68. Google Map v2の実装Google Play servicesをダウンロードするAPIキーを取得するAndroidプロジェクトをつくるマニフェストを設定する地図を実装する地図にスライムを設置するスライムをタッチした位置に移動させる 68
  69. 69. スライムをタッチした位置に移動させる移動するメソッドを実装するクリックイベントを設定する 69
  70. 70. スライムをタッチした位置に移動させる移動するメソッドを実装するクリックイベントを設定する 70
  71. 71. MainActivity.java /** * 1フレーム時間 */ private final static int ONE_FRAME_TIME = 1000 / 60; /** * バックグラウンドで処理を行うためのスレッド */ private Thread thread; 71
  72. 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. 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. 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. 75. スライムをタッチした位置に移動させるクリックイベントを設定する移動するメソッドを実装する 75
  76. 76. MainActivity.java /** * イベントリスナーをセット */ private void setEventListener() { map.setOnMapClickListener(new OnMapClickListener() { @Override public void onMapClick(final LatLng end) { move(end); } }); } 76
  77. 77. MainActivity.java @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findView(); setup(); setEventListener(); } 77
  78. 78. MainActivity.java 「出来たら、RUNボタンを押して、実行してみよう。」 78
  79. 79. Android「スライムが移動した。 感動??」 79
  80. 80. まとめGoogle Play Serviceは、便利!他にも、便利なサービスがいっぱい! ・プッシュ通知 Google Cloud Messaging for Android ・Youtube連携 YouTube Data API v3皆さんも、いろいろチャレンジしてみましょう! 80

×