はじめに

このチュートリアルでは、ユーザーがフライトデータを表示し、フライトをフィルター処理し、各フライトの詳細を表示できるシンプルなモバイル Workshop アプリケーションの作成方法を説明します。このチュートリアルでは、ほとんどの Foundry 環境に含まれているサンプルデータを使用します。Foundry オントロジーは、ユーザーのニーズやデータに合わせてカスタマイズされているため、このチュートリアルで説明されているオブジェクトタイプに対して正確なアクセスがない場合があります。

このチュートリアルでは、モバイル Workshop アプリケーションの作成に必要な手順に焦点を当て、Workshop アプリケーションの構築や Ontology Actions を使用した書き戻しの設定に関する一定の知識があることを前提としています。もし Workshop や Actions を使用したことがない場合は、一般的な Workshop と Action タイプのチュートリアルから始めることを検討してください。

• Workshop で始める
• アクションタイプで始める

パート 1: 初期設定

まず、以下の手順を使用して、フライトデータをスクロールして閲覧できる基本的なアプリケーションを作成します。

1. 新しい Workshop モジュールを作成します。

2. 左のサイドバーで Settings を選択し、Mobile デバイスタイプに切り替えます。エディタの寸法がモバイルデバイスに切り替わり、レイアウトが1列に更新されます。

3. 今のところ、上部右の Module navigation bar visible の横にあるスイッチをオフにして、ナビゲーションバーを切り替えます。

   

4. 左のサイドバーで Overview を選択し、Add object set variable を選択してアプリケーションにデータを追加し始めます。この場合、[Example Data] Flight オブジェクトタイプをモジュールに追加します。

   

5. + Add widget を選択し、Object list ウィジェットをアプリケーションに追加します。ウィジェットを使用して、フライトのオブジェクトセット変数を設定し、リストに表示するプロパティを選択します。この場合、Carrier Name、Origin City Name、Destination City Name、Departure、および Arrival をリストに追加します。

   

この時点で、フライトデータをスクロールして閲覧できる基本的なアプリケーションが作成されました。次のステップでは、このアプリケーションにインタラクティブ性を追加します。

パート 2: フィルター処理の追加

このチュートリアルのこの部分では、フライトのリストをフィルター処理する機能を追加します。ユーザーが十分な画面スペースを持ってフィルターを適用できるようにするため、Workshop ドロワー内にフィルターをネストします。

1. 左のサイドバーで Layout を選択し、+ を選択してアプリケーションに New drawer を追加します。ドロワーのタイトルと名前を "Filter flights" に更新し、アイコンをフィルターアイコンに設定します。

   

2. ドロワー内で + Add widget を選択し、Filter list ウィジェットを追加します。Filter list の入力データを、以前に作成した Flights オブジェクトセット変数に設定します。

3. Filters configuration の下で、ユーザーがフィルター処理できるいくつかのプロパティを選択します。この場合、Origin City Name、Destination City Name、および Cancellation reason プロパティにフィルターを追加します。

   

4. エディタビューの右上にある X を使用してドロワーを閉じます。フライトビューに戻ったら、上部のツールバーにある + をクリックして、ツールバー内にウィジェットを追加します。Button group ウィジェットを選択します。

   

5. ボタンに minimal style と large style を設定し、Button 1 を選択してボタンとその動作を設定します。この場合、ボタンはフィルターアイコンのみを表示するようにしたいと思います。ボタンテキストを削除し、Left icon の下でフィルターアイコンを選択します。+ Add event を選択し、Open Filter flights を選択します。

   

6. 次に、フィルターリストウィジェットで生成されたフィルターに従ってオブジェクトリストを更新します。オブジェクトリストウィジェットを選択し、Input data の下にある X を選択してオブジェクトセット変数設定を削除します。

   

7. New object set variable を選択し、新しい変数に "Filtered flights" という名前を付けます。

8. Starting object set で、既存のオブジェクトセット変数である "[Example Data] Flight" を選択します。次に、Filter using variable を選択し、Filter list ウィジェットからの出力を選択します。

   

この時点で、設定したプロパティに基づいてフライトのリストをフィルター処理するための機能を追加しました。UI の混雑を避けるために、これらのフィルターはフルページのドロワーに表示されるため、ユーザーは一度に複数のフィルターを簡単に設定してからフィルターされたリストに戻ることができます。

ドロワーを開いて、Weather でキャンセルされた Denver, CO からのフライトにフィルター処理してみてください。ドロワーを閉じると、フライトのリストが適切に更新されていることがわかります。

