20150802 codeal androidアプリを作ろう(おみくじアプリ編)
-
Upload
codeal -
Category
Engineering
-
view
309 -
download
1
Transcript of 20150802 codeal androidアプリを作ろう(おみくじアプリ編)
おみくじアプリを作ろう
今回のゴール
デバッグビルドをした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 でライセンスされています