Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

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

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

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

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

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

画面の右上に、次のように [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>

これにより、[Enter a String] と表示される TextView を含む入力領域と、文字列を入力できる 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 で基本的なアプリを作成する

次の手順では、Xcode と Swift を使用した iOS 開発に慣れている必要があります。

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

基本的なアプリを作成するには、まず Xcode を使用します。

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

新しいプロジェクトのオプションを選択します 。プロダクトに名前と組織 ID を付けます。任意の名前を入力するか、次の例に沿って入力します（ただし、インターフェースを Storyboard 、ライフサイクルを UIKitApp Delegate に設定してください）。

6. Storyboard を編集する

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

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

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

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

[Outlet] を選択し、txtInput という名前を付けます。
ラベルについても同様に、接続タイプを [Outlet] にして、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 モデルを作成する方法について説明します。このモデルは後でこのアプリに戻して、ユーザーのテキストからコメントスパムをフィルタリングできるようにします。

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