【第4回】.bubbleでアプリ開発してみた

第4回目では、メインとなる従業員がログインした後のメイン画面について作成をしていきたいと思います。

少しおさらいをすると下記のような画面が従業員がログインした画面のイメージになります。従業員画面イメージ

画面は、ログインをした人の名前、入社年月日、有給が付与される月、社歴、残りの有給数が表示されており、さらに有給を取得日付、有給休暇/半日有給、有給理由や他メンバーとの調整事項などの共有情報がかける備考欄と申請ボタンが主なパーツとなっています。

.bubbleでは、ドラッグ&ドロップでパーツを自由に配置して画面を作ることができるのですが、今回はきちんとレイアウトをしながら作りたいと思います。

そのために各パーツをグループ化をしながら作り、各パーツのレイアウトや間隔は、Element間のギャップやMargines、Padding、alignmentで設定を行います。

このように作成をするために、先ほどの画面イメージをグループに分けると以下のようになります。

従業員画面イメージ_グループ

大きく、①ヘッダーのグループ、②従業員情報のグループ、③有給休暇申請のグループに分けて、その中にさらに「従業員名」「山田 太郎」のように、ラベルと値をグループ化し、それをグループの中で等間隔になるように配置をします。

実際、.bubbleに作った画面は以下のようになります。

従業員画面開発中画面

このグループ化の考え方により作られているのを確認するのは、画面の左側の「Element Tree」の部分になります。

少し見づらいので拡大をすると以下のようになっています。

従業員画面イメージ_グループ2

 

前の画面イメージで示した、①ヘッダーのグループ、②従業員情報のグループ、③有給休暇申請のグループはそれぞれ、FloatingGroup ヘッダー、Group 従業員情報、Group 有給休暇申請として作成してます。

画面のindexというページは「1080 ×800」 になるように定義し設定しています。その中に「FloatingGroup」という、たとえば画面をスクロールしても固定で表示できるようになるヘッダーに適したElementsを利用して、「FloatingGroup ヘッダー」を作成しています。

従業員画面作成2

次に、「Group」というElementを使って「Group 従業員情報」を作成してます。Groupそのものは横幅900px、高さ320pxに設定し、indexの横幅を1080としているので、このグループがちょうど中央に配置されるように左から90pxの位置に配置されるようにY軸に値を入れて設定しています。

中の入社年月日や、有給休暇付与月、社歴などの情報はラベルと値がセットでグループ化を行い、それぞれが10PXの間隔を開けて配置されています。

同じように「Group」というElementを使って「Group 有給休暇申請」を作成しました。

実際これをブラウザのプレビューでみると以下のようになりました。

従業員画面

次回は、ログインをした従業員の情報をこの画面に表示したり、有給休暇の申請を行う処理を作っていこうと思います。