基本的なメッセージスタイルアプリを作成する

1. 始める前に

この Codelab は、「モバイルテキスト分類を始める」アクティビティのアクティビティ #2 です。

この Codelab では、シンプルなメッセージアプリを作成します。パスウェイの後半では、アプリのメッセージから望ましくないスパムをフィルタリングする機械学習モデルを使用して、このアプリを更新します。

前提条件

Kotlin による Android 開発、（必要に応じて）Swift による iOS 開発に関する基本的な知識

作成するアプリの概要

シンプルなメッセージアプリ

必要なもの

Android の場合は、Android Studio が必要です。続行するには、インストール済みで完全に更新されていることをご確認ください。
iOS の場合、Xcode が必要です。App Store で入手できます。（iOS アプリのみを作成する場合は、ステップ 5 に進んでください。

コードを入手する

順を追らず、このパスウェイの最終的なコードを確認したい場合は、

git clone https://github.com/googlecodelabs/odml-pathways

ここでは、TextClassificationOnMobile ディレクトリを見つけて、その中に Android サブディレクトリと iOS サブディレクトリがあります。これらのディレクトリには、TextClassificationStep1 サブディレクトリが含まれます。このサブディレクトリには、それぞれ Android と iOS 上のアプリが含まれています。

2. Android Studio で新しいプロジェクトを作成する

Android Studio を起動します。

275-0004.45

[Create New Project] を選択します。プロジェクトテンプレートを選択するダイアログが表示されます。
[Empty Activity] を選択して、[Next] をクリックします。次に、プロジェクトを設定するよう求められます。任意の言語を選択しますが、言語が Kotlin であり、最小 SDK が API 23 であることを確認してください。
[終了] をクリックします。完了すると、プロジェクトで Android Studio が開きます。Gradle 同期が正常に行われることを確認するまでに、少し時間がかかることがあります。特に、Android Studio を初めて使用する場合は注意が必要です。

3. ユーザーインターフェースを作成する

Android アプリのユーザーインターフェースは、レイアウトファイルと呼ばれる XML ファイルを使用して作成されます。

ファイルを開きます。Android Studio のエクスプローラを使用して、[app] > [res] > [layout] > [activity_main.xml] をクリックします。

212-0534

画面右上に、次のような [Code]、[Split]、[Design] のタブを含む選択項目が表示されます。

[コード] が選択されていることを確認して、次のステップに進みます。

コードを次の XML に置き換えます。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

 <LinearLayout android:orientation="vertical"
      android:layout_height="match_parent"
      android:layout_width="match_parent">
      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal">
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Enter a string:"></TextView>
          <EditText
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/txtInput"></EditText>

      </LinearLayout>

      <TextView
          android:id="@+id/txtOutput"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Output Goes here"
          android:textSize="36sp"></TextView>
     <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/btnSendText"
          android:text="Send"></Button>

 </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

これにより、TextView を含む入力領域を含む基本的なユーザーインターフェースが提供され、Enter a String と txtInput という EditText が表示され、これを使用して文字列を入力できます。その下には、出力を表示する TextView と、分類をトリガーするためにユーザーが押すボタンがあります。

次のステップでは、このユーザーインターフェースを有効にするコードを記述します。

4.コントロールを接続してアプリを作成する

このアクティビティのコードは、MainActivity コードファイルで編集できます。

Android Studio で、[app] > [java] > [MainActivity] をクリックします。

MainActivity ファイルを開いてコードエディタを開きます。「package」で始まる最初の行を除き、このファイル内のすべてを次のコードで置き換えます。

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    lateinit var txtInput: EditText
    lateinit var btnSendText: Button
    lateinit var txtOutput: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        txtInput = findViewById(R.id.txtInput)
        txtOutput = findViewById(R.id.txtOutput)
        btnSendText = findViewById(R.id.btnSendText)
        btnSendText.setOnClickListener {
            var toSend:String = txtInput.text.toString()
            txtOutput.text = toSend
        }
    }
}

