bubble.ioを使ってNoCodeで本屋の検索サイトを構築した話

プログラミングが好きな非エンジニア

大道峻氏：本日なんですけれども、まず私がBubbleというNoCode開発ツールで作った「LIBRIS」という本屋検索サイトを紹介したいと思っています。

2018年ごろからBubbleをNoCode開発の手段として使っていまして、非常にいいツールだと思うので、どういうところがいいのかといったところと、あと一方で私も非エンジニアなので、作るにあたってけっこう苦労した部分もありましたので、どういう部分で苦労があったのかというお話もしたいと思っています。

そもそも誰なんだという話ですが、大道と申しまして、富士通で営業職として働いている者です。ふだんはエンジニアさんと一緒に仕事していて、いわゆる流通業や小売業のお客さん向けの業務システムの提案とかしています。

2018年に一応副業的なかたちで、個人事業で「LIBRIS」という取り組みを開始しました。主に町の本屋さんですね、チェーン書店とかではなく、わりと小規模な本屋さん向けの業務改善やIT導入の支援の取り組みをしています。その一環で、本屋の検索サイトをマーケティングに活用するというところで、取り組んでいます。

加えてこのNoCode開発ツールを使っているという点で、このBubbleのPioneers Programに日本人メンバーとして参加している状況です。

私も非エンジニアなんですけれども、一方でもともとSIerで働いていることもありますし、応用情報技術者の資格を持っていたり、VBAも少しかじっていたりします。

体系的なプログラミングの教育とかは受けてないものの、小さいときにHot Soup Processorとか、大学院でGephiというオープンソースのソフトウェアをちょっと触ったり、けっこうプログラムとかが好きなタイプの人間です。

本屋さん版の食べログ

次にさっそく、じゃあ何を作ったのかといったところで、2019年の11月秋にベータ版というかたちで「LIBRIS」というサービスをリリースさせていただいています。URLはここにあるものなんですけれども、簡単に言いますと、本屋さんとかブックカフェを検索できる情報サイトになっています。

本屋さん版の食べログみたいなイメージをしてもらえればいいかと思うんですけれども、住所やキーワードの検索とかでお店の検索ができます。今、掲載を許可していただいた50店舗ぐらいのお店を検索できるような感じです。

一応会員制のサイトなので、お気に入りの登録とかその共有ができたりとかします。あと、単純にお店が検索できるだけじゃなくて、私が別で作っているPOSシステムとの連携とか在庫管理とか顧客ポイント管理による顧客管理の連携も、今後できるようにしようと思っています。

あと、本屋さんだけじゃなくて、最近会社内にライブラリとかあるかと思うんですけれども、こういった社内ライブラリの蔵書の検索とか書籍の貸し出し機能が提供できるような機能もつけてたりだとか、クレジット決済の機能も付加しているようなサービスとなっています。一応URLは見れますのでご覧いただければと思います。

挫折からNoCodeとの出会いまで

私がNoCodeに出会う経緯を簡単に話しますと、2015年から企画を開始して、よくあるかと思うんですけど、アプリ開発入門みたいな本とか買ったり自分なりに勉強してきたんですけれども、いろいろ挫折があったといった経緯があります。

エンジニアの方と会って「一緒にAndroidのアプリを作ろう」みたいな話もあったんですけど、なかなかうまくいかなかった経緯があるなかで、2017年頃にシチズンデベロッパーという概念を知り、非エンジニアでもサービスが作れるような世界に今後なるんじゃないかということで、BubbleとかMicrosoftのPowerAppsといったNocodeのサービスに出会うことになりました。

2018年にVBAをしっかり勉強して、本屋さん向けのPOSシステムを開発していく中で本屋さんの検索サイトもBubbleで、これから話すテンプレートみたいのをいろいろ活用することで形になっていき、気づいたらどんどん楽しくなってきて、やがてNocodeにハマっていったといった感じです。

2019年、去年に一応ベータ版はリリースしたんですけど、Bubbleでやれることが多いので機能が肥大化しちゃったところは反省点ではあるんですけれども、すごくいいサービスだなということでBubbleにラブレター的に想いを伝えた結果、Bubble Pioneers Programに参加することになったといった状況です。

NoCode開発についてなんですけど、ここは私の私見もあるんですけれども、やっぱり2019年あたりから非常にいろんなサービスが海外を中心に盛り上がってきたなと思っています。

とくに2019年はいろいろ資金調達とかも活発だったなという気がしていて、今年に入ってGoogleがAppSheetを買収したということで、わりと一般的な単語としてもNoCodeが広まってきたのかなと思います。

日本企業も、前回のMeetupでもお話しされてたAnyflowさんとかが資金調達とかもされていて、今後ますます盛り上がってくるんじゃないのかなという気がしています。

そのなかでもBubbleはわりと汎用的な機能を持ちつつも、利用料金も安価でNoCodeを始める上ではいいツールなのかなと思っています。

小さな成功を積み重ねていくことが開発には大事

