Kotlin de Android
第2回はHello worldのときのアプリより、もう少しだけアプリっぽいものにしてみたいと思います。

ドットインストールさんのAndroidアプリ開発のレッスンにも同様のものがあるのですが、
それをKotlinで書き換えてみました。

完成するとこのようなアプリになります。

kotlin_omikuji_01_1.png

占うボタンを押すとランダムでおみくじの結果が表示されて、

kotlin_omikuji_01_2.png

大吉のときは文字が赤くなります

というわけで、早速作っていきましょう♪

もくじ

1. プロジェクトを作ろう
2. 画面を作ろう
3. おみくじを表示させてみよう
4. 文字の色を変えてみよう
5. アプリのスタイルを変えてみよう
6. 動作確認してみよう

1. プロジェクトを作ろう

第1回の4. JavaをKotlinにしようまでを参考にしてプロジェクトの作成とKotlinの設定を行なってください。

プロジェクトの Application Name は「FortuneApp」にしました。

2. 画面を作ろう

では、activity_main.xmlを開いて、画面を作っていきましょう。

部品を追加しよう

今回はTextViewが2つ、Buttonが1つ必要になります。
TextViewは最初から配置されているものがあるので、ひとつはそれを使っていきましょう。
もうひとつのTextView、最初から配置されているTextViewの上に、
ButtonはTextViewの下に配置します。

ざっと配置するとこんな感じになります。

kotlin_omikuji_05.png

部品の設定しよう

まずはそれぞれの部品にIDをつけていきましょう。
プログラムからアクセスするのは真ん中のViewだけなのですが、このあとの説明もしやすいので全部の部品にIDをつけておきましょう

view ID
上のTextView titleText
真ん中のTextView resultText
Button fortuneButton

次にそれぞれの部品の text を変えていきましょう。
直接変えてもいいのですが、strings.xmlを使うことが推奨されているので、そうしておきましょう。
strings.xmlを直接編集してもいいですが、前回同様に設定画面が用意されているのでそちらを使っていきましょう。
部品を選んで、Properties の中になる text の「…」 ボタンをクリックします。

kotlin_omikuji_02.png

Resourceの設定画面になるので、右上の「Add new resource」をクリックして、新しいStringを追加します。

それぞれの部品は以下のように設定しましょう。

view Resource name Resource value
titleText title_text あなたの運勢は
resultText default_text
fortuneButton button_text 占う

それから、resultTextはフォントサイズを変更しましょう。
Propertiesの一番下にある、「View all properties」をクリックして、全てのプロパティを表示します。
textSizeを探してあげて、▼をクリックして、「36sp」を選択してください。

部品の位置を設定しよう

部品の位置はLayoutEditorで設定してきましょう。

resultTextは最初から中央揃えになっているので、それはそのままにしておきます。
titleTextの下端とresultTextの上端を接続します。
fortuneButtonの上端とresultTextの下端を接続します。
titleTextとfortuneButtonはそれぞれ左右の両端を親ビューの両端に接続して、中央揃えになるようにします。
それから、resultTextまでの距離をpropertiesの上の方にあるマージンの設定画面から24dpに変更します。

と、、、文字で書くとわかりにくいので、操作しているところを動画にしました。

わかりますかね…。これもわかりにくい気もしますが(汗)

ひとまずこれで画面は完成です。

スポンサーリンク

3. おみくじを表示させてみよう

さて、いよいよプログラムを書いていきましょう!

メソッドを作ろう

まずはfortuneButtonがクリックされたときの処理を書くメソッドを書いていきましょう。
先にfortuneButtonの設定からやっておきます。

activity_main.xml を開いて、fortuneButtonを選択します。
properties の onClick に「getFortune」と入力しておきます。

MainActivity.kt を開きましょう。
onCreate()の下の方にメソッドを作っていきます。引数でViewを取るようにする必要があるので忘れずに。

乱数を生成してみよう

まずは乱数を生成して、乱数を表示してみます。

Kotlinに乱数の生成する機能はないので、java.utilを使っていきます。
と言っても簡単でJavaと同じように使ってあげればOKです。

このようなソースになります。
まず、Random().nextInt(10) とすると、10個(0〜9)の整数の乱数を取得することができます。

それから、result_textに表示してあげればOKですね。
kotlin-extensionsを使うように設定されているはずなので、
findViewById()をすることなく、result_textというIDは変数として扱うことができます。
resultTextのtextプロパティに値を代入してあげればいいのですが、randomは整数値なので、toString()として文字列に変換する必要があります。

