Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android アプリ開発入門(2015/6/19 社内勉強会)

Android アプリ開発入門(2015/6/19 社内勉強会)

Yoko TAMADA

June 19, 2015
Tweet

More Decks by Yoko TAMADA

Other Decks in Technology

Transcript

  1. Androidアプリ開発入門
    Yoko TAMADA @tmd45

    View Slide

  2. はじめました
    ソーシャルPLUSでもネイティブアプリ対応
    の重要度が増してきたので、
    @masutaka が iOS、私が Android を
    新しく勉強している感じです。
    @Surume は両方経験済みということで
    頼もしいですね。

    View Slide

  3. アジェンダ
    ● 開発環境の準備
    ● ざっくり触ってみる
    ● おみくじアプリを作ってみる

    View Slide

  4. 開発環境の準備

    View Slide

  5. 必要なもの
    ● Android SDK
    ● エディタ
    ● シミュレーター
    ● JDK 7 以上
    ○ Java Development Kit
    JDK 7 は 2015 年 4 月で
    Public Update が終了しました。
    自分が試した限りでは
    JDK 8 でも動いたので最新版を使った
    ほうがいいかもしれません。

    View Slide

  6. ● IntelliJ Platform
    ● ver.1.2.2(2015/6/19 時点)
    ● Android SDK, エディタ, シミュレーター
    はこれで揃う
    ● JDK 入れ忘れていても親切に誘導して
    くれるよ
    Android Studio

    View Slide

  7. ● 公式サイトからダウンロードして、インス
    トール
    ○ https://developer.android.com/sdk/index.html
    Android Studio セットアップ

    View Slide

  8. ● 初回起動
    ○ 以前の環境から設定を引き継ぐこと
    もできる
    ○ 新規セットアップで SDK などをインス
    トールしてくれる
    Android Studio セットアップ

    View Slide

  9. ● インストールされるライブラリ
    ○ Android SDK
    ○ Performance(Intel ® HAXM)
    ■ エミュレータの高速化
    ○ Android Virtual Device
    ■ エミュレーター
    Android Studio セットアップ

    View Slide

  10. ● 最初にインストールした SDK の最新版
    を入手したり
    ● その他便利なライブラリをインストール
    したり
    SDK Manager

    View Slide

  11. ● エミュレーターに必要な System Image
    など以下のものを入れる
    ○ Intel 系の System Image
    ○ Android Support Library
    SDK Manager

    View Slide

  12. ざっくり Android Studio を触ってみる

    View Slide

  13. ● プロジェクトの作成
    ○ Help me choose 便利
    Android Studio を触ってみる

    View Slide

  14. ● エミュレーターの起動
    ○ AVD Manager
    ■ デバイスの追加
    ■ 追加したデバイスの起動
    ■ 作成中のアプリの実行
    ● Run 'app'
    Android Studio を触ってみる

    View Slide

  15. ● 便利な機能
    ○ Search Everywhere
    ■ Shift キー 2回押す
    ■ ファイルとか設定とかなんでも検

    Android Studio を触ってみる

    View Slide

  16. ● app と Gradle Script
    ○ Gradle は Android のビルドシステム
    ■ Ant や Maven と同じカテゴリ
    ■ Groovy で書かれている
    構成をざっくり

    View Slide

  17. ● manifests
    ○ アプリケーションとアクティビティの設

    ○ 初期状態では MainActivity という処
    理が最初に起動されるように書かれ
    ている
    構成をざっくり

    View Slide

  18. ● java/MainActivity.java
    ○ onCreate メソッド
    ■ アクティビティが作られたときに最
    初に呼び出されるメソッド
    ■ activity_main っていう layout を
    使うという記述になっている
    構成をざっくり

    View Slide

  19. ● res/layout/activity_main.xml
    ○ アクティビティのレイアウト
    ○ プレビューからドラッグ&ドロップなど
    で編集も可能
    構成をざっくり

    View Slide

  20. ● そのほかの res の中身
    ○ drawable: 画像置き場
    ○ menu/menu_main.xml: メニューの
    作り込みをするときに編集
    ○ values/*.xml
    ■ 文字列や定数値を XML で管理す

    構成をざっくり

    View Slide

  21. ● "Hello world" をいじってみる
    ○ Properties
    ■ text
    ● @string/hello_world
    ● 直接文字列指定も可能
    編集してみよう

    View Slide

  22. ● 部品を配置してみる
    ○ Relative Layout
    ○ TextView
    ■ textSize 変えてみたり
    ■ サイズの単位 dp, sp
    ○ Button
    ■ id と text の編集
    編集してみよう

    View Slide

  23. ● 部品に動きを設定してみる
    ○ Button の onClick 設定
    ■ changeLabel としてみる
    ○ java で changeLabel 処理を書く
    ■ 引数は View, 戻り値なし(void)
    ■ TextView を指定して setText
    編集してみよう

    View Slide

  24. ● エミュレーターで確認してみる
    ○ Run 'app' で実行
    ○ 上手くできたら
    編集してみよう

    View Slide

  25. おみくじアプリを作ってみる

    View Slide

  26. ● ボタンを押すと 大吉、吉、凶 からランダ
    ムで結果が表示される
    おみくじアプリ

    View Slide

  27. ● 新しいプロジェクトを作る
    ● アクティビティの編集は XML を直接編
    集します
    ● エミュレーターも立ち上げておきましょう
    開発準備

    View Slide

  28. ● Linear Layout
    ○ android:orientation="vertical"
    ○ android:gravity="center"
    ■ 部品が縦並びに中央揃えで配置
    されるゾ!
    画面を作る

    View Slide

  29. ● TextView 2つ、Button 1つ
    ○ TextView 1つは操作したいので id
    を付けておく
    ○ Button は押したときの動作をさせた
    いので onClick を設定する
    ■ 処理は getOmikuji にします
    画面を作る

    View Slide

  30. ● getOmikuji メソッドを作る
    ○ 処理の流れ
    ■ TextView を取得する
    ■ 乱数を生成する
    ■ TextView に乱数を表示する
    ● とりあえず数字をそのまま出し
    てみる
    動作を書く

    View Slide

  31. ● おみくじ結果を文字で出してみる
    ○ 結果の文字列の配列を作る
    ■ "大吉", "吉", "凶"
    ○ 乱数の数字を添え字にして文字列を
    決める
    ■ 乱数を決める数字を配列の長さに
    しておくと拡張性がマシますネ
    見栄えを良くしましょう

    View Slide

  32. ● 大吉のときだけ文字を赤くしてみる
    ○ setTextColor(色)
    ○ num == 0 のとき Color.RED
    ○ それ以外のとき Color.BLACK
    ■ Color.rgb() とか Color.argb() と
    言う風にも書けるゾ
    見栄えを良くしましょう

    View Slide

  33. ● ドットインストール dotinstall.com
    ○ Androidアプリ開発入門
    ○ Androidレイアウト入門
    ○ Androidでおみくじアプリを作ろう
    ■ …からお送りしました m(_ _;)m
    ■ 開発入門以外は premium 講座です
    本日の内容は

    View Slide

  34. ● ひきつづきドットインストールのカリキュ
    ラムを完遂する
    ● やりながら徐々に公式ドキュメントに目
    を通す
    ● 独自 SDK 作成のノウハウを得る
    これからやること

    View Slide

  35. to be continued...

    View Slide