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

Slide 1

Slide 1 text

Android開発の基礎と実機で動かすとこまで 1

Slide 2

Slide 2 text

目次この資料について 2014年ごろにひっそりと行われた「Androidアプリ開発勉強会」にて発表した内容を切り貼りしてまとめたものです。レイアウト統一されてないとこ多いけど許してね内容１部：Androidについて２部：アプリ形態と開発手段について３部：ツール紹介とハローワールド４部：センサーを使ったサンプルアプリ 2

Slide 3

Slide 3 text

Androidについて ◼ １章：Androidについて • Androidとは • バージョンの推移 • Androidの特徴 3

Slide 4

Slide 4 text

Androidとは ◼ おかたい説明 Android（アンドロイド）とは、 Googleによってスマートフォンやタブレットなどの携帯情報端末を主なターゲットとして開発されたプラットフォームである。カスタマイズ版Linuxカーネル、ライブラリやフレームワークその他のミドルウェア、ART仮想マシン、主要なアプリケーションからなるソフトウェアスタック（集合）パッケージで構成されている。 ※Wikipediaより ☆ポイント • OSです • Linuxベースです • スマートデバイスに最適化されています 4

Slide 5

Slide 5 text

Androidとは ◼ おかたくない説明皆さんお持ちのスマートフォンに入っているOSにですスマホ以外にも採用される場面が増えています 5

Slide 6

Slide 6 text

バージョンの推移 • 1.x ✓2009年～ • 2.x ✓2010年～ • 3.x ✓2011年～ • 4.x ✓2012年～ • 5.x ✓2014年～発表時期 6

Slide 7

Slide 7 text

バージョンの推移 • 1.x • 2.x • 3.x • 4.x • 5.x まだまだ初期の時期普及が進んだ時期スマートフォン向けタブレット向けのバージョン 2.x系と同時に発展スマホ向け・タブレット向けの統合最新バージョン現在の主流対象端末 7

Slide 8

Slide 8 text

Androidの特徴特徴 • オープンソースである • 自由な開発が可能 • Googleサービスとの親和性の高さ iOSと比較して • ハードウェアが制限されていない • 独自にアプリを配布できる • アプリUIも比較的自由 Windowsと比較して • アプリのライフサイクルの違い 8

Slide 9

Slide 9 text

アプリ形態と開発手段について ◼ ２章：アプリ形態と開発手段 • ネイティブアプリとWebアプリ • 開発視点から • ハイブリッド開発と開発手段 9

Slide 10

Slide 10 text

通常のアプリとwebアプリスマホアプリというと… マーケットからダウンロードしてインストール起動！でも、Webブラウザでこういうのもよく使う交通機関情報の検索やメールなどを Webブラウザで表示アプリと遜色ないけど、これはアプリ？Webページ？ 10

Slide 11

Slide 11 text

例：通常のアプリとwebアプリ ◼ 路線情報を調べようとしてみる • 例：「乗換案内」 Google Playでダウンロード/インストールしてアイコンタップで起動して検索する 11

Slide 12

Slide 12 text

例：通常のアプリとwebアプリ ◼ 路線情報を調べようとしてみる • 例：「乗換案内Next」ブラウザを起動して乗換案内NEXTのページにアクセスして検索する 12

Slide 13

Slide 13 text

通常のアプリとwebアプリできることは同じ？違いは？（メリット・デメリット）ネイティブアプリオフラインでも使える使いやすい（デザインの最適化など） Webアプリダウンロード・インストールが不要 PCでも閲覧できる乗換案内アプリや地図アプリやメールアプリなど、 web版もアプリ版も両方あるものが多くありますできることの違いや作り方の違いをみてみましょうマーケットからダウンロードする通常のアプリブラウザから操作する 13

Slide 14

Slide 14 text

通常のアプリとwebアプリ動きの比較そのデバイスにインストールされる・できることデバイスの機能をフルで使える・動作速度高速に動作・リソース比較的自由にリソースを使える Webブラウザが動作させ、表示する・できることブラウザが実行可能な機能のみ使える・動作速度ブラウザ上で動くため遅い・リソースブラウザが扱える範囲 14

Slide 15

Slide 15 text

混同される２つの形態 ◼ android上で動くネイティブアプリとwebブラウザ上で動くwebアプリ（動的webページ) • ユーザ目線ではできることにあまり差はない ◼ 開発側としてもユーザが違いを意識しないでいいようにしようという流れ ◼ でも結局開発者としては違いを理解して取捨選択しなきゃね 15

Slide 16

Slide 16 text