これで、fortuneButtonを押すごとに乱数が表示されるようになったはずなので、エミュレータで確認してみましょう。

kotlin_omikuji_07.png

fortuneButtonを押すたびに0〜9までの数値がランダムに表示されればOKです。

おみくじを表示しよう

乱数が生成できたので、大吉とか吉とかおみくじの結果が表示されるようにしましょう。

listOf()で文字列のリストを生成します。

Random().nextInt()の引数はresultsの要素数にしてあげます。

resultsのrandom番目を表示さればいいので、results[random]resultText.textに入れてあげればOKですね。

では、ここまでできたら、エミュレータで確認してみましょう。

kotlin_omikuji_08.png

大吉や小吉などがランダムに表示されればOKです。

4. 文字の色を変えてみよう

ここままででおみくじの機能としてはできているのですが、少しだけ見た目を変えてみましょう。

今回は大吉のときだけ文字色を赤にしてみましょう。

getFortune()の最後に以下の処理を追加します。

大吉のときというのは、random が 0 のときなので、そのときは文字色を赤にして、
それ以外のときは黒にする、という処理になります。

文字色を変えるのは、setTextColor()を使ってあげればOKです。
引数には色を指定するのですが、今回はあらかじめ用意されているColor.REDとColor.BLACKを使いましたが、
任意の色を指定することももちろんできます。
Color.argb(0xff, 0xff, 0xa5, 0x00)とすると、透過率とRGBで色を作ることが可能です。
16進数で書いてますが、もちろん10進数で書いてもOKです。ちなみにこれだとオレンジに色になるはずです。

5. アプリのスタイルを変えてみよう

基本的にはKotlinでの書き方に特化したいので、スタイルの変更方法などはあまり扱わない予定ですが、ほんのちょっとだけ修正してみたいと思います。

画面上部のナビゲーションバーの部分に表示されている「FortuneApp」というタイトルですが
初期値だとプロジェクト名になっています。

サンプルアプリなのでこのままでも問題ないのですが、もう少しわかりやすいタイトルに変えてみましょう。

このタイトルの設定がどこにされているかというと「AndroidManifest.xml」に設定されているので、ますはマニフェストファイルを開きましょう。
(app > manifests > AndroidManifest.xml)

<application>タグの中にあるandroid:labelに指定されている文字列が、タイトルとして表示されているものになります。

@string/app_nameというのが設定されていますが、これはstrings.xmlで設定してあるapp_nameの文字列を使う、という意味になります。

なので、このapp_nameの内容を変えてあげればOKです。

では、strings.xmlを開きましょう。
(app > res > values > strings.xml)

以下の部分を、

下記のように変更してあげます。

こうすると、activity_main.xmlでも変更が確認できるので見てみるといいでしょう。

それからこのstrings.xmlにはactivity_main.xmlから指定したTextViewやButtonのテキストも追加されているのがわかりますね。
あとから文言を変更したい場合はここから修正してあげればOKです。

6. 動作確認をしてみよう

さて、これで一通り実装できたので、エミュレータで動作確認をしていきましょう。

kotlin_omikuji_01_2.png

冒頭の画像と一緒ですが、ボタンを押すたびにおみくじの結果がランダムに表示されて、大吉のときだけ文字が赤色になればOKです。

至って簡単なアプリではありますが、Kotlinでの書き方の参考にでもなればいいなと思います。

今回作成したアプリのソースコード一式はGithubに公開していますので、合わせてご参照ください。

さて、次回は画面遷移あたりをやれたらいいかな、と思ってます!

以前、お仕事で少しだけKotlinを扱うことがあり、せっかくなのでなにか作りたいなぁと思っていました。

Kotlinの第一印象。
ことりん。名前がかわいい(笑)

Kotlin、ちょっと触ってみたあとの印象
Swiftに似てるなー。書きやすそう。

Kotlinが2011年頃、Swift 2014年なので、SwiftがKotlinに似てるのかもしれませんが、
私は先にSwiftを触っていたのでそう思いました。

それと、Javaより断然書きやすそうだなーと思いました。
Javaもいいんですけどね、いろいろ面倒なことも多いじゃないですか。
そのあたりをゆるっと包み込んでくれている感じがしました。

Kotlinの利用用途はやはりAndroidアプリ開発なのかなーとごく簡単なアプリを作ってみたんです。公開はしていませんが。
そしたら、なんとなくサクサク作れた気がしたのですよね。
うーん、やっぱりKotlinいいのでは! と思っています。
業務レベルのアプリではないのでわかりませんが、これから簡単なアプリをいろいろ作って試していけたらいいなーと思います。

