※この記事は「Outsystems 入門 ～Webアプリケーションを作成しよう～」の連載記事です。連載トップはこちら
第3回 Webアプリケーションを超高速で作ろう！（前編）
それでは早速、Outsystemsを用いてWebアプリケーションを超高速で作成していきましょう。
慣れてしまえば今回、次回の記事の作業を併せても、10分もかからず完了できるようになってしまいます。
※記事を読みながらだと10分は超えます（笑）
10分でWebアプリケーションを作成！これぞ超高速開発ですね！
今回作成するWebアプリケーションの機能について
・図書館の本を検索できるシステム
・本の登録や更新もできる
・データはデータベースに格納したい
とりあえず、シンプルにこれだけです。
本の一覧はExcelデータにまとめましたので、以下よりダウンロードしておいてください。
アプリケーションの作成手順
①作成するWebアプリケーション全体の設定を行う
②Excelの本のデータからテーブルを作成する
③検索画面を作成する
④データの登録・更新画面を作成する。
アプリケーション作成！
①作成するWebアプリケーション全体の設定を行う
「Outsystems ServiceStudio」を起動します。
（Windowsのメニューを開き、「Outsystems」や「ServiceStudio」と検索すると見つけることができます）
ServiceStudioが起動したら、「New Application」をクリックします。
アプリケーションをどうやって作りますか？と聞かれます。
今回は1から自分で作りたいため、「Start from scratch」をクリックしてください。
ちなみにもう一方の「Start from an app」は、Outsystemsが用意しているアプリケーションの雛型を利用して作る際に選択します。
作成するアプリケーションの種類（フレームワーク）を選択します。
Webアプリケーションを作成する場合は、上段左の「Reactive Web」か、下段左の「Traditional Web」を利用しますが、今回は「Traditional Web」を選択してください。
Tips Reactive WebとTraditinal Webの違い
両者の違いを簡潔に示すと
・Reactive Web →アプリケーションの処理をサーバ側、クライアント側に分けて作りこむことができる
・Traditional Web →作りこんだアプリケーションの処理は、サーバ側のみで実行される。
となります。
今回Traditional Webを選んだのは、作成に必要な知識やスキルが比較的少なく済むからです。
Reactive Webの方が、クライアントサイドの処理も作りこめるし便利なのでは？と思うかもしれませんが
その分、クライアント側、サーバ側の基礎知識やスキルが求められます。
システムの要件を踏まえてどちらが適切か判断するようにしましょう。
アプリケーションの名前を記入します。
今回は、図書館の本を検索したりするアプリですので、「Library」という名前にしておきます。
ちなみに画面下のカラーパレットを変更すると、デフォルトのアプリアイコンの色を変えることができたり、任意の画像をアプリケーションのアイコンとして登録することができます。
名前を入力した後は、「CREATE APP」をクリックしましょう
モジュールを作成する画面が表示されます。
デフォルトのまま、「CREATE MODULE」をクリックしてください。
※モジュールとは何か？という点については、この演習をやり切った後の方が理解しやすいため今回は割愛します。
②Excelの本のデータからテーブルを作成する
続いて、データベース上に本のデータを格納するテーブルを作っていきましょう。
Outsystemsでは、データベース上のテーブルをEntityと呼びます。
Entityを作る方法はいくつかありますが、今回はこの記事の先頭に掲載した「BookList.xlsx」というExcelファイルをOutsystems上で読み込み、Entityを作成、更にデータのインポートまでを行っていきたいと思います。
画面右上の「Data」タブをクリックし、「Entities」→「Database」を右クリック→「Import New Entities from Excel…」を選択してください。
「BookList.xlsx」を選択し、「開く」をクリックします。
ちなみにこのExcelには、以下のように本のデータを記載した「Book」シートが存在します。
本の名前、著者、出版社、入荷日が記載されています。
「Excelファイルから、BookというEntityを作成し、データの取り込みを行ってもいいですか？」（意訳）というダイアログが表示されるので、「IMPORT」をクリックします。
「Data」タブの「Entities」→「Database」の配下に「Book」というEntityが表示されました。
ただ、この状態は実際にデータベース上にBook Entityが作成されたわけではなく、Book EntityをServiceStudio上で定義しただけの状態になります。
そこで、画面上部中央の「1-Click Publish」ボタンをクリックしましょう。
ServiceStudio上で作成したBook Entityの定義から、データベース上に実際のEntityが作成されます。
Tips 1-Click Publish ボタンについて
このボタンをクリックすることで、ServiceStudio上のアプリやDBのデザインを基に、サーバ上に実際のアプリケーションやデータベースが構築されます。（パブリッシュ）
図のように、緑色の「１」のボタンが表示されている場合、パブリッシュが可能です。
ちなみに、今回のように無償トライアルでOutsystemsを利用している場合は、Outsystemsが管理しているクラウドサーバ上にアプリケーションやデータベースが構築されます。
パブリッシュ中は、「1-Click Publish」ボタンに対して下図のようなアニメーションが表示されます。
また、画面下の「1-Click Publish」ウィンドウでパブリッシュの進行状況が確認できます。
パブリッシュが終わると、ウィンドウに「Done」と表示されます。
これでサーバ上にEntityとデータが作成されました。実際に見てみましょう。
ServiceStudio上でBook Entityを右クリックし、「View Data」をクリックします。
Excelの定義通りに列が作成され、データも格納されていることが確認できると思います。
Tips Excelと作成されたEntityのマッピングについて
ExcelファイルからEntityを作ってみましたが、Entityを作成するためのExcelファイルは以下のようなルールで記載する必要があります。
さて、今回はここまでです。
Excelをインポートすることで、Outsystems上で扱えるデータベース内にEntityが作成され
データも併せて作ることができました。
次回は、このデータベースとEntityを用いて、Webアプリケーションの画面を作成していきます。