開発者視点：ネイティブ/Web 開発方法の比較 OSに準拠した開発方法・androidならJavaやC++ ・iOSならObjective-CやSwift 所定の方法でビルド&配布 OSごとに別開発 Webに準拠した開発方法・通常のWeb開発技術を流用(HTML/CSS/Javascript) OSの違いを気にする必要がない（ブラウザの違いは要考慮）スマホの機能をフルに利用可能・カメラとか・GPSとか・NFCとか Webブラウザ上で実行される Webブラウザに許された範囲の機能を実行可能 16

Slide 17

Slide 17 text

ハイブリッド開発もう一つの開発手段ハイブリッドアプリとはネイティブとWebのいいとこ取り・ネイティブアプリ上でWebページが動くイメージ・Webの部分とネイティブの部分の仲介をするフレームワークを利用することで実現 HTML/JavaScriptのノウハウやツールが使える OSの違いを"あまり"意識しなくていい Web系のスキルがない場合はしんどいフレームワークが対象外の部分はOS別に開発する必要がある利点欠点 17

Slide 18

Slide 18 text

開発方法３種類開発方法まとめ OSに準拠した開発方法・画面：XML ・ロジック： Java Webに準拠した開発方法・画面：HTML/CSS ・ロジック：JavaScript フレームワークで変換してアプリ化 Web開発・通常のWeb開発(HTML/CSS/Javascript) ・スマートフォンに合うデザイン等の採用 18

Slide 19

Slide 19 text

ネイティブ/ハイブリッド/Web 使い分けどの作り方がいいか、というのは作りたいもの次第ですカメラやセンサを使いたいいろんなOS向けに作りたい情報の閲覧や Webからの情報取得が主高速に動く必要のあるゲームが作りたいオフラインでも使いたいネイティブ寄りハイブリッド寄り Web寄り既存のWeb活用 19

Slide 20

Slide 20 text

ネイティブ/ハイブリッド/Web 実情一つのアプリの中でもネイティブの部分とWebの部分とハイブリッドの部分と組み合わせていたりします例：クックパッドメニューや画面遷移はハイブリッドチックにつくっていたり、情報閲覧部分はほぼWebだったり。 20

Slide 21

Slide 21 text

開発ツールとハローワールド ◼ ３章：開発ツールとHello World • 開発ツール • デバッグ準備 • 写真で見るハローワールドの手順 • ツールの画面構成 21

Slide 22

Slide 22 text

前回のおさらい ◼ 開発方法と利点が異なる • ①ネイティブアプリ ✓開発方法：XML,Java,C++ ✓利点：ぬるぬる動くのはこっち • ②webアプリ（略） • ③ハイブリッドアプリ ✓開発方法：HTML,CSS,JavaScriptで作成後、ネイティブアプリに変換 ✓利点：web開発技術で作成ができる 22

Slide 23

Slide 23 text

Slide 24

Slide 24 text

開発ツール紹介 ◼ いままでの主流 • EclipseにAndroid開発用ツールを組み込んで開発 24

Slide 25

Slide 25 text

開発ツール紹介 ◼ Googleから公式開発ツールが発表されました • 2014/12頃 Ver.1発表 Android Studio 25

Slide 26

Slide 26 text

実機デバッグ ◼ 実機との接続 • 事前設定 ✓androidで開発者設定、デバッグをON ✓PCにドライバインストール（Windows） Windowsとスマホ接続にドライバが必要 androidを開発用に設定が必要 26

Slide 27

Slide 27 text

Hello World! 写真で見るハローワールドまずAndroid Studioを起動するとこのような画面がでてきます。細かいところは気にせず、一番上の new projectを選択します 27

Slide 28

Slide 28 text

Hello World! プロジェクト名の設定とドメインの設定を行います。パッケージ名はドメインが付加されたものになります。 28

Slide 29

Slide 29 text

Hello World! アクティビティを選びます。画面のテンプレートみたいなものです。ここではブランクを選びます。 29

Slide 30

Slide 30 text

Hello World! アクティビティ名を設定します。ページ名みたいなもので、プログラムソースコードの名前にもなります。 30

Slide 31

Slide 31 text

Hello World! SDKの選択です。どのバージョンのAndroidを対象に開発するかです。 31

Slide 32

Slide 32 text

Hello World! 自動で各種ファイルが生成され、このような画面になります。ここでは部品をドラッグ＆ドロップで配置していくことでページを作成できます。 32

Slide 33

Slide 33 text

Hello World! 右下の部分で、部品のプロパティを設定できます。大きさや色などの設定が簡単に選べます。 33

Slide 34

Slide 34 text

Hello World! 色の設定を行う例 34

Slide 35

Slide 35 text

Hello World! こうなりました。この状態で実行を行います。 35

Slide 36

Slide 36 text

Hello World! 実行プラットフォームを選択します。実機をつないでいる場合はここで出てきます。何も出てこない場合は下のエミュレータを選択します。（エミュレータも出てこない場合はエミュレータの作成から行う必要があります。） 36

