チュートリアル: Kanzi Android framework (droidfw) の始め方¶

このチュートリアルでは、Kanzi Android framework (droidfw) を使用してAndroidアプリケーションの開発を開始する方法を学びます。以下のことを学びます:

Kanzi プレハブをAndroidビューに表示する
Kanzi Java API を使用してアプリケーションにアクセスし、変更します。
Androidアクティビティを作成し、そのアクティビティで Kanzi コンテンツを表示します。

このビデオはチュートリアルの結果を示しています。

../../_images/android-getting-started-completed.gif

このチュートリアルは、Androidアプリケーションの開発、Javaプログラミング言語に精通しており、Kanzi Studio の基本的な操作を理解していることを前提としています。Kanzi Studio に慣れるための最良のエントリーポイントはチュートリアル: Kanzi Studio の始め方です。

このチュートリアルを始める前に、Android用の Kanzi 開発環境がセットアップされていることを確認してください。Kanzi を使用した Android アプリケーション開発の要件を参照してください。

このチュートリアルのアセットはOpenGL ES 3.0を必要とします。AndroidエミュレーターでOpenGL ES 3.0を有効にする方法については、AndroidエミュレーターでOpenGL ES 3.0を有効にするを参照してください。

チュートリアルを入手する¶

チュートリアルを入手するには、Kanzi Studio の Quick Start ウィンドウで Examples をクリックします。Android Getting Started チュートリアルの横にあるダウンロードをクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。完成したチュートリアルは <KanziWorkspace>/Tutorials/Android Getting Started/Completed ディレクトリにあります。

Kanzi プレハブをAndroidビューに表示する¶

このセクションでは、Kanzi Studio でアプリケーションを作成し、Kanzi Studio でコンテンツを作成し、そのコンテンツをAndroidビューで表示します。

Androidビューで Kanzi プレハブを表示するには：

Kanzi Studio でプロジェクトを作成し、New Project ウィンドウで以下を設定します。
- Name から AndroidGettingStarted へ
- Template から Android application へ
  
  Android application テンプレートは、Kanzi Studio プロジェクトと Kanzi Android フレームワークベースのアプリケーションを作成します。
  
  Androidプラットフォーム用のアプリケーションを作成し、Android APIやサービスを広範囲に使用する場合は、Kanzi Android framework (droidfw) を使用してください。
  
  Kanzi Android framework (droidfw) は、Android向けの Kanzi アプリケーションを開発するためのフレームワークです。Kanzi Java APIを公開しており、アプリケーションやプラグインのコードを完全にJavaまたはKotlinで記述することができます。C++やJNIコードを書く必要はありませんが、ネイティブの Kanzi プラグインを使用することは可能です。Kanzi Android framework (droidfw) は、複数の同時 Kanzi ベースのビューや Kanzi とAndroid UI要素の柔軟な構成を含む、Android UIとの強力な統合を提供します。Kanzi Android framework (droidfw) は、Android UIスレッドで Kanzi メインループタスクを実行するAndroid Choreographerと統合されています。これにより、ディスパッチャーメカニズムを必要とせずに、アプリケーションコードから Kanzi Java API を使用することができます。
Androidアプリケーションの Kanzi ビューに表示したいコンテンツを作成します。

例えば、Asset Packages の Kanzi Studio から Cover Flow を Preview にドラッグします。

Kanzi Studio はプレハブを作成し、Screen > RootPage ノードの Node Tree にインスタンス化します。
Kanzi Studio で、File > Export > Export KZB を選択します。
Android Studioで AndroidGettingStarted/Application/configs/platforms/android_gradle プロジェクトを開き、仮想Androidデバイスを起動するか、Androidデバイスをコンピュータに接続して、アプリケーションを実行します。

app > res > layout > activity_main.xml の startupPrefabUrl 属性の StartupPrefab は、Node Tree のノードを指します。

ヒント

スタートアッププレハブのURLをクリップボードにコピーするには、Kanzi Studio メインメニューで、Project > Copy Startup Prefab URL を選択します。

