OutSystems システム開発

【OutSystems】iOSもAndroidも開発可能!OutSystemsのモバイル開発手順とは

2020年2月24日

outsystems develop mobile application

 

スマートフォンのアプリを作りたいんだけど、開発をやったことがないから何から学習していけば良いのかわからない。
OutSystemsではスマートフォンのアプリってどうやって開発するの?

 

スマートフォンのアプリ(以下、モバイルアプリ)を開発する方法はいくつかあります。
それぞれのOSに対応した「ネイティブアプリ」
HTMLとCSSとJavascriptで構成された「ハイブリッドアプリ」などがあります。

OutSystemsでは「ハイブリッドアプリ」を実装するための仕組みがすでに用意されていて、Webアプリと同様の作成方法でモバイルアプリを実装できます。

このページでは、モバイルアプリを開発する流れを解説していきたいと思います。

なお、Webアプリケーションは以下のページに解説しています。

https://mamitoblog.com/outsystems-develop-procedure/

OutSystemsのモバイルアプリケーション開発

では、スタートメニューから「OutSystems Service Studio 11」を立ち上げてみましょう。

OutSystemsのモバイルアプリケーション作成

「Service Studio」の起動画面にて、「New Application」をクリックしてアプリを作成します。

※今回、作成する画面はWebアプリケーションと同様に2画面作成します。データを複数表示する一覧画面と、登録用の詳細画面の開発の流れを解説します。

outsystems

今回は、モバイルアプリケーションの中でも、スマートフォン用のアプリ開発を行います。
表示された「Phone App」を選択して「NEXT」ボタンをクリックします。

outsystems

アプリケーション名を「Phone Application」と入力して
「CREATE APP」ボタンをクリックします。

outsystems

アプリケーションの作成後は、自動的にモジュール作成の画面になります。
名称もアプリケーション名が自動的に入力されていますので、「CREATE MODULE」ボタンをクリックしてモジュールを作成しましょう。

outsystems

モジュールの作成が完了すると、以下の開発画面が表示されます。
※ここまでの流れはWebアプリケーションと同様になります。

outsystems

OutSystemsによるモバイルアプリケーションの一覧画面作成

Webアプリケーションでは、テンプレートを使用して開発を行いました。
モバイルアプリケーションでは、手動でウィジェットを配置しながら解説していきます。

ヴィジェットとは、画面の各部品(ボタン、コンボボックスなど)のことで左側にアイコンとして表示されています。

モジュールの作成後、左側にある「Screen」ウィジェットを画面中央へドラッグ&ドロップします。

outsystems

新規画面では、テンプレートが選択できますが、今回は「Empty」を選択します。
Screen nameは、「List」とします。

outsystems

表示された画面にて、左側にある「List」ウィジェットを、モバイル画面上にドラッグ&ドロップします。

outsystems

次に、一覧に表示するデータの準備をします。
今回は標準で実装されているサンプルデータベースを使用します。
下の画像にあるボタンをクリックします。

outsystems

表示された画面の左側の一覧にある「OutSystemsSampleDataDB」をクリックします。
すると右側に使用するデータベースが表示されますので、以下の画像にある3つのデータベースにチェックし、「APPLY」ボタンをクリックします。

outsystems

右上の「Data」タブを選択し、「Database」内の「Sample_Employee」を「List」ウィジェットにドラッグ&ドロップします。

outsystems

「Sample_Employee」のデータが一覧形式で自動的に表示されます。
この状態で「1-Click-Publish」ボタン(画面上部の真ん中にある緑のボタン)をクリックします。

outsystems

ブラウザ上で、一覧画面がモバイル形式にて表示されていると思います。
色々動作などを試してみてください。

一覧画面が完了しましたので、次に詳細画面を作成していきましょう。

OutSystemsによるモバイルアプリケーションの詳細画面作成

では、詳細画面を作成していきます。
「Main Flow」をダブルクリックし、左側にある「Screen」ウィジェットを画面中央へドラッグ&ドロップします。

outsystems

表示された画面にて「Empty」を選択し、「Screen name」「Detail」と入力し、「CREATE SCREEN」ボタンをクリックします。

outsystems

左側にある「Form」を画面中央にドラッグ&ドロップします。

outsystems

右側にの「Data」タブにある、「Sample_Employee」エンティティを画面へドラッグ&ドロップします。

outsystems

自動的に作成された詳細画面の一番下に「Save」ボタンがあります。
自動作成されたタイミングでは、何も処理がないのでダブルクリックして処理を作成します。

outsystems

「Save」ボタン内の処理にて、「Run Server Action」ウィジェットを以下の画像通りの場所にドラッグ&ドロップします。

outsystems

表示された画面にて、「NEW SERVER ACTION」ボタンをクリックします。

outsystems

作成したServerActionにて、データベースを更新するために「Sample_Employee」にある「CreateOrUpdateSample_Employee」を、下記の画像の通りにドラッグ&ドロップします。

outsystems

データベースを更新するための情報をServerActionで取得したいので、作成したActionを右クリックし、「Add Input Parameter」をクリックします。

追加した引数の名前を「Sample_Employee」にしてください。そうすると「Data Type」も自動的に「Sample_Employee」になると思います。

そして、追加した「Sample_Employee」「CreateOrUpdateSample_Employee」の引数に設定します。

詳細画面の「Save」ボタンの処理に戻って、追加したServerActionの引数を設定します。
ここでは、画像の通りに「Action1」の引数にリストで表示される値を設定します。

outsystems

「Save」ボタンをクリックされた際に、正常に処理されたら一覧画面に戻るように設定します。
右側の「Interface」タブをクリックし、「List」スクリーンを下記の画像の通りにドラッグ&ドロップします。

最後に一覧画面から詳細画面へ遷移する処理を追加します。
下記の画像の通りにクリックしていきます。

作成したAction内にて、遷移先を詳細画面に変更します。
下記の画像の通り、「Detail」スクリーンをEnd上にドラッグ&ドロップします。

詳細画面には、引数が存在しますので作成したActionを右クリックし「Add Input Parameter」にて引数を追加します。
引数の名前は「Sample_EmployeeId」とします。
追加した引数を「Detail」の引数に設定します。

詳細画面にてエラーになっている箇所がありますので、リストから「GetEmployees.List.Current.Sample_Employee.Id」を選択します。

これですべての処理を設定しましたので、「1-Click-Publish」ボタンをクリックしましょう。
作成したアプリケーションを色々と操作してみてください。

作成したアプリケーションはiOSとAndroidのアプリとして作成することが可能です。
iOSは「Apple Developer Program」、Androidは「Android Developers」への登録が必要になります。
また、テストであれば「OutSystems Now」というアプリがあり、ブラウザの右側にQRコードが表示されていますので、そちらを読み込んで動作確認も可能です。

アプリケーション作成画面

いかがでしたでしょうか。
他にもForgeと組み合わせると色々なアプリが作成できますので、ぜひ試してみてください。

-OutSystems, システム開発
-, , ,

Copyright© Mamito blog , 2020 All Rights Reserved Powered by AFFINGER5.