Slide 1

Slide 1 text

Android アプリ入門 19 HN

Slide 2

Slide 2 text

今日の目標  Androidアプリの作成方法を知る  Androidアプリを実際に作って動かしてみる  Java, Kotlinの記法に慣れる

Slide 3

Slide 3 text

Androidとは?  モバイル機器向けに設計されたオペレーティングシステムである.  カーネルやライブラリ等はC言語,C++で実装されているが,アプリケーション とそのフレームワークはJava Platform, JavaSEのサブセットとそのAndroid拡 張の上で動作する  アプリの開発は主にJavaおよびKotlinを用いて行います.

Slide 4

Slide 4 text

Java,Kotlinとは?  Java … C++に類似の構文を持つオブジェクト指向なプログラミング言語. 仮想マシン (JVM)上で動くので,OSによる違いなどを吸収できる. →仮想マシンさえあればどのOSでも動くプログラムが作れる (cf:C言語で書いてWindows用にコンパイルしたプログラムはMac, Linuxでは動かない)  Kotlin … Java言語をもっと簡潔・安全になるように改良した産業利用向け汎用言語と して開発された言語(Wikipediaより一部抜粋)。 Javaと互換性があり,同様にJVM上で動く.

Slide 5

Slide 5 text

環境構築  Android Studio のダウンロード https://developer.android.com/studio/install でダウンロードしてください。  セットアップ https://blog.codecamp.jp/programming-androidstudio-windows (Windows) https://blog.codecamp.jp/programming-androidstudio-mac (Mac) に書いてある通りにインストールすればOKです。最低限、新規プロジェクト作成の 手前までしておけばOKです。 この後11ページにしたがってエミュレータ、および実機でテストする準備を行って ください。 (最終的に10GBくらい容量が必要なので注意)  日本語化(必要に応じて) https://qiita.com/ekuzodia_jp/items/2c7d954dc76ffb164f71 上記のようにpleiadesプラグインで日本語化できます。 今回は日本語化しているソフトで説明します。

Slide 6

Slide 6 text

Hello World!!を出力する  まずは「Hello World!!」と出力するだけのアプリをつくって起動する

Slide 7

Slide 7 text

新規プロジェクトの作成  Android Studioを起動 →右のような画面が出たら一番上をクリック そうでない場合はツールバーの 「ファイル」→「新規」→「新規プロジェクト」

Slide 8

Slide 8 text

プロジェクトの設定  空のアクティビティ(デフォルト)を選択して「次へ」を押す

Slide 9

Slide 9 text

プロジェクトの設定  名前をお好きなように変更  APIレベルの選択 →その他お好みで変えて完了 ※今回は8.0を選んでください 自分用なら自分の使っているAndroidのバージョンに合わせる 頒布用ならAPIレベルディストリビューションチャートを見て 大半の人が使えそうなレベルを選択

Slide 10

Slide 10 text

エミュレーターの設定(実機でやる場合は後述)  ツールバーの「ツール」→「AVDマネージャー」→仮想デバイスの作成  お好みのデバイスを選んで「次へ」

Slide 11

Slide 11 text

エミュレーターの設定  APIレベルを選択して「次へ」※はじめはDownloadを押してダウンロードする必要あり(約1GB) ・どれを選べばいいか分からない方は8.0を選択してください.  お好みで変えて「完了」

Slide 12

Slide 12 text

実機でやる場合(ケーブル必須) 準備  実機と同じAndroidバージョンがインストールされているか確認 ツールバーの「ツール」→「SDKマネージャー」 ・該当のバージョンにチェックが入っていればよし ・入っていない場合 チェックを入れてOKを押し、インストール  AndroidUSBDriver(GoogleUSBDriverかも)をインストール 自作アプリの起動  使う実機で、開発者向けオプションからUSBデバッグをONにしてつなぐ  認識されているか確認したのち実行ボタンを押す

Slide 13

Slide 13 text

起動してみる  上にある緑色の三角形のボタンを押す

Slide 14

Slide 14 text