あとじゃあほかに、ちょっと細かい話も含めて、Bubbleがなぜすばらしいかといったところです。1つはやっぱりエンジニアじゃない人にはハードルが高いこの「開発環境をまず作る」といったところが不要だなというところが非常にいいと思っています。

フロントエンドとかバックエンドとかデータベースとかセキュリティとかいろいろ勉強しないといけない部分があるなかで、Bubbleだとそうした基本機能をクラウドで提供されている点は大きなポイントかなと思っています。

やはり小さな成功を積み重ねていくのが非常に大事かなと思っていまして、けっこう親切なチュートリアルとかビジュアルでプログラミングができるということで、挫折をする前になんとか形だけでもプログラムを動かすことができることで、モチベーションの維持ができるのが非常に大きいかなと思います。

あと価格ですね。当然、無料プランもあって、これだけでも簡単なサービスが作れるといったところはいいことなんですけれども、仮に有料プランでもユーザー単位に課金されていくタイプではなくてサービス単位の課金なので、いろんなユーザーさんが使うような公開Webサイトの開発には最適かなと思っています。

有料プランでも一番安いプランで月25ドルとかそれぐらいなので、その範囲の中でサービスの運営がある程度できるということで、エンジニアさんを抱えなくても事業の運営ができるといったところで、ある意味儲からなくても持続的なサービス運営が可能ということは非常に大きなポイントかなと思っています。

実際、私のサービスも、本屋さんが好きな人はいるんでしょうけど、みんなが爆発的に使ってくれるサービスになるとは思っていないので、末永くやっていくためにも非常にこういった価格設定はいいのかなと思っています。

サポートから教育コンテンツまで拡充されている

あと、充実したフォーラムとサポートとありますが、2012年からBubbleはサービスを開始したということで、けっこうユーザー数も……一説によると35万人以上世界中でいるということで、その分コミュニティとかもしっかりあります。

英語ではあるんですけれども、だいたい自分が躓いているトラブルってコミュニティで誰かが聞いていて、Google翻訳でうまく辿っていけば「あっ、これなんだ」みたいなところが、自己解決ができてちょっと感動したこともありました。

サポートの人もしっかりしているので、一緒にBubbleで製品を作り上げていくというコミュニティの一体感みたいなものを感じたところもあります。

あと、このBubbleを中心にエコシステム的なのが生まれているのかなという気がしています。例えばBubbleではテンプレートというのがいっぱいあるんですけれども、これを有料・無料含めて買ってみて、ここから自分の思い描いているイメージに近いようにカスタマイズしていくみたいなことが比較的容易にできるかなと思っています。

代表的なテンプレート作成のベンダーみたいのを挙げてるんですけれども、これ以外にもあります。自分が作りたいサービスをいろいろテンプレートで探すのもおもしろいかなと思っています。

さらに、Bubbleは基本機能だけじゃなくて、非常にプラグインがすごく充実しているので、JavaScriptでなにか作られてるみたいなんですけれども、そういったプラグインベンダーのサービスをいろいろ活用することで、ここの左に書いてる決済のサービスのstripeだとか、Googleの各種サービスと連携も比較的しやすくなってくるかなという感じです。

Bubble自体はNoCodeなので、サービスをやりたい、企画している人も作れるというコンセプトであるものの、一方で「まずプロトタイプを見たい」みたいなユーザーさん向けの構築支援をやられるAgencyみたいなものも生まれてきています。

Bubbleの教育コンテンツも、YouTubeなどですが、日本でもshinjiさんとかNoCode Ninjaさんとか増えてますけど、こういう教育コンテンツもどんどん拡充されているような感じです。

あと、Bubbleで作った製品の紹介みたいなのもどんどんサービスが立ち上がっていて、こういうエコシステムが生まれることでいろいろ選択肢が増えることで、かけた学習時間に対して非常に効果があるようなサービスなのかなと個人的には思っています。

やりたいことはいろいろ組み合わせることで実現できる

私が今作っている本屋検索サイトは、実際にこのようなプラグインをいろいろ組み合わせながら作っていて、画面数でいうと60画面で、テーブル数的には23テーブルぐらいで、このぐらいで機能があるような感じです。

いろいろ決済の部分だとかZapierを使って連携したりとかしながら作っていて、機能面では、やりたいことはいろいろ組み合わせることで実現できるのがすごいなと思います。性能面で課題があったりするんですけれども、「こういうのを機能的に実現したい」みたいなところは、なんとかいろいろ組み合わせることで実現ができるかなというのが私の印象です。

Bubbleに慣れるまで実践したことをここに書いています。私がやったのは、先ほども言いましたテンプレートをまず買って、私は60ドルぐらいの高いテンプレートを買ったんですけれども、そこから分解していって、ワークフローの挙動とかデータベースの構造みたいのを手探りで習得していったというのがあります。

最近、私もこの地図検索サイトの日本語テンプレートを作りましたので、ご興味あれば使っていただければと思ってます。

