こんにちは。この記事では、過去に私がノーコード受託会社を設立して1年弱で20ものプロダクトに携わった中で、Bubbleでどんなサービスが作れるのか？という疑問についてシリーズ化して紹介していきます。
ノーコードツールの中でも、弊社が専門で扱うBubbleの開発事例について解説します。また、実際の構築期間の目安も記載しているので、ノーコードで開発する際の目安の参考にもご利用ください。
今回は、旅行を簡単に友達とシェアするTripBookを紹介します。
この記事の最後に、ノーコードならではのクライアント様との面白い開発スタイルについても解説していますので、ぜひ最後までご覧ください。
Contents
TripBook - ノーコードでもっと楽しい旅行体験
-
TripBook
| サービスリンク | https://tripbook.jp |
| 構築期間 | ５ヶ月 |
| 費用 | 非公開 |
このサービスは、
「もっとカンタンにスマホで旅の記録を残せないか？」「楽しかったこの旅の感動をそのまま誰かにシェアできないか？しかもそれが少しでもお小遣い稼ぎになったら？」「憧れのあの人の素敵な旅のスケジュールを、もしもそのままワンクリックで予約・購入できたら？」
PR TIMES
そんな妄想を実際にカタチにしてみたい！という想いを抱いた大手旅行会社の業務に従事経験のあるクライアント様からの依頼により開発を行いました。
TripBook サービス概要
TripBookは、2つの主な機能を持ったサービスをノーコードBubbleで実現しています。
旅行のスケジュール機能
1つ目の機能は、旅行のスケジュールを共有する機能です。他の人が過去に経験したおすすめの旅行を
- 時間ごとの詳細なスケジュール
- ホテル・航空券の詳細情報
- 持ち物リスト
といった旅行に役立つ情報が丸ごとパッケージ化された状態でプラットフォームに出品されています。
それらを自分の旅行スケジュールとしてコピーすることができます。コピー後には、スケジュールや持ち物リストを自分の旅行にあわせてカスタマイズすることができ、さらにその情報は友達と共有することで、スマホで簡単に見れる旅のしおりとしての役割も果たします。
次の予定地までの行き方や所要時間もアプリ1つで確認できるので、旅行中はこのアプリ1つあれば全てが完結するようになっています。
また、旅行中には各スケジュールにメモを残すことができ、帰国後にそれを元に自身の旅行記録としてブログ記事にしてパッケージ化し、プラットフォームに掲載することができます。
この仕組みにより、人気の記事(旅行パッケージ)からは次々に新たなパッケージが生まれ、さらにそれをユーザー個々がブラッシュアップしたものを公開することにより、情報が古くなりにくい旅行プランが連鎖的に作成される仕組みになっています。
上記が1つ目の機能で、”これから旅行に行く"ことが前提としたものでしたがこれから紹介する2つ目の機能は"過去の行った旅行を記録する"ことを目的としています。
アルバム作成
アルバム機能は、これまでに行った旅行を思い出として残すための機能です。スマホで撮った写真の位置情報・撮影日の情報を取得し、アップロードされた画像から過去の思い出を自動で作成してくれます。
コロナの影響で新たに旅行に行きにくくなっている状況で、過去の思い出を整理するのに利用することができます。この機能も同様に、友達を招待して思い出のシェアをアプリで実現できます。
さらに前述のブログ機能とも連動しており、過去に行ったアルバムからそのまま旅行スケジュールとして作成し公開することも可能となっています。
過去の思い出から、"おすすめ"のパッケージとして公開することもでき、また他の人がパッケージ化した旅行にも簡単にボタン1つで自分の旅としてカスタマイズができます。
Bubbleの技術的論点
この章では、TripBookの開発に取り入れた具体的なBubbleの機能・技術について解説します。
ここで解説する技術は、TripBook以外にも汎用的な機能も多く、別サービスでもどのように活用できるかを紹介しています。
サービスのイメージなどが具体的にできるようにしています。
Bubbleの基本機能
ブログ投稿
TripBookでは、旅行をパッケージ化して公開することができます。この機能はBubbleでも基本的な機能であり、同様にSNSの投稿やECサイトの商品出品など、多くが同じロジックで実装されています。
ブログには、下書きと公開の状態があり、これらを管理することで、完成していないものがプラットフォームに公開されないように制御されています。
この機能の他のサービスシーンとしては、上述のSNSやECサイト、プラットフォーム型など様々に利用でき、ユーザーがデータを投稿するようなサービスなどが挙げられます。
スケジュール(データベース)のコピー複製
データベースの複製を行う操作は、各旅行ブックの複製時にスケジュールなどのコピーも同時に行う際に使用しています。
データベースの複製により、例えばテンプレートを1つ用意したものをユーザーが複製・共有したりすることが可能になります。
この機能の他のサービスシーンとしては、過去の請求書を複製・テンプレートから自分用のデータを構築・ECサイトで商品を複製して出品し直すなどが挙げられます。
公開設定の管理
TripBookには、スケジュール及びアルバムに対して、プラットフォームに一般公開するものと、友達だけに共有して他のユーザには見れないように設定することもできます。
Twitterなどでは鍵アカウントなどの概念があるほか、ブロックの機能などもこれらで管理することもできます。
この機能の他のサービスシーンとしては、ユーザーの属性に応じた公開設定がされてある掲示板・特定のユーザーが見れるお知らせ機能などが挙げられます。
キーワード検索
Bubble内でデータベースに対してフリーワードを用いて検索する方法は、ノーコードラボさんの記事で詳しく詳しく解説されていますので、興味のある方はそちらをご覧下さい。
検索については、他にもたくさんの実装方法があるので、後に解説したいと思います。
ダッシュボード画面
Bubbleでは、ユーザー/管理者などのダッシュボード画面も作成することができます。
TripBookの場合、自分が公開している記事のPV数や、コピーされた回数などを閲覧することができ、記事の修正など細かな分析を行うことができます。
また、管理者専用のダッシュボード画面もあり、そこでは全ユーザー数の期間推移、人気記事のランキング、アプリ内の広告配信設定などを扱うことができる仕組みになっています。
ノーコードでは、このようにサービスUIだけでなく必要に応じた拡張が可能で、それぞれのニーズにあった管理を行うことが可能です。
項目の並び替え(オーダーの変更)
この機能は、作成したスケジュールの前後関係を操作する際に実装しています。
タスク管理ツールのような、優先度を変更するUIや、Trelloのような並び替えを行うことが重要なサービスにも応用することができます。
発展機能
オリジナルのカバー画像自動生成
この機能は、数あるTripBookの中でも特徴的な機能で、他のnoteやブログ系サービスにはない機能です。
ユーザーは自分オリジナルの旅行スケジュールをパッケージ化してプラットフォームに公開していますが、最も重要になる記事のカバー写真をこのサービス内で自作できます。
そうすることで統一の取れた写真が自然とサイト内に並ぶことで、ユーザーフレンドリーで魅力的な価値を提供しています。
実際には、いくつかのテンプレートが用意されており、その中で自分の写真を複数選択して配色も調整することができます。
このように、自由度のある設計やアイデアでもすぐに試せて形にできるのがノーコードの最大の強みであると思います。
LINEログイン
このサービスでは、メールアドレスでのユーザー登録に加えて、LINEを用いたSNSログインも実装しています。
LINEだけでなくTwitterやGoogle、Facebookなどもありますが、TripBookはコンセプト上、友達と旅行をシェアすることに重きを置いているため、サイト内からも簡単にLINEに記事を共有する機能を追加しています。
BubbleでのLINEログイン実装に関しては、ノーコードラボさんが開発されたLINEログインのプラグインを使用しています。
参考記事はこちら
EXIFデータの取得
EXIFデータとは、スマホで撮影した写真が持つデータのことで、撮影した位置情報・撮影日などが含まれます。
これらの情報を、ユーザーがサイトに写真をアップロードした時にデータに保存を行うことで、いつどこで撮影したのか？をアルバムとして自動生成します。
実際には、緯度経度の2つのデータから近隣にある建物や施設、地名(サグラダファミリア・東京ディズニーランドなど)をGoogleのAPIを活用して複合的に処理しています。
この実装にあたり、独自でプラグインの開発も行い、ノーコードBubbleだけでは完結しない機能をコーディングにより解決する手段の良い例にもなっています。
Google ロケーションAPI連携
この機能は、上に記載のEXIFデータの緯度経度情報から実際の土地の名称などを取得しています。
さらに、アルバム機能に加えてスケジュールの機能においては、フリーワードで行き先を入力するだけで候補地の名称が選択できる機能も実装しています。
Googleの詳しいAPI情報についてはこちらを参考にしています。
Stripeのプラットフォーム決済(現在 非公開機能)
Bubbleの相談で最も多い機能のひとつである、Stipeによるプラットフォーム決済の機能です。
プラットフォーム型とはつまり、メルカリのように一般ユーザーが販売者でもあり購入者でもあるようなモデルのことです。
通常の決済より煩雑性が増し、弊社が海外のStripeの開発者に直接連絡を取りながら日本人専用にプラグインをカスタマイズしてもらいました。
現状、プラグインの利用方法を把握している日本人のBubbleエンジニアはほぼいなく、近々(2021年5月現在)プラットフォーム型の決済の利用方法に関わる詳しい講座形式のものを作成する予定です。
TripBookにおける実装としては、当初ユーザーが作成した旅行ブログを有料で売買できるものを想定して開発を進めていましたが、販売者が本人確認の書類などを提出するフローが、サービスを利用する上で心理ハードルが高いなどの理由から、現在はその機能を停止した状態で運用しております。
日本のBubbleで作られたサービスでは、まだプラットフォーム上のStirpeを実運用しているケースはこれ以外では把握しておりません。
デザイナー自ら実装するノーコードの開発秘話
ノーコードBubbleで弊社が開発した事例集第一弾の紹介をしました。
今回は、LINEやGoogle API、Stipeの決済に加え、応用的な機能を取り入れたノーコードならではの開発が多くみられるものとなりました。
クライアント様はもともとデザインの会社で、弊社のエンジニアとデザイナーさんのタッグで両方がBubbleのエディターが作業をしながら開発を進めるというまさにノーコードの良い開発事例と感じています。
エンジニアが処理のロジックを組み立て、デザイナーがUI / UXを自ら整えていくことによって効率よく開発を進めることができました。
非エンジニアであっても、自身の手が入ったこだわりの自分のサービスが作れる喜びがあるのはとても素敵なことだと思います。
このような事例はますます今後増えていくと思いますし、そのサポートもできるような体制を整えていきます。
Twitterでは、日々ノーコードBubbleに関する情報や最新のニュースをタイムリーに発信しています。
開発のご相談などいつでも承っておりますので、お気軽にお声かけください。