Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

モバイルアプリにのみ適用されます

 

 

OutSystems

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

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

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

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

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

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

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

Service Studioで、[Phone]テンプレートを使用してToDoという新しいモバイルアプリを作成してから、アプリケーションの新しいモジュールを作成します。

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

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

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

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

  • Description
  • Due Date
  • Is Active

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

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

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

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

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

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

これでTo-Doタスクがデータベースに保存されたため、すべてのタスクをリスト表示する画面を作成できるようになりました。

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

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

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

Tasks画面

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

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

リスト内の最初のタスクのタイトルを右クリックし、[Link to Mobile Screen (New Screen)]を選択します。

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

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

  1. Formウィジェットを、ツールボックスから新しいモバイル画面の空いている領域にドラッグ&ドロップします。
  2. [Data]タブにあるTodoエンティティを、事前に作成したFormウィジェットにドラッグ&ドロップします。

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

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

  1. [Save]ボタンの空いている領域をダブルクリックして、ボタンに関連するロジックを定義します。これにより、SaveOnClickという名前の新しい画面アクションが作成されます。
  2. TodoエンティティのツリーにあるCreateOrUpdateTodoエンティティアクションを、SaveOnClickアクションにあるIfのTrueブランチにドラッグ&ドロップします。SourceプロパティをGetTodoById.List.Currentに設定します。
  3. タスクを保存したらメイン画面にリダイレクトされるように、[HomeScreen]画面を[Interface]タブから[End]ノードにドラッグ&ドロップします。

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

タスクの追加を許可する

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

  1. [Interface]タブのツリーにある[HomeScreen]をダブルクリックして、リスト画面を開きます。
  2. Iconウィジェットを、ツールボックスから画面の右上にある[Actions]プレースホルダにドラッグ&ドロップし、プラスアイコンを選択します。
  3. アイコンを右クリックし、[Link to モバイル画面 MainFlow\Todo]を選択します。

タスクの追加を許可する

タスクの完了を許可する

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

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

  2. テキストを「Action」から「Done」に置き換えます。

    タスクの完了を許可する

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

  4. [Data]タブのTodoエンティティにあるDeleteTodoエンティティアクションを、Swipe Left Actionのフローにドラッグ&ドロップします。プロパティIDをGetTodos.List.Current.Todo.Idに設定します。

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

    タスクの完了を許可する

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

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

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

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

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