Kotlin のチュートリアルを部分的に日本語にしつつ進める


最近やっと気づいたのですが、すごいフロントエンドエンジニアは、もともと JS ではない、もっとしっかりした言語の経験がある方が多い。Java でバックエンドを書いていたとか、デスクトップアプリケーションを作っていたとか、ActionScipt で Flash を書いていたとか…

そういった言語を通じて、型とかコンパイルとか、オブジェクト指向とか、モジュール分割とか、alt JS が後から取り込んだ機能に触れているんだと思うんです。

自分は完全に HTML, CSS, JavaScript といったフロントの技術しかやってこなかったので (あとは趣味のプロジェクトで Wordprss, PHP を少し書くくらい)、そのあたりの感覚がない。これでは追いつけない。

ということで、Kotlin をやってみることにしました。React Native を触りだしてネイティブにも興味が出てきたし、そしてやっぱり Kotlin / Swift がわかってないと React Native をうまく使えない部分がたくさんある、ということもあって、Java の後継的な存在の Kotlin をやってみることにしました。

Android Studio をインストール

https://kotlinlang.org/docs/tutorials/kotlin-android.html

最新版 3.0 の Android Studio にはすでに kotlin が入っていることなのでこれをインストール。

kotlin サポートにチェックを入れれば良い的なことが書いてあるので入れる。

プロジェクトをそのあと作る。

cmmd + shift + A で Find Action から Convert Java File to Kotlin File をみつけて実行。これで Java を Kotlin に変換しているとのことだが、よくわからない。

すると kotlin の config がまだされていないとか、gradle のシンクがされていないとか警告が出るとのことだが、出ない。よくわからない。されているということだろう。

Building and publishing the Kotlin application for Android

You are now ready to build the application and run it on an emulator or device. This works in exactly the same way as in Java. You can make a release of the application and sign it similarly to what you do for an Android application written in Java.

アプリケーションをビルドし、エミュレーターやデバイスで走らせる準備ができました。Java と全く同じ方法で可能です。アプリケーションのリリースや sign は Java で書かれたアンドロイドアプリケーションと同じようにして可能です。

と書いてあるが、Java でやったことがないから、わからない!

ラーニング用の公式プラグインがある

後でやってみようと思う。

https://kotlinlang.org/docs/tutorials/edu-tools-learner.html

Google のやつをみつけた

https://codelabs.developers.google.com/codelabs/build-your-first-android-app-kotlin/index.html?index=..%2F..%2Findex#1

URL からいって多分 Google 公式のチュートリアルをみつけたのでやってみる。

Java が入っていなければ指示に従って入れる。

Set JAVA_HOME

JAVA_HOME がなんなのかよくわからないが、指示に従う。

Set JAVA_HOME to the installation location:

  1. Open Terminal. ターミナルを開く
  2. Navigate to your home directory using cd cd でホームディレクトリに移動
  3. Open the file ~/.bash_profile which is a configuration file for your terminal ターミナルの設定ファイルである~/.bash_profile を開く。
  4. Add the following command to the file: 次のコマンドをファイルに追加する。
    export JAVA_HOME=$(/usr/libexec/java_home)
  5. Reload the configuration file using: 設定ファイルをリロード
    source ~/.bash_profile
  6. Enter echo $JAVA_HOME to confirm the path. 左記コマンドで path を確認。

最初のプロジェクトを作る

https://codelabs.developers.google.com/codelabs/build-your-first-android-app-kotlin/index.html?index=..%2F..%2Findex#2

After these steps, Android Studio:

上記の段階を通じて、アンドロイドスタジオは以下のことをしてくれます。

  • Creates a folder for your Android Studio project. This is usually in a folder called AndroidStudioProjects.
  • Android Studio プロジェクト用のフォルダを作成します。通常は AndroidStudioProjects という名前のフォルダの中に作られます。
  • Builds your project (this may take a few moments). Android Studio uses Gradle as its build system.
  • プロジェクトをビルドします。(少しだけ時間がかかります) Android Studio は Gradle をビルドシステムとして用います。(なるほど Gradle はビルドの時に使うシステムのことか)
  • Opens the code editor showing your project.

シミュレーターを立ち上げる

あとはひたすら言われた通りにやっていったら、シミュレーターが立ち上がる。立ち上げる際に眺めに Google アイコンが画面に出ているが、トラブルではないので安心ください。少し待つと起動します。

いやー簡単だ!

次は layout エディターだ。

