注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
はじめに
このチュートリアルでは、フライトデータの表示、フライトの絞り込み、各フライトの詳細表示ができるシンプルなモバイル Workshop アプリケーションを作成する方法を説明します。このチュートリアルでは、ほとんどの Foundry 環境に含まれているサンプルデータを使用します。Foundry オントロジーはニーズやデータに合わせてカスタマイズされているため、チュートリアルで説明するものと完全に一致するオブジェクトタイプにはアクセスできない場合があります。
このチュートリアルでは、モバイル Workshop アプリケーションを作成するために必要な手順に重点を置き、Workshop アプリケーションの作成とオントロジーのアクションを使用したライトバックの設定について、すでにある程度の知識があることを前提としています。Workshop やアクションを使用したことがない場合は、まず一般的な Workshop とアクションタイプのチュートリアルからはじめることを検討してください。
パート1：初期セットアップ
まず、次の手順で、フライトデータをスクロールして閲覧できる基本的なアプリケーションを作成します。
-
新しい Workshop モジュールを作成します。
-
左サイドバーで設定を選択し、デバイスの種類をモバイルに切り替えます。エディターのサイズがモバイルデバイスのサイズに切り替わり、レイアウトが1列に更新されます。
-
この段階では、右上のモジュールナビゲーションバーを表示の横にあるスイッチを無効にして、ナビゲーションバーを非表示にします。
-
左サイドバーで概要を選択し、オブジェクトセット変数を追加を選択して、アプリケーションへのデータの追加をはじめます。ここでは、[Example Data] Flight オブジェクトタイプをモジュールに追加します。
-
+ ウィジェットを追加を選択し、オブジェクトリストウィジェットをアプリケーションに追加します。フライトのオブジェクトセット変数を使用するようにウィジェットを設定し、リストに表示するプロパティを選択します。ここでは、Carrier Name、Origin City Name、Destination City Name、Departure、Arrival のプロパティをリストに追加します。
これで、フライトデータをスクロールして閲覧できる基本的なアプリケーションが作成できました。次のステップでは、このアプリケーションにインタラクティブな機能を追加します。
パート2：絞り込みを追加する
チュートリアルのこのパートでは、フライトのリストを絞り込む機能を追加します。ユーザーがフィルターを適用するための十分な画面領域を確保するため、絞り込み機能を Workshop のドロワー内に配置します。
-
左サイドバーでレイアウトを選択し、+ を選択して新しいドロワーをアプリケーションに追加します。ドロワーのタイトルと名前を「Filter flights」に更新し、アイコンをフィルターアイコンに設定します。
-
ドロワー内で + ウィジェットを追加を選択し、フィルターリストウィジェットを追加します。フィルターリストの入力データを、先ほど作成したフライトのオブジェクトセット変数に設定します。
-
フィルター設定で、ユーザーが絞り込みに使用できるようにするプロパティをいくつか選択します。ここでは、Origin City Name、Destination City Name、Cancellation reason のプロパティにフィルターを追加します。
-
エディター表示の右上にある X を使用してドロワーを閉じます。フライトの表示に戻ったら、上部のツールバーにある + をクリックして、ツールバーにウィジェットを追加します。ボタングループウィジェットを選択します。
-
ボタンを控えめスタイルと大きいスタイルに設定し、ボタン1を選択してボタンとその動作を設定します。ここでは、ボタンにフィルターアイコンだけを表示します。ボタンのテキストを削除し、左アイコンでフィルターアイコンを選択します。+ イベントを追加を選択し、Filter flights を開くを選択します。
-
次に、フィルターリストウィジェットが出力するフィルターを反映するように、オブジェクトリストを更新します。オブジェクトリストウィジェットを選択し、入力データの下にある X を選択して、オブジェクトセット変数の設定を削除します。
-
新規オブジェクトセット変数を選択し、新しい変数に「Filtered flights」という名前を付けます。
-
開始オブジェクトセットで、「[Example Data] Flight」という名前の既存のオブジェクトセット変数を選択します。次に、変数を使用して絞り込むを選択し、フィルターリストウィジェットの出力を選択します。
これで、設定したプロパティに基づいてユーザーがフライトのリストを絞り込む機能が追加できました。UI が煩雑になるのを避けるため、これらのフィルターは全画面のドロワーに表示されます。ユーザーは複数のフィルターを一度に簡単に設定してから、絞り込んだリストに戻れます。
ドロワーを開き、Denver, CO 発で、Weather が原因で欠航したフライトに絞り込んでみてください。ドロワーを閉じると、フライトのリストが適切に更新されていることを確認できます。
次のステップでは、ユーザーが選択したフライトについて、さらに詳しい情報を探索できるようにします。
パート3：選択したオブジェクトの表示を追加する
このパートでは、リストからフライトを選択したときに、別のページに移動して詳細を表示できるようにします。
-
左サイドバーでレイアウトを選択し、+ を選択して、アプリケーションに新規ページを追加します。ページ名を「フライトの詳細」に更新します。新しいページのヘッダーで、セクションタイトルを削除します。
-
ツールバーの左側にある + を選択し、オブジェクトセットのタイトルウィジェットを追加します。入力オブジェクトセットとして「オブジェクトリスト1のアクティブなオブジェクト」を使用するようにウィジェットを設定します。
-
ページ内でレイアウトを設定を選択し、フローレイアウトを選択します。これにより、複数のウィジェットを配置できるスクロール可能な本文領域がページに追加されます。
-
次に、現在のフライトのプロパティをいくつか表示します。
-
新しいフローレイアウト内のセクションを選択し、タイトルを「プロパティ」に更新します。
-
+ ウィジェットを追加を選択し、プロパティリストウィジェットを追加します。
-
プロパティリストウィジェットも、入力オブジェクトセットとして「オブジェクトリスト1のアクティブなオブジェクト」を使用するように設定します。
-
プロパティリストウィジェットのラベルレイアウトを上下配置に、列数を1に更新し、表示するプロパティをいくつか選択します。この例では、運航航空会社、航空会社名、キャンセル済み、キャンセル理由を表示します。
- 次に、出発空港と到着空港に関する情報を表示します。
- フローレイアウトの下部で + セクションを追加を選択します。新しいセクションのタイトルを「出発空港」に更新します。
- + ウィジェットを追加を選択し、プロパティリストウィジェットを追加します。
- オブジェクトセット変数を選択... をクリックし、+ 新規オブジェクトセット変数をクリックします。「オブジェクトリスト1のアクティブなオブジェクト」変数を起点として、[サンプルデータ] 出発空港リンクを使用して関連検索を行います。この新しい変数の名前を「アクティブなフライトの出発空港」に変更します。
- プロパティリストウィジェットのラベルレイアウトを上下配置に、列数を1に更新し、表示するプロパティをいくつか選択します。この例では、表示名、航空会社数、出発便数、目的地数のプロパティを表示します。
-
上記の手順を繰り返して、到着空港に関する情報を表示するセクションも追加します。
-
左側のレイアウトサイドバーを使用して、フライトのオブジェクトリストを表示する元のページに戻ります。オブジェクトリストを選択し、設定オプションのアクティブなオブジェクトの選択時で + イベントを追加を選択します。フライトの詳細に切り替えを選択します。
これで、別のページに移動してリスト内の各フライトの詳細を表示する機能が追加されました。オブジェクトリストでフライトを選択し、作成した「フライトの詳細」ページに移動してみてください。
最後に、デスクトップのブラウザーと携帯電話でモバイルアプリケーションをプレビューします。
パート4：モジュールを表示して使用する
右上の保存して公開を選択してモジュールを保存し、表示 ↗ を選択します。これにより、Foundry のモバイルアプリランチャーでアプリケーションが開きます。
ここでは、デスクトップのブラウザーと携帯電話でモバイルアプリケーションをプレビューするためのいくつかの方法を利用できます。
-
デスクトップのブラウザーでのプレビュー。実際の携帯電話でアプリケーションがどのように表示されるかをプレビューするには、ブラウザーのモバイルデバイスエミュレーション機能を使用します。
-
モバイルデバイスでのプレビュー。Foundry 環境にネットワーク経由でアクセスできるモバイルデバイスがある場合は、携帯電話から URL を開いてアプリケーションに移動することもできます。Chrome や Edge などの一部のブラウザーでは、ページを右クリックしてこのページの QR コードを作成を選択すると、簡単にアクセスできます。その後、モバイルデバイスで QR コードをスキャンしてアプリケーションを開きます。
モバイルアプリランチャーでは、ブラウザーの「戻る」と「進む」のインタラクションを使用してページ間を移動できます。Android デバイスでは、デバイスの「戻る」ボタンを使用して移動できます。iOS では、以下の図のように左端または右端からスワイプできます。
次のステップ
このチュートリアルでは、モバイルデバイスでフライトデータを探索するためのシンプルなアプリケーションを作成する方法を説明しました。次のリソースを使用して、Workshop のモバイル対応についてさらに学習できます。