デザインの部分は、簡単にできるように見えてけっこう意外と挙動が複雑な場合もあるので、まず最初はシンプルにすることで挫折しないように進めてもらえたほうがいいのかなと思っています。やっぱりレスポンシブ対応もさせるみたいになると、「なんかここがズレる」みたいな話がけっこうあってどんどんハマっていっちゃったりするので、極力シンプルにするのは大切かなと思っています。

あと、どうしてもやっぱりドキュメントとかを見てもけっこう詰まっちゃったりするのは、先ほども言ったように、フォーラムとかでGoogle翻訳で調べてみると意外と解決したりしたのはすごいなというところですね。

プラグインは、データ連携とかクレジット決済ができるとけっこうサービスの幅も広がるかなと思うので、ぜひ積極的に活用してもらえればなと思っています。私自身やっぱりAPIとかそういった知識がなかったので、すごいこれをやることで勉強になったなという感じもしています。

やっぱり学習コストはそれなりにかかる

一方で、苦労した部分ですね。Bubbleの機能的な話は、デザインの操作に慣れるまで少し時間がかかりました。1ピクセル、パラメータが違うだけで意図しない表示になっちゃってすごい詰まるといったところがあったりとかします。

あと、画像に出してるんですけど、何も意味のない白いエレメントとかがあると、そのせいで表示が崩れて1日ずっとこれと格闘しているみたいなことがあるので、こういったところはBubbleの癖かなと思っています。

あと日本語の検索が少し弱くて、NoCode ラボさんの記事で部分一致の検索が日本語でもできたりするんですけれども、やはり性能面ではちょっと改善が必要なのかなと思っています。

Algoliaという海外の検索エンジンとか使えば速かったりするんですけれども、なかなか課題もあります。そもそもbubbleのサーバがアメリカにホスティングされているってこともあるので、国内から使う場合レスポンスに少し課題もあるかなという感じです。

NoCode全般に言える話なんですけど、やっぱり学習コストはそれなりにかかるかなといったところですね。応用性とかも考えれば別のPythonとかの言語を覚えたほうが早いんじゃないかという意見もあると思うんですけれども、一方でノーコードだから挫折せずモチベーションを維持しながらできたというところはあります。

Bubbleの操作自体は慣れていくって話なんですけれども、自分で当然画面のデザインとかは考えないといけないなというところがあります。自身はデザイナーではないので、どこにボタンを配置したらいいのかなとか、そのへんの設計を自分が考えるのは楽しい一方で意外と難しかったなと思いました。なので、ちょっとほかのサービスを真似て誤魔化したりみたいなところでやっていた感じです。

あと、継続的なサービスの運用を考えると、インフラやDBの設計みたいなもうちょっとシステムチックな部分の勉強が必要かなと思いました。最近も独自ドメインに突然アクセスできなくなっちゃってサービスが止まっちゃったという反省もあったので、DNSとかそういうインフラの知識がもうちょっとあればよかったかなと思っています。

テーブル設計とかも本当に適当にやっちゃってたので、「データ量が今後増えていくと性能とかに影響しないかな？」みたいなところはちょっと懸念していました。

Bubbleの日本内でのコミュニティは広めていきたい

あと、もう最後のほうなんですけれども、昨日突貫で作りまして、Bubbleの日本語のコミュニティサイト、この「Bubble Japan Community」というのを作りました。このURLで入れます。

書いてある内容は、Bubbleが英語のサービスだということもありますので、ドキュメントとかユーザーマニュアルの機械翻訳、Google翻訳に頼りきりなんですけれども、それをやったりだとか。あと、「NoCode ラボ」さんとかNoCode Ninjaさんとかshinjiさんのコンテンツをまとめています。

今後、テンプレートとかBubbleのサービスをこちらに日本語で集約していけたらいいなと思っています。これはBubbleの本社とも協力しながら、パイオニアエンジニアプログラムの一環で私がやっています。

あと、Bubble本社からも「このイベント、非常によいイベントだね」ということで今朝方メッセージが来ていて、「ぜひBubble使ってください」とメッセージが来ています。Bubbleのクーポンコードももらいまして、このURLからアクセスして会員登録してもらうと、個人プランが1ヶ月分無料のクーポンになっています。

あと、すでに会員の方もマイアカウントの請求のタブからクーポンコードを入れられるところがあるので、ここにNocodeJapanって入れてもらうと、1ヶ月無料分無料になります。私も試してみたんですけれども、初回の1ヶ月分が請求されないという感じでしたので、ぜひ使っていただけたらなと思っています。

コロナでなかなか外出もできないと思うんですけれども、こういうものを触りながら過ごす週末もありなのかなと思っています。NoCode Japan Communityを中心にいろいろこのBubbleの日本内でのコミュニティは広めていきたいなと思っていますので、気軽に連絡をもらえればありがたいと思ってます。

では、以上となります。ぜひBubbleを使っていただけたらと思っています。