【ノーコード・ローコード】OutSystemsでアプリづくり#02 ~簡単なリスト型アプリをつくる②~

『アイデアはあるけど実現できない。。。』プログラミング完全初心者の私が、試行錯誤しながらアイデアを形にしていく過程（主に悩み…）を記事にしていきます。

アイデアを素早く実現していくにあたり、【ノーコード・ローコード】というジャンルを見つけました。本記事では、ローコードツール『OutSystems』 を用いて、簡単なリスト型アプリをつくる過程を紹介していきます。

☑︎本記事の内容

アウトプットと完成イメージ
必要な材料（画面構成、データ構成）
レシピ③：アイデア詳細画面をつくる
レシピ④：アイデア詳細画面にギャラリーを加える

☑︎著者の経験

この記事を書いている私は、非情報系の大学院を卒業後、通信関係の企業に3年勤めた後、現在までコンサルティング会社に勤めています。
学生時代〜現職までプログラミングとは縁がなく、前職でルーターの設定を少しかじった程度のプログラミング完全初心者です。
こういった私が、解説していきます。

Twitterもはじめました。

アイデアを思いつきで終わらせるのはもったいない！と思い、趣味ながらプログラミングをはじめました。
1人でどうせ悩む日々なので、色々な意見も参考にしたく、今更ながらTwitter&ブログもはじめました。
三日坊主がどこまで続くか、、、
— Lteruの悩み@ローコード勉強中 (@LteruNoNayami) September 16, 2021

1 アウトプットと完成イメージ
2 必要な材料
3 レシピ③：アイデア詳細画面をつくる
4 レシピ④：アイデア詳細画面にギャラリーを加える
5 次回

アウトプットと完成イメージ

○作りたいもの

OutSystemsを使ったはじめてのアウトプットなので、基礎的なものを作ります。

そこで考えたのが、 『アイデアリスト』アプリです。

なお、背景は前回記事に書きました。

【ノーコード・ローコード】OutSystemsでアプリづくり#01 ~簡単なリスト型アプリをつくる①~

○できること

作りたい機能を先にリストアップします。

アイデアを一覧表示できること。→ 前回
また、ステータスや更新日で並び替えができること。→ 次回以降
アイデアの特徴や写真イメージ等の管理ができること。 → 今回
アイデアの新規作成・更新・削除ができること。 → 一部、今回
新規作成の際、アイデアの粒度が揃うようなフォーマットであること。 → 次回以降

○完成イメージ

クックパッド的な感じで先に完成イメージを。

必要な材料

○画面構成

今回作る画面は以下のとおり。

アイデア一覧画面・・・前回
アイデア詳細画面・・・今回
新規アイデア画面・・・次回以降

今回、画面設計に使う主なウィジェットは以下のとおり。

Formウィジェット・・・アイデア詳細画面の入力
Uploadウィジェット・・・写真のアップロード
Galleryウィジェット・・・写真のギャラリー表示
Listウィジェット・・・ Galleryに並べる写真のリスト
Lightbox Imageウィジェット・・・選択したギャラリーの拡大

○データ構成

アイデア詳細で管理する要素は以下のとおり。

タイトル
アイデアの特徴（概要）
アイデア詳細
- who…ターゲット（ペルソナ）は？
- why…なぜ必要？
- what…具体的にどんなアイデア？
- how…どのように実現する？
ストーリー
アイデアのイメージ（ギャラリー）
アイデアの種別
ステータス
登録日
最終更新日

レシピ③：アイデア詳細画面をつくる

○画面をつくる

１．『Interface』タブの中の『Element』タブにて、『MainFlow』を右クリックし、『Add Screen』をクリックします。

２．『Empty』を選択し、Screen nameを『IdeaSheet』として『Create Screen』ボタンを押します。

ここで、『IdeaBank』画面の横に家マークがついていることがわかります。これはTIPSで説明します。

【TIPS】家マークがつく理由

画面を複数作成すると、下記のような家マークがつきます。これはHOME画面を表しており、アプリを開いたときに最初に表示されることを示しています。

３．『Container』ウィジェットと『Column』ウィジェットを配置し、これから配置していくウィジェットの位置をだいたい決めます。

先に完成形を見せます。

今回は、上記のように、タイトルは一列、それ以外は二列で表示させたいので、『Main Content』の余白に『Container』ウィジェットを配置し、その下に二列の『Column』ウィジェットを配置します。

なお、この『Container』ウィジェットはウィジェットの整形にめちゃくちゃ使います。

４．『Form』ウィジェットを配置します。

この『Form』ウィジェットは、選択したソース（エンティティ）の値を表示させるとともに、変更させたいときに使います。

（参考）フォームを使用してInputウィジェットをグループ化する｜OutSystems Document

『Data』タブの『Ideabank』エンティティを選択し、そのなかのAttribute『Title』をForm1にドラッグアンドドロップします。

入力フォームやボタンが作られました。これについて細かく見ていきます。

InterfaceタブのWidget Treeを見ると、Form1の下に自動で色々できていることがわかります。
これは用途に応じて変えてよいです。

また、『IdeabankId』というInput変数と、『GetIdeabankById』というAggregateが自動で作られています。

まず、『GetIdeabankById』とは？についてです。

前回の記事では『IdeaBank』画面を作った際に同じようにAggregateが作られました。このときの名前は『GetIdeabanks』でした。この違いは、今回は『〜ById』がついていることです。

Aggregateの名前は参照したエンティティやフィルタリングした条件で変わります。

『GetIdeabankById』をダブルクリックし、『Filter』タブを見ると、『Ideabank.Id=IdeabankId』というフィルタリングが入っています。これが前回との違いです。

