ローコードツール、OutSystems を使って10分弱でタスク管理アプリを開発しデプロイまでしてみる

## ■ はじめに
OutSystems について簡単な説明と、そもそもローコードとは何かの説明、その後アカウント作成をしてタスク管理アプリの開発～公開まで解説しています。
ローコード自体初めて触ったので自己学習の一環でまとめました
そのため過不足あるかもしれません。その場合は是非ご指摘下さい。適宜修正します。

## ■ OutSystems とは
ポルトガル発のローコード、アプリケーション開発プラットフォームです。
ビジュアルプログラミング言語というのを使って開発します。
アプリケーションの開発期間を短縮する事ができ、開発コストを削減する事が出来ると言われています。
Webアプリケーション・ネイティブアプリ・チャットボット・バッチ処理の開発、アプリケーションのログ監視などなど色々な事が出来るみたいです。

多少の制限はありますが、無償版での利用も十分可能です。学習の一環で触ってみようと思います。

## ■ そもそもローコードとは
ローコード (Low-Code) は、最小限のソースコードでソフトウェアやアプリ開発を行うツールの事を言います。
下記の画像の様に、GUI 上でドラッグ アンド ドロップなどの操作をし開発が行えます。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/e35a1e25-7f94-c228-5d12-248050a9e713.png)

### ローコード・ノーコードの開発市場
ではローコード（ついでにノーコードも）の需要はどれくらいなのか、市場はどうなのか気になったので調べてみました。
ITR が発表している「ローコード／ノーコード開発市場規模推移および予測（2020～2026年度予測）」では2020年から比べると右肩上がりの傾向です。(但し2022年以降は予測値)
少しずつではありますが、ローコードやノーコード需要が増えている (増える見込み) である事が分かります。 
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/3fee84e8-96f8-e1cb-4eea-bd8f9e063648.png)

### ローコードのメリット
- 開発期間の短縮が可能
- 開発コストも抑えられる
- プログラミング知識が少ない (流石に未経験は厳しいかと思いますが) 人でも個々の目的に応じて柔軟に開発が出来る

### ローコードのデメリット
- カスタマイズ性や拡張性に制限がある (パッケージ外の事をしたい場合は自分たちで1からコードを書く必要がある)
- ベンダーロックインの可能性もある (特定のローコードプラットフォームに依存して、他のローコードプラットフォームへの切り替えや拡張を難しくする可能性がある)

## ■ OutSystems で可能なこと
実際に OutSystems を使って開発されたアプリケーションの一部を、公式サイトの開発事例から持ってきました。
社内用のビジネスアプリやオフィス管理、注文管理システムなど色々作れそうです。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/35a8be05-b819-7f4b-59d0-dc8fbdb91039.png)
引用元：https://www.outsystems.com/ja-jp/use-cases/

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/9fdf324a-3c0c-f622-03bb-653a482e3b7c.png)
引用元：https://www.outsystems.com/ja-jp/use-cases/

又、下記の記事では OutSyusystems を勧める理由や OutSystems に頑張ってほしいことなど、分かりやすく書いてました。宜しければ見てみて下さい。

https://techblog.forgevision.com/entry/2018/08/31/10565

## ■ 無料プランで実際に使ってみる
簡単に概要は分かった所で、実際に使ってみたいと思います。
まずはアカウント作成からしていきますが、2パターンの方法があるようです。

- OutSystems 公式サイトからの場合

https://www.outsystems.com/pricing-and-editions

- (販売代理店) 株式会社Bluememe からの場合
    
https://www.bluememe.jp/outsystems/product/personal-environment.html
    

