見出し画像

たった13時間でノーコードプラットフォームを作ってみたら世界大会で入賞してしまった話

けい＠bubble特化エンジニア

どうも、けいです(https://twitter.com/NoCoder_K)

bubble専門エンジニアとして受託開発やコードの書かないCTOなどをスタートアップでやってます。

今回の記事は2020年11月に1ヶ月間開かれていたMakerpad主催のbubble-challengeに参加した結果報告と、bubbleを初めて6ヶ月で世界の舞台で入賞するまでのちょっとした話、そして最後まで読んでいただいた方には、今回販売することになったテンプレートの1万円分のクーポンを配布します。

最後までご覧ください！


参加した理由

まあ、自分の実力試しはあるんですが、何より頭にあったのは最近のAdalo勢の盛り上がりがありました。

・ほぼAdaloの中の人化しちゃってる あめぞうさん
・日本人2人目の公式Adaloエキスパートに認定されたYukariさん
・Adaloで開発をしたサービスが話題に乗りまくってるSmartDishの中村さん

すごい。世界レベルで日本がAdaloを盛り上げてる！！

って最近ずっと感じてた人は僕だけじゃないはず。

bubble専門にしている自分としては、bubbleももっと日本で盛り上がって欲しい！という思いが強く、そのためには世界基準での実績もしくは国内でのサービス事例が必要だな〜とずっと思ってました。

そんな想いが詰まったツイートがこちら

ノーコードって結局何ができるの？bubbleで何ができるの？に対して、遠い海外の事例ではなく、自信を持って身近な事例を取り上げたい。そんなことを考えていました。

というわけで、今回のコンペで絶対に優勝してその実績を作ろうと企んでいました。

Makerpad bubble-challengeとは？

まず、そもそもMakerpadのbubble-challengeって言われてもなんの事かわからない方のために少し解説します。

Makerpadとは、bubbleやそのほかのノーコードツールの学習教材・世界一のノーコードコミュニティを運営している企業です。

毎月1回様々なイベントを主宰しており、コンペなどが開かれています。

今回はその1つとして、11月の題材だったbubbleで1ヶ月で何かを構築してコンペをしてみよう！という回でした。

コンペの詳細はこちら👇

ざっと以下のようなルール/流れでした。

スクリーンショット 2020-12-05 20.29.59

ルール

・プロジェクトは11月に始めたもの
・主にbubbleで作成すること

スケジュール

・11月1日 - イベント開始
・11月2日 - オープニングイベント
・11月27日 - 提出期限
・12月1日 - 受賞者発表

受賞

1位〜3位まで

審査基準

・デザイン性
・構築技術
・拡張可能性

という感じです。

イベント開催はこのようにTwitterでも告知を行っていて、誰でも無料で参加可能だったので優勝目指して挑戦してみました。

とは言っても、何を作ろうかとずっと考えており、一時はもう提出アプリは思いつかないかなと諦めてましたが、何か話題性を集めるような作品を作りたいなという事でbubbleを徹底的に真似したクローンを作成してみよう！という流れになりました。

"徹底的に再現する"

これがかなり重要で、bubbleのトップページとかマイページをUIだけ構築するのであれば正直誰にでもできるかと思います。bubbleを初めて触ったとい人にとっても模写という感じで勉強がてらに今までやったことがある人も多いはずです。

でもそれで世界一なんて狙えるわけがないので、以下のポイントを抑えて再現しようと計画しました。

・本物のbubbleのように新規アプリを作成できる
・(もちろん削除も)
・エディター部を再現してエレメントの編集も可能にする
・新規のエレメントも増やせる
・ワークフローの構築を可能にする
・データベースの構築を可能にする
・プレビューを可能にする
・その他のエディター部分のUIはほぼ再現する

それが11月21日の事。あと6日しかない。。。

上記の再現したかったポイントのうち、ワークフローの構築のみ妥協しました。ワークフローは、ご存知の通り UI builderに配置してるエレメントによっても選べるアクションとかトリガーが変わってくるので流石に時間的に大変だな〜と思ったので今回はパスです。

その代わり不自然にならないような工夫をしたのでみて見てください。


そんな焦りもあって一気に構築していった結果、合計13時間ぶっ通しで完成しました(笑)

13時間もあればかなりのアプリって作れるんですね。まあ要件も明確で、ただただ真似して構築すればよかったのでスムーズだったと思います。

やっぱり要件が明確なのってほんと重要なんですね。。。。

で、できたのがこれ

完成した作品のURLは後ほど貼るので最後まで記事はご覧ください。

ご覧の通り、bubbleのロゴをガッツリ使って完全にエディター部分を再現してました。注意ですが、この動画はbubbleのエディターではありません。bubbleで再現したbubbleのクローンアプリの中の1画面です(笑)


これは後日談ですが、Makerpadのbubble-challengeに限らず、せっかくなので この作品をテンプレートしてbubbleで販売してみようということになり提出したんですが、なんとbubble本社からロゴなどの著作権で審査を弾かれることになりました(笑)

なので、今公開されているのはロゴなどは少し変更して、キャラクターもそれっぽいのをFigmaで作成したのでぜひ確認して見てください(笑)


話はそれましたが、そうして11月22日の時点でMakerpadのbubble-challengeに"Super complete bubble clone !"というタイトルで提出を完了しました。発案から提出まで13時間。ノーコードって楽しいですね。


結果

という感じで12月1日を迎えたわけですが、Makerpadから日付をまたいでも結果が公表されず、コミュニティでも「いつだいつだ」という声が多数寄せられる状態で僕もハラハラしてました。

スクリーンショット 2020-12-05 21.04.15

すると12月2日になってからこんな通達が！ようやくか！と思ったけど結果発表じゃないんかい。

「審査が思った以上に時間かかったから4日に発表するよ」だって。アナウンスもっと早くしてよ。。と思いながらも海外コンペはこんなもんなのかと開き直りました(笑)


ついに12月4日！今度こそ結果発表！

とは言ってもアメリカ時間なので、日本の深夜です。5日になってました。

もう眠いな〜寝ようかなと思ってた瞬間、午前2時44分にこんな通知が

ん？？？？？

Ninjaさん？？？？

まじか！！

と、なぜか自分より早くNinjaさんが結果を発表してくれたww

メールとかいろいろ探して見たら、なんと1時間近く前にこんなメールが届いてた。

画像3

完全に見落とし。

で、これ見た瞬間に優勝は逃したってことを知ってめっちゃ悔しかったです😭

とは言いつつも、世界の舞台で入賞したことに違いはありません！サイコーー！！もともとこのコンペに参加した理由を先述してましたが、まあ目的は達成したんじゃないでしょうか。

世界的な舞台での実績として作れて、とても満足です。

初めてbubbleを触り始めて6ヶ月。ようやく。これまで受託や自作でネタアプリをたくさん排出してきましたが、これまでの経験と蓄積したノウハウの集大成がこうして表彰されることになってとても嬉しく思います。

というわけで、タイトルにある通りノーコードプラットフォームをノーコードで作ってみた。という貴重な体験談はここまでで、最後まで読んでいただいた方に特別に今回販売することになった受賞作品のテンプレートの1万円オフのクーポンを配布します。

1万円分のクーポンばらまきます

今回のテンプレートは、日々Twitterやnoteで配信している内容の総まとめ的な教材としてご覧いただけます。

一般的にテンプレートには利用方法が3つあります。

1. サービス丸ごと再利用 or 構築方法を学ぶため
2. 機能を学ぶため
3. UIパーツの作り方を学ぶため

以前あぽとさんが書かれたnoteのように、実際に1つ1つを紐解いていくことで、bubbleの実力は格段に上がります。

以前、Koremoというサービスのエディターを公開しますという記事を書きましたが、それも数ヶ月前のものになっているので今とはbubbleの技術としては格段に違います。


ぜひこの機会に、世界規模のコンペでで受賞した作品のテンプレートでbubbleを学ぶ教材として購入してみてください。

これまでのTwitterやnoteの発信で少しでも役に立った！と思っていただけたら、絶対に後悔はさせません😊

100以上もいいねをいただいたツイートの、データベースの徹底解説のnoteやcustom stateの使い方、データの扱い方に関するnoteなどの集大成です。

1万円オフになるクーポンコードは、購入時にご入力ください。

クーポンコードは、
NOCODER
です。

クーポンの有効期限は12月31日までなのでご注意ください。お早めに。

テンプレートの購入先は、こちらから👇購入後にTwitterにてメンションをつけて教えていただけるととても嬉しいです。

また、テンプレートにもレビューというのがあるので、購入後にレビューをいただけると嬉しく思います。


最後に

コンペで受賞が決まった時の皆さんのコメント。本当にありがとうございました！


という事で今回の「たった13時間でノーコードプラットフォームを作ってみたら世界大会で入賞してしまった話」という内容での記事は終わりです。

皆さんからの感想どんどんお待ちしています！


この記事が気に入ったらサポートをしてみませんか？