../../_images/project-copy-startup-prefab-url.png

<?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">

    <com.rightware.kanzi.KanziSurfaceView
        android:id="@+id/androidgettingstartedview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:name="AndroidGettingStarted"
        app:kzbPathList="androidgettingstarted.kzb"
        app:startupPrefabUrl="kzb://androidgettingstarted/StartupPrefab" />
   </androidx.constraintlayout.widget.ConstraintLayout>

Kanzi Java API を使用してコンテンツを修正する¶

このセクションでは、Kanzi Java API を使用して Android アプリケーション内の Kanzi コンテンツを変更します。

Kanzi を Android アプリケーションの複数のアクティビティやフラグメント内の複数のビューから使用できます。このように Kanzi を使用すると、Android アプリケーションは同じ Kanzi インスタンスとリソースを使用します。

Kanzi Java API を使用してコンテンツを変更するには:

Android Studio の app > res > layout > activity_main.xml で:

別の KanziSurfaceView を作成します。
ビューにはユニークな名前を使用してください。

例えば、android:id を @+id/textblock に設定します。
ビューを設定して、画面スペースを均等に取るようにします。

<?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">

    <com.rightware.kanzi.KanziSurfaceView
        android:id="@+id/androidgettingstartedview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:kzbPathList="androidgettingstarted.kzb"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/textblock"
        app:layout_constraintVertical_weight="1"
        app:name="TextBlock"
        app:startupPrefabUrl="kzb://androidgettingstarted/StartupPrefab" />

    <com.rightware.kanzi.KanziSurfaceView
        android:id="@+id/textblock"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:kzbPathList="androidgettingstarted.kzb"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintTop_toBottomOf="@+id/androidgettingstartedview"
        app:name="AndroidGettingStarted" />
</androidx.constraintlayout.widget.ConstraintLayout>

app > java > com.example.androidgettingstarted > MainActivity.java の中で、アプリケーションに表示したい Kanzi コンテンツを作成します。

例えば、Hello Kanzi! を表示する Text Block 2D ノードを作成します。

作成したいコンテンツの機能を提供する Kanzi クラスをインポートします。

import com.rightware.kanzi.Node;
import com.rightware.kanzi.ObjectRef;
import com.rightware.kanzi.TextBlock2D;

ビューへの参照を取得します。

リプレイス (Replace)

KanziView view = findViewById(R.id.androidgettingstartedview);

以下に置き換えます。

KanziView view = findViewById(R.id.textblock);

KanziViewListener.onAttachedToWindow コールバック内で、Hello Kanzi! を表示する Text Block 2D ノードを作成します。

public void onAttachedToWindow(View view, Domain domain) {
    // Create a Text Block 2D node named "Text Block 2D".
    ObjectRef<TextBlock2D> textBlockRef = TextBlock2D.create(domain, "Text Block 2D");
    TextBlock2D textBlock = textBlockRef.get();
    // Set the Text Block 2D node as the root of the Kanzi view.
    ((KanziView) view).setRoot(textBlock);
    // Position the Text Block 2D node in the center of the Kanzi view.
    textBlock.setProperty(Node.HorizontalAlignmentProperty, Node.HorizontalAlignment.Center);
    textBlock.setProperty(Node.VerticalAlignmentProperty, Node.VerticalAlignment.Center);
    // Set the size of the font of the Text Block 2D node.
    textBlock.setProperty(TextBlock2D.SizeProperty, 90.0f);
    // Set the text that the Text Block 2D node shows.
    textBlock.setText("Hello Kanzi!");
}

デフォルトで、Kanzi は KanziRuntime と Domain を、Kanzi ビューがアタッチされたときにのみ初期化します。これにより、KanziViewListener.onAttachedToWindow 以降で Kanzi Java API を使用することができます。あるいは、Kanzi Java API にすぐにアクセスするために、アプリケーションを設定して KanziRuntime への独自の参照を取得させることもできます。

Android Studioからアプリケーションを実行すると、デバイス画面の半分ずつを占める Kanzi ビューの両方が表示されます。