※ 株式会社Bluememe についてです。
2012年に日本で初めて OutSystems を導入した会社で、上記の括弧内でも記載した通り現在は国内販売代理店です。又、日本企業として初めて OutSystems社と販売代理店契約を締結した会社らしく、日本初の OutSystems プレミアパートナーとの事です。(詳しくは[こちら](https://prtimes.jp/main/html/rd/p/000000084.000016434.html))

その他の販売代理店企業として、伊藤忠テクノソリューションズ（CTC）・SB C&S・電通国際情報サービス（ISID）などがあるみたいです。
ちなみに、こちらが株式会社Bluememe の会社概要です。

https://www.bluememe.jp/company/

今回、国内販売代理店の株式会社Bluememe というサイトからアカウントを作成しました。
有償の場合は色々変わりそうですが、今回無償利用なのでどちらでも良いかな、と思いました。
後は「[OutSystems セルフトレーニング（無償）](https://www.bluememe.jp/outsystems/outsystems_support/self_training.html)」というのもあるらしく、動画形式で色々学習出来そうなので、こちら (株式会社Bluememe) にしたというのも理由の1つです。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/fee2845e-2422-cfda-a42a-fa3799041095.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/763fd6d2-1e99-7258-7999-e913310099f9.png)
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/5c459a79-358d-9d59-5ba9-b964f116e872.png)

上記にも記載した、株式会社Bluememe の **[OutSystems アカウント作成ページ](https://www.bluememe.jp/outsystems/product/personal-environment.html)** を開き、下にスクロールすると「**個人向け無料版のダウンロード方法**」という見出しがあります。
その下にダウンロードページのリンクがありますので、クリックします。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/a4717823-af98-ebcd-b95c-16dd10f501c1.png)

以下の5つ入力します。

- メールアドレス
- 名前
- 所属 (今回学習目的なので、none としました)
- 会社で OutSystems 使っているかどうか
- 強力なパスワード

その後、ロボットではない事を認証して「Agree and start free」を押下。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/1388f679-f9c5-c691-be7d-3e4a613bf3f7.png)

入力したメールアドレス宛にアカウント有効化のメールが届きます。「Activate My Account」を押下。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/299be9ab-d03e-0db3-b78f-d56362063991.png)


ログイン画面が開きますので、先程決めたパスワードを入力し「Log in」を押下。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/1898c3b8-bb20-f525-2e53-859d1c155512.png)


ログイン出来ましたら、Start building your app の右側に「Service Studio のアプリをダウンロードする」というボタンがありますので、押下しデスクトップアプリをダウンロードします。(ここだけキャプチャ撮り忘れました)
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/f15786e0-5431-2c5e-a9aa-3857d342e4a2.png)

ダウンロード出来ましたらインストールしていきます。Install を押下。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/a13b01d8-4d8d-f8ee-5112-296530f23463.png)

インストールが完了すると自動でブラウザが立ち上がり、Personal Environment の画面に戻ってきます。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/e310135d-eae2-ee6d-7681-d9a9563323af.png)

「Build a fully functional app in Service Studio」というセクションがあり、チュートリアルの指示に従って実際にアプリの開発からデプロイまで出来ます。
ここで好きなアプリを選択します。私は今回タスク管理のアプリを選択しました。(Task Manager Portal)
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/dfc2d7ea-316e-a17e-0be5-780992930a8f.png)
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/6898bb7f-e7e0-6a0e-34eb-4326348431a4.png)

Build this app を押下。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/7d8c3f61-2cce-f20d-26f4-1d9a1d4baeb5.png)

Service Studio は先程インストールしておいたので Build an app をクリックしてデスクトップアプリを起動させます。まだインストールしていない方は Download Service Studio を押下してダウンロードしましょう。
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/59a6089e-3580-3f50-95f5-18686c894cc3.png)

規約の同意を求められますので I have read the User License Agreement にチェックを入れ I agree をクリックします。（本当はちゃんと読まないといけないのでしょうが、流石に全文英語はきついです）
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/4a541cb6-bb06-9845-e458-50b3929cca1f.png)

環境を選択します。私はデフォルトで設定されていたので特に何もせずに「Next」を押下しました。
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/ce9d3433-f896-b4a7-60a1-9ed35101cb5b.png)

再度、メールアドレスとパスワードを入力し Log in を押下。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/3afed275-14b1-4544-1523-99c2703e4099.png)

ここからチュートリアルがあります。(英語です)
基本的にそんなに難しい単語はなかったので多少読める方であれば問題なさそうです。苦手な方は Google翻訳や DeepL などで適宜翻訳する形が良いと思います。
まずは以下の3つを決めます。決めたら「Create App」を押下。

- タスク管理アプリの名前
- アプリの説明
- テーマカラー

