【Bubble】写真日記アプリについて

お久しぶりです。UGOK-5thメンバーのはるです。

今回は、写真が添付できる日記アプリを制作したので紹介したいと思います。

アプリの概要

メインページ

ログインするとカレンダーが表示されます。

このカレンダーは公式プラグイン「Full Calendar」を使用しました。

右上にあるアイコンを押すと、このようなポップアップが表示されます。

日付を選択肢、画像をアップロードして、コメントを書き、右上の保存ボタンをクリックすると記録できます。日付は、今日の日付がデフォルトになるようにしています。

保存すると、カレンダーの下に表示されます。

そして、保存した日付のところに長方形ができることで、記録した日がわかるようになっています。

過去の記録を振り返りたくなったときは、振り返りたい日付をクリックすると、その日付の記録までスクロールされます。

クリックした日付の記録までスクロールさせる手順としては、Workflow→Click here to add an event...→Elements→A calendar's day is clicked→Click here to add an action...→Element Actions→Scroll to entryとなり、下のようになります。

右上と右下のアイコンは「Floating Group」を使用することで、常に画面上に表示されるようになっているので、いつでも記録できます。また、右下の矢印のようなアイコンをクリックするといつでもページトップに戻ることができます。

左上にある三本線のアイコンをクリックすると、メニューバーが表示されます。

これは、公式プラグインの「Slidebar Menu」を使用しています。

テーマカラー

今回は、4種類のテーマカラーを作成しました。

テーマカラーはメニューバーの「テーマカラー」から選択できます。

１〜４のラジオボタンをクリックすることで、テーマカラーが選べます。

ラジオボタンの上の画像は1番を選択しているとき以外は表示されないように設定することでラジオボタンの番号と画像が対応するようにしました。

まとめ

今回作成したものは必要最低限のことしか出来ていないので、ほかのアプリとの差別化ができるようにデザイン面や機能面を工夫していきたいと思います。

最後まで読んでいただきありがとうございました。