アンドロイドアプリ はじめの一歩

# これは？
アンドロイド(Android)アプリ開発未経験の方に向けた、
アンドロイドアプリの作成方法や周辺的な知識を共有する為のドキュメント


# 確認環境
+ Windwos 10 Pro
+ Android Studio 3.4.2


# どういう人向け？
+ これからAndroidの開発環境を構築してみたい方
+ これからAndroidのアプリを作ってみたい方


# 何が出来る様になる？
+ アンドロイドの開発環境の設定
+ シミュレーターの作成、実行
+ アプリの画面にボタンを追加し、ブラウザの起動を行うアプリの作成


# 何は説明しない？
* プログラミングの言語仕様

説明すると膨大になるので、[リファレンス](https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/)を参照下さい


# 初めに

## 開発情報
[Android Portal](https://developer.android.com/)から情報を得ましょう

## 用語集
アンドロイドの開発には色々な用語が出てきます
用語について簡単に纏めておきます
わからない用語が出てきたタイミングで振り返って確認下さい

|用語|意味|
|:-------|:-------|
|IDE|統合開発環境<br>Integrated Development Environmenの略<br>これ一つで開発を行える|
|[Android Studio](https://developer.android.com/studio)|アンドロイド開発用のIDE|
|Android SDK|ソフトウェア開発キット<br>Software Development Kitの略<br>プログラムを書く、動かす為に必要なもの<br>|
|HAXM|Intel® Hardware Accelerated Execution Managerの略<br>シミュレーターの速度改善|
|プロジェクト|アプリの作成に必要なファイル等の集合|
|[ビルド](https://developer.android.com/studio/build)|実行可能なファイルを作る事|
|パッケージ(pkg)ファイル|アンドロイドのアプリの事|
|[Java]((https://www.oracle.com/technetwork/java/index.html))|プログラム言語|
|Kotlin|プログラミング言語<br>Javaとの相互利用可能|
|[Gradle](https://gradle.org/)|ビルドシステム<br>Android Studioでも利用されています|
|[Activity](https://developer.android.com/guide/components/activities)|画面|
|[Intent](https://developer.android.com/reference/android/content/Intent.html)|意思<br>例)アプリの任意の動作で画面を切り替える<br>例)ボタンを押した時にメッセージを表示する|
|[AVD](https://developer.android.com/studio/run/managing-avds)|仮想端末<br>Android Virtual Deviceの略<br>PC上でAndroidのシミュレートをする<br>AVD Managerから仮想端末の追加、破棄、実行可能|
|[ADB](https://developer.android.com/studio/command-line/adb)|コマンドライン ツール<br>Android Debug Bridgeの略<br>端末と通信可能なツール<br>アプリのインストールやコマンドの送信、他実行可能|


# 環境設定

## IDEの導入
+ [Android Studio](https://developer.android.com/studio)へアクセス
+ DOWNLOAD ANDROID STUDIOから規約に同意してダウンロード
+ インストーラーを使って任意のパスにインストール

## IDEの起動
※注 ToolTipで誘導してくれるので指示に従いましょう

+ 導入でインストールしたAndroid Studioを実行
+ 設定のImport確認があるので、任意に設定
+ Googleへ情報を提供するかの確認があるので、任意に設定
+ Android Studioの設定の確認があるので、任意に設定
+ Kotlinを導入して再起動する

ここまで来て以下の画面が表示されていれば環境の設定は完了です
![1.startup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/172c5715-310d-b49f-927a-02a77e6a7b3a.png)

## プロジェクトの作成
|内容|設定|
|:--|:--|
|プロジェクトの種類|Empty Actibity|
|プロジェクトの名前(Name)|HelloWorld|
|パッケージの名前(package name)|com.exsample.helloworld|
|プロジェクトの保存先(Save location)|★任意|
|言語(Language)|Kotlin|

### 参考画像
![2.choose.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/4bc9c5ed-a89e-7b6c-c859-26d2bb41e6d8.png)
![3.config project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/211b63e3-78f6-8441-09d7-2901b9fdca56.png)

## プロジェクトの構成を見てみる
![5. project view.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/09b5a295-b89e-b616-b62c-bf77acd39b3a.png)

### 今回注目するファイル
+ app\src\main\java\com\example\helloworld\MainActivity.kt
+ app\src\main\res\layout\activiy_main.xml
+ app\src\main\AndroidManifest.xml

|ファイル名|役割|
|:--|:--|
|MainActivity.kt|Activityの動作を記述する<br>記述はKotlin|
|activiy_main.xml|Activityのレイアウトを記述する<br>記述はxml|
|[AndroidManifest.xml](https://developer.android.com/guide/topics/manifest/manifest-intro)|システムがアプリのコードを実行する為に必要な情報を記述する<br>|

# 実行

## アプリを動作させる
プロジェクトを作成した時点でアプリを動作させる事が可能です
動作させてみましょう

### アプリのビルド
+ メニューのBuildからMake Project
+ メニューのRunからRun

### シミュレーターの作成及び、実行
※注 選択可能・実行したいなシミュレーターが存在しない時のみ作成下さい
※注 アンドロイドの端末を利用する場合、本設定は不要です

+ Create New Virtual Deviceを選択し、シミュレーターを作成する
+ Select system image画面で任意のシステムを(必要ならDownloadし)選択する
+ Verify Configration画面で任意の設定をする
+ 任意のシミュレーターを選択して実行

#### 参考画像
![6.target.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/8c01b97a-0c6f-8387-f56d-45a87bd1a97d.png)
![7.choose device.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/1e9cfed2-e36a-7299-2685-1f3d8c275e6d.png)
![8.system image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/56fa9c9b-4b1a-830f-0a59-8e77e0ec094a.png)
![10.verify config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/d8a0a173-22db-2890-f6ae-ef9a5eb15e98.png)
![9.target second.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/68b563e7-29da-024e-b276-961a17ee25c1.png)

ここまで来て以下の画面が表示されていれば実行完了です
![11.run.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/0dcd28d4-d092-3e0e-6650-332d8972a21e.png)

## アプリのカスタマイズ
今回はActibityにボタンを追加してみます
ボタンを選択された時に任意のURLをブラウザーで表示します

手順は以下になります
### 手順
+ レイアウトファイル(activiy_main.xml)へボタンを追加
+ アクティビティ(MainActivity.kt)にて動作を追加

### ボタン追加
+ activiy_main.xmlを開く
+ PaletteからButtonを選択する
+ Preview画面にドラックアンドドロップする

#### 参考画像
![12.layout.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90659/106f9807-7a89-bcfb-716e-910f7b31e521.png)

#### 参考内容
```xml:activiy_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

### 動作追加
+ MainActivity.ktを開く
+ onCreate関数の中で動作を記述する

```kotlin:MainActivity.kt
package com.example.helloworld

import android.content.Intent
import android.net.Uri
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // レイアウトからボタンを探す.
        var button = findViewById(R.id.button) as Button

        // 見つかったボタンに動作を割り当てる.
        // 動作の割り当てはボタンを押された時に呼び出される関数(リスナー)を定義し、
        // 定義した関数の中で動作を指定する.
        button.setOnClickListener {
            var uri = Uri.parse("https://www.google.com")
            var intent = Intent(Intent.ACTION_VIEW, uri)
            startActivity(intent)
        }
    }
}
```

#### 内容説明
+ レイアウトファイル(activiy_main.xml)に記載したボタンをレイアウトから見つける
+ ボタンに対して押された時(setOnClickListener)の動作を定義する
+ Uriというクラスで任意のURLを指定する
+ Intentを定義し、実行する
+ システムはIntentの意図を認識出来るアプリに対してお伺いを立てる
+ ブラウザーはIntentの意図を認識出来る設定になっているのでシステムはブラウザーを起動する
 + 複数のアプリが意図を認識出来る場合、どのアプリを立ち上げるのかを確認する


### 結果確認
アプリを動作させるの項目と同じ事を実施する事で動作の確認が出来ます
ご自身で動作の確認をしてみて下さい


## 最後に
Intentには様々なパラメータを設定出来ます
是非、電話帳やカメラを起動する設定を調べて記述してみて下さい
ボタン以外にも様々なUIをレイアウトに設定出来ます
是非、チェックボックス(CheckBox)やラジオボタン(RadioButton)等を追加してみて下さい