プログラミング初心者と称することさえ躊躇う、経験値0人間の学習記録です。
学習サイト
kotlinとは？
2011年に発表されたAndroidアプリ開発向けのプログラミング言語。
Kotlinで作られたアプリで有名なものとしては、『LINE』、『Yahooニュース』などがあり、Kotlinでゲーム開発なども可能です。
自分がkotlinを学習する理由は、使ってるスマホがAndroidということと、漠然とした「なんかアプリ作ってみたい」という気持ちによるもの。結構難易度は高いらしい。
何はともあれ、早速進めていきます。
Happy Birthday アプリを設定する
今回はこちらを学習していきます。
完成図
画面中央に大きく「Happy Birthday Sam!」、その右下に小さく「From Emma」と表示されています。これを作っていきます。
まずはAndroidStudioを立ち上げ、Empty Activityを選択。
Nameを『Happy Birthday』として、新規作成します。
コードがずらーっと現れました。ぶっちゃけ何が書いてるか全くわからないので、とりあえずこの状態でアプリを実行するとどうなるのか試してみます。
「Hello Android!」
テキストで挨拶してくれました。誕生日カードアプリを作成するには、この文字を変更し、サイズを変え、中央に移動させる必要があります。
上の画像はデバックモードで確認したアプリ画面になりますが、学習ではDesignモードでの画面確認となっているので、それにならって進めていきます。
[@preview]と入力することで、DesignモードでUIを確認できるようになります。
試しに[@preview]というコードを消去すると
見れなくなってしまいました。直しておきましょう。
@composable
と並んで、fun GreetingPreview()...というコードがあります。手前のfunってのはfunction(関数)の略、つまり関数GreetingPreview。プログラミングでは『関数』って単語がよく出てきますが、kotlinでは『関数』を使って、UIの外観を指定したりできるそうです。
では、このfun GreetingPreviewはどういった効果をもたらすのか。
fun GreetingPreview() のあとに、鍵括弧が続き
HappyBirthdayTheme と来て、
Greeting( name: "Android")
と記述されています。
詳しいことはわかりませんが、これはコード中盤に記述された[fun Greeting]を呼び出しているそうです。
関数Greetingは、[Hello $name!]というUIテキストを画面に表示させるものです。
なので、fun GreetingPreviewはfun Greetingの「Hello $name!」というテキストを表示させるために作られた関数なのでしょうね。なんだか回りくどいというか、理解できそうでできない感じ。とりあえず納得しましょう。
そんな「Hello $name!」と表示する為だけに存在してそうなfun Greetingですが、コードラボの指示では、その機能を説明する名前を付けるか、そのような名前に変更することをおすすめします…と書かれています。
表示するテキストが「Hello $name!」のままだったら関数の名前を変更する必要はありませんが、今回は「Happy Birthday Sam!」というお誕生日を祝うテキストを表示させたい。そうなると、それは挨拶じゃないよねってことで[fun Greeting]を改名し、[fun BirthdayCardPreview]と名付けてあげましょうという話になります。
この改名が何を意味するかというと、コードを見返したときに「この関数はこういう機能を持っているんだな」ということが推測しやすくなります。任意の名前を付けているだけなので、ルールの上で名付けるのであれば何でもいいんだと思います。
次は、画面上に表示されているテキストを変更してみましょう。
Greeting( "Android")、この括弧内の文字を書き換えてみましょう。
"AAAA"と書いてみます。緑の波線が出てるけど気にしない。
Design
反映されました。いい感じですね。
ちなみに緑の波線の文字にマウスを当てるとメッセージが出てきます。
タイポ…要は「タイプミスしてるかも」ってことで注意してくれてます。今度は名前っぽい"James"という単語にしてみます。
波線も消えました。
新しいテキスト要素を追加する
Hello $name!のメッセージを消去して誕生日祝いのメッセージを追加してみましょう。
まずはこの部分を消去します。
残ったコード
Greeting関数をまるごと消したので、その他のGreetingが赤文字になりました。エラーになってしまうので、Greeting()を消去します。
Greeting関数の代わりとなる新しい関数を書き加える必要があります。BirthdayCardPreview関数の手前にコードを書き込む。
プレビューさせるために、BirthdayCardPreview関数内でGreetingTextを呼び出す。
designモード
メッセージを表示させることに成功しました。ただこれはプレビュー上の表示であり、実際にアプリ上で表示される状態にはなっていないので、そういう設定などを次回やっていこうと思います。