前回は、一覧表示の画面だったことから、フィルタリングは不要でしたが、今回は、選択した１対象の詳細画面であることから、『Ideabank』エンティティのIdをいま選択されているアイデアのIdでフィルタリングする必要があるのです。

次に、フィルタリングの条件でも使われているInput変数『IdeabankId』とは？についてです。

画面間でデータを受け渡す際にInput変数を使います。

（参考）入力パラメータを使用して画面間でデータを渡す｜OutSystems Document

今回でいうと、『アイデア一覧画面で選択されたアイデアのId』が受け渡すデータになります。これをInput変数に格納し、アイデア詳細画面に渡すという手順になります。

実際にどのように使うかはロジックのところで解説します。

『Title』以外の項目も、左右のカラムに必要なAttributeドラッグアンドドロップしていきます。

５．見栄えを整えます。

まず、自動で作られた『Button』ウィジェットのうち、右カラムのもの以外は削除します。（あとでつくる『Save』ボタンは画面に一つでいいため。）

次に、３つの『Form』ウィジェットのプロパティをみると『Style Classes』に”form card”と入っていますが、これを削除します。

左カラムの成形

左カラム内のウィジェットは以下のように配置します。

更に、Detail内でラベルと入力Formを横並びにします。

具体的には、ラベルのサイズを2colにし、入力フォームのサイズを10colにします。

↓

いい感じになりましたが、もう少し成形が必要です。

いま、入力フォームは『Input』ウィジェットが配置されています。実は似たウィジェットに『Text Area』ウィジェットというものがあります。それらの違いは以下です。

Inputウィジェット・・・一行の入力フォーム
Text Areaウィジェット・・・複数行の入力フォーム

例えばFeatureは一行で表示はきついですよね。なので、ここはText Areaウィジェットに置き換えます。

『TextArea』ウィジェットのプロパティ『Variable』は、表示させる項目（Attribute）を選択します。たとえば、『GetIdeabankById.List.~.Feature』を選択。

また、プロパティ内に『Text Lines』という項目がありますが、これが表示させる行数を示します。

そして、Inputウィジェット→Text Areaウィジェット変更に伴い、Labelウィジェットの『Input Widget』も変更する必要があります。（エラーで教えてくれます。）

成形した結果は以下です。

ラベルとText Areaウィジェットの高さを揃えたいですね。

このとき使うのが、『Align Center』ウィジェットです。

これを『Container』ウィジェットの配下に置きます。

左ウィジェットの成形は終わりです。

右カラムの成形

右カラムも左カラムに習って下記のように成形していきます。

ギャラリー表示は少し複雑なのであとでやります。

任意ですが、『Idea Type』と『Status』はドロップダウン式になっているので、初期値を選択します。
具体的には、プロパティの『Empty Text』を” – “に設定します。

タイトルをつくる

『Expression』ウィジェットをTitleのスペースに配置する。

↓

ダブルクリックし、表示させるソースを選択する。今回は、現在選択されているAggregateのTitleを選択する。

○ロジックをつくる

画面とデータの流れを考えると、足りないロジックは２つです。

アイデア詳細画面の『Save』ボタンのロジック
アイデア一覧画面からアイデア詳細画面への遷移ロジック

『Save』ボタンのロジック

１．Saveボタンを選び、プロパティの『On Click』から『New Client Action』を選択します。

『IdeaSheet』画面に、『SaveOnClick』という名前のクライアントアクションが作られました。

２．『SaveOnClick』をカスタマイズして、入力情報が『IdeaSheet』エンティティに保存されるロジックにします。

まず、Form4.Valid?をダブルクリックし、ConditionをすべてのFormウィジェットになるように変更します。これは、Formウィジェットに抜け漏れがないかのチェックです。

↓

２．『Data』タブの『Ideabank』エンティティ配下にある『UpdateIdeabank』という名前のサーバーアクションをドラッグアンドドロップします。

３．『UpdateIdeabank』のプロパティを開き、ソースを『GetIdeabankById.List.Current』に設定します。

４．最後に『Message』をドラッグアンドドロップし、プロパティの『Message』を”Saved Successfully”に変更し、『Type』を”Success”に変更します。

完成した『SaveOnClick』ロジックが以下です。

アイデア一覧画面からアイデア詳細画面への遷移ロジック

１．『Interface』タブから『IdeaBank』画面に戻ります。

２．『Title』を右クリック→『Link to』→『MainFlow/IdeaSheet』を選択します。

↓

３．画面上、またはWidget Treeから『Link』を選択します。

プロパティを見ると、『On Click』の下に『IdeabankId』という欄があります。

これは上述の画面にデータを渡すために（自動で）作られたInput変数です。

４．『IdeabankId』を『GetIdeabanks.List.Current.Ideabank.Id』に設定します。
これで、Input変数に現在選択されているアイデアのIdが渡されます。

TIPSとして、画面の遷移を記録する方法を記載します。

画面の遷移を記録する

『Interface』タブの『MainFlow』をダブルクリックします。

すると、MainFlowに作った画面の一覧がでてきます。
これらは画面遷移に合わせて矢印をつけることができます。

遷移前の画面から遷移後の画面に向かってクリックすると矢印が出現します。

これで画面遷移を視覚的に記録することができます。必須ではないですが、わかりやすく良いと思います。

５．『1-Click Button』をクリックし、アプリをパブリッシュします。

○アプリケーションのチェック

アイデア一覧画面のタイトルに『Link』がつきました。

『Link』をクリックするとアイデア詳細画面に遷移します。

入力し、保存ボタンを押すと、『Saved Successfully』のメッセージが現れ、内容が保存されました。