Androidアプリ開発はじめませんか？[ その２ ] ~ 基本を知ろう!カウントアプリ編 ~
しばらくぶりです！！！！！！
こんなスタートでいいのやろうか。
いいんです。
これからはちまちまと更新頑張っていこうと思います
前回の記事でHello Worldアプリはできましたでしょうか？
まだの方はここからね
さて、今日はカウントアプリを作ってみましょう
こんなの↓↓↓↓
Androidは色んなコンポーネントを組み合わせることで、アプリが出来上がります。
コンポーネントってなんや？
ほんとなんなんでしょうね...
コンポーネントにも色々あるので、今はわからなくて大丈夫です。
そのコンポーネントの中でも基本となるアクティビティを知ることが、Androidアプリ開発の第一歩です！！！
アクティビティってなんじゃ〜〜〜???
ざっくりと、１枚の画面を表現する板的な
その板(アクティビティ)の上に文字を乗せたり、ボタンを乗せたり...etc.
色々なパーツを乗せていくことで、１つの画面の作っていきます
ボタンを押した時に画面が変わったりしますね？
その時は全く別のパーツが置かれたアクティビティに変わってます
複数の画面を作れば、その数だけアクティビティが増えていきます
いいですか？
うっすーーーい板です
でわ、いきましょう！！
AndroidStudioで新しくプロジェクトを作りましょうー！
アプリ名はCountとかでいいですかねー
Company Domainは他の方と被らないユニークなものにしないとだめなんですよねー
アプリ公開をしようとしている方なんかは、よく考えた方がよいです！
自分のドメインなんかを取得しておくと安心できると思います
foo.bar.gumio.com
こんな感じですね
公開しない練習用とかだったら、なんでもいいと思ってます
なので、今回はexample.comで
最初の練習とかで設定するのはここだけですねー
後は、ひたすらEnter!!!!!
特に何もせずに、NextNextNext....
EnterEnterEnterEnter!!!!!!
NextNextNext....
EnterEnterEnterEnter!!!!!!
NextNextNext....
EnterEnterEnterEnter!!!!!!
はい。
最初の表示されている画面を見ていきましょう！！
うんうん。左には色々あるね
何が何だかさっぱりって感じ
今はざっくりで大丈夫です
慣れたら自然と理解していくもんなんで
とりあえず手を動かして行くことが大事です！！
最初に意識してほしいのは
MainActivity.javaとactivity_main.xmlです
こことここですねー
はじめに画面作っちゃいましょうか
layoutのactivity_main.xmlへGo
こんな画面になりましたか？
これはビューというものです
ビューは紙だと思ってください
この紙(ビュー)に色々なパーツを貼り付けていきます
そして覚えてますか？
アクティビティは板だと
このパーツを貼り付けていって、完成した紙を板に貼り付けます！！
そうすることで画面は初めて完成します
貼り付けるまではただの紙ですね〜〜〜
でわ、いきましょう！
左にずらーとたくさん英単語が並んでますね...
これらが画面を構成していくパーツ...ウィジェットといいます
最初に何が必要なのかをよく考えましょう
ボタンを押したら、１増える...
ボタン(Button)が必要ですね
そしたら、１増えたのを確認するための文字(TextView)も必要ですね
デザインは皆さんの自由です！
具体的なデザインの仕方は今後説明していくので、今はドラッグアンドドロップでぺたぺた貼りつけましょうー！
最初から存在するHello Worldは消しちゃいましょうか...
できましたか？？
でわ、各詳細を見ていきましょう！！
画面上のTextViewを押してみましょう
右がこんな感じになってますね？
英語だらけで、うっ....ってなるかもしれませんが、それも勉強です
僕も未だに英語はさっぱりですが、なんとなくでやってたらなんとなくわかるようになります！！
なので、気合でなんとかしましょう！！
IDは名前みたいなものですねー
今だとtextViewちゃんになりますね！！
名前はそれを表す分かりやすいものにしてあげましょう
今回だと数字を表すテキストなので、、、
numTextViewとかにしてみましょうか
layout_widthとlayout_height
これは横幅と高さですね！！
widthが横幅で、heightが高さです
ウエストと身長みたいなもんですよ..えぇ((((
この右にある下三角を押すと
wrap_contentとmatch_parentが出てきます
気になったら、押してみたらいいんですよ
プログラミングのいいとこって、いくらでも失敗ができることなんですよ
いや、いざ誰かに使ってもらう時はだめですよ？？？練習のときですからね？？？
なので、好きなだけ暇な時にこれなんだろうってやつは触ってみるといいです
その分、賢くなると思いますよ
とまぁ、脱線しましたが伝えたかったことなので、、、
wrap_contentは中身のコンテンツに合わせてぴったりフィットしてくれるやつです。
Why???
今回でいう中身のコンテンツとは、TextViewだと文字そのもので、ボタンだったら、周りの枠ではなくて、中の文字ですね
よくわからないなーという方は、下に書いてあるView all propertiesを押してみましょう
そこを押すと、そのパーツに対して細かいとこまで設定できるようになります。
たくさんありますね~~~
その中の1つのtextSizeを80くらいにしてみましょう
文字の大きさが変わるとwrap_contentは柔軟にびよーんと大きさを合わせてくれます！なんと便利な
まぁ、これは各自でやってみてくださいな
ボタンも文字が中のコンテンツなので、textSizeを変えてみると同じことになりますよ
もう一つのmatch_parentは親のサイズにぴったり合わせる感じです
んー、よくわかんないなー
ある程度の大きさのスライムを四角形の箱にぶち込んだとき、スライムはその箱の大きさまで広がりますね？
そんなイメージです（わからない）
じゃあ、何が親なんだ？？となりますね
ウィジェットがずらーと並んでる左下の画面を見てみましょう
ほうほう、なんかいるなと
これが親です
後々、詳細は説明していきます
これが親なんだなと思ってもらえたらいいです
今はこの親は画面いっぱいまで広がっています
なので、試しにmatch_parentにすると画面いっぱいにびよーんと広がりますね
場合によって、使い分けてみてくださいな
つぎ！！
textはtextです...
何を表示したいかですね！
今回は数字を表したいので、まだ数えられていない０にでもしてみましょうか！！！
うわ！！！ちっさ！！！！！
見づらいですよね。
さっき言ったようにtextSizeで大きくしてあげるとよいですね
90くらいしてあげましょうか
見やすい見やすい！！
textViewの設定はこんなんでよいです！
後のは必要になったときに随時説明しますので
つぎボタン！！
idはcountUpButtonとかがよいですかね？
layout_widthとheightは基本はwrap_contentでいきましょう！
ボタンで大事なのはonClickというやつです
これはなんなのか？
このボタンを押したときに僕は何をすればよいのか???
その何をするのかはプログラミングコードで書いていきます
ここはデザインを決める場所なので、そこまで詳細には決めてあげれません...
なので、ここではボタンを押した時の動作名を決めてあげましょう
ゲームとかだったら、攻撃するならattackですし、魔法ならspellとかですかね？
今回は数を数えていくので、countUpですかね
できましたか？
なんか後ろの灰色が気になるなぁ、、、という方は、backgroundをいじってあげましょう。
これは背景でそのままですね
この右の・・・を押すと
こんな感じになりますね？
左のColorとというとこを押して、好きな色に変えてみましょう！
僕は背景と同化をさせたいので、白にします
ついでにこれも小さいので、textSizeも大きくしましょう
いかがでしょう？
こんな感じになりました？
これでデザインは出来上がりました！！！
やったね！！
でわ少し休憩してから、実際にコードを書いてこの画面に作ったビューを貼り付けて動作を与えていきましょう！
次はjavaのMainActivityにいきましょう！
ひょえ〜
びびることはないです
最初はみんなひょえ〜〜ってなって、頑張ってできるようになるのです
すべての説明をしてたら、日が暮れちゃうので、、、詳細な説明は別の回で！！
今はとりあえずできることを目指しましょう！
最初は丸暗記でも構いません
こうやって使うんだなーってなれば充分です
アプリを起動！ってした時に、このMainActivityが動き始めます
そのときに最初に動く入り口となるのが、onCreateです
こいつは動き始めたとき、つまり画面が作られたときにやらなきゃならないことをやってくれています
初めに初期化しておきたいなーってことはここに書いておくといいかもですね！！
そのonCreateの中に書かれている
setContentView(R.layout.activity_main)
ここでさっき作ったビューを板に貼り付けているということです
これで作ったビューを貼り付けてあげないとアクティビティはただの板のまんまです
でも、このままじゃ貼り付けただけに過ぎません...
アクティビティは誰が誰なのかを名前がわかりません
困りました
なので、誰がどの子なのかをIDを教えてあげましょう
最初にTextView mNumTextViewと書かれたとこに使いたい変数を書いちゃいましょう！
変数ってなんだ？？？
変数はプログラミングする上でのコード上の箱みたいなものです
ゲームソフトをあちこちにばらまいてたらやばいですよね？？
どこになにがあるのか探さないとだめです
ですが、ダンボールとか何か箱にPS4ソフトという張り紙をして、その中に入れておけば、探す手間が省けてよいです！！
なので、ここでもさっきビューでつけてあげたnumTextViewちゃんをmNumTextViewという箱にいれてあげましょう。
その前にまずは箱から作りましょう
これを変数宣言といいます
変数宣言のしかた
型名 変数名;
この型が大事です
ビューでのウィジェットと同じ型を書いてあげましょう
TextViewならTextView
ButtonならButtonという風に
変数名は箱の名前なので、何が入っているか分かりやすいものを入れてあげましょう
今回はmNumTextViewです
また、Javaは文末にセミコロン;をつけてあげないとだめです
僕達が文章に。をつけるのと同じですね。
でもまだ、箱ができただけです。
この箱に = を使っていれてあげましょう
数学では = は同じという意味です
プログラミングでは、これは代入という意味になります
ここは少しややこしいですね
代入はその箱にものを入れてあげることだと思いましょう！
例えば、ps4FF15という箱にファイナルファンタジー15をいれてあげましょう
ps4FF15 = ファイナルファンタジー15
簡単ですね？
数学と間違えないように数字でも考えてみましょう
xという箱に10をいれてみましょう
x = 10
今、xには10が入っています
もう一度同じことをしてみましょう
x = 10
確かにxには10が入っているから、イコールで等しいとなるのが数学です
ですが、プログラミングでは代入なので、xにはもう一回10が入るので、xに入っているは10です
前に入っていたのは消えてしまいます(*注意)
この辺りはしっかり勉強して慣れていきましょう！！！
でわ、onCreateの初期化のとこで、さっき作ってあげた箱の中にビューのnumTextViewちゃんを代入してみましょう
mNumTextView = (TextView) findViewById(R.id.numTextView)
できましたか？
まず、findViewById(R.id.xxxxxx)という文で、先程ビューで名前をつけてあげたパーツを探してきます。
xxxxxというとこにつけてあげた名前を書きましょう
numTextViewでしたね
これで箱に入れれた！！とはならないのです。
残念なことにfindViewByIdで取ってきたパーツはすべてViewという箱に一括りになっています。View型です
なので、こいつは誰なのかということをアクティビティに教えてあげましょう。
誰なのかを教えてあげることを型変換 = キャストといいます。
その書き方は
(型名) findViewById(R.id.xxxxx)
この型名が同じじゃないと箱には入らないということを覚えてください
PS4にWiiUのソフトやハムとかCDを入れてもなにもならないですね？
それと同じです
ちゃんと合ったものを入れてあげてください
ここでデフォルトでJavaに用意された最低限の型を紹介します
整数を扱いたいなら、intという箱
文字を扱いたいなら、Stringという箱
小数点を扱いたいなら、doubleという箱
大文字小文字に気をつけてくださいね
例えで、型宣言から代入を一気にやってみます
int i = 100
double d = 3.14
どうでしょうか？
文字だけはダブルクォーテーション""ではさんであげないとだめなので、気をつけてください
ここまでで無事にTextViewを入れるmNumTextViewという箱にビューのnumTextViewというパーツを入れることができました
つまりコードで自由にいじることができるということです
まるで神様になった気分ですね？？
次はボタンを押したときの動作を書きましょう
public void onClick名(View v) {
....................................
}
こんな感じです
さっきボタンでonClickにボタンの動作名を書きましょうと言いました。
ここでその動作にどういうことをしてほしいかを書くためだったんですねー
なので、ここにはcountUpと書きましょう。
今は文法の説明はしません。
覚えることが多すぎても頭がパンクするだけなので、ゆっくりいきましょう。
かけましたか？
でわ、ここで問題を考えてみましょう
数を数えるためには何が必要ですか？
考えてから、下に行きましょう
ヒント：数を入れるための箱と初期化
どうでしょうか？
整数をいれたいので、int型の数える数字を入れたいので、countNumという名前の箱を作ってみました。
そして、それを初期化するためにonCreateの中で0を代入しています。
ここまで分かっていたら500点です！！自信もってよいですよよよよ
分からなかった人も大丈夫です
わからなくて普通なのですから、、、
わからないなりにしっかり読んで手を動かして、学んでいきましょう！！
でわ、次は少し難しい問題です
countUpはボタンが押されたら、動き出します
ボタンを押したら、数を数えていきたいですね？
そのためにはcountNumには何を代入したらいいでしょうか？
ヒント：足し算
どうですか？
ボタンを押したら、数を数えたいので1を足します
何に対して足すか？countNumですね
countNumには0が入ってますね?
0に1を足して、1をcountNumに代入します
またボタンを押したら、1に1を足して2を新しくcountNumに代入します
ここでアプリを起動させて、ボタンを押してみましょう！！！
................
..........................
................................
まぁ何も起こらないですよ
数を数えただけにしか過ぎないので,,,,,はい
数を数えたら、それをnumTextViewちゃんにセットしてあげないとだめですね！！
セットしてあげないといつまでたってもnumTextViewは０のまんまですよ....
かわいそうですね。
なので、セットしてあげましょう！！
ここで注意したいのは、セットの仕方です
代入したらいいんじゃないの？と思って、既に
mNumTextView = countNum
と書いた方は、、、、
もうそれは
だめウーマン！！！
言いたかっただけです。。はい
少し考えてみましょう
numTextViewはTextViewという型ですね？
countNumはIntという型ですね？
そもそも型違いなので、それこそPS4にハム入れてるようなものです
じゃあ、キャストして
numTextView = (TextView) countNumにしたらいいんじゃない？
それもだめです！！！！
さっきのViewはTextViewになれたからよかったんです！
セミの幼虫がいずれセミになるから、セミの虫かごにまとめて入れちゃうのと同じです！これは許されます
ですが、PS4にフリスビーを無理やり入れようとしても無理ですね？
だって無理じゃん、、、、うん、、、わかって、、おねがい (((((
じゃあどうするんだと！！！
セットの仕方はちゃんと用意しております
我々は賢いので
おぉ。。なんだこれ....
大丈夫です
そのうちわかるようになります
今はこんな風に書くんだな～程度で
mNumTextView つまりTextViewには潜在能力的なのがあります
僕たちも生まれつき手を動かしたり、目をあけて前のものをみたりできますね？そんな感じです
TextViewも文字を表現するために生まれました
じゃあ、文字を書き換えたりする力があってもいいじゃないの！！
それがsetTextです
更にこれはメソッドといいます。
さらにさらにこれはインスタンスメソッドといいます
今はスルーしてください
そのメソッドの呼び方だけ覚えておきましょう！
その型の潜在能力を引き出すには、ドット.を使いましょう
そしたらこの先、わからない型に出会っても、こいつは何ができるのかなーってなったときにドットを打ったら、候補がずらーと出てきます
ある程度英語できないと意味は読み取れないかもしれませんが、、、それでもsetTextくらいは雰囲気でわかってください！！
分からなかったら、調べたらよいのですよおおおおお！！！
てことで
mNumTextView.setTextな
このかっこの中で行っている
String.valueOf(countNum)
おお？
なんか見覚えが、、
String(型)にドットが
じゃあ、valueOfもメソッドか〜〜
そう！！！
まあ、そもそもStringの箱用意してねえよとか
IntをStringにしても、TextView型と一致しねえじゃんかとｋ
色々言いたいことは分かりますよ、、ええ
否！！！！！！！！
そんなのまた今度だ！！！
とりあえず完成したんだから、起動させて、やったーぁぁあっぁぁっぁぁぁうごいたっぁぁっぁぁ！！！！！ポチポチポチポチ！！！！って1000000回くらいカウントしとけぃ！！！！！！！！
......
.....
どうですか？
初めて自分でアプリを、動くものを作ってみた感じは
楽しいと思いましたか？
地味だーとかもっとLineみたいなの作りたいーとかなると思う人もいると思います
プログラミングって小さいことの積み重ねなんです
このカウントアプリにはアプリ開発の基礎がたくさんつまっているので、よく読んでほしいと思います
小さいことをたくさんこなして、それをどんどん組み合わせて、大きなものを作れるようになっていきます
なので、修行だと思って、自分の好きなアプリが作れるようになってなると思って頑張ってみてください
バイバイっっ！！！！！！！！！！
