アニメーションで遊びたい
こんにちは、こんばんわ！！！！！！！
ぐみおです
こちら、サークル用のネタ記事投稿です
皆さん、アニメーション使ってますか...?
僕も最近ぬるぬるしたアニメーションを使ってみたいなーと思ったりしてるわけです
僕はAndroidな人間なので、Androidのアニメーションを見ていこうと思います！！！！！
まず公式から、どんなAnimationがあるのか見よう
https://developer.android.com/guide/topics/graphics/overview.htmldeveloper.android.com
Property Animation
- API level 11 以降で使えるっぽい(つよい)
- View 以外のオブジェクトにも適用できる(つよい)
後述するView AnimationはViewにしか適用できないのですが、こちらは任意のオブジェクトに対して、アニメーションできるっぽい(つよい)
今回はその中の１つの楽にアニメーションを提供してくれるObjectAnimatorを使ってみよう！！
動作が分かりやすいようにrepeatCountを-1に設定して繰り返させてます！
基本構文はこんな感じです
ObjectAnimator.ofFloat(targetObject, "propName", 1f)
でわ、動作を見ていきましょう！！
translationX
// X軸にふぃ〜って動かすよ private fun animateTranslation(img: ImageView) { val objectAnimator = ObjectAnimator.ofFloat(img, "translationX", 1000f) objectAnimator.duration = 2000 objectAnimator.repeatCount = -1 objectAnimator.start() }
translationY
// Y軸ににふぃ〜って動かすよ private fun animateTranslationY(img: ImageView) { val objectAnimator = ObjectAnimator.ofFloat(img, "translationY", 1000f) objectAnimator.duration = 2000 objectAnimator.repeatCount = -1 objectAnimator.start() }
同じImageViewに対して、上記２つを適用してあげたら斜め移動も可能ですね！
rotaion
// Z軸周りに回転させるよ private fun animateRotation(img: ImageView) { val objectAnimator = ObjectAnimator.ofFloat(img, "rotation", 1000f) objectAnimator.duration = 2000 objectAnimator.repeatCount = -1 objectAnimator.start() }
rotaionX
// X軸周りに回転させるよ private fun animateRotationX(img: ImageView) { val objectAnimator = ObjectAnimator.ofFloat(img, "rotationX", 1000f) objectAnimator.duration = 2000 objectAnimator.repeatCount = -1 objectAnimator.start() }
rotaionY
// Y軸周りに回転させるよ private fun animateRotationY(img: ImageView) { val objectAnimator = ObjectAnimator.ofFloat(img, "rotationY", 1000f) objectAnimator.duration = 2000 objectAnimator.repeatCount = -1 objectAnimator.start() }
scaleX
// X軸に拡大させるよ private fun animateRotationY(img: ImageView) { val objectAnimator = ObjectAnimator.ofFloat(img, "rotationY", 2f) objectAnimator.duration = 2000 objectAnimator.repeatCount = -1 objectAnimator.start() }
scaleY
// Y方向に拡大 private fun animateScaleY(img: ImageView) { val objectAnimator = ObjectAnimator.ofFloat(img, "scaleY", 2f) objectAnimator.duration = 2000 objectAnimator.repeatCount = -1 objectAnimator.start() }
alpha
// 透過させるよ private fun animateAlpha(img: ImageView) { val objectAnimator = ObjectAnimator.ofFloat(img, "alpha", 1f, 0f) objectAnimator.duration = 2000 objectAnimator.repeatCount = -1 objectAnimator.start() }
AnimatorSet
複数のアニメーションを同時に動かしたいときにグルーピングして扱ってくれます
今回僕はデータバインディングを使っているので気をつけてください！
class MainActivity : AppCompatActivity() { lateinit var mBinding: ActivityMainBinding private var isReversed: Boolean? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) mBinding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main) mBinding.card.tag = false mBinding.card.setOnClickListener { reverseCard(mBinding.card, 1.0f, 0.0f, 1.0f, 1.0f) isReversed = true } } private fun reverseCard(img: ImageView, vararg rotate: Float) { val scaleX = ObjectAnimator.ofFloat(img, "scaleX", rotate[0], rotate[1]) val scaleY = ObjectAnimator.ofFloat(img, "scaleY", rotate[2], rotate[3]) val animatorSet = AnimatorSet() animatorSet.interpolator = LinearInterpolator() animatorSet.playTogether(scaleX, scaleY) animatorSet.duration = 300 animatorSet.addListener(object : Animator.AnimatorListener { override fun onAnimationEnd(p0: Animator?) { if (!isReversed!!) return val isChanged = img.tag as Boolean if (!isChanged) { img.setImageResource(R.drawable.x02) } else { img.setImageResource(R.drawable.z01) } img.tag = !isChanged reverseCard(img, 0.0f, 1.0f, 1.0f, 1.0f) isReversed = false } override fun onAnimationRepeat(p0: Animator?) {} override fun onAnimationCancel(p0: Animator?) {} override fun onAnimationStart(p0: Animator?) {} }) animatorSet.start() isReversed = false } }
これだけでトランプ系のアプリが作れる可能性を感じますね！！！
ただ、scaleだと躍動感感じないのでrotateをうまく使った方がいいかもなので、また考えてみます〜〜！
今回は省略しますが、他にもキーフレームとかも弄れたりするので、ほんとにこれだけでアニメーションマスターになれそうな勢いですな〜！？
実はxmlでも書けるけど、複雑な処理はコードのが楽だと思うよ！
View Animation
- なんと、、、Androidのバージョンに制限がない！！どこでも使えるすごい
- 簡単に使える
- さっきのPropertyAnimationを使う程こだわらない！って場合はこれでささっとつくっちゃいましょう〜！
こっちは手軽にアニメーションを〜って感じなので、xmlで書く方が推奨っぽい！
初めにアニメーション専用のanimフォルダーをres配下に作りましょう！
animフォルダーを右クリックしたら不思議ですねー！
NewのところにAnimation resource fileという項目があるので、そこで作りましょうー！
こんな感じでトップルートはsetタグで始まり、アニメーションさせたい種類のタグをネストさせて、値を設定してあげるだけでおっけーです！
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator" android:fromDegrees="0.0" android:toDegrees="360.0" android:pivotX="322" android:pivotY="322" android:fillAfter="true" android:duration="1000" android:repeatCount="infinite"/> </set>
な、なんて楽ちんだ.......
今回は回転アニメーションで、0から360度をx軸y軸共に322の位置を軸に1秒かけて永遠に回るって感じです！
使うタグも少なくてシンプル
- alpha ->透明度
- scale -> 拡大or縮小
- translate -> 位置変更
- rotate -> 回転
- interpolator -> 緩急をつけてくれる
- set -> グルーピング
じゃあ、xmlファイルができたら後はviewに対して適用してあげるだけです！
今回僕はデータバインディングを使っているので気をつけてください！
val anim1 = AnimationUtils.loadAnimation(this, R.anim.set_animate) mBinding.imageView1.startAnimation(anim1)
うおお〜〜
すごくシンプルにできましたね！
Drawable Animation
これはdrawableリソースを次々と表示する機能です！
パラパラ漫画なんだなーと思えばよいかと！
今度はdrawable配下にルートタグanimation-listでリソースファイルを作ることに注意してください！animフォルダじゃないですよ！
れっつごー
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" android:visible="true"> <item android:drawable="@drawable/gumi_free" android:duration="50" /> <item android:drawable="@drawable/gumi_free1" android:duration="50" /> <item android:drawable="@drawable/gumi_free2" android:duration="50" /> <item android:drawable="@drawable/gumi_free3" android:duration="50" /> </animation-list>
アニメーションリソースはgumiちゃんを90度ずつ回転させた画像を4つ用意しました！
ここで見覚えがないのは、oneshotでしょうか？
android:oneshotはfalseならリピートでtrueなら１回のみで終わります！
mBinding.imageView1.setBackgroundResource(R.drawable.drawable_animation) val frameAnimation = mBinding.imageView1.background as AnimationDrawable frameAnimation.start()
うむ.....いい感じにくるくるしてるwww
(これは個人的に使う機会なさそうだなぁ）
Physics-based Animations
- 上記の3つよりも一番新しい！！(2017年3月に追加されたっぽい)
- 今までのアニメーションってやっぱり現実離れしてるよねー
- これは物理ベースを盛り込んでいるから、より自然に見せれる！(つよい)
これは少し難しかったので、もう少し勉強しながら更新していこうと思います...(申し訳)
これに関してはここを見て、こんな感じのものなんだなーということさえ、掴んでいただければと...!!!
qiita.com
Lotties
さて、今までざっとアニメーションを色々見てきたわけですが、なんか違うんですよね。。。
僕が求めていたものと違う...!!!!!
うーむとなりながらも色々探し、ようやく見つけました！
airbnb.design
- airbnbの神ライブラリ
- After Effectsで作成したアニメーションをjsonに変換して読み込む
- 誰でもハイクオリティなアニメーション再現が可能(らしい)
- Android, iOS, React Nativeに対応している
これは楽しみ...!!!
れつごー
導入
dependencies {
compile 'com.airbnb.android:lottie:2.3.0'
}main配下にassetsフォルダーを作成して、そこにjsonファイルをぶち込む
ちなみにアニメーションのjsonファイルの作り方はAfter Effectsにbodymovinというものを導入して、うんやかんやせなあかんらしい...(わからん)
でも大丈夫！！！！！
www.lottiefiles.com
色んなアニメーションがjsonで配られている専用サイトがありました！！！！
ここで試してみよう
<?xml version="1.0" encoding="utf-8"?> <layout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> <RelativeLayout android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.gumio_inf.lottiesample.MainActivity"> <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="ImThirsty.json" app:lottie_loop="true" app:lottie_autoPlay="true" /> </RelativeLayout> </layout>
コード何も書いてないです
xmlのapp:lottie_fileNameのとこにjsonファイル指定しただけです
実行してみましょう！
ぎゃあああああああああああああああああああ
これです！！！！！この滑らかにアイコンがウニョウニョするのを求めていた！！！！
普通にImageViewと同じような感じで使えるっぽい(すごい)
でも配布されているやつじゃなくて、自分で何か作りたい....
そんな人はbodymovin頑張ってください..(学習コスト高そう)
と思っているときに何やら気になる話が...github.com
これは。。。。
SVGアニメーションアイコンを作ることが可能っぽい...??
つい先月くらいに日本の方が海外のカンファレンスに行っている時に反応していたのを見かけた情報です
まだまだ新しい情報で使い方が全くわからん...と思ったら
最高かよ！！！！！！！！！
つい昨日じゃないですか！
また近々、Physics Based Animationと共に触ってみようと思います
最近のアニメーションはしゅごい....(小並感)
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みたいなの作りたいーとかなると思う人もいると思います
プログラミングって小さいことの積み重ねなんです
このカウントアプリにはアプリ開発の基礎がたくさんつまっているので、よく読んでほしいと思います
小さいことをたくさんこなして、それをどんどん組み合わせて、大きなものを作れるようになっていきます
なので、修行だと思って、自分の好きなアプリが作れるようになってなると思って頑張ってみてください
バイバイっっ！！！！！！！！！！
Androidアプリ開発はじめませんか？[ その１ ] ~ 環境構築からHelloWorld ~
明日からクリスマスですね〜
皆さんはどうお過ごして？
僕は２日間とも、もちろん、、、、
ラーメン食べてきます
ラーメンExpoっていうね、大きなイベントが大阪万博でやってるんですよ。
興味ない？Androidの話をしろ？
このblogはラーメンも超重要ですからね！！！
[Android開発 その１ 環境構築しよう]
初回はやっぱり、環境構築しないと何も始まらんぞい
自分スマホとかそんなん持ってないっす。って人も大丈夫だから、とりあえず読むんだ
Windowsの人は、ちゃんと自分のPCが32bitか64bitなのかを確認してくださいね？
自分のPCが何者なのかわからない方
あまりにAndroid開発がしたくてここに来た方
そのPC、、ドンキとかでかったやつじゃないですよね？？
これから始めようとか、PCどうしようか悩んでいる人
とりあえず、いいのを買っときな
いやぁ、ほんとこれなんですよ
後々、後悔してくるからね？
せめて、このくらいを目安に用意しときなってやつです
以下AndroidStudio公式より
[Windows 推奨スペック]
- Microsoft® Windows® 7/8/10（32- or 64-bit）
- 3 GB 以上のシステム メモリ（RAM）、8 GB 以上を推奨
- 2 GB 以上の空きディスク スペース、
4 GB 以上を推奨（IDE に 500 MB、Android SDK とエミュレータのシステム イメージに 1.5 GB） - 1280 x 800 以上の画面解像度
- エミュレータ アクセラレータ向け: 64 ビットの OS、Intel® VT-x、Intel® EM64T（Intel® 64）、Execute Disable（XD）ビット機能対応の Intel® プロセッサ
[Mac 推奨スペック]
- Mac® OS X® 10.10 (Yosemite) 以降 10.12 (macOS Sierra) まで
- 3 GB 以上のシステム メモリ（RAM）、8 GB 以上を推奨
- 2 GB 以上の空きディスク スペース、
4 GB 以上を推奨（IDE に 500 MB、Android SDK とエミュレータのシステム イメージに 1.5 GB） - 1280 x 800 以上の画面解像度
[Linux 推奨スペック]
- GNOME または KDE デスクトップ
Ubuntu® 12.04、Precise Pangolin （32-bit 版アプリケーションを実行可能な 64-bit 版）でテスト済み
- 32-bit 版アプリケーションを実行可能な 64-bit 版
- GNU C Library （glibc） 2.11 以降
- 3 GB 以上のシステム メモリ（RAM）、8 GB 以上を推奨
- 2 GB 以上の空きディスク スペース、
4 GB 以上を推奨（IDE に 500 MB、Android SDK とエミュレータのシステム イメージに 1.5 GB） - 1280 x 800 以上の画面解像度
- エミュレータ アクセラレータ向け: Intel® VT-x、Intel® EM64T（Intel® 64）、Execute Disable（XD）ビット機能対応の Intel® プロセッサ、AMD Virtualization™（AMD-V™）対応の AMD プロセッサ
さぁ、ここからはダウンロード祭りだわっしょいしょい
とりあえず必要なのは、JDK！とAndroidStudio！
スマホ持ってない方はVirtualBox！とGenymotion！
自分のOSだけ間違えないようにね
JDKに関しては、
Java SE Development Kit 8u111かJava SE Development Kit 8u112をダウンロードしたらよいと思います。(2016年12月23日現在)
あのぅ、、、自分32bitなんすけど、、、って人
それはx86だ
Genymotionに関しては、アカウント登録しないとダウンロードできないから気をつけてね。
Let's Download
-------------------この下はスマホを持ってない方---------------------
OK?????????
Windowsの人はJDKをダウンロードした時に環境変数というのを設定しなければならないのだよ(無念)
すっごくわかりやすいので、参考にしてね
次はAndroidStudio
公式より
https://developer.android.com/studio/install.html?hl=ja
VirtualBoxとGenymotionに関しては
すごく分かりやすい解説をしてくれている先人達がいるのだから、それを利用しないわけにはいかなry
用意と設定できたかな？
環境構築はまだまだ続くよ
でもひとまず、次の段階に進むためにプログラミングではおなじみのあれをしときましょう
これは定番です
新しく何かを始めたら、はじめましてをしないとだめですね？？？
はい、以下参照
次は端末にアプリを入れるための設定をしていきます
[Androidスマートフォンを持っているよ向け]
Macの人は繋ぐだけで使えます!!
Windowsの方は、USB Driverが必要になりますので、以下２つを参照
[Androidスマートフォンを持ってないよ向け]
ここで大活躍Genymotionですよよよよよ
最初のインストールは済んでるはずなので、飛ばしていただいて、AndroidStudioとGenymotionの連携の仕方だけを参考にしてください
Macとか書いてますけど、Windowsもアプリのパスが変わるだけで、ほとんど同じです。
これで、PC上にスマホが表示されてアプリ開発が可能になるはず
なんだかできないぞ？？
うまくいかないぞ？？
ってかたは、こちらの最後に書いている設定をしましょう
大変でしたか？
どのプログラミングでも、環境構築が一番の難関です！
最初を頑張れば、あとは遊びまくるだけです！！！
ここまで出来た人は、実機にorエミュレータにHello Worldアプリをインストールさせてみましょう
そして、ここまで出来た自分を褒めましょう
そして、ひたすらにやけましょう(うへへ
今回は開発の準備がメインなので、ここまでです！
お疲れ様でした！
次回からはゆる〜くアプリ開発していきます〜〜
ばいばいっ！！！！！！
はじめましてからはじめよう!!
はじめましておはようこんにちはこんばんわ(????)皆さん
ずっとblogやってみたいなーとか思ってたので、始めちゃいました
最初の投稿は自分のことを知ってもらうのがいいのかなーとか思ったので、自己紹介で
とある情報の専門学校に通っている学生です
周りからはおじさんと呼ばれたりしてます.....
ボーカロイドのGUMIがだいすきなおじさんで、
ぐみおです
。。。。。。。。。。。。。。。
はい。覚えてもらわなくて結構です((((
ゆる〜い感じで、twitterする感覚で文を書いています
そんなんだけど、許してください。
でも、改めて自分のメモ的な感覚と、ただの日記程度にblogを使おうかなーと思います。
基本はAndroid~~な記事をかけるといいなとか思います。
Android~~な人とお知り合いにもなりたいです。
Android~~でAndroid~~なAndroid~~~うお〜〜〜
はい。
あ、あと自分ラーメン大好きすぎてやばいです。ラーメンマンです
突然のまとめ
これで僕のことは完璧ですね!!!!
でわ、次回からは普通に更新しまーす
ばいばいっ！！！！！！！！！