Slide 37

Slide 37 text

Hello World! 無事起動しました。（図は実機で実行した状態） 37

Slide 38

Slide 38 text

サンプル｜ボタンとトースト（画面側） 38 どこかに（GitHubとか）アップすべきですがとりあえずキャプチャで・・・。

Slide 39

Slide 39 text

サンプル｜ボタンとトースト（ロジック側） 39

Slide 40

Slide 40 text

ネイティブアプリ（導入手順は今回は省略して…） ◼ AndroidStudio起動画面次は開発画面の紹介 40

Slide 41

Slide 41 text

ネイティブアプリ ◼ ２つの要素 • 画面を作成するXML • ロジックを作成するJava XMLファイルとJavaファイルが自動生成され、図のように配置されています。 41

Slide 42

Slide 42 text

ネイティブアプリ ◼ 画面の作成（デザイナー）部品画面のレイアウト部品部品のプロパティ XMLファイルを開くと図のようなデザイナーが開きます。 42

Slide 43

Slide 43 text

ネイティブアプリ ◼ 画面の作成（XML） XMLを直接編集も可能 XMLを直接記述することもできます。切り替えは左下のタブｃ 43

Slide 44

Slide 44 text

ネイティブアプリ ◼ ロジックの作成（Java） Javaファイルは必要な関数が生成された状態になっています。 44

Slide 45

Slide 45 text

ネイティブアプリ ◼ ロジックの作成（Java）起動時に実行される関数部品選択時に実行される関数などが自動生成されるテスト用のソースも自動生成されるようです 45

Slide 46

Slide 46 text

ネイティブアプリ ◼ その他紹介アプリのアイコンも設定できます文字列の定義用XML タイトルや表示する文字を定義しておきます OSの言語や設定によって表示を切り替える、ということが簡単にできる・・・はずその他、アプリのアイコンや言語切り替え用の文字列定義ファイルなどが生成されます 46

Slide 47

Slide 47 text

ネイティブアプリ ◼ その他紹介 AndroidManifest.xml アプリの名前やバージョン、作者、必要な権限などを記述ここで指定した権限はインストール時にユーザに許可を求め、アプリから利用できるようになるファイルアクセス/カメラ/電話帳の利用などカメラやセンサを利用する際や、実際にストアに登録する際に、必要な権限やアプリのバージョンを登録するManifestファイルも重要です。 47

Slide 48

Slide 48 text

ネイティブアプリ ◼ エミュレータ実行実際に作業するとこんな感じ 48

Slide 49

Slide 49 text

サンプルアプリ ◼ ４章：サンプルアプリ • 画像表示 • センサ値取得 • Activityの動作 • Intentの例 49

Slide 50

Slide 50 text

画像表示 ◼ 手順 1. 画像を[res/drawable]へ配置 2. ImageViewを準備 3. [自動]R.javaに登録され利用可能になる 4. ImageViewに設定 50 ①drawable 内に入れる ②ImageView

Slide 51

Slide 51 text

画像表示 51 ③設定したIDやファイル名で自動的に名称が設定される R.Javaはあまり意識する必要はない ◼ 手順 1. 画像を[res/drawable]へ配置 2. ImageViewを準備 3. [自動]R.javaに登録され利用可能になる 4. ImageViewに設定 ④ImageViewの setImageResourceで設定ソースは次項と合わせて

Slide 52

Slide 52 text

センサ値の取得 ◼ 取得できるセンサ • スマートフォンに搭載されている各種センサの値を取得し、アプリに活かすことができます。 • GPS情報、加速度、磁気、明るさ、などなど ◼ 取得手順 • マニュフェストに利用するセンサを列挙 • センサ値取得命令とハンドラの設定 • 画面へ反映（利用） 52

Slide 53

Slide 53 text

取得できるセンサー 53 http://techbooster.org/android/device/12524/

Slide 54

Slide 54 text

方位磁石を作ってみる ◼ 定番（？）の方位磁石アプリを作ってみる • 加速度センサと磁気センサを利用します ✓端末の向きと磁界の情報 • 上記２つから計算（計算関数はあります） 54 それぞれ３次元で情報を持っています端末の傾き等を考慮した上で方角を計算する必要あり

Slide 55

Slide 55 text

方位磁石サンプル ◼ 作成手順 • ２つのセンサの状態を取得する • 計算関数に入れる • 結果をもとに画像の角度を設定する ◼ 例では取得した方角によって画像が回転するようにしています。 • 実はサンプル状態は画像の角度設定が変（当日気づいた） • （角度は-1掛けないとだめですね…） 55

Slide 56

Slide 56 text