なので、まずはやっぱりHello worldからですよねw

といっても、まずはAndriodStudioでKotlinを使う方法がメインになります。
前置きが長くなってしまいましたが、とにかくやってみましょう。

今回作成するアプリのソースコード一式はGithubに公開していますので、合わせてご参照ください。

もくじ

1. 開発環境
2. まずはKotlinを使えるようにしよう
3. プロジェクトを作ろう
4. JavaをKotlinにしよう
5. いよいよ、Hello World
6. Kotlinプログラムを書いてみよう
7. 動作確認してみよう

1. 開発環境

今回の開発環境は以下の通りです。

  • AndroidStudio 2.3
  • Kotlin
  • Java 1.8
  • macOS Sierra (10.12.3)

バージョンが変わるとエラーが出たり動かなくなったりするかもしれませんが、
エラーメッセージをよく読んで指示に従ったり、検索などして調べてみてくださいませ。

AndroidStudio と Java はすでにインストールされている前提で進めますのでご了承ください。

2. まずはKotlinを使えるようにしよう

AndroidStudioを立ち上げるとこのようなメニューが表示されるので、画面下の方にある「Configure」をクリックして、
(この画面が表示されていない場合は、AndroidStudioメニューのPreferencesを開いて、Pluginsを選択してください)

Kotlin de Android 最初はやっぱりHello world

「Plugins」を選択します。

Kotlin de Android 最初はやっぱりHello world

そうすると、プラグインの設定画面が表示されるので、下の方にある「Install JetBrains Plugin…」をクリックします。

Kotlin de Android 最初はやっぱりHello world

JetBrains社が提供しているプラグインの一覧が表示されるので、上の方にある検索ボックスで kotlin を検索してあげます。
検索結果から、「Kotlin」をインストールします。
項目を選択すると、右側のエリアに「Install」ボタンが表示されるので、それをクリックすればインストールされます。

Kotlin de Android 最初はやっぱりHello world

インストールが終わると、インストールボタンが「Restart Android Studio」に変わるので、それをクリックして、AndroidStudioを再起動してあげましょう。

Kotlin de Android 最初はやっぱりHello world

これでKotlinを使う準備ができました。

3. プロジェクトを作ろう

Kotlinを使う準備ができたので、なにはともあれ、プロジェクトを作りましょう。
といっても、プロジェクトを作るときはJavaで作るときと同じなので、読み飛ばしても大丈夫です。

再起動するとWelcome画面が表示されていると思うので、「Start a new Android Studio project」をクリックします。

Kotlin de Android 最初はやっぱりHello world

では、プロジェクトを作っていきましょう。

Kotlin de Android 最初はやっぱりHello world

「Application Name」は「HelloApp」にしました。お好きなものにしてくださいませ。
「Company Domain」は適当なものを指定してください。
「Project Location」は保存場所になるのでデフォルトの場所で大丈夫だと思います。
設定できたら、「Next」をクリックしましょう。

Kotlin de Android 最初はやっぱりHello world

ターゲットデバイスは今回は「Phone and Tablet」にチェックをします。

この画面ではターゲットOSのバージョンを決めるのですが、現状のシェア率を考えてAPI16以降にしています。
各OSがどの程度シェアがあるのかは、「Help me choose」から確認できるので、そちらも参考にしてみてください。

設定できたら「Next」で次に進みましょう。

Kotlin de Android 最初はやっぱりHello world

この画面ではプロジェクトのテンプレートを決めます。
今回は単純に「Hello world」を表示したいだけなので、一番シンプルな「Empty Activity」にしましょう。
では、「Next」で進みましょう。

Kotlin de Android 最初はやっぱりHello world

この画面では作成されるActivityやLayoutの名前を決めることができますが、今回はこのままでOKでしょう。
「Finish」をクリックしましょう。

色々ごにょごにょとプロジェクトを作成してくれるので、しばしお待ちを…。

Kotlin de Android 最初はやっぱりHello world

プロジェクトが無事作成されると、こちらの画面になります。

4. JavaをKotlinにしよう

作成されたプロジェクトを見てみると、MainActivity.javaが作成されているのわかると思います。
この段階ではまだ普通のJavaのプロジェクトなのです。
ここから、Kotlinのソースが扱えるように設定をしていきます。

MainActivity.javaのファイルが開かれている状態で、Command+Shift+A を押します。
そうすると、Action検索というものが出来るようになります。
膨大にあるメニューを探し出すのが大変なときに、この画面が便利で、Kotlinと検索すると
Kotlinに関係する設定などを検索することができます。

