bubble.ioを活用した開発事例”非エンジニアのサラリーマンが「本屋」検索サイトを作ってみた話” /libris_nocoders-meetup220200328

NoCoders Meetup#2　で登壇した際の発表資料です。
ノーコード開発ツールbubble.ioを活用した、検索サイトの開発事例をについて記載しています。

Transcript

1. 1 非エンジニアのサラリーマンが 「本屋」の検索サイトを作ってみた話 NoCoders Meetup #2 2020年3月28日
2. 1. 目次 ◼LIBRIS サービス紹介 ◼Bubble をおすすめする理由 ◼ノーコードで開発する上で苦労したこと ◼Bubble を活用していくために ©2020 LIBRIS All Right Reserve 2
3. ２．LIBRIS サービス紹介 2019年11月28日 ひっそりβ版リリース 本屋さん、ブックカフェを検索できる情報サイト ◼どんなサービス？ ➢個人事業を中心とする町の本屋、ブックカフェのデータベースサービス ➢住所やキーワードでお店の検索ができます ➢会員登録によりお気に入り店舗の登録や共有ができます ➢店舗様にはPOSシステムとの連携により在庫管理機能、 ポイント機能を提供可能です（開発中） ➢法人様向けに社内ライブラリーの蔵書検索、貸出返却機能を提供 ➢クレジット決済機能 ©2020 LIBRIS All Right Reserve 3 https://www.libris.network/
4. ３. ノーコード開発に出会うまで 2015年 ・本屋検索サービス企画開始 （当初はスマホアプリで想定） ・アプリ開発入門書買うも開発環境構築で挫折 ・Monaca × ニフクラMbaas勉強するも挫折 2016年 ・インターネットでたどり着いたエンジニアの方に開発委託 自分の設計スキル不足のためPJ中止→Androidアプリお蔵入り 2017年 ・本から市民開発者（シチズンデベロッパー）の概念を知る → ・仕事忙しい（ノンプログラミングツールはベンチマーク） ・Bubbleが気になり始める（ https://gigazine.net/news/20171115-bubble/ ） ・PowerAppsで書籍貸出システム構築 →社内で使えずお蔵入り 2018年 ・VBAを勉強する →起業して書店向けPOSシステム開発 ・Bubbleでテンプレート購入（60$） ・使える機能が少しづつ増えてハマる 2019年 ・楽しくなってきて機能が肥大化する ・Bubble pioneers program に応募 ・β版リリース ©2020 LIBRIS All Right Reserve 4
5. 4. 盛り上がり始めたノーコード・ローコード開発 ©2020 LIBRIS All Right Reserve 5 ローコード/高汎用性 ノーコード toB向け toC向け 2013年 日本法人設立 2019年 資金調達 (80億円) iPaas 2015年 米国市場上場 2015年 NY市場上場 2019年 資金調達 (4億円) 2012年 資金調達 (1億円) 2020年 資金調達 (2.6億円) 2019年 資金調達 (7億円) 2019年資金調達 (15億円) 2020年Google買収 2011年 日本法人設立 2018年 資金調達 (360億円) 2018年 Simens買収 2018年 資金調達(100億円) 2019年 Appleが5億円で買収 Automattic社 資金調達 (300億円) ※独自調査。個人的な見解も含みます。
6. 5. Bubbleがなぜ素晴らしいか ©2020 LIBRIS All Right Reserve 6 ◼非エンジニアにはハードルが高い開発環境構築が不要 ➢フロントエンド、バックエンド、データベース、セキュリティに関わる基本機能をクラウドで提供 ➢親切なチュートリアルと、ビジュアルプログラミングで、挫折する前にプログラムを動かすことができる ◼良心的な価格設定 ➢無料プランでも簡単なサービスは作れてしまう ➢有料プランもユーザー単位でなく、サービス単位の課金なので公開ウェブサイトの開発に最適 ➢サービス運営におけるランニングコストを下げられる ◼充実したフォーラム・サポート ➢2012年から開始したサービスなので実績も多い=ユーザーが多い（35万人？） ➢自分がハマっているトラブルは既に誰かがコミュニティで聞いている（英語だけど） ➢サポートも対応早くて親切（英語だけど） モチベーションが 維持できる 持続的な サービス運営が可能 コミュニティ との一体感
7. 6. Bubbleを中心とするエコシステム ©2020 LIBRIS All Right Reserve 7 プラグイン開発 教育コンテンツ サービス紹介 テンプレート作成 構築支援 連携サービス etc 素材の二次利用、組み合わせ可能なサービスの選択肢が速いスピードで増えていく ＝ ノーコードでも高い学習時間対効果得られる ※一方で自分で作りたいサービスの周辺（コードの実装で作られる連携システム、プラグインなど）のニーズも増えるので、コーデングはなくならない
8. 7. LIBRISのサービス構成図 ©2020 LIBRIS All Right Reserve 8 AWS Cloud ID認証 アクセス解析 住所検索 地図表示 データ連携 決済 検索 データ抽出 ファイル 保管 DB 顧客登録 顧客管理 CSVアップロード 売上登録 購買情報登録 書店様環境 書店検索 イベント検索 決済（未） 書籍検索 貸出／返却 書籍購入 会員登録 メール配信 開発期間：2018年11月～ 画面数：60画面 テーブル数：23テーブル
9. 8. Bubble に慣れるまでに実践したこと ©2020 LIBRIS All Right Reserve 9 ◼自分が作りたいサービスに近いテンプレートをリバースエンジニアリングする ➢ワークフローの基本的な挙動やDBの構造、エレメントのパラメーターの関係性を手探りで習得する ➢地図検索サイトならこのテンプレートがおすすめ（https://bubble.io/template/guide-apps-1581183594014x499568738753052700） ◼フロントエンドのデザインは最初はシンプルにする ➢デザインは自由度が高いように見えて、挙動が複雑な場合がある（特にレスポンシブ対応もさせる場合） ➢デザインによっては両方満足することが難しい場合があるので、あきらめも肝心 ◼ドキュメントみても詰まったらフォーラム見る。意外と解決する。 ◼Bubbleに標準で実装されていない機能はpluginを活用し、機能拡張する ➢データ連携や、クレジット決済ができるようになると、サービスの幅が広がる ➢APIの勉強にもなる
10. 9. 苦労したこと（Bubbleの機能的なはなし） ©2020 LIBRIS All Right Reserve 10 ◼デザインの操作に慣れるのに時間がかかる ➢サイズや位置が1ピクセル変わるだけで、意図しない表示になることも ➢表示が崩れてしまうのは、だいたい不要なエレメントのせいだったりする ➢グループの考え方も重要 ◼再利用できそうなものは早めにReusable Elementsを作る ➢30画面ほど個別にエレメンツを作ったので修正が大変だったのが辛い思い出。再利用すれば、すぐ終わった。 ➢マニュアルはいちど読んでおくと良いです ◼bubble標準機能のSearchだと日本語検索機能が少し弱い ➢ノーコードラボさんの記事で日本語検索可能に。（https://blog.nocodelab.jp/entry/2019/11/01/Bubbleで検索してみよう！） ➢速度重視ならalgoriaのpluginを使う。でもDBの二重管理が必要。 ➢あと、通常プランだとサーバーは米国にホスティングされているので、日本国内から接続は多少レスポンス遅いかも（占有プラン有）
11. 10. 苦労したこと（Nocode全般のはなし） ©2020 LIBRIS All Right Reserve 11 ◼学習コストはそれなりにかかる ➢2018年11月から土日、業務後の時間でBubbleを使い続ける。 ➢応用性も考えれば言語を覚えた方が早いという意見もあるかもだが、一方ですぐ動かせるのでモチベーションは維持できた ➢システムアーキテクトや、データベースの考え方も勉強になった気がする ◼画面のデザインは自分で考えないといけない（当然だけど） ➢自由度はあるが、自身がセンスもなくデザイナーではないので、意外とキツイ。 ➢とりあえず他のサービスを真似てごまかす。デザイナーにとってはすぐプロトタイプが出来てよいかも。 ◼継続運用を考えるとインフラやDB設計ついてはさらなる勉強が必要あり ➢独自ドメインに突然アクセスできなくなり、1週間ほどサービス停止状態に。DNSとかの知識があれば、もう少し早く解決できたかも ➢テーブル設計がどの程度妥当かが不安。データ量が増えてくると性能に影響しないだろうか。
12. 11. Bubble Japan Community について ©2020 LIBRIS All Right Reserve 12 Bubbleの日本語コミュニティサイト Bubble Japan Community を 立ち上げました https://japancommunity.bubbleapps.io/ マニュアル日本語訳 bubble関連記事まとめ
13. 12. 最後に Bubble社からメッセージ ©2020 LIBRIS All Right Reserve 13 bubbleのクーポンコードをもらいました。 ※イベントのみ共有 For a message to NoCoders Meetup #2 “Welcome to Bubble and the No-code movement! By joining the Bubble community, you are joining over 350,000 builders, makers, and entrepreneurs all over the world. We cannot wait to see what incredible things you build and what problems you solve with the apps you build on Bubble. “ Sincerely, the Bubble team ありがとうございました