Skip to main content

 

OutSystems 11オンラインヘルプ

 

モバイルアプリが対象
OutSystems

最初のモバイルアプリを作成する

OutSystemsでモバイルアプリを開発するのは簡単です。データを含むExcelファイルがある場合、データベースにインポートし、外出先からデータの参照や管理ができるモバイルアプリをすばやく作成できます。

Excelファイルからインポートしたデータを含むモバイルアプリを作成するには、以下の操作が必要です。

  1. データベースモデルを作成し、そのデータをExcelファイルからデータベースにインポートします。
  2. データベースのデータをリスト表示する画面を作成します。
  3. 新規レコードの作成や既存レコードの更新ができる画面を作成します。
  4. データベースからレコードを削除する機能を実装します。
  5. ご利用のモバイルデバイスでアプリケーションをテストします。

それでは、実行してみましょう。この例では、To-Doタスク情報が含まれているExcelのサンプルファイルを使用し、簡単なタスク管理モバイルアプリを作成します。

モバイルアプリを作成する

それでは、新しいタスク管理モバイルアプリを作成しましょう。アプリケーションには1つ以上のモジュールが含まれており、アプリケーションの様々な部分をモジュールにカプセル化できます。モジュールとは、アプリケーションのデータモデルを設計し、ロジックを実装し、UIを設計する場所です。

Service Studioで、[New Application]をクリックして[Mobile App]を選択し、Phoneテンプレートを選択してTo Doという名前を付けます。

モバイルアプリを作成する

新しいTo Doアプリケーションで、ToDoという名前のMobileモジュールを作成します。

Create a Mobile Module

Excelファイルからデータベーステーブルを作成する

OutSystemsでは、アプリケーションのデータをリレーショナルデータベースに保存します。つまり、アプリケーション作成の最初の手順はデータモデルを定義することです。

これを行うには、以下のタスク情報が含まれているExcelファイルを使用します。

  • Description
  • Due Date
  • Is Active

ToDoモジュールで、右上の[Data]タブを開きます。Entitiesフォルダを右クリックして[Import Entities from Excel...]を選択し、ディレクトリC:\Program Files\OutSystems\Development Environment 11.0\Service Studio\TutorialResourcesにあるデフォルトで使用可能なサンプルファイルTasks.xlsxを選択します。

Create a Database Table from an Excel File

Excelファイルをインポートする際、OutSystemsはデータベースにデータを保存するために、必要なカラム(OutSystemsでは「アトリビュート」)を持つデータベーステーブル(OutSystemsでは「エンティティ」)を作成します。

また、OutSystemsはバックグラウンドで、Excelファイルの各行を対応するデータベースレコードにインポートするロジックも作成します。アプリケーションをパブリッシュした後、バックグラウンドのロジックによってExcelファイルのデータがデータベースに読み込まれます。

本チュートリアルではサーバーデータベースにのみデータを保存していますが、オフラインで使用する場合は[Local Storage]を使用してモバイルデバイスでローカルにデータを保存することも可能です。

タスクをリスト表示する画面を作成する

これですべてのタスクをリスト表示する画面を作成できるようになりました。

右上の[Interface]タブを開き、[UI Flows]の下にある[MainFlow]をダブルクリックします。次に、ツールボックスから[Main Editor]ウィンドウの空いている領域に Screenをドラッグします。Emptyテンプレートを選択し、Tasksという画面名を付け、[Create Screen]をクリックします。

新規の空の画面を作成する

Taskエンティティを、[Data]タブから[Main Editor]ウィンドウに表示されるモバイル画面の[Content]プレースホルダにドラッグします。

タスクをリスト表示する画面を作成する

これにより、Tasksが更新されて最初に20件のタスクが表示されます。ユーザーがリストの最後までスクロールすると、自動的にタスクがさらに読み込まれます。

Tasks画面

タスクを編集する画面を作成する

レコードを編集する画面の作成は、リスト画面の作成と同じくらいすばやくできます。

リスト内の最初のタスクのタイトルを右クリックし、[Link to]>[(New Screen)]をクリックします。Emptyテンプレートを選択し、TaskDetailという画面名を付け、[Create Screen]をクリックします。

タスクを編集する画面を作成する

これにより、タスクのタイトルが新しく作成された画面にリンクされます。この新しい画面を使用してタスクを編集しますが、そのためにはフォームが必要です。

  1. Formウィジェットを、ツールボックスかTaskDetailモバイル画面のContentプレースホルダにドラッグします。

    Formをドラッグする

  2. Data]タブにあるTaskエンティティを、事前に作成したFormにドラッグします。

    タスクを編集する画面を作成する

次に、エンドユーザーが[Save]ボタンを押したときに実行されるロジックを定義します。

  1. Save]ボタンの空いている領域をダブルクリックして、ボタンに関連するロジックを定義します。これにより、SaveOnClickという名前の新しい画面アクションが作成されます。

  2. Data]タブで、Taskエンティティを展開し、CreateOrUpdateTaskエンティティアクションをIfTrueブランチにドラッグします。SourceプロパティをGetTaskById.List.Currentに設定します。

  3. タスクを保存したらメイン画面にリダイレクトされるように、Tasksを[Interface]タブからEndノードにドラッグします。

    タスクを編集する画面を作成する

タスクの追加を許可する

以下のとおり、タスクの編集ですでに使用されている画面にリンクすることで、エンドユーザーはリスト画面から新しいタスクを追加できるようになります。

  1. Interface]タブで、[Tasks]をダブルクリックしてリスト画面を開きます。
    Iconウィジェットを、ツールボックスから画面の右上にある[Actions]プレースホルダにドラッグし、プラスアイコンを選択します。

    Actionsプレースホルダにプラスアイコンを追加する

  2. プラスアイコンを右クリックし、[Link to]>[MainFlow\TaskDetail]を選択します。

    タスクの追加を許可する

タスクの完了を許可する

次に、タスクを完了したものとしてマークする機能を追加しましょう。では、完了したタスクを削除することでこの機能を実装しましょう。

  1. リストの項目をクリックしてから、ツールバーの[Swipe Left Action]をクリックします。

  2. 新しく作成したList Actionで、テキストを「Action」から「Done」に置き換えます。

    タスクの完了を許可する

  3. List Actionの空いている領域をダブルクリックして、Swipe Left Actionに関連するロジックを定義します。

  4. Data]タブで、Taskエンティティを展開し、[Data]タブのTaskエンティティにあるDeleteTaskエンティティアクションをSwipe Left Actionのフローにドラッグします。IdプロパティをGetTasks.List.Current.Task.Idに設定します。

    タスクの完了を許可する

  5. Refresh Dataをツールボックスからアクションフローにドラッグし、DeleteTaskアクションの後、GetTasks Aggregateを選択して、画面で使用可能なタスクを更新します。

    タスクの完了を許可する

モバイルアプリをテストする

この段階でモバイルアプリをテストします。[1-Click Publish 1-Click Publish]ボタンをクリックし、ご利用の環境にアプリケーションをパブリッシュします。

モバイルアプリをパブリッシュする

アプリケーションがデプロイされたら、[ブラウザで開く Open in Browser]ボタンをクリックして、アプリケーションをブラウザでテストします(ChromeとSafariがサポートされています)。

モバイルアプリをテストする

ご利用のモバイルデバイスでアプリケーションをテストするには、「OutSystems Nowを使用してデバイス上でモバイルアプリをプレビューする」をご覧ください。