起動  右のようになれば成功  さっきの三角形のボタンがあったところの右にある赤の四角 ボタンを押すと停止できる

Slide 15

Slide 15 text

アプリをスマホにインストールする (非公開のapk用)  ツールバーの「ビルド」→「バンド ル/APKのビルド」→「APKのビル ド」で非署名apkを作成  プロジェクトフォルダ/プロジェクト 名 /app/build/outputs/apk/debug/app -debug.apk が生成される。これをスマホにインス トールする。  スマホは提供元不明のアプリのイン ストールを許可する設定が必要

Slide 16

Slide 16 text

アプリを起動してみる

Slide 17

Slide 17 text

Androidの構成  AndroidManifest.xml …アプリの基本情報が書いてある。  javaフォルダ以下 …プログラムしたjava(kt)ファイル(classファイ ル)が入っている  resフォルダ以下 …アプリで使うリソースが入っている

Slide 18

Slide 18 text

Androidの仕組み  AndroidではユーザーとのやりとりをActivityというコンポーネントで行う Activity ≒ 画面  最初の画面に相当するActivityはMainActivity (変更可能) ●●ゲーム プレイヤー名 現在メンテナンス中 MainActivity Activity1 次へ 戻る

Slide 19

Slide 19 text

表示を変えてみる  アクティビティの画面表示はres/layout内のxmlファイル で設定されている  activity_main.xmlを編集してみる  今回は自由度が高く、GUIで操作しやすい ConstraintLayoutを用いる  activity_main.xmlのタブをクリック →右のような画面でなくコードが表示されたら、 左下のデザインをクリック

Slide 20

Slide 20 text

ConstraintLayout  ビュー(Activityの構成要素)の位置を「制約」することで決定する方法 ※「制約」を掛けずにビルドすることはできない  主な決め方は2種類 ・長さの値で決める方法 ・長さの比で決める方法 …前者はスマホの機種によって 表示が崩れるおそれがあるので なるべく後者を使う  ビューの追加 左のパレットからドラッグすることで追加できる

Slide 21

Slide 21 text

位置の指定方法による違い レイアウト設計画面 Nexus 9 (タブレット) Galaxy Nexus

Slide 22

Slide 22 text

いろんな制約の掛け方  チェーン … 複数のビューを均等に配置  位置合わせ … 複数のビューの中心線,底を合わせるなど  ガイドライン … ほかのビューの位置の基準となるダミーのビュー

Slide 23

Slide 23 text

豊富なビュー  パレットにはたくさんのビューがある  WebViewなど、これをActivityに加えてちょっと編集するだけで高機能なアプリができ るビューもある。  ビューの例 ・TextView … テキストを表示するだけ。最初のHello World!を表示しているのがこれ。 ・Plain Text… ユーザーがテキストを打ち込める。打ち込める文字列を数に限定した Numberなど、派生形もたくさんある。 ・Button … 明らかなボタンが作れる。 ・ScrollView … スクロールすることができる部分をつくれる。スクロールさせたいビュー はこの中に入れる。

Slide 24

Slide 24 text

テキスト形式で見てみる  右上の「コード」のボタンを押すと、xmlファイルのコードの編集ができる。  こっちに直接書き込んで編集することもできる。  Idやtextなどはこっちで直接書き込んだほうが楽。

Slide 25

Slide 25 text

JAVAの書き方 //変数の宣言、初期化 int num = 0; String str = “Test”; num = "332"; // エラー(型が違う) //配列 int[] intList = new int[2]; int[0] = 1; int[1] = 2; System.out.println(intList[0]); //1 String[][] strList = {{"a", "b"}, {"c", "d"}}; System.out.println(strList[0][1]); //b

Slide 26

Slide 26 text

JAVAの書き方 //クラス(設計図) class Car{ private String name; private float speed = 60.0F; Car(String name){ this.name = name; } public void go(String dest){ System.out.println(name + " reached "+ dest + “.¥n"); } } //インスタンス(作ったもの) Car c = new Car(“Hiace"); c.go(“the park");

Slide 27

Slide 27 text

