【Part1 フロントエンド編】ToDoアプリを作りながら学ぶゼロワン講座

みなさんこんにちわ！ゼロワンエバンジェリストの橘です！

今回はゼロワンを使ってToDoアプリの作成を行なっていきます。
作成にあたって大きく分けて以下の順序で作成していきます！

A.デザイン画面の作成
B.データベース、ワークフローの作成
C.データの表示、紐付け

仕様が変わってしまっているところや、もしわからないところあれば概要欄から飛べるゼロワンのフォーラムで質問してください。

それでは頑張っていきましょう！

A.デザイン画面の作成

まずBodyの中にコンポーネントから選択した「横向きのボックス」を配置し「外観」のレイアウトを画像のように設定します。

その中に「テキスト」エレメントを配置。
「プロバティ」をクリックし、コンテンツを
「To Do」とします。　
背景、フォントの色は「外観」から好きな色へ変更してください。

ここで「横向きのボックス」の幅を100%にしてから高さを調整するとボックスが枠からはみ出ないのでおすすめです！

「横向きのボックス」を配置し「外観」のレイアウトを真ん中に設定。
　さらにその中にもう一つ「横向きのボックス」を配置し、その中に
　「インプット」を二つ並べ一番右に「ボタン」を配置します
　この時「期日」の入るインプットのプロパティのデータ型を「date」としておきます。

　画像のようになっていれば正解です。

エレメント名を左から順に
「ip 内容」
「ip 期日」
「button 予定作成」
とします。
見た目を少し整えましょう。

　次に新たに「横向きのボックス」を配置し、
　「外観」のレイアウトを真ん中に設定します。

　その中に「テキスト」エレメントを配置。
　コンテンツ名を「予定リスト」とします。

なおここからは大まかなデザインなどはスキップしていくので好きな色や大きさにしていきましょう！

新たに「横向きボックス」を配置します。
レイアウトを真ん中にするよう設定しその中に「横向きのボックス」を追加します。
ここでサイズの幅を70％に設定しレイアウトを左側に寄るようにします。

この「横向きのボックス」の名前を「box parent」に変更します。
「box parent」の中に「横向きのボックス」を3つ設置し
それぞれの幅を左から順に30％、30％、40％、全ての高さを40pxとします。

その後、左2つのボックスの中に「テキスト」を設置しそれぞれを
「内容」、「期日」としてください。一番右のボックスエレメントの中には何も入れなくて大丈夫です。

新たに「横向きボックス」を配置し、このボックスの名前を「未完了リスト」とします。

レイアウトを真ん中にするよう設定しその中に「垂直リピーター」を追加します。
ここでサイズの幅を70％に設定し、
さらにこの「垂直リピーター」の中に「横向きのボックス」を配置して
幅を100％にします。

この中に「横向きのボックス」を3つ設置し
それぞれの幅を左から順に30％、30％、40％、全ての高さを40pxとします。
左2つのボックスの中に「テキスト」を設置し、一番右のボックスの中に「ボタン」を配置します。
コンテンツ名を「完了」、エレメントの名前を「button 完了」としレイアウトを揃えます。

そして「予定リスト」として作った「横向きボックス」をコピー＆ペーストで「Body」の中に配置します。
そしてコンテンツ名を今度は「完了済み」と変更します。

次に「未完了リスト」をコピー＆ペーストで「Body」の中に配置します。
一番右のボタンとその親であるボックスを削除し、残った二つのボックスの幅をそれぞれ50%にします。
画像のようになっていれば正解です！

以上でデザイン工程は終了です。最後まで読んでいただきまして、ありがとうございました！次回の記事では、B.データベースの作成、ワークフローの紐付けを解説していきます！

ゼロワンフォーラム：https://www.forum.thezeroone.io/
今回解説した動画：https://youtu.be/1msEp_0JO3A
ゼロワンのHP：https://www.zeroone.today/

わからないことがあれば、フォーラム等でご質問ください。