Androidアプリ開発ことはじめ / android_app_programming

【slideshareからのお引越しです】
https://www.slideshare.net/takosumipasta/android-65447636

2014年ごろに行ったAndroidアプリ開発関連の勉強会で使ったスライドの切り貼りまとめVerです。
古めの情報ですが、少しでも参考になるところがあれば。

Transcript

1. Android開発の基礎と実機で動かすとこまで 1
2. 目次 この資料について 2014年ごろにひっそりと行われた「Androidア プリ開発勉強会」にて発表した内容を切り貼り してまとめたものです。 レイアウト統一されてないとこ多いけど許してね 内容 １部：Androidについて ２部：アプリ形態と開発手段について ３部：ツール紹介とハローワールド ４部：センサーを使ったサンプルアプリ 2
3. Androidについて ◼ １章：Androidについて • Androidとは • バージョンの推移 • Androidの特徴 3
4. Androidとは ◼ おかたい説明 Android（アンドロイド）とは、 Googleによってスマートフォンやタブレットなどの携 帯情報端末を主なターゲットとして開発されたプラッ トフォームである。 カスタマイズ版Linuxカーネル、ライブラリやフレーム ワークその他のミドルウェア、ART仮想マシン、主要 なアプリケーションからなるソフトウェアスタック （集合）パッケージで構成されている。 ※Wikipediaより ☆ポイント • OSです • Linuxベースです • スマートデバイスに最適化されています 4
5. Androidとは ◼ おかたくない説明 皆さんお持ちのスマートフォンに入っているOSにです スマホ以外にも採用される場面が増えています 5
6. バージョンの推移 • 1.x ✓2009年～ • 2.x ✓2010年～ • 3.x ✓2011年～ • 4.x ✓2012年～ • 5.x ✓2014年～ 発表時期 6
7. バージョンの推移 • 1.x • 2.x • 3.x • 4.x • 5.x まだまだ初期の時期 普及が進んだ時期 スマートフォン向け タブレット向けのバージョン 2.x系と同時に発展 スマホ向け・タブレット向けの統合 最新バージョン 現在の主流 対象端末 7
8. Androidの特徴 特徴 • オープンソースである • 自由な開発が可能 • Googleサービスとの親和性の高さ iOSと比較して • ハードウェアが制限されていない • 独自にアプリを配布できる • アプリUIも比較的自由 Windowsと比較して • アプリのライフサイクルの違い 8
9. アプリ形態と開発手段について ◼ ２章：アプリ形態と開発手段 • ネイティブアプリとWebアプリ • 開発視点から • ハイブリッド開発と開発手段 9
10. 通常のアプリとwebアプリ スマホアプリというと… マーケットから ダウンロードして インストール 起動！ でも、Webブラウザでこういうのもよく使う 交通機関情報の検索やメールなどを Webブラウザで表示 アプリと遜色ないけど、 これはアプリ？Webページ？ 10
11. 例：通常のアプリとwebアプリ ◼ 路線情報を調べようとしてみる • 例：「乗換案内」 Google Playで ダウンロード/インストールして アイコンタップで起動して 検索する 11
12. 例：通常のアプリとwebアプリ ◼ 路線情報を調べようとしてみる • 例：「乗換案内Next」 ブラウザを起動して 乗換案内NEXTのページに アクセスして 検索する 12
13. 通常のアプリとwebアプリ できることは同じ？ 違いは？（メリット・デメリット） ネイティブアプリ オフラインでも使える 使いやすい（デザインの最適化など） Webアプリ ダウンロード・インストールが不要 PCでも閲覧できる 乗換案内アプリや地図アプリやメールアプリなど、 web版もアプリ版も両方あるものが多くあります できることの違いや作り方の違いをみてみましょう マーケットからダウンロードする 通常のアプリ ブラウザから操作する 13
14. 通常のアプリとwebアプリ 動きの比較 そのデバイスにインストールされる ・できること デバイスの機能をフルで使える ・動作速度 高速に動作 ・リソース 比較的自由にリソースを使える Webブラウザが動作させ、表示する ・できること ブラウザが実行可能な機能のみ使える ・動作速度 ブラウザ上で動くため遅い ・リソース ブラウザが扱える範囲 14
15. 混同される２つの形態 ◼ android上で動くネイティブアプリとwebブラウザ 上で動くwebアプリ（動的webページ) • ユーザ目線ではできることにあまり差はない ◼ 開発側としてもユーザが違いを意識しないでい いようにしようという流れ ◼ でも結局開発者としては違いを理解して取捨選 択しなきゃね 15
16. 開発者視点：ネイティブ/Web 開発方法の比較 OSに準拠した開発方法 ・androidならJavaやC++ ・iOSならObjective-CやSwift 所定の方法でビルド&配布 OSごとに別開発 Webに準拠した開発方法 ・通常のWeb開発技術を流用(HTML/CSS/Javascript) OSの違いを気にする必要がない （ブラウザの違いは要考慮） スマホの機能を フルに利用可能 ・カメラとか ・GPSとか ・NFCとか Webブラウザ上で実行される Webブラウザに許された範囲 の機能を実行 可能 16
17. ハイブリッド開発 もう一つの開発手段 ハイブリッドアプリとは ネイティブとWebのいいとこ取り ・ネイティブアプリ上でWebページが動くイメージ ・Webの部分とネイティブの部分の仲介をするフ レームワークを利用することで実現 HTML/JavaScriptのノウハウやツールが使える OSの違いを"あまり"意識しなくていい Web系のスキルがない場合はしんどい フレームワークが対象外の部分はOS別に開発する必要がある 利点 欠点 17
18. 開発方法３種類 開発方法まとめ OSに準拠した開発方法 ・画面：XML ・ロジック： Java Webに準拠した開発方法 ・画面：HTML/CSS ・ロジック：JavaScript フレームワークで変換してアプリ化 Web開発 ・通常のWeb開発(HTML/CSS/Javascript) ・スマートフォンに合うデザイン等の採用 18
19. ネイティブ/ハイブリッド/Web 使い分け どの作り方がいいか、というのは作りたいもの次第です カメラやセンサ を使いたい いろんなOS向 けに作りたい 情報の閲覧や Webからの情報 取得が主 高速に動く必要 のあるゲームが 作りたい オフラインでも使 いたい ネイティブ寄り ハイブリッド寄り Web寄り 既存のWeb活用 19
20. ネイティブ/ハイブリッド/Web 実情 一つのアプリの中でもネイティブの部分とWebの部分とハイブリッドの部分と組 み合わせていたりします 例：クックパッド メニューや画面遷移はハイブリッド チックにつくっていたり、情報閲覧 部分はほぼWebだったり。 20
21. 開発ツールとハローワールド ◼ ３章：開発ツールとHello World • 開発ツール • デバッグ準備 • 写真で見るハローワールドの手順 • ツールの画面構成 21
22. 前回のおさらい ◼ 開発方法と利点が異なる • ①ネイティブアプリ ✓開発方法：XML,Java,C++ ✓利点 ：ぬるぬる動くのはこっち • ②webアプリ（略） • ③ハイブリッドアプリ ✓開発方法：HTML,CSS,JavaScriptで作成後、 ネイティブアプリに変換 ✓利点 ：web開発技術で作成ができる 22
23. 開発方法３種類 開発方法まとめ OSに準拠した開発方法 ・画面：XML ・ロジック： Java Webに準拠した開発方法 ・画面：HTML/CSS ・ロジック：JavaScript フレームワークで変換してアプリ化 Web開発 ・通常のWeb開発(HTML/CSS/Javascript) ・スマートフォンに合うデザイン等の採用 今回はここ 23
24. 開発ツール紹介 ◼ いままでの主流 • EclipseにAndroid開発用ツールを組み込んで開発 24
25. 開発ツール紹介 ◼ Googleから公式開発ツールが発表されました • 2014/12頃 Ver.1発表 Android Studio 25
26. 実機デバッグ ◼ 実機との接続 • 事前設定 ✓androidで開発者設定、デバッグをON ✓PCにドライバインストール（Windows） Windowsとスマホ接 続にドライバが必要 androidを開発 用に設定が必要 26
27. Hello World! 写真で見るハローワールド まずAndroid Studioを起動するとこ のような画面がでてきます。 細かいところは気にせず、一番上の new projectを選択します 27
28. Hello World! プロジェクト名の設定とドメインの 設定を行います。 パッケージ名はドメインが付加され たものになります。 28
29. Hello World! アクティビティを選びます。 画面のテンプレートみたいなもので す。ここではブランクを選びます。 29
30. Hello World! アクティビティ名を設定します。 ページ名みたいなもので、プログラ ムソースコードの名前にもなります。 30
31. Hello World! SDKの選択です。 どのバージョンのAndroidを対象に 開発するかです。 31
32. Hello World! 自動で各種ファイルが生成され、こ のような画面になります。 ここでは部品をドラッグ＆ドロップ で配置していくことでページを作成 できます。 32
33. Hello World! 右下の部分で、部品のプロパティを 設定できます。 大きさや色などの設定が簡単に選べ ます。 33
34. Hello World! 色の設定を行う例 34
35. Hello World! こうなりました。 この状態で実行を行います。 35
36. Hello World! 実行プラットフォームを選択します。 実機をつないでいる場合はここで出てきます。 何も出てこない場合は下のエミュレータを選択します。 （エミュレータも出てこない場合はエミュレータの作成から行う必要があ ります。） 36
37. Hello World! 無事起動しました。 （図は実機で実行した状態） 37
38. サンプル｜ボタンとトースト（画面側） 38 どこかに（GitHubとか）アップすべきですが とりあえずキャプチャで・・・。
39. サンプル｜ボタンとトースト（ロジック側） 39
40. ネイティブアプリ （導入手順は今回は省略して…） ◼ AndroidStudio起動画面 次は開発画面の紹介 40
41. ネイティブアプリ ◼ ２つの要素 • 画面を作成するXML • ロジックを作成するJava XMLファイルとJavaファイルが 自動生成され、図のように配置 されています。 41
42. ネイティブアプリ ◼ 画面の作成（デザイナー） 部品 画面の レイアウト部品 部品の プロパティ XMLファイルを開くと図のよ うなデザイナーが開きます。 42
43. ネイティブアプリ ◼ 画面の作成（XML） XMLを直接編集も 可能 XMLを直接記述することもでき ます。 切り替えは左下のタブｃ 43
44. ネイティブアプリ ◼ ロジックの作成（Java） Javaファイルは必要な関数が 生成された状態になっていま す。 44
45. ネイティブアプリ ◼ ロジックの作成（Java） 起動時に実行される関数 部品選択時に実行される関数 など が自動生成される テスト用のソースも自動生成される ようです 45
46. ネイティブアプリ ◼ その他紹介 アプリのアイコンも設定できます 文字列の定義用XML タイトルや表示する文字を定義して おきます OSの言語や設定によって表示を切 り替える、ということ が簡単にでき る・・・はず その他、アプリのアイコンや 言語切り替え用の文字列定義 ファイルなどが生成されます 46
47. ネイティブアプリ ◼ その他紹介 AndroidManifest.xml アプリの名前やバージョン、 作者、必要な権限などを記述 ここで指定した権限はインストール 時にユーザに許可を求め、アプリか ら利用できるようになる ファイルアクセス/カメラ/電話帳の利用 な ど カメラやセンサを利用する際や、実際にス トアに登録する際に、必要な権限やアプリ のバージョンを登録するManifestファイル も重要です。 47
48. ネイティブアプリ ◼ エミュレータ実行 実際に作業するとこんな感じ 48
49. サンプルアプリ ◼ ４章：サンプルアプリ • 画像表示 • センサ値取得 • Activityの動作 • Intentの例 49
50. 画像表示 ◼ 手順 1. 画像を[res/drawable]へ配置 2. ImageViewを準備 3. [自動]R.javaに登録され利用可能になる 4. ImageViewに設定 50 ①drawable 内に入れる ②ImageView
51. 画像表示 51 ③設定したIDやファイル 名で自動的に名称が設 定される R.Javaはあまり意識する 必要はない ◼ 手順 1. 画像を[res/drawable]へ配置 2. ImageViewを準備 3. [自動]R.javaに登録され利用可能になる 4. ImageViewに設定 ④ImageViewの setImageResourceで設定 ソースは次項と合わせて
52. センサ値の取得 ◼ 取得できるセンサ • スマートフォンに搭載されている各種センサ の値を取得し、アプリに活かすことができま す。 • GPS情報、加速度、磁気、明るさ、などなど ◼ 取得手順 • マニュフェストに利用するセンサを列挙 • センサ値取得命令とハンドラの設定 • 画面へ反映（利用） 52
53. 取得できるセンサー 53 http://techbooster.org/android/device/12524/
54. 方位磁石を作ってみる ◼ 定番（？）の方位磁石アプリを作ってみる • 加速度センサと磁気センサを利用します ✓端末の向きと磁界の情報 • 上記２つから計算（計算関数はあります） 54 それぞれ３次元で情報を持っています 端末の傾き等を考慮した上で方角を 計算する必要あり
55. 方位磁石サンプル ◼ 作成手順 • ２つのセンサの状態を取得する • 計算関数に入れる • 結果をもとに画像の角度を設定する ◼ 例では取得した方角によって画像が回転する ようにしています。 • 実はサンプル状態は画像の角度設定が変（当 日気づいた） • （角度は-1掛けないとだめですね…） 55
56. 方位磁石サンプル 56 どこかに（GitHubとか）アップすべきですが とりあえずキャプチャで・・・。 必要な変数の準備 画像の設定 センサ値取得の準備
57. 方位磁石サンプル 57 PauseやResume時の設定 スタンバイ状態や復帰した 時の処理です。 センサー値取得リスナーの 設定と削除です。
58. 方位磁石サンプル 58 メインの処理部分 センサー値に更新があると onSensorChangedが実行 されるので、ここにロジッ クを書きます。 センサーの種類ごとに値を 取得し、計算結果から画像 の角度を設定しています。
59. Activityについて ◼ Activityとは • アプリケーションを構成する単位 ✓起動・終了ができる ✓状態を持つ（起動中/スリープ中など） ✓UIコンポーネントの配置ができる …etc. 1Activity = 1画面( ≒ 1アプリ ≒ 1機能) ◼ Activityいろいろ • あらかじめ拡張されたActivityもある ✓TabActivity,ActionBarActivityなど ✓メニューがついてたり… 59 早い話が…
60. Activityについて 60 日本語版
61. Activityについて 61 日本語版 作られた 動き出した 一時停止 停止から復帰 終了
62. スリープ状態と強制終了 62 http://codezine.jp/article/detail/4842 Activity１ 起動状態 別アクティビティ 起動
63. スリープ状態と強制終了 63 http://codezine.jp/article/detail/4842 Activity１ Activity２ Pause/ Stop状態 Create/ Start状態
64. スリープ状態と強制終了 64 http://codezine.jp/article/detail/4842 Activity１ Activity２ 終了 Resume 状態
65. スリープ状態と強制終了 65 http://codezine.jp/article/detail/4842 Activity１ Activity２ メモリー いっぱい使う Destroy状態 自動で終了に なることも
66. Intentについて ◼ アプリケーション • 複数のActivity（画面）で アプリケーションを構成する ので、Activity同士の連携が必要 ◼ Intentとは • Activity同士を連携する機能 ✓明示的Intent ✓暗黙的Intent 66
67. Intentについて（明示的） ◼ 明示的Intent • 指定した特定のActivityを呼び出す ＝画面から別画面を起動する • …普通の画面遷移みたいもの 67 //インテント作成 Intent intent = new Intent(getApplicationContext(),Page2Activity.class); //実行 startActivity(intent);
68. Intentについて（暗黙的） ◼ 暗黙的Intent • 暗黙的？ ✓起動するActivityを指定しない ✓“やりたいこと”を指定する ◼ 暗黙的なIntentを発行する • 例：指定のURLを開きたい ✓URL情報を指定 ✓表示ができるアプリを起動 • 例：画像を人と共有したい ✓画像情報を指定 ✓情報送信ができるアプリを起動 68
69. Intentについて（暗黙的） ◼ 暗黙的Intent 69 //インテント作成 Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(urlStr)); //実行 startActivity(intent); やりたいこと 何かを表示：ACTION_VIEW データを送る：ACTION_SEND 壁紙設定：ACTION_SET_WALLPAPER など 情報
70. Intentについて（暗黙的） ◼ 暗黙的Intent例 70
71. Intentサンプル ◼ サンプル内容 • 明示的Intentでページ遷移 ✓activity_page1 → activity_page2 • 暗黙的Intentでブラウザ起動 ✓URLや座標を入れてIntent投げる 71 サンプルソースはここ 暗黙的Intentの場合も 同様にIntentを作って 必要な情報を登録
72. Intentサンプル ◼ ページ１（画面側） 72 テキストとボタンを配置 するだけ
73. Intentサンプル 73 ◼ ページ１（ロジック側） インテントの設定 ページの遷移と同時に文 字列データを受け渡しし ます。
74. Intentサンプル ◼ ページ２（画面側） 74 遷移先のページ 受け取った文字の表示と 終了ボタン
75. Intentサンプル 75 ◼ ページ２（ロジック側） Intent情報の受け取りと Activityの終了
76. まとめ ◼ Androidの基礎～サンプル作成 • 勉強会では実際に実機やPCを触りながら、説 明しながらだったためスライドだけでは不足 があるかもしれませんが、ポイントだけでも 伝われば… ◼ サンプルソースはしかるべきところにupしよう… • スライドにキャプチャﾍﾟﾀｰはちょっと… 76