【OutSystems】アプリケーション作成からHello worldまで


#### 前提
ローコードプラットフォームのOutSystemsで、Hello world出力まで解説します。
アカウントの登録と、Service Studioのインストールは終わっているものとして書き出します。

#### アプリケーション作成からHello worldまで
Service Studio立ち上げ後「New Application」を選択
![00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/5e959d69-0f69-916e-af35-8547020aaea4.png)

「From scratch」を選択後、「Next」で進む
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/8bba890c-4899-9e6e-6ab1-e452a064e24e.png)

「Reactive Web App」を選択後、「Next」で進む
※タブレット向けやスマホ向けの画面で試す場合は、それぞれ選択する
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/a2b975e6-6e42-5de7-8084-1efe10972ab2.png)

アプリケーション名と説明を入力し、
「Create App」でアプリケーションを作成
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/e246478a-e0bc-a4a1-9ca0-8bcf9e00f368.png)

「Create Module」でモジュールを作成
※アプリケーション内にモジュールが作られる
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/c6df157d-82eb-b78b-6d86-229168ccc8fc.png)

一度、「Development - personal..」から前の画面に戻る
![06a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/71126235-dba9-0459-674f-bc22bcd939f7.png)

HelloWorldAppアプリケーションが作られていることを確認し、
「HelloWorldApp」を選択して進む
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/0dd1698a-51a5-0e37-66d2-41d866564532.png)

モジュールも作成されていることを確認
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/32d9b8de-26fe-3c2c-df50-b7f9ba126b08.png)

「HelloWorldApp..」からタブを切り替え
![07b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/ffa666ca-3403-5017-4cfb-b754d8567653.png)

開発用の画面で一度「Publish」を押して、ソースをビルド
※Publishを行うことでサーバ側に実装が送信され、自動でビルドと公開が行われる
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/687f1bbf-f588-d940-1772-5fbc0d2a7d8c.png)

Publishのログを確認
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/b11abc1c-de72-1819-2aef-8ca794f3a9cf.png)

「Screen」をドラッグして画面中央まで持ってくる
![09b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/b7352e85-83d3-5e06-c404-0e84c334bbdb.png)

画面作成用のウィンドウが開くので、
「Empty」を選択し、「CreateScreen」で進む
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/8cf52bff-cf79-5bea-7dd7-ec4fb960e985.png)

追加された画面を確認
※上部にメニュー（デフォルトで存在）がある
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/7e3188fd-72ba-f9c1-36d8-1944a3ae0880.png)

テキスト表示用に、
「Label」をドラッグして画面中央のMainContentに持ってくる
![11b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/cde6540c-4fc6-d58f-2e1d-dab6efd651cc.png)

「Hello world」を入力して、再度Publish
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/5822400e-4505-438c-34fc-b3aaf0e8dea4.png)

Publishボタンが「Open in browser」ボタンになるので、クリック
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/e7082dc5-fbeb-c1a1-e2f9-8d8e2ac7165e.png)

ブラウザでHello worldが確認できれば完了
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882879/2fd8163c-9090-3272-6db8-aaffc7f82d3a.png)


#### おわりに
アプリケーションの作成からHello worldの表示まで解説しました。
通常、Webアプリケーションの作成となると、ソースの実装からWebサーバでの公開までにいくつもの手順が必要になります。
その点、ローコードのWeb開発は、少ない手順でアプリを構築できます。
ビジネスロジックにすぐにアプローチ出来るのが大きなメリットですね