OutSystemsではスマートフォンのアプリってどうやって開発するの？
スマートフォンのアプリ（以下、モバイルアプリ）を開発する方法はいくつかあります。
それぞれのOSに対応した「ネイティブアプリ」。
HTMLとCSSとJavascriptで構成された「ハイブリッドアプリ」などがあります。
OutSystemsでは「ハイブリッドアプリ」を実装するための仕組みがすでに用意されていて、Webアプリと同様の作成方法でモバイルアプリを実装できます。
このページでは、モバイルアプリを開発する流れを解説していきたいと思います。
なお、Webアプリケーションは以下のページに解説しています。
目次
OutSystemsのモバイルアプリケーション開発
では、スタートメニューから「OutSystems Service Studio 11」を立ち上げてみましょう。
OutSystemsのモバイルアプリケーション作成
「Service Studio」の起動画面にて、「New Application」をクリックしてアプリを作成します。
※今回、作成する画面はWebアプリケーションと同様に２画面作成します。データを複数表示する一覧画面と、登録用の詳細画面の開発の流れを解説します。
今回は、モバイルアプリケーションの中でも、スマートフォン用のアプリ開発を行います。
表示された「Phone App」を選択して「NEXT」ボタンをクリックします。
アプリケーション名を「Phone Application」と入力して
「CREATE APP」ボタンをクリックします。
アプリケーションの作成後は、自動的にモジュール作成の画面になります。
名称もアプリケーション名が自動的に入力されていますので、「CREATE MODULE」ボタンをクリックしてモジュールを作成しましょう。
モジュールの作成が完了すると、以下の開発画面が表示されます。
※ここまでの流れはWebアプリケーションと同様になります。
OutSystemsによるモバイルアプリケーションの一覧画面作成
Webアプリケーションでは、テンプレートを使用して開発を行いました。
モバイルアプリケーションでは、手動でウィジェットを配置しながら解説していきます。
ヴィジェットとは、画面の各部品（ボタン、コンボボックスなど）のことで左側にアイコンとして表示されています。
モジュールの作成後、左側にある「Screen」ウィジェットを画面中央へドラッグ＆ドロップします。
新規画面では、テンプレートが選択できますが、今回は「Empty」を選択します。
Screen nameは、「List」とします。
表示された画面にて、左側にある「List」ウィジェットを、モバイル画面上にドラッグ＆ドロップします。
次に、一覧に表示するデータの準備をします。
今回は標準で実装されているサンプルデータベースを使用します。
下の画像にあるボタンをクリックします。
表示された画面の左側の一覧にある「OutSystemsSampleDataDB」をクリックします。
すると右側に使用するデータベースが表示されますので、以下の画像にある３つのデータベースにチェックし、「APPLY」ボタンをクリックします。
右上の「Data」タブを選択し、「Database」内の「Sample_Employee」を「List」ウィジェットにドラッグ＆ドロップします。
「Sample_Employee」のデータが一覧形式で自動的に表示されます。
この状態で「1-Click-Publish」ボタン（画面上部の真ん中にある緑のボタン）をクリックします。
ブラウザ上で、一覧画面がモバイル形式にて表示されていると思います。
色々動作などを試してみてください。
一覧画面が完了しましたので、次に詳細画面を作成していきましょう。
OutSystemsによるモバイルアプリケーションの詳細画面作成
では、詳細画面を作成していきます。
「Main Flow」をダブルクリックし、左側にある「Screen」ウィジェットを画面中央へドラッグ＆ドロップします。
表示された画面にて「Empty」を選択し、「Screen name」に「Detail」と入力し、「CREATE SCREEN」ボタンをクリックします。
左側にある「Form」を画面中央にドラッグ＆ドロップします。
右側にの「Data」タブにある、「Sample_Employee」エンティティを画面へドラッグ＆ドロップします。
自動的に作成された詳細画面の一番下に「Save」ボタンがあります。
自動作成されたタイミングでは、何も処理がないのでダブルクリックして処理を作成します。
「Save」ボタン内の処理にて、「Run Server Action」ウィジェットを以下の画像通りの場所にドラッグ＆ドロップします。
表示された画面にて、「NEW SERVER ACTION」ボタンをクリックします。
作成したServerActionにて、データベースを更新するために「Sample_Employee」にある「CreateOrUpdateSample_Employee」を、下記の画像の通りにドラッグ＆ドロップします。
データベースを更新するための情報をServerActionで取得したいので、作成したActionを右クリックし、「Add Input Parameter」をクリックします。
追加した引数の名前を「Sample_Employee」にしてください。そうすると「Data Type」も自動的に「Sample_Employee」になると思います。
そして、追加した「Sample_Employee」を「CreateOrUpdateSample_Employee」の引数に設定します。
詳細画面の「Save」ボタンの処理に戻って、追加したServerActionの引数を設定します。
ここでは、画像の通りに「Action1」の引数にリストで表示される値を設定します。
「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と組み合わせると色々なアプリが作成できますので、ぜひ試してみてください。