Kotlin de Android 最初はやっぱりHello world

「Kotlin」で検索するとこのような状態になるので、この中から、「Convert Java File to Kotlin File」をクリックします。

Kotlin de Android 最初はやっぱりHello world

そうすると、このようにJavaのソースコードをKotlinのソースコードに変換してくれます。
このスクリーンショットではわからないのですが、ファイル名もMainActivity.java が MainActivity.kt に変わっています。
Kotlinファイルの拡張子は .kt になります。

次に、このプロジェクトでKotlinを扱うための設定をします。

Kotlin de Android 最初はやっぱりHello world

また、Command+Shift+A でAction検索を起動し、kotlin を検索します。
今度は「Configure Kotlin in Project」を選択します。

Kotlin de Android 最初はやっぱりHello world

このような設定画面が表示されるので、画面のように設定します。
app内の全てのモジュールでkotlinファイルが使えるようになります。
最後のKotlinのコンパイラバージョンですが、任意のものでOKです。現時点での最新にしてあります。
設定が終わったら「OK」をクリックします。

Kotlin de Android 最初はやっぱりHello world

プロジェクトを同期するようにメッセージが表示されるので、画面上部の「Sync now」をクリックします。

Kotlin de Android 最初はやっぱりHello world

そうすると、更に設定が必要という言われるので、メッセージの青文字のリンク部分をクリックします。

Kotlin de Android 最初はやっぱりHello world

先程と同じような画面ですが、こちらはGradleの設定を更新してくれるようです。
こちらもAll Modules を選択して、Kotlinのバージョンは先程の設定を合わせるようにしておきましょう。
設定をしたら「OK」をクリックします。

最後にKotlinの拡張機能を使えるようにしておきましょう。
appフォルダの下にあるほうの「build.gradle」を開いてください。build.gradle(Module:app)を表示されているほうです。

このファイルの冒頭に apply plugin ... という記述がありますが、その下に

という設定を追加してください。
あとで少し説明しますが、Android特有のプログラムを少し楽に記述できるようになります。

これで、Kotlinを使うことが出来るようになりました。

5. いよいよ、Hello World

と言っても、このままでHello World と表示されるようになっていたりします(笑)

プロジェクトを作成した時点で、activity_main.xml というファイルが開かれていると思うので、タブをクリックして表示します。
もし開かれていない場合は、左側のファイル一覧から、app > res > layout にあると思うので、そちらから開いてください。

Kotlin de Android 最初はやっぱりHello world

すっごくわかりにくいですが、画面の中央にTextViewがあって、そこの「Hello world」と表示されています。

このままでもいいのですが、ボタンも配置して、ボタンをタップしたら文字が変わる、というようにしてみましょう。

TextViewの設定をしよう

まずは最初から配置されているTextViewの設定を少し変えてみましょう。

プレビュー画面の右側にPropertiesがいろいろ表示されていますが、その一番上に ID というのがあると思います。

Kotlin de Android 最初はやっぱりHello world

ここを「text_view」としてあげます。 名前は任意で構いません。
IDを設定しておくとソースから扱えるようになります。

次にTextViewに表示されている内容を少し修正しましょう。

Kotlin de Android 最初はやっぱりHello world

Propertiesの下の方に行くと、「Text」という項目があります。
ここに、現在表示されている「Hello world!」という文字列が設定されています。
このままでもいいのですが、文字列はStrings.xmlで設定しておくことが推奨されているので、そちらを使うようにしましょう。

Strings.xmlに記述してもいいのですが、便利な設定画面が用意されているのでそちらからやっていきましょう。
テキストボックスの横に表示されている「…」ボタンをクリックします。

Kotlin de Android 最初はやっぱりHello world

このような画面が表示されるのですが、これはstrings.xmlやvalue.xmlに書かれている設定が表示されていて、そこから選択することができるようになっています。

ただ、Hello world!という文字列は設定されていないので、新しく追加してあげる必要があります。
この画面の右上にあり「Add new resource」をクリックしてください。

Kotlin de Android 最初はやっぱりHello world

そうすると、このような画面が表示されます。
Resource name には適当な名前を、Resource value には「Hello world!」を入力してください。
Source set は mainに、File name は今回は文字列なのでstrings.xmlになっているのを確認して、「OK」をクリックします。

Kotlin de Android 最初はやっぱりHello world

このようにTextにstrings.xmlの値が設定されます。
見た目は変わらないのでよくわかりにくいですが…。
多言語対応などするときにも便利なので、基本的に文字列はstrings.xmlを使うように習慣づけておくといいと思います。