このコードは、レイアウトのコントロールを txtInput、txtOutput、btnSendText に接続し、コードでそれらに対応できるようにします。次に、ボタンに OnClickListener を設定します。これにより、ユーザーがボタンをタップすると、txtInput からのテキストが読み取られ、文字列に変換され、txtOutput.text プロパティがその値に設定されます。文字列

5. iOS で Basic アプリを作成する

以下の手順では、Xcode と Swift を使用する iOS 開発についてある程度の知識が必要です。

作成プロセスを行わない場合は、リポジトリのクローンを作成してアプリを直接開くことができます。これは TextClassificationStep1 と呼ばれ、リポジトリの iOS フォルダにあります。

基本的なアプリを作成するには、Xcode から始めます。

基本テンプレートを使用して新しいアプリを作成します。

新しいプロジェクトのオプションを選択する。プロダクトに名前と組織識別子を付けます。次のように入力するか、以下に沿って操作してください（ただし、必ずインターフェースを [Storyboard]、ライフサイクルを [UIKitApp Delegate] に設定します）。表示）

6. ストーリーボードを編集する

Main.storyboard を開きます。コントロールを追加できるデザインサーフェスが表示されます。
コントロールを追加するには、Xcode ウィンドウの上部にある [+] ボタンをクリックします。

これを使用して、TextView コントロール、ボタンコントロール、ラベルコントロールをデザインサーフェスに配置します。次のようになります。

アシスタントを使用して、ストーリーボードと ViewController.swift ファイルが両方とも開いている状態で並べて表示します。アシスタントは、次のような小さなアイコンで、画面右上に表示されます。

Ctrl キーを押して、TextView コントロールをコードサーフェスにドラッグします。ドラッグすると、青い矢印が表示されます。
クラス宣言のすぐ下にあるコードにドロップします。接続の種類を確認するポップアップが表示されます。次のようになります。

[Outlet] を選択し、「txtInput」という名前を付けます。
ラベルに対して同じ操作を行い、接続タイプを [アウトレット] にして、txtOutput という名前を付けます。
最後にボタンをドラッグします。今回は接続タイプとして [Action] を選択します。（接続タイプとして [Outlet] を使用しないでください）。
アクションに「btnSendText」という名前を付けます。

完了すると、クラスの先頭のコードは次のようになります。

@IBOutlet weak var txtInput: UITextView!
@IBOutlet weak var txtOutput: UILabel!
@IBAction func btnSendText(_ sender: Any) {
}

7. 基本的な iOS アプリのコーディングを完了する

このビューでは UITextView を使用しているため、このビューでイベントに応答するには UITextViewDelegate にする必要があります。

そのためには、クラス宣言を次のように変更します。

class ViewController: UIViewController, UITextViewDelegate {

次に、viewDidLoad 関数で、UITextView のデリゲート（アウトレットの設定時に txtInput を呼び出したもの）を次のようにこのクラスに設定します。

override func viewDidLoad() {
    super.viewDidLoad()
    txtInput.delegate = self
}

最後に、ユーザーがキーボードの Enter キーを押すと、キーボードがディスプレイから削除されます。これは、設定した委任を通じて行います。ViewController にこのメソッドを実装することで、この処理を行えます。

func textView(_ textView: UITextView, shouldChangeTextIn range:
              NSRange, replacementText text: String) -> Bool {
    if (text == "\n") {
        textView.resignFirstResponder()
        return false
    }
    return true
}

このアプリでは、ボタンのアクションは単純で、ユーザーが入力した内容を出力に渡すだけです。後で NLP モデルでこのテキストをフィルタリングする方法について説明します。ここでは、パススルーをシミュレートするため、もう少し詳しく説明します。

アクション btnSendText をすでに作成したので、そのコードを次のコードに追加するだけです。

@IBAction func btnSendText(_ sender: Any) {
    txtOutput.text = "Sent :" + txtInput.text
}

8. 完了

この Codelab は終了です。

パスウェイの次の部分では、NLP モデルを作成する方法を学びます。NLP モデルは、後でこのアプリに戻って、ユーザーのコメントをフィルタしてテキストをフィルタリングできるようにするものです。

基本的なメッセージ スタイル アプリを作成する