このページは Cloud Translation API によって翻訳されました。

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

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 を起動します。

[新しいプロジェクトを作成] を選択します。プロジェクトテンプレートを選択するダイアログが表示されます。
[Empty Activity] を選択して、[Next] をクリックします。次に、プロジェクトを構成するように求められます。言語は [Kotlin] に設定し、[Minimum SDK] は [API 23] にする必要があります。
[完了] をクリックします。これが完了すると、Android Studio がプロジェクトとともに開きます。特に Android Studio を初めて使用する場合は、Gradle 同期を実行して、すべてに問題がないことを確認するのに少し時間がかかることがあります。

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

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

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

画面の右上に、以下のように [Code]、[Split]、[Design] のタブがある選択項目が表示されます。

[Code] セクションでが選択されてから次のステップに進みます。

コードを次の 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 から始めます。

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

新しいプロジェクトのオプションを選択します。プロダクトに名前と組織 ID を指定します。好きなものを入力するか、以下の例に従うことができます（ただし、次に示すように、インターフェースを [Storyboard] に、ライフサイクルを [UIKitApp Delegate] に設定してください）。

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

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

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

アシスタントを使用して、ストーリーボードと ViewController.swift ファイルの両方を並べたビューを開きます。以下に示すように、アシスタントは画面の右上にある小さなアイコンです。

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

[Outlet] を選択し、「txtInput」という名前を付けます。
ラベルについても同じ操作を行い、接続タイプを [Outlet] にして、「txtOutput」という名前を付けます。
最後にボタンをドラッグしますが、今度は接続タイプとして [アクション] を選択します。（接続タイプとして [コンセント] は使用しないでください）。
アクションに「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 モデルは後でこのアプリに戻って、ユーザーのテキストをフィルタしてコメントスパムを検出するための準備を整えます。

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