引き続きこれやっていく。

https://codelabs.developers.google.com/codelabs/build-your-first-android-app-kotlin/index.html?index=..%2F..%2Findex#3

Explore the layout editor

Generally each screen in your Android app is associated with one Java or Kotlin class known as an activity. The single screen with “Hello World” displayed is created by one activity, called MainActivity.kt. This was generated for you when you created your new project. Each visible activity in an Android app has a layout that defines the user interface for the activity. Android Studio has a layout editor where you can create and define layouts.

Android アプリケーションのそれぞれの screen は、Java もしくは Kotlin のactivity という種類の class と結び付けられています。Hello World と表示した screen は、MainActivity.kt という名前の activity によって作られているのです。このファイルは新しいプロジェクトを作った時に自動的に作られたものです。次に、それぞれの visible activity は、layout を持っていて、これによって自身の activity のユーザーインターフェイスを定義することができます。Android Studio はレイアウトエディターを持っていますので、レイアウトを作ったり、定義することができます。

Layouts are defined in XML. The layout editor lets you define and modify your layout either by coding XML or by using the interactive visual editor. You can switch between editing your layout in XML and in the visual design editor as often as you like.

Layout は XML で定義されています。レイアウトエディターでは、レイアウトを定義したり変更するために、XML をコーディングすることによっておこなうこともできますし、また visual editor を用いることもできます。XML と visual design editor を望むタイミングで切り替えていくことができます。

Every element in a layout is a view. In this task, you will explore some of the panels in the layout editor, and you will learn how to change property values for views.

レイアウトに配置されている要素を、view といいます。レイアウトエディターの使い方を学び、view のプロパティの値を変更していきましょう。

layout フォルダーから上記のファイルをダブルクリック。ウィンドウの左下に Design Text という二つのタブがあり、それぞれ Visual Editor と XML をコーディングするエディター。

Component tree

This panel shows the hierarchy of views in your layout.

Component Tree panel は レイアウトにおける view エレメントの階層構造を表示するパネルです。

In the Component Tree, notice that the root of the view hierarchy is a ConstraintLayout view.

view ヒエラルキーの root に、ConstraintLayout という view があるのがわかると思います。

Every layout must have a root view that contains all the other views. The root view is always a view group, which is a view that contains other views. A ConstraintLayout is one example of a view group.

全てのレイアウトは、かならず  root view を 1つだけ持ち、それに他の全ての view が含まれています。root view は常に view group と呼ばれるタイプのエレメントです。これは他の view を含むことができるエレメントです。ここで使われている ConstraingLayout が、まさに view group です。

Notice that the ConstraintLayout contains a TextView.

ここでは ConstraintLayout は TextView を内部にもっていますね。

View the XML code for the layout by clicking the Text tab at the bottom of the Design tab.

デザインタブの一番したにある Text tab をクリックして XML コードエディターでの layout 編集画面をみてみてください。

In the XML code, notice that the root element is <android.support.constraint.ConstraintLayout>. The root element contains a single <TextView> element.

Root element は <android.support.constraint.ConstraintLayout> だということがわかりますね。そして <TextView> を内部に持っていますね。

android:text の中身(property)、”Hello World” を編集してみましょう。

右側のプロパティパネルでも編集できます。text の部分に入れればいい。

色々変更できる。例えば textColor を変更する。その際、補完が入るので、適当に red とか入れて、出てきた候補でエンター。

 Add string and color resources

So far you have learned how to change property values. Next, you will learn how to create resources. Using resources enables you to use the same values in multiple places, or to define values and have the UI update automatically whenever the value is changed.

グーグル翻訳すごい。ここに関しては、完全に翻訳できてる。

これまでは、プロパティ値を変更する方法を学んできました。次に、リソースの作成方法を学習します。リソースを使用すると、複数の場所で同じ値を使用したり、値を定義したり、値が変更されるたびにUIを自動的に更新したりすることができます。

IDで検索

   val showCountTextView = findViewById(R.id.textView) as TextView

上記だとうまくいかない。

次のようにすると正常に動作する。API 26 から仕様が変わった模様。

val showCountTextView = findViewById<TextView>(R.id.count)

https://codelabs.developers.google.com/codelabs/build-your-first-android-app-kotlin/index.html?index=..%2F..%2Findex#6

Create a second activity

https://codelabs.developers.google.com/codelabs/build-your-first-android-app-kotlin/index.html?index=..%2F..%2Findex#7

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *