ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

「Bubble で自分で Webアプリを作れるようになりたい人 bosyu! 」第1期結果報告

f:id:toka-xel:20200428205758p:plain

bubble camp とは?

ノーコード ラボが始めた bubble の自学自習プログラム

bosyu.me

こちらの bosyu がそうなのですが、名前が長いので内部的に「bubble camp」と呼んでいました。期間は 3/16 〜 4/15 または 3/17 〜 4/16。
3名の方と一緒に1ヶ月頑張ってみました。
区切りがつきましたのでまとめました。

ルール

  • 原則、自学自習。自分で勉強・調査していただき、わからないところがあれば質問していただく。
  • 毎週1回面談を行い、進捗管理やわからないところを質問いただく
  • 質問については Slack を使っていつでも何回でも OK

※第2期はルールを少し変更しています。

結果まとめ

先に結果をまとめておきます。経緯を知りたい方は下の経緯もお読みください。

  • 3名のうち1名が 1ヶ月でアプリをリリース。こちらは現在、WHO や Product Hunt のコンテストに応募済み。
  • 1名はバックエンド側の処理はできるようになったが、フロント側を作るところでタイムアップ
  • もう1名は勉強が終わり、アプリを作り始めたところでタイムアップ

参加メンバー

今回ご参加いただいたメンバーは次の3名です。

  • FJさん:開始時には bubble もかなり自由に使えていた
  • 長島さん:開始時には bubble の勉強を開始していた
  • タツヤさん:開始時には bubble は触ったことがなかった

bubble camp の経過

開始時点の様子

FJさん

開始時にはFJさんがダントツで bubble のレベルは高かったです。元々凄腕のプログラマという感じでしたので、最初の面談の時にはFJさんにこのプログラムは不要じゃないか?と思ったほどでした。
bubble の勉強は不要という状態でしたので、最初からご自分のアプリに挑戦していただきました。物流を可視化するアプリケーションを作りたいということでした。

長島さん

長島さんは bubble の学習を開始したばかり。しんじさんの NoCode スクールや、弊社の記事を読み始めていた状態です。サプリの検索サービスの MVPを作りたいというお話でした。

タツヤさん

タツヤさんはデザイナーでノーコードに興味はあったものの、まだ bubble には触ったこともないという状態でした。この時は NDA 付きのコミュニケーションを作りたいというお話でした。

1週間後

FJさん

FJさんは快調。圧巻でした!既に API Connector を駆使して Backend のサービスと連携し、どんどん裏側のシステムを開発しています。10時間くらいしか使っていないとおっしゃっていましたが、恐れ入りました。

長島さん

長島さんは年度末ということもあり、この週は時間はあまり取れていませんでしたので、勉強が進まず。4択クイズを学習していたということなのですが、ちょっと難しそうだったので、Twitter Clone の方の勉強に切り替えました。

タツヤさん

タツヤさんは bubble のアカウント作成から始めていただき、Twitter Clone を作っていただきました。「無茶苦茶楽しかった」と言ってもらえたので、私はとても嬉しかったですね〜。
20時間くらいやっていたという話です。

2週間後

FJさん

FJさんは引き続き快調。バックエンドはほぼ出来上がっていました。いくつかの修正を残すのみで、いよいよフロントを作っていこうという話になっていました。

長島さん

長島さんは仕事が納期直前ということで打ち合わせ延期。年度末なので、ちょっと時期が悪かったです。

タツヤさん

タツヤさんはこの時に自作のアプリを見せてくれました。当初話していたものとは全く違うものw。弊社で作っていた OGP-Image-Generator を応用した、簡単だけどインパクトのあるアプリでした。ほぼ基本コンセプトはできていたので、MVP を早く作って他の人に見せたいという状況でした。

3週間後

FJさん

FJさんはここでスピードダウン。年度末、年度始まりということで時間が取れず。

長島さん

ようやく時間が取れるようになって、本格的に勉強スタート。Twitter Clone を完了。
API Connector を使って、外部のサイトから情報を取得できるようにしたいということで目的のサイトの API の調査をすることとなりました。

タツヤさん

アプリリリース。この時には、既に弊社のメンバーやタツヤさんの周りの方に MVP を見せて色々な意見をいただいていました。
MVP の時と比べ、この時にはデザインもしっかりと入っており、さすがデザイナーと弊社メンバーからは驚嘆の声が上がっていました! ちょうど Product Hunt の Makers Festival が参加者募集していた時期だったので、タツヤさん、応募されました!

4週間後

FJさん

FJさん年度始まりということで動けず。結局フロント側は間に合いませんでしたが、ひとまずここで終了。以下の状態までできています。

物流を可視化するアプリケーション f:id:toka-xel:20200428210056p:plain

上図は外部のデータ基盤に、データをアップロードするUI

  • プラグインの「API Connector」を駆使し、外部APIサーバに流通イベントの各種ファイルをアップロードする。
  • そして、アップロードのレスポンスを下部に表示させる。
  • アップロードした各データを可視化するUIは作成中。
