※この記事は「Outsystems 入門 ～Webアプリケーションを作成しよう～」の連載記事です。連載トップはこちら
第4回 Webアプリケーションを超高速で作ろう！（後編）
前回に引き続き、OutsystemsでWEBアプリケーションを作っていきましょう。
作っていたアプリをおさらいしておきます。
作成するアプリの概要
・図書館の本を検索できるシステム
・本の登録や更新もできる
・データはデータベースに格納したい
アプリケーションの作成手順
①作成するWebアプリケーション全体の設定を行う
②Excelの本のデータからテーブルを作成する
③検索画面を作成する
④データの登録・更新画面を作成する
③検索画面を作成する
前回は、データベース内のEntity（テーブル）の作成まで実施しました。
今回は、このEntity内のデータを表示し、検索する画面をまず作成してみましょう。
ServiceStudioで「InterFace」タブをクリックして表示し、「UI Flows」内の「MainFlow」をダブルクリックします。
Tips UI Flowsとは？
ＵI Flows はモジュール内の画面をグループ化し、それぞれの画面の遷移を表現したものです。
システム開発で言う画面遷移図を表現したものだと思ってください。
ちなみにMain Flowというのは、デフォルトで作成されているUI Flowsの一つです。
特にグループ分けを行いたいわけではない場合、このMainFrow内に画面を作成するといいでしょう。
続いて、再び「Data」タブを開きます。
作成したBook Entityを画面中央にドラッグ＆ドロップします。
すると、星が飛び散るアニメーションとが表示され、Bookｓという、BookEntityのデータを表示する画面が作成されます。
あっという間ですが、これだけでれっきとした画面が作成できています。
実際に見てみましょう。
先ほどの画面中央のBooksアイコンをダブルクリックするか、InterFaceタブを開き、「UI Flows」→「MainFlow」→Booksをダブルクリックしてください。
すると、BookEntityのデータが表示され、検索も実施できる画面が表示されます。
前回のEnity作成時と同様に、1-Clickパブリッシュボタンをクリックし、この画面を含むアプリケーションをサーバに構築しましょう。
パブリッシュが終わると、1-Clickパブリッシュボタンが青色矢印のボタンに変わります。
このボタンをクリックすることで、Outsystemsのサーバにパブリッシュされたアプリケーションにアクセスすることができます。クリックしてみましょう。
※ブラウザを開き指定のURLを入力してアクセスすることもできます。
ブラウザが立ち上がり、作成したLibraryアプリケーションのログイン画面が表示されます。
Emailアドレスには、第2回でOutsystemsに登録したメールアドレスを入力してください。
パスワードも、その際設定したパスワードと同じものを入力します。
ログインに成功した場合、先ほどServiceStudioで確認したBooks画面が表示されます。
ExcelEntityの列、データが表示されていることが確認できると思います。
検索機能も自動作成されているため、試してみましょう。
画面上のテキストボックスに検索する文字を入力し、Searchボタンをクリックした結果が下図となります。
この場合、出版社列の「日本出版」が検索用語の「日本」に部分一致して表示されていますが、検索範囲としてはすべての列が対象となります。
ちなみに、このWebアプリケーションは今流行りのレスポンシブルデザインにも対応しています。
ブラウザのサイズを変えてみてください。
下図のように、ブラウザのウィンドウサイズに合わせてページの各コンテンツのサイズも自動調整されていることが確認できると思います。
④データの登録・更新画面を作成する。
最後に本のデータを登録、更新する画面を作成していきましょう。
ServiceStudioで「InterFace」タブをクリックして表示し、「UI Flows」内の「MainFlow」をダブルクリックします。
続いて、「Data」タブをクリックして表示し、「Entities」→「Database」配下にある、「Book」Entityをドラッグ＆ドロップして、画面中央のBooksの横に配置します。
MainFlow内に、BookDetailという画面が新たに追加されました。なんと、作成に必要な操作はこれだけです。
Traditional Webの場合、Entityを任意のUI Flow内に1回ドラッグ＆ドロップすると、検索（一覧）画面が作成され、もう一回ドラッグ＆ドロップをすると、入力（登録・更新）画面が作成されます。
びっくりするほど簡単ですね。
ちなみに、Outsystemsではこの動作のことを「scaffold」（スキャフォールド）と呼んでいます。
自動作成機能くらいの認識でとりあえず覚えておきましょう。
それでは早速、スキャフォールドによって自動作成された画面を確認してみましょう。
MainFlow内のBookDetail画面をダブルクリックするか、Interfaceタブを再度開き、MainFlow内にあるBookDetail画面をダブルクリックします。
BookEntityの各項目を入力し、登録できる画面が作成されていることが確認できると思います。
1-Clickパブリッシュボタンをクリックして、サーバにパブリッシュしましょう。
青色矢印ボタンの表示に変わったら、ボタンをクリックします。
ブラウザが立ち上がると、まずはBooks画面（一覧画面）が表示されるのですが、
先ほどまでの画面と比べると、下記の点が変更されていることが分かると思います。
①「Create a new Book」リンクが追加されている
② BookName列が、リンクに変更されている
①をクリックすると、BookEntityのデータを新規登録するモードで入力画面に遷移し、②をクリックすると、選択行のデータを編集するモードで入力画面に遷移します。
まずは①をクリックしてみましょう。
「NewBook」というタイトルで、先ほどServiceStudio上で確認した画面が表示されます。
新規登録モードなので、各項目は空欄になっていますね。
空欄に任意の値を入力し、「Save」ボタンをクリックしてデータを登録してみましょう。
はい。これで、データの新規登録が完了しました。
一覧画面に戻り、本①の作成が成功した旨のメッセージが表示されます。
また一覧を見てみると、作成した本①のデータが追加されていることが分かると思います。
ただEntityをドラッグしただけで、登録機能ができてしまいましたね。
続いて、更新できるかも試してみましょう。
先ほど登録した本①データのBookName列、本①のリンクをクリックしてください。
すると、先ほどの入力画面に本①のデータがセットされ、更新モードで表示されます。
タイトルも先ほどは「New Book」だったものが、選択した本のタイトルである本①になっていますね。
今回は入荷日（Arrival Date）を違う日付に変更して、「Save」ボタンを押してみましょう。
はい。これで更新ができました。先ほど変更した入荷日の部分を確認してみましょう。日付が設定されたものに変更されていますね。
たった1回ドラッグ＆ドロップ操作をしただけで作成された簡単な画面ですが、しっかり更新機能も実装されています。
ということで、目標だった「本の検索、登録、更新ができるアプリケーション」が完成したわけですが、
ここまでを振り返ってみると、これだけの操作しかしていません。
①Excelからテーブル（Entity）とデータを作成する。
②作成したEntityをMainFlowにドラックアンドドロップする → 検索機能を持つ一覧画面が自動作成
③さらにもう一度、EntityをMainFlowにドラッグアンドドロップする → 登録・更新機能を持つ入力画面が自動作成
わすか３ステップ…
１０分で作成できる！と謳っていた根拠もわかりましたでしょうか？
実際のWebアプリを開発する際は、流石にこれだけでは終わりませんが、まずはこのスキャフォールドで画面の雛型を作り、どんどんカスタママイズをしていき完成を目指すことはよくあります。
実際、カスタマイズの量がたいしたことがなく３０分以内に１画面の作成が完了したなんてこともザラです。
次回からは、この画面にカスタマイズを加えて、より実用的なアプリを作っていこうと思います。
はじめてのOutsystems Webアプリケーションの作成、お疲れ様でした。