おみくじアプリを作ろう

今回のゴール

デバッグビルドをしたAndroidアプリを動かす

AndroidStudioの基本操作を学ぶ

興味があれば資料にない事にも挑戦してみる(任意)失敗は、より深い理解へ繋がる

この資料における前提条件

Javaのプログラミング経験がある

メモリ4GB以上のパソコン(8GB以上だと尚良い)

AndroidStudio 1.2 以上

Androidアプリ開発に必要なもの

- AndroidStudioを利用するために十分なスペックのPC- AndroidStudio

- Googleが2013年5月に発表した、Androidアプリの統合開発環境- インストール方法参考

- https://github.com/keiji/the-androidstudio-book- Android端末

- もしくは AndroidEmulatorを実行するために十分なPCスペック

AndroidStudio v.s. Eclipse- 数年前まではAndroidアプリ開発といえばEclipseだった- 2015年6月時点ではAndroidStudioを推奨- Eclipseは2015年末にメンテナンスが終了される

- 一時期はNDKのためにEclipseの利用がされていたケースもある- が、AndroidStudio 1.3 RC 3 でNDK対応が入ったため、

それも不要になる見込みがある

- 公式ブログでEclipseからの移行方法が示されている- Eclipse関連の情報は古い事が多いので気をつける

サンプルプロジェクトの見方

- サンプルの作業履歴- サンプルを参考にしながら実装を進める- AndroidStudioの操作で自動生成されるコードもある

- スライドで操作方法を示しているものは、操作をしてから編集をする

おみくじアプリを作る

おみくじアプリの要件

- 起動するとボタンが表示されている- ボタンをタップするとランダムな結果が表示される

進めていく際の心得

- 理解出来なくとも進められるよう意識して資料作成をしている

- 資料に不備があれば報告を！

- 疑問に思った事があれば質問する- 完走できなくても落ち込まない

- 意欲のある学習者向けに、多少発展的な作業も盛り込んでいます

- 一度に全てを理解しようとしない事- URLも多数掲載しているが、余裕のある方に向けているものが殆ど

実装概要

1. Add No Activityでプロジェクト作成2. Blank ActivityでActivityを用意する3. ボタンを設置する4. ボタンにクリックイベントをセットする5. ボタンのクリップイベントでおくみじを実行する

←このアイコンが出たらアプリを転送して確認してみましょう

実装例: このスペースにはお手本となるサンプル実装へのリンクが貼られます ( 例 )

1.AddNoActivityでプロジェクト作成

1.NoActivityでプロジェクトを作成

- Application Name: Omikuji- Company Domain: ${username}.github.com- Project Location: プロジェクトを作成するパス(任意)

次のスライドへ続く

1.NoActivityでプロジェクトを作成

1.NoActivityでプロジェクトを作成

そのまま次へ

1.NoActivityでプロジェクトを作成

Activityが無い状態からスタートする

1.NoActivityでプロジェクトを作成

- ここ時点でプロジェクトの作成は完了です- 現時点では起動するActivity(画面)が存在しないため、

アプリの転送はまだ出来ません

実装例: NoActivityでプロジェクトを作成

Tips: ActivityとView- Activityクラス: 1つのWindowを制御する- Viewクラス: 主にユーザの目に見えるものを制御する- ActivityがViewを管理し、画面を描画する

Tips: ActivityでViewを管理する

- Activity#setContentViewでレイアウトを指定する- Activity#findViewByIdでViewを取得して操作する

- setContentViewの前でfindViewByIdをするとNullが返るので注意

2.BlankActivityを作成する

- パッケージエクスプローラのクリックメニューを利用- [New]->[Activity]->[Blank Activity]

- Activity Name: OmikujiActivity- Launcher Activityにチェックを入れる

次のスライドへ続く

2.BlankActivityを作成する

2.BlankActivityを作成する

Activity Nameに「OmikujiActivity」と入力する

起動時に最初に呼び出される Activityとして設定する

2.BlankActivityを作成する

Activityが作成され2つのファイルが自動的に開かれる

LauncherActivityが存在しているとアプリを端末へ転送可能になる

エミュレーターでアプリを起動する

AndroidStudioの画面上部のRunボタンを押す

エミュレーターでアプリを起動する

Runボタンを押して待つと端末選択画面が出る

そこでエミュレーター作成画面を開きましょう

エミュレーターでアプリを起動する

新しいデバイスを作成する

エミュレーターでアプリを起動する

そのまま次へ

エミュレーターでアプリを起動する

Release Name: KitKatAPI Level: 19ABI: x86

「Download」をクリック

エミュレーターでアプリを起動する

作成したデバイスの起動ボタンをクリックしてエミュレーターを起動する

エミュレーターでアプリを起動する

起動まで数分かかるので待つ

エミュレーターでアプリを起動する

起動が完了するとデバイス選択画面でエミュレータを選択可能に！ここでOKボタンを押すと、アプリがエミュレータへ転送されます

2.BlankActivityを作成する