JAVAの書き方 その他基本的なコードは以下へ https://www.javadrive.jp/start/ //If文、比較演算子、論理演算子 if( 1 == 2/2 && num >= 0){ //処理 }else if(1 != 1 || 1 == 1){ //処理 } //For文 for(int i =0; i < 10; i++){ //処理 } While文 while(num > 10){ //処理 }

Slide 28

Slide 28 text

Kotlinの書き方 //変数の宣言と初期化 Val num = 0 val str: String = "Test" num = "332" //エラー(型が違う) //配列 val intList = arrayOf(1, 2) println(intList[0]) //1 val strList = arrayOf(arrayOf("a", "b"), arrayOf("c", "d")) println(strList[0][1]) //b

Slide 29

Slide 29 text

Kotlinの書き方 //クラス class Car(name: String){ val speed: Float = 60.0F val name: String init{ this.name = name } fun goto(test : String){ println("$name reached $test.¥n"); } } //インスタンス val car = Car(“Hiace") car.goto(“the park")

Slide 30

Slide 30 text

Kotlinの書き方 //If文、比較演算子、論理演算子 if( 1 == 2/2 && num >= 0){ //処理 }else if(1 != 1 || 1 == 1){ //処理 } //For文 for(i in 0..9){ //処理 } While文 while(num > 10){ //処理 }

Slide 31

Slide 31 text

アクティビティのライフサイクル  アクティビティは右のようなライフサイクルをたどる →これを把握しないと画面が何度も遷移するアプリを作ると きに不具合が起こる可能性がある ・onCreate() …Activity生成時に呼び出される。初期設定など をここで行う。 ・onRestart()…Activityが非表示状態から再び表示されたとき によびだされる。 ・onStart()…Activityが見えるようになったとき呼び出される ・onResume()…操作を受け付け始めるとき呼び出される ・onPause()…Activityが停止する前などに呼び出される ・onStop()…Activityがユーザーに表示されなくなったときに 呼び出される ・onDestroy()…Activityが破棄される際に呼び出される Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

Slide 32

Slide 32 text

実際のMainActivityクラス Java Kotlin

Slide 33

Slide 33 text

Activityからビューを取得,変更する  findViewById(idの値)でビューのインスタンスをつくってから変更する 例 R … リソースを管理するために自動で作られるクラス ※TextView などのビューのクラスはインポートする必要がある。 青い吹き出しが出たときに Alt + Enterを押すと自動で追記してくれる。 val textView: TextView = findViewById(R.id.textView) //インスタンス取得 val text : String = textView.text.toString() //textViewの表示テキストを取得 textView.text = "hoge" //textViewの表示テキストをhogeに変更 TextView textView = findViewById(R.id.textView4); //インスタンス取得 String text = textView.getText().toString(); //textViewの表示テキスト取得 textView.setText("hoge"); //textViewの表示テキストをhogeに変更 Java Kotlin

Slide 34

Slide 34 text