![22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/d4488b0f-79dd-a1c2-f28e-bd0e8405532a.png)

レイアウトを決めます。
今回はテンプレートを使いたかったので Search template に ”Task” と入力し、Task Detail のテンプレートを選択。その後 Create Screen を押下。
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/e854a2ef-8507-6c71-2b12-ed2644d859a3.png)

Task KPI Cards というウィジェットをメインコンテンツの中にドラッグアンドドロップして下さい。と指示がきてるのでその通りにやってみます。
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/34d486d8-bb2f-2fa5-5f76-5d21f20e74cb.png)

Task KPI Cards が追加出来ました。 (画像で言うと赤枠の部分)
次は、Task List をすぐ下のスペースにドラッグアンドドロップするよう言われてますので実行してみます。
![25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/878a26bf-2c24-831c-a64a-5960d55a7da6.png)

Tasks List が追加出来ました。 (画像で言うと青枠の部分)
次は画面の作成とリンクの作成をするように言われています。
まず Button と書かれているウィジェットをアプリケーション内にドラッグして配置します。
![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/81342244-69ba-ea6d-f8ee-795cbb9e74e1.png)

追加出来ましたので、テキストを New Text と変更します。(デフォルトだと save になっていた為)
その後、追加したボタンのウィジェットを選択→右クリック→ Link to → New Screen を押下。
![27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/6574ad7b-2520-b6b1-6fb5-9c5cbdfff077.png)

追加したボタンを押した場合のアクションを選択します。
Task Detail を選択し、Create Screen を押下。
![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/947b1be0-23c7-747a-fcdc-c6591d29f597.png)

これでアプリをデプロイする準備が整ったみたいです。
1-Click Publish という緑のボタンをクリックします。
![29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/dde881ad-48d3-4eff-0f85-53bff9d7e893.png)

ここで、タスク管理のアプリがアップロード→コンパイル→デプロイという処理が走ります。
チュートリアルの Next を押下。
![30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/2a9ae4d3-efcc-c50a-372c-e85835185b86.png)

完了したみたいなので、早速アプリを確認してみます。
Open in browser を押下。
![31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/255a9338-862e-0ed8-4b17-ee2e180901fe.png)

ちゃんと公開されていますね！何か安心しました。
先程、New Task ボタンのリンク先に Task Detail (訳: タスクの詳細) のテンプレートを作成しました。それがちゃんと表示されるか確認しますので New Task を押下。
![32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/3726aa5b-09c3-c765-8ae4-999cd21dbe56.png)

ちゃんとタスクの詳細が表示されていますね。
適当に、タスクの名前とタグと日付と説明を入れてみます。その後、save ボタンを押下。
![33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/724e25dc-a2a5-69a2-db8d-cb8cd5e5b285.png)

特に何も設定しませんでしたが、フラッシュメッセージも表示されるんですね。
successfully になっていますので最初の画面に戻り test_01 のタスクが追加されたか確認してみます。
![34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/47afb428-4cc5-2fdd-1683-dde4debb9791.png)

追加されてますね。
これでタスク管理アプリの開発は終わりです！
![35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3282990/201071f5-efe8-5272-ea53-ea6e35cd391b.png)

以上

## ■ まとめ
これでタスクアプリとしての最低限の機能は出来ました。
欲を言えば、New Task のボタンの位置を変えたりボタンの色を変えたりしたいですが、今回は “テンプレートを使ってチュートリアルに従いとりあえず最後までやってみる” という事に重きを置いていますのでそこは一旦スルーします。

ここまでかかった時間は15分くらいでした。
私の場合は要所要所キャプチャ撮っていたのと、忘れないように簡単に一言メモしていたので実際は作業していた時間だけならもう少し短いと思います。テンプレートを使ったのが一番でかいとは思いますが、こんな短時間でここまで出来るのは確かに凄いな。と思いました。

現在様々な企業でローコードツールを導入されているのも納得です。
ローコードでは出来ない機能 (パッケージ外) の場合は、その部分だけ拡張して自分達で1から書く。という方法もありますしね。

一旦は、この辺で終わろうと思います。
OutSystems に関しては今後も学習していく予定ですので、記事に出来そうな内容があればまた出します。
ここまで見ていただき、ありがとうございました！