もう少しTextViewの設定をやってあげましょう。文字を大きくしてあげましょう。
Propertiesの下の方に行くと「View all properties」というのがあるのでクリックすると、全てのプロパティが表示されます。
この中に「textSize」というのがあるので、探してください。

Kotlin de Android 最初はやっぱりHello world

▼をクリックするとあらかじめ設定されている文字サイズを選ぶこともできますし、直接数値を入力することもできます。
今回は30spを設定しておきましょう。
Hello world! の文字が大きくなったのがわかるはずです。

Buttonを追加しよう

さて、次はButtonを追加してみましょう。

Kotlin de Android 最初はやっぱりHello world

プレビュー画面の左側にあるPaletteからButtonを探します。
Widgets の中にあると思いますので、見つかったらButtonをドラッグして、TextViewの下のほうにドロップしてあげます。

Kotlin de Android 最初はやっぱりHello world

Buttonをタップしたときに呼ばれるメソッド名をonClickに設定します。
今回は 「changeText」 としました。
メソッド自体はあとで作るのでとりあえずここはこのようにしておきましょう。

次に位置の調整をしましょう。AndroidStudio2.3から新しく追加されたLayoutEditorを使っていきましょう。
詳しい説明は省きますが、XcodeのAutoLayoutみたいな感じですかね。

Kotlin de Android 最初はやっぱりHello world

Buttonの上端に表示されている丸を掴んで、TextViewの下端の丸に引っ張っていきます。

Kotlin de Android 最初はやっぱりHello world

ButtonとTextViewの上下が接続されて、こんなかんじになります。
それぞれの間はデフォルトだと8pxの隙間が空きます。
このマージンはの設定はpropertiesで設定できますが、今回は8pxのままにします。

上の位置は設定できたので、左右の位置を設定しましょう。
と言っても簡単です。

Kotlin de Android 最初はやっぱりHello world

左側の丸を掴んで、画面の左までぐいーっと持っていきます。

Kotlin de Android 最初はやっぱりHello world

そうすると、こんな感じに左側にくっついた状態になるので、

Kotlin de Android 最初はやっぱりHello world

今後は右側の丸を掴んで、画面の右端までぐぐーっと持っていきます。

Kotlin de Android 最初はやっぱりHello world

そうすると、中央に配置される、という仕組みです。
これで画面は完成です。

スポンサーリンク

6. Kotlinプログラムを書いてみよう

さて、いよいよ少しだけですが、Kotlinでプログラムを書いてみましょう。
先程Buttonを作ったときに設定した、changeTextメソッドを作っていきます。
Kotlinの細かい構文についてはドットインストールさんなどいろいろなサイトで紹介されているのでここでは省略します。

ではでは、MainActivity.ktを開きましょう。

onCreateメソッドの下にchangeTextメソッドを作っていきます。

引数はViewを受け取るように書くことになっているので、以下のように書いてあげればOKです。

この中に処理を書いていくのですが、基本的にはJavaのときと同じ手順で書けばOKです。
findViewByIdでTextViewを取得して、text に文字列を代入します。

Javaの場合はsetText()でしたが、Kotlinの場合はsetText() も getText() も text プロパティを使います。

この処理ですが、もう少し短くことができたります。
Kotlinの設定のところで、「kotlin-android-extensions」 というプラグインを追加したのですが、
このプラグインを使うと、findViewById をしなくても、Viewを取得することができるようになります。

このように書けばOKです。

ここで、出てくる text_view は TextView に設定した ID になります。
ID がそのまま変数のように扱える、というわけです。ラクですね〜。

7. 動作確認してみよう

ここまでできたら、エミュレータで確認してみましょう。
あらかじめエミュレータを起動しておいてください。

Kotlin de Android 最初はやっぱりHello world

ツールバーの真ん中辺りにある再生ボタンのようなボタンをクリックします。

Kotlin de Android 最初はやっぱりHello world

エミュレータの選択画面になるので、起動されているエミュレータを選択して、「OK」をクリック。

しばし待つ…。

エミュレーターが起動して、無事 Hello world が表示されました!

Kotlin de Android 最初はやっぱりHello world

Changeボタンをクリックすると、TextViewの内容が変わりますね。

Kotlin de Android 最初はやっぱりHello world

単純なアプリですが実際に動いてくれるとうれしいですよねー♪

アプリとしては何の役にも経ちませんが、AndroidStudioでKotlinを使う方法や
雰囲気を掴んでもらえればいいなと思います。

次はもう少しアプリっぽいものを作りたいと思っています。