方位磁石サンプル 56 どこかに（GitHubとか）アップすべきですがとりあえずキャプチャで・・・。必要な変数の準備画像の設定センサ値取得の準備

Slide 57

Slide 57 text

方位磁石サンプル 57 PauseやResume時の設定スタンバイ状態や復帰した時の処理です。センサー値取得リスナーの設定と削除です。

Slide 58

Slide 58 text

方位磁石サンプル 58 メインの処理部分センサー値に更新があると onSensorChangedが実行されるので、ここにロジックを書きます。センサーの種類ごとに値を取得し、計算結果から画像の角度を設定しています。

Slide 59

Slide 59 text

Activityについて ◼ Activityとは • アプリケーションを構成する単位 ✓起動・終了ができる ✓状態を持つ（起動中/スリープ中など） ✓UIコンポーネントの配置ができる …etc. 1Activity = 1画面( ≒ 1アプリ ≒ 1機能) ◼ Activityいろいろ • あらかじめ拡張されたActivityもある ✓TabActivity,ActionBarActivityなど ✓メニューがついてたり… 59 早い話が…

Slide 60

Slide 60 text

Activityについて 60 日本語版

Slide 61

Slide 61 text

Activityについて 61 日本語版作られた動き出した一時停止停止から復帰終了

Slide 62

Slide 62 text

スリープ状態と強制終了 62 http://codezine.jp/article/detail/4842 Activity１起動状態別アクティビティ起動

Slide 63

Slide 63 text

スリープ状態と強制終了 63 http://codezine.jp/article/detail/4842 Activity１ Activity２ Pause/ Stop状態 Create/ Start状態

Slide 64

Slide 64 text

スリープ状態と強制終了 64 http://codezine.jp/article/detail/4842 Activity１ Activity２終了 Resume 状態

Slide 65

Slide 65 text

スリープ状態と強制終了 65 http://codezine.jp/article/detail/4842 Activity１ Activity２メモリーいっぱい使う Destroy状態自動で終了になることも

Slide 66

Slide 66 text

Intentについて ◼ アプリケーション • 複数のActivity（画面）でアプリケーションを構成するので、Activity同士の連携が必要 ◼ Intentとは • Activity同士を連携する機能 ✓明示的Intent ✓暗黙的Intent 66

Slide 67

Slide 67 text

Intentについて（明示的） ◼ 明示的Intent • 指定した特定のActivityを呼び出す＝画面から別画面を起動する • …普通の画面遷移みたいもの 67 //インテント作成 Intent intent = new Intent(getApplicationContext(),Page2Activity.class); //実行 startActivity(intent);

Slide 68

Slide 68 text

Intentについて（暗黙的） ◼ 暗黙的Intent • 暗黙的？ ✓起動するActivityを指定しない ✓“やりたいこと”を指定する ◼ 暗黙的なIntentを発行する • 例：指定のURLを開きたい ✓URL情報を指定 ✓表示ができるアプリを起動 • 例：画像を人と共有したい ✓画像情報を指定 ✓情報送信ができるアプリを起動 68

Slide 69

Slide 69 text

Intentについて（暗黙的） ◼ 暗黙的Intent 69 //インテント作成 Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(urlStr)); //実行 startActivity(intent); やりたいこと何かを表示：ACTION_VIEW データを送る：ACTION_SEND 壁紙設定：ACTION_SET_WALLPAPER など情報

Slide 70

Slide 70 text

Intentについて（暗黙的） ◼ 暗黙的Intent例 70

Slide 71

Slide 71 text

Intentサンプル ◼ サンプル内容 • 明示的Intentでページ遷移 ✓activity_page1 → activity_page2 • 暗黙的Intentでブラウザ起動 ✓URLや座標を入れてIntent投げる 71 サンプルソースはここ暗黙的Intentの場合も同様にIntentを作って必要な情報を登録

Slide 72

Slide 72 text

Intentサンプル ◼ ページ１（画面側） 72 テキストとボタンを配置するだけ

Slide 73

Slide 73 text

Intentサンプル 73 ◼ ページ１（ロジック側）インテントの設定ページの遷移と同時に文字列データを受け渡しします。

Slide 74

Slide 74 text

Intentサンプル ◼ ページ２（画面側） 74 遷移先のページ受け取った文字の表示と終了ボタン

Slide 75

Slide 75 text

Intentサンプル 75 ◼ ページ２（ロジック側） Intent情報の受け取りと Activityの終了

Slide 76

Slide 76 text

まとめ ◼ Androidの基礎～サンプル作成 • 勉強会では実際に実機やPCを触りながら、説明しながらだったためスライドだけでは不足があるかもしれませんが、ポイントだけでも伝われば… ◼ サンプルソースはしかるべきところにupしよう… • スライドにキャプチャﾍﾟﾀｰはちょっと… 76