長島さん

取得したいサービスが実は API を発行していないということがわかり、API Connector を使う方法については頓挫しました。代わりにスクレイピングにしましょうということで、import.io の利用をオススメしました。import.io は bubble にもプラグインがあるため、連携がしやすそうだと判断しました。
長島さんはエンジンがかかり始めたところということもあり、2期も続けていただいています。

タツヤさん

WHO 主催のコンテストに応募した!とご連絡をいただき、みんながビックリしました!行動力ある人は本当すごいですね!尊敬します。
ほぼやることない状態だったのですが、LP を準備したり、コンテストに勝つための戦略を練るということでした。2期も引き続き参加ですが、本格的に合流するのはコンテストが終わってからとなります。
出来上がったアプリは次からアクセスできます。よろしければ見てみてください!
MYTH BUSTING HAMMER

当ブログでも紹介記事を作っていますので、こちらも合わせてご参照ください。

blog.nocodelab.jp

反省点とまとめ

  • 年度末年度始まりとコロナ禍により本業多忙であまり時間が取れず。タイミングも悪かった。社会人は時間を取れるかどうかが一番のカギ。
  • 進捗確認を毎週していたが、進捗が出ていなかった回もあった。そういう時は打ち合わせしてもすぐ終わってしまって効率が悪かった。
  • 成果としては、ノンプログラマーの方がご自身のWebアプリを1ヶ月で作れているので、ギリギリ成功と言っていいような気がする。

参加メンバーからのコメント

FJさん

bubble について
  • ログイン周りの処理の実装は、テンプレートを使用して驚くほど簡単に作成することができた。初心者の方でも簡単に実装できる印象。
  • デザインは慣れが必要かと感じた。作成画面上で配置したパーツがプレビュー画面ではズレて表示されるなど少し苦労した。
  • まだまだ触れていないものが多いですが、API Connectorや他のプラグインを駆使すれば大抵のことはできる印象。
  • 作成中ではあるが、僅かな時間でここまで作れることに将来性を感じた。
フォロー体制などについて
  • Slackで分からない箇所について質問すると、即レスポンスをいただけて非常に助かった。
  • また、同時に受講されている方の成果をSlackで見ていると良い意味ですごく刺激的で鼓舞される。

長島さん

bubble について
  • 慣れてくればサクッと作り上げられるいいツールだなと思います。
  • 一応、私も開発経験者ですが、まだまだ開発未経験者には厳しい部分はあるのかなと感じてます。
  • 通常、仕様書を作るフェイズを、Bubbleで代替してしまうのもありかと感じました。
フォロー体制などについて
  • 質問をすれば、すぐに親切に回答していただけて、非常にありがたいと思います。
  • せっかくの体制を、使いきれてなくて、恐縮です。

タツヤさん

bubble について
  • こんなに手軽にWebサービスを世に出せるなんて驚き!すごく楽しい!
  • 普通はDB設計をきちんと行ってからコーディングを行うものだと思いますが、作りながらDB設計を考えるというプロセス自体が新鮮でした。
  • ある程度のコーディング、DB設計などの知識は必要。あくまでCUIがGUIになったようなイメージ。
フォロー体制などについて
  • チャット(Slack)でも丁寧に対応して頂けたので、わからないところもスムーズに解決できました。テキストだけじゃなく動画で返信してくれたり、場合によってはアプリを直接覗いてみてくれたり、非常に丁寧にフォローして頂けました。
  • 他の受講生の質問も見ることで、自分1人で勉強するより知識が溜まりやすかったです。
  • つくってる時にきちんと褒めてくれるので、挫けそうになってもやる気をキープできました。

終わりに

現在、「Bubble で自分で Webアプリを作れるようになりたい人 bosyu! 」第2期がスタートして2週間というところです。
早い人は既にご自分のアプリをリリースしており、ブラッシュアップに入っています。
第2期が終わった後にもなんらか報告できるようにしたいと考えております。第2期の皆さん、頑張ってください!

第3期についても現在企画しておりますので、もしご興味がある方いらっしゃいましたらご連絡ください。bosyu 開始時にご連絡させていただきます。

謝辞

  • 大道峻さん 第1期の bubble camp では bubble japan community の大道峻さんにオブザーバーとして参加していただきました。ありがとうございました!第2期も引き続きオブザーバーと参加していただいております。どうぞよろしくお願いいたします!

  • NoCode Ninja さん 第1期では Ninja さんの Youtube をリファレンス教材として利用させていただきました。 また、第2期ではオブザーバーとして参加していただいています。引き続きどうぞよろしくお願いいたします!

  • しんじさん しんじさんの Youtube、NoCode スクールを学習教材として利用することを快くご許可いただきました。第2期も引き続き利用させていただきます。 いつもながらありがとうございます!!