Bubbleで実際のWebサービスを意識した天気情報アプリを作ってみた

こんにちは。CX事業本部のKyoです。

Bubble検証の総まとめとして、実際のWebサービスを意識したアプリを作ってみました。 Bubbleがどんなものかは以下のエントリをご覧ください。

要件

天気情報アプリを作ります。まずは要件を整理します。

ユーザー

• LINEログインができる
• 名前、住所、電話番号を登録・変更することができる
• 位置情報をもとにその場所の天気がわかる（外部APIを利用）
• スマートフォンでの利用を想定

管理者

• ユーザーの登録情報の一覧が見える
• 住所をもとにユーザーの絞り込みができる
  • 絞り込んだユーザーにLINEのプッシュ通知を送ることができる
• PCでの利用を想定

デモ

ユーザー画面

管理者画面

※ 検証のため1つのLINE IDに対して、ヒットしたユーザーの名前を送っています。

画面概要

ユーザ画面

4画面あります。全てレスポンシブ対応しています。

ログイン画面

ユーザーがLINEでソーシャルログインする画面です。画面には表示されませんが、この時点でLINE IDをデータベースに保存しています。 また、ログインを行なっていない状態でこの画面以外にアクセスしようとするとこの画面にリダイレクトされます。

実装はほぼ前回の内容と同じです。

利用プラグイン

• LINE LOGIN

ユーザー情報登録画面

データベースへユーザー情報の登録を行います。初回のログイン時（※）およびユーザー情報の更新に利用します。

※ ユーザー情報が既に登録されている場合には、本画面に遷移せず、天気情報画面へ遷移します。

利用プラグイン

• なし

天気情報画面

現在の位置情報（緯度・経度）に基づいて天気情報を表示する画面です。

現在地と緯度・経度は現在のIPをもとに自動入力されます。緯度・経度については任意の値を入力することも可能です。

利用プラグイン

• API Connector (Open WeatherのAPI を利用)
• IP Geo
• ipiphy

ヘッダー

ハンバーガーメニューから天気情報画面、ユーザー情報画面への遷移およびログアウトが可能です。

なおヘッダーは再利用できる形にしており、ユーザー情報画面と共通化しています。

ユーザー情報画面

現在のユーザー情報を表示します。登録ボタンを押すことで登録画面へ遷移します。

利用プラグイン

• なし

管理者画面

2画面あります。

ログイン画面

管理者のサインアップとログインを行う画面です（サインアップとログインは右下のボタンで切り替え）。 ユーザー側と同じく、ログインを行なっていない状態でこの画面以外にアクセスしようとするとこの画面にリダイレクトされます。

Bubbleの用意するテンプレートを利用することでバックエンド側の処理を含めて1分で準備できました。

利用プラグイン

• なし

ホーム画面

管理者がユーザー情報を確認する画面です。ユーザー情報は左から、名前、住所、電話番号になっています。右上の検索窓に住所を入れることでユーザの絞り込みも行えます。さらに、画面下のボタンを押すことで表示されているユーザーに対して個別にLINEのメッセージを送ることができます。

利用プラグイン

• LINE Message
• List Shifter Karma-Ware

所感

とにかく早く、動くモノができます。

今回は開発に着手してからでは2,3日で完成しました。デザインや見栄えに関しては最小限にとどめていますがかなりサクサク作れる印象です。Bubbleそのものに慣れていない部分も多かったので、今ならもう少し早く作れそうだと思います。一方で、少し込み入った処理を行おうとすると少し苦しかったことも印象に残っています（今回はプラグインでなんとかなりました）。

個人的には、とにかく早くプロトタイプを作ってフィードバックをもらう、という使い方がよさそうに思いました。そういった意味で、フェーズとしてはPoC、利用者としてはプロダクト全体を見渡す必要のあるPdMやデザイナーといったロールの方が使うとより価値を発揮できそうだと感じました。