2017/04/11

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

スポンサーリンク

以前、お仕事で少しだけ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を使う方法や
雰囲気を掴んでもらえればいいなと思います。

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

スポンサーリンク