ユーザーの操作を受け取る  ボタンが押されたときになんかしたい 色々あるが、わかりやすいのはレイアウトファイルから設定すること ・レイアウトファイルの該当するボタンのタグに Android:onClick=“メソッド名” という属性を追加 ・MainActivityにさっきのメソッド名でメソッドを実装。この処理内容がボタンが 押されたときの処理になる。 例:  ほかに専用のインターフェースを実装して行う方法、ビューのインスタンスか ら無名クラスを生成する方法などがある。 fun onClicked(view: View){ //処理 } public void onClicked(View view){ //処理 } Kotlin Java

Slide 35

Slide 35 text

画面移動する  Intentという仕組みを用いると、Activity間の移動や、アプリ間の移動をするこ とができる。  Intentには二つある。 ・明示的intent…クラス名を指定してActivityを呼び出す。←今回はこっち (例… 同じアプリ内の別ページへ移動) ・暗黙的intent…所定の動作を指定してアプリを起動。 (例… SNSアプリでカメラボタンを押すと別のカメラアプリが起動する)  Intentにはデータもくっつけてやり取りできる

Slide 36

Slide 36 text

画面移動の仕方  移動先の画面を作る →左のプロジェクトウィンドウで、Activityを作りたい パッケージ(最初に作ったクラスが入ってるフォル ダ)を右クリック →新規→アクティヴィティー→空のアクティヴィ ティー 後は「プロジェクトの設定」、「表示を変えてみる」 で説明したようにやる

Slide 37

Slide 37 text

画面移動  移動元 Intent intent = new Intent(getApplicationContext(), [移動先のクラス名].class); // intent.putExtra(“タグ名”, 送りたいデータ); startActivity(intent);  移動先 (データを受け取りたい場合) Intent intent = getIntent(); [受け取りたいデータのクラス、データ型] obj = intent.get~Extra(“タグ名”); ※~ 受け取りたいオブジェクトのクラスに対応する文字列 String Intなど

Slide 38

Slide 38 text

元の画面に戻るとき  Intentではなくfinish();を使うこと。  Activityが山積みになり、意図した挙動にならなかったり、メモリの無駄使い になったりする。 Main Main Next Main Next Main Intent Intent finish

Slide 39

Slide 39 text

実践  二つの入力を数字で受け取り,その和を返すアプリを作る  必須要件 ・2つの入力を数字で受け取るEditText(Number) ・押すと結果を計算してくれるボタン(Button) ・結果を表示する場所(TextView) ・どの機種でも表示が崩れずにいい感じに()なるように

Slide 40

Slide 40 text

レイアウト  上3つはチェーンで均等に配置, 位置合わせで中心を合わせる  下二つは左右の比が均等になるように 配置する  全体の上下比は適当な比で配置 (もちろんチェーンを使ってもよい)

Slide 41

Slide 41 text

ボタンが押された時の挙動  onClickedに設定した関数に書く  文字列↔数値の変換が必須なので注意. fun onClicked(view: View){ val edit1: EditText = findViewById(R.id.editTextNumber2) val edit2: EditText = findViewById(R.id.editTextNumber3) val ansText: TextView = findViewById(R.id.textView4) val edit1S: String = edit1.text.toString() //左の値が文字列で得られる val edit2S: String = edit2.text.toString() //右の値が文字列で得られる val ans: Int = edit1S.toInt() + edit2S.toInt() //Intに変換すること ansText.text = ans.toString() //Stringに変換すること } public void onClicked(View view){ EditText edit1 = findViewById(R.id.editTextNumber2); EditText edit2 = findViewById(R.id.editTextNumber3); TextView textView = findViewById(R.id.textView4); int val1 = Integer.parseInt(edit1.getText().toString()); //左の値をintで得る int val2 = Integer.parseInt(edit2.getText().toString()); //右の値をintで得る int ans = val1 + val2; textView.setText(Integer.toString(ans));//Stringに変換してset } Java Kotlin

Slide 42

Slide 42 text

そのほか  プラスや結果の表示をもっと大きくしたい →属性からtextSizeを変更  入力フォームを右揃えにしたい →属性からgravityのrightをtrueに変更  ほかにも属性を変えることでいろいろ変更できるのでお試しを

Slide 43

Slide 43 text

改造例  和だけでなく四則演算にも対応させてみる →Spinnerを使うとよい  小数点,負の数にも対応させる  エラー処理をしっかり行う →オーバーフロー,0割り算など  実際の電卓みたいにボタンで数の指定をできるようにする

Slide 44

Slide 44 text

その先へ  Androidの機能を使ってみる カメラ,GPS,モーションセンサーなど ※権限の追加などが必要  画面遷移をしてみる ・明示的インテント … 同じアプリ内の別ページへ移動 ・暗黙的インテント … 特定の機能を持つ別アプリを呼び出す  Google Playで公開してみる ・デベロッパーアカウントの登録(有料),アプリへの署名,(広告の設定) などが必要

Slide 45

Slide 45 text

そのほか注意  大規模なアップデートが割とよくあるので、古い情報が書いてあるサイトなど に注意  特殊な設定が必要な操作も結構ある 例 : 通信→ 権限の設定が必要かつ別スレッドで行わなければならない