作成したOmikujiActivityを確認してみましょう

実装例: : Blank Activity を作成する

2.BlankActivityを作成する

- OmikujiActivity.java のメニューに関するコードを削除- res/menu/menu_main.xml ファイルを削除

オプションメニューが消えている事を確認しましょう

実装例: : メニューは利用しないので削除する

Tips: Androidのリソース(Rクラス)- XMLで定義された各種リソース

- app/src/res/values/ ディレクトリに設置する- 数値、文字列、スタイルなどを一元管理する仕組み

- 国際化や端末環境による切り替えが簡単に出来る

- JavaとXMLのどちらからでもアクセス可能- Javaでは R.string.app_name のような記述で利用する- XMLでは @string/app_name のような記述で利用する

- attr,dimen,color,style,string,rawなど様々なものがある

3.ボタンを設置する

- レイアウトエディタを利用してレイアウトを編集する- TextViewを消してButtonを置いてみましょう

3.ボタンを設置する

TextViewを削除する

3.ボタンを設置する

ドラッグアンドドロップでボタンを設置する

3.ボタンを設置する

ActivityでViewを扱えるようにidを指定する

- text: おみくじを引く- id: okumiji

設置したボタンを見てみましょう

実装例: ボタンを設置する

4.ボタンにクリックイベントを設定

- OmikujiActivityにOnClickListenerを実装する- クリックイベントの動作確認のためにToastを出す

- Toast: メッセージをポップアップで表示する

クリックしたら設置したボタンを見てみましょう

実装例: ボタンにクリックイベントを実装する

5.クリックイベントでおみくじを実行

- Toast.makeToastを削除して、おみくじに置き換える- Randomクラスでランダムな結果を作る- Button#setTextでテキストをボタンへセットする

ランダムな結果が表示される事を確認しましょう

実装例: ボタンを押した時にランダムな結果を表示する

おめでとうございます！

簡単なおみくじアプリが出来ましたね！

実装概要 - 追加課題

ここから先は追加課題となります

以下に示されていない事に挑戦するのも構いません

(スタイルの調整等)

6. 間を置いてからおみくじの結果を表示する7. 下に引っ張っておみくじを引く8. 通知で結果を知らせる9. 通知に「共有」ボタンを設置する

ここから先に進む際の注意点

ここから先は少し発展的な内容も含まれています

ですが、サンプルと照らし合わせながら進めていけば、

完走できるようになっています

余裕のある方は、もう一息頑張ってみましょう

6.間を置いて結果を表示する

- Handlerを利用して3秒後におみくじを実行する- Handler: Handlerへpostした処理を順に実行するクラス- http://mixi-inc.github.io/AndroidTraining/fundamentals/2.12.handler-and-looper.html

間を置いて結果が表示される事を確認しましょう

実装例: ボタンを押してから3秒後に結果を表示する

7.下に引っ張っておみくじを引く

- SwipeRefreshLayoutを利用する- support-v7(公式のライブラリ)に含まれるViewクラス

- 下に引っ張った時の処理をリスナーへ記述する- SwipeRefreshLayout#setOnRefreshListenerを利用する

- 既存のRelativeLayoutをSwipeRefreshLayoutで囲む- GUIのレイアウトエディタが扱えない複雑な操作のため、

XMLを手で直接編集する

下に引っ張っておみくじを引いてみましょう

実装例: 下に引っ張っておみくじを引く

8.結果を通知で知らせる

- Androidでは通知を活用するケースが多い(iOS比)- NotificationCompat#Builderで通知を実装する

- title,text,smallIconは必須、一つでも欠けてると通知が出ないので注意

- NotificationManagerを利用してBuilderで生成した通知を表示する

通知が表示される事を確認してみましょう

実装例: おみくじの結果を通知で知らせる

9.通知に共有ボタンをつける

- 通知上のボタンをタップして結果を「共有」する- Androidでは、任意のアプリを選択可能な手段を用意してお

く事が望ましい- 「画像が扱えるアプリに画像のパスを送るよ」- 「テキストを扱えるアプリにテキストを送るよ」- Don't hardcode links to other apps (有志による翻訳)

9.通知に共有ボタンをつける

- NotificationCompat.BuilderのaddActionでボタンを設置- Android Tips #23 Android4.1 で追加された Notification のスタイルを使

いこなす ｜ Developers.IO- ActionとしてIntentを指定する- 暗黙的Intentによって任意のアプリへ「共有」する- 連携アプリの対象として “MIME-Type: text/plain” を指定

- このフォーマットを扱えないアプリは選択肢に出てこない

通知をタップして「共有」出来るか見てみましょう

実装例: 通知に共有ボタンを設置する

課題の完了

以上で課題は終了です

お疲れ様でした！

参考リソース

- Android Developers (公式サイト)- mixi-inc/AndroidTraining - mixi社の研修資料- スライド内で利用しているドロイド君のアイコン

- Creative Commons Atteribution 3.0 でライセンスされています