../../_images/create-content-java-api.png

別のAndroidアクティビティを作成する¶

このセクションでは、別のAndroidアクティビティを作成し、そのアクティビティに移動するためのコントロールを作成します。

別のAndroidアクティビティを作成するには:

Kanzi Studio で、別のAndroidアクティビティに表示したいコンテンツを含むプレハブを作成します。
1. Asset Packages の Kanzi Studio で、Car を Prefabs にドラッグします。
2. Prefabs で Car プレハブを選択し、Properties で Background Brush プロパティを追加し、それを DefaultBackground テクスチャブラシに設定します。
Android Studio で、Android アクティビティを作成します:
1. app を右クリックし、java > com.example.androidgettingstarted を選択し、New > Activity > Empty Activity を選択します。
2. アクティビティに SecondActivity と名前を付け、Finish をクリックします。

app > res > layout > activity_second.xml に Kanzi ビューを制約レイアウトに追加します。

<com.rightware.kanzi.KanziSurfaceView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SecondActivity"
    app:kzbPathList="androidgettingstarted.kzb"
    app:startupPrefabUrl="kzb://androidgettingstarted/Prefabs/Car" />

startupPrefabUrl の kzb URL が、このアクティビティで表示したいプレハブを指していることを確認してください。

アクティビティに遷移するためのコントロールを作成します。

Asset Packages の Kanzi Studio で、Button を RootPage にドラッグします。
Node Tree Alt を押しながら右クリックで Button を選択し、Alias を選択します。
Kanzi Studio で、File > Export > Export KZB を選択します。

Android Studio の app > java > com.example.androidgettingstarted > MainActivity.java で:

これらのクラスをインポートします:

import com.rightware.kanzi.Node2D;
import com.rightware.kanzi.Button2D;

import android.content.Intent;

最後に、onCreate 関数の内部に以下を追加します。

// Get a reference to the androidgettingstartedview view.
KanziView view2 = findViewById(R.id.androidgettingstartedview);
view2.addListener(new KanziViewListener() {
    @Override
    public void onAttachedToWindow(View view, Domain domain) {
    }

    @Override
    public void onStartupPrefabLoaded(View view, Domain domain) {
        // Get the RootPage root node.
        Node2D root = ((KanziView) view).getRoot();
        // Get and set up the button to transition to the SecondActivity.
        Button2D button = root.lookupNode("#Button");
        // Position the Button node in the bottom of the Kanzi view.
        button.setProperty(Node.VerticalAlignmentProperty, Node.VerticalAlignment.Bottom);
        // Set the Button node to go to the second activity when user clicks the button.
        button.addMessageFilter(Button2D.ClickMessage, messageArguments -> {
            Intent intent = new Intent(((View) view).getContext(), SecondActivity.class);
            startActivity(intent);
        });
    }
});

Kanzi はビューのスタートアッププレハブを非同期でロードし、プレハブのロードとインスタンス化が完了したときにコールバック KanziViewListener.onStartupPrefabLoaded を呼び出します。スタートプレハブを変更する場合は、このコールバック内で行ってください。

Android Studioからアプリケーションを実行する際、2番目のアクティビティに移行するには、ボタンをクリックしてください。

次の作業¶

このチュートリアルでは、Kanzi Android framework (droidfw) を使用して以下を行う方法を学びました。

Kanzi Java API を使用してノードにアクセスし、変更します。
Androidで Kanzi ビューを作成し、そのビューに Kanzi コンテンツを表示します。
Androidアクティビティを作成し、そのアクティビティで Kanzi コンテンツを表示します。

Kanzi Android framework (droidfw) とJava APIの使用方法の詳細については、次を参照してください。

チュートリアル: Kanzi Android framework (droidfw) の始め方¶

チュートリアルを入手する¶

Kanzi プレハブをAndroidビューに表示する¶

Kanzi Java API を使用してコンテンツを修正する¶

別のAndroidアクティビティを作成する¶

次の作業¶

関連項目¶