次のステップでは、選択したフライトの詳細を詳しく調べることができるようにします。

パート 3: 選択したオブジェクトビューの追加

このチュートリアルのこの部分では、ユーザーがリストからフライトを選択したときに、詳細を表示するために別のページに移動できるようにします。

1. 左のサイドバーで Layout を選択し、+ を選択してアプリケーションに New page を追加します。ページの名前を "Flight details" に更新します。新しいページのヘッダーでセクションタイトルを削除します。

2. ツールバーの左側にある + を選択し、Object set title ウィジェットを追加します。ウィジェットの入力オブジェクトセットとして "Object list 1 Active object" を使用するように設定します。

   

3. ページ内で Set layout を選択し、Flow レイアウトを選択します。これにより、ページに複数のウィジェットを含むことができるスクロール可能なボディが追加されます。

   

4. 次に、現在のフライトのいくつかのプロパティを表示します：

• 新しいフローレイアウトでセクションを選択し、そのタイトルを "Properties" に更新します。

• + Add widget を選択し、Property list ウィジェットを追加します

• プロパティリストウィジェットの入力オブジェクトセットとしても "Object list 1 Active object" を使用するように設定します

• プロパティリストウィジェットをスタックされたラベルレイアウトにして 1 列に設定し、いくつかのプロパティを選択して表示します。この場合、Operating carrier、Carrier Name、Cancelled、および Cancellation Reason を表示します。

  

5. 次に、出発地と目的地の空港に関する情報を表示します：

• フローレイアウトの一番下で + Add section を選択します。新しいセクションのタイトルを "Origin Airport" に更新します
• + Add widget を選択し、Property list ウィジェットを追加します
• Select object set variable... をクリックし、+ New object set variable を選択します。"Object list 1 Active object" 変数から始め、[Example Data] Origin Airport リンクを使って Search around を行います。この新しい変数の名前を "Active flight origin airport" に変更します。
• プロパティリストウィジェットをスタックされたラベルレイアウトにして 1 列に設定し、いくつかのプロパティを選択して表示します。この場合、Display Name、Number of Carriers、Number of Departing Flights、Number of Destinations プロパティを表示します。

6. 上記の手順を繰り返して、目的地の空港に関する情報を表示するセクションも追加します。

   

7. 左の Layout サイドバーを使用して、オブジェクトリストのフライトを表示する元のページに切り替えます。オブジェクトリストを選択し、設定オプションの On active object selection の下で + Add event を選択します。Switch to Flight details を選択します。

   

この時点で、リスト内の各フライトの詳細を表示するために別のページに移動する機能を追加しました。オブジェクトリストでフライトを選択して、作成したばかりの "Flight details" ページに移動してみてください。

最後に、デスクトップブラウザや携帯電話でモバイルアプリケーションをプレビューします。

パート 4: モジュールの表示と使用

右上の Save and publish を選択してモジュールを保存し、View ↗ を選択します。これにより、アプリケーションが Foundry のモバイルアプリランチャーで開きます。

この時点で、デスクトップブラウザや携帯電話でモバイルアプリケーションをプレビューするためのさまざまなオプションがあります：

• デスクトップブラウザプレビュー。実際の電話でアプリケーションがどのように見えるかをプレビューするには、ブラウザのモバイルデバイスエミュレーションのサポートを使用します。

  • Chrome Device Mode
  • Safari Responsive Design Mode
  • Edge Emulate mobile devices
  

• モバイルデバイス上で。Foundry 環境へのネットワークアクセスがあるモバイルデバイスがある場合は、携帯電話から URL を開いてアプリケーションにアクセスすることもできます。Chrome や Edge などの一部のブラウザでは、ページを右クリックして Create QR Code for this Page を選択することで簡単にこれを行うことができます。次に、モバイルデバイスで QR コードをスキャンしてアプリケーションを開くことができます。

  

モバイルアプリランチャーで、ブラウザの戻ると進むのインタラクションを使用してページを移動することができます。Android デバイスでは、デバイスの戻るボタンを使用して移動でき、iOS では、下の画像のように左右からスワイプできます。

次のステップ

このチュートリアルでは、モバイルデバイスでフライトデータを探索するためのシンプルなアプリケーションの作成方法を説明しました。以下のリソースを使用して、Workshop のモバイルサポートについてさらに学習してください：

• モバイルデザインのベストプラクティスについて学ぶ。
• ナビゲーションバーを使用して、アプリケーションを複数のページで拡張する。
• Workshop モバイルアプリケーションのネットワークアクセスについて学ぶ。