コードを書かない（書けない）私には福音のごとき「ローコード/ノーコード」のすがすがしい風が吹きまくった2021年ですが、その中でも気になっていたOutSystems。
是非、一度触ってみたいと思い、データ連携畑の人なのでTwitter のデータをOutSystems で引っ張ってくるアプリをつくりました。
この記事はOutSytems Advent Calendar 2021 の12日目の記事です。
https://qiita.com/advent-calendar/2021/outsystems
OutSytems について
OutSystems をまずWebsite で見て見ましょう。Web アプリケーション、モバイルアプリケーション、デスクトップアプリケーションがめちゃくちゃ簡単に作れるプラットフォームです。
https://www.outsystems.com/ja-jp/
すぐに「Start Free」が見つかります。はじめてみます。
Web に実行環境と管理画面があって、「Service Studio」をデスクトップにインストールして、そこでアプリを作ります。Service Studio をダウンロード。
全く苦労せずに新しいReactive なWeb アプリを作れました。
マニュアルなしでここまでは来れてしました。
Twitter データを持ってくるところもCData Connect でノーコード
さて、普通はここでWeb アプリケーションを作りに行くのですがTwitter のAPI をそのまま使うと大変そうなので、CData Connect というノーコードでWeb API をOAS(Open API Spec）に変換してくれるサービスを使います。
こちらからトライアルが申込可能です。
Twitter アカウントへの接続
CData Connect にログインします。「DATA MODEL」タブからTwitter のアイコンを選択します。
通常Twitter のAPI にアクセスするにはOAuth アプリをTwitter Developer サイトで作成し、申請し、トークンやシークレットをもらってアクセスしますが、Connect では、「Connect」ボタンを押すだけでTwitter API にOAuth 認証できます。
Twitter にログインして、連携アプリを認証します。
無事にTwitter と接続できました。
Twitter のメンションデータを指定
OutSytems ではOAS ファイル定義が使えるので、OData エンドポイントを作って、OAS 定義を保存します。
Twitter データソースを選択して。
まずはTwitter のMention テーブルを選択。
今回はGET だけなので、メソッドを選択して、カラムを選択。
Twitter Mention のエンドポイントができました。
Open API Spec を保存
Open API をクリックして、URL をクリックして、OAP の定義を.json で保存します。これをOutSytems にロードすれば、API のメタデータをしっかり読んでくれます。Open API（Swagger）などのスタンダードをしっかり使ってくれるところがOutSystems のすごいところです。
OutSytems でTwitter データを表示するアプリを作成
Out Systems のStudio にもどって、Twitter データを表示するWeb アプリを完成させます。
Logic にTwitter データを設定
まずはLogic をつくっていきます。
「Logic」→「Integration」→「REST」を右クリックして、「Consume REST API」をクリック。
「REST API URL」で、「Upload File」をクリックします。ここで先ほど保存したOAS 定義ファイルを選択します。
メソッド選択画面が出てくるので、とりあえず全部選択しておきます。
これでConnect 経由でTwitter のMention にアクセスする定義ができました。
Twitter Logic を取得するAction を設定
次に、Twitter Logic を取得して格納するAction を作ります。「Interface」にもどり、Screen を追加。
Screen で「Fetch Data from Other Sources」を選択します。
Out1 のパラメータに「getAllTwitter1 Mentions Response」をData Type として選択します。ドロップダウンで選択できます。
次に、getAllTwitter1 Mentions のメソッドをドラッグして貼り付けます。
次に、データのAssign をOut1 に設定します。
これでTwitter のMention をデータとして取得するロジックができました。
この辺がOutSystems のデータのハンドリングの独特なところですね。いわゆるテーブルをまるまるオブジェクトにするようなツールではなく、データを呼び出したり、書き込んだりするロジック部品を定義していくスタイルです。
テーブルにTwitter のロジックを貼り付け
ここまでくればあとは簡単です。
スクリーンにTable オブジェクトをポトペタ。そしてInteface から先ほど作ったvalue をテーブルにドロップします。
テーブルにTwitter Mention のカラムが入っています。Sort Attribute でvalue.ID などのように不要なvalue. が入っているのでここは手動で削除します。
アプリを実行
真ん中の緑色のボタンをクリックして、パブリッシュします。
真ん中の青いボタンを押して実際にブラウザで作ったWeb アプリを確認します。
このようにテーブルにTwitter のデータをバインドして表示できました！！
感想
outSystems は、データのハンドリングが他のノーコード系のツールと比べユニークです。しっかりとデータをメソッドというかロジックでハンドルして、それを画面に落としていく感じです。
データオリエンテッドな他のツールはテーブルがあって、それに対するフォームがあるだけ。CRUD 操作だけをする場合には楽ですが、そうじゃないロジックを組むと急にコーディングの世界になります。OutSystems はロジックを部品としてしっかり組んでいくので、ローコードでいろいろなことができそうだなと（なにもまだしてないけど）。ローコード/ノーコードのツールも「どのプロセスを楽にしたいか」という点で思想が異なるな。勉強しよ。