シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
注目記事ピックアップ
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2015/12/05 21:40

コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!

bubble-top1 どうも、まさとらん(@0310lan)です!

みなさんは、Webサービスを作りたい!と思ったことはありますか?
現在、facebookやAmazonのような大型サービスから、Airbnb、Uber、Slackのようなユニークなものまで多種多様に存在します。

もし、何か「アイデア」を持っているのであれば、サーバーやプログラミングといった専門知識不要で、今すぐマウス操作だけで独自Webサービスを開発できることをご存知でしょうか?

それが、【 Bubble 】です!
bubble-01 開発したあとに、そのまま無料で公開することも可能になっているので、すぐにアイデアをカタチにすることが出来ます。


どんなWebサービスが作れるの?
マウス操作だけで作れるWebサービスと言っても、やはり気になるのはその「クオリティ」ではないでしょうか?

そこで、すでに「Bubble」を利用して作られたWebサービスをいくつかピックアップしてみましたので、ご紹介しようと思います!


例えば、海外の「トップブランド」をキュレーションし、ユーザーに最適な商品を提供するネットショップ系サービス【LifeSpanned】
bubble-02

「アーティスト」と「ファン」をマッチングさせて、クラウドファンディングコンサートを予約できるサービス【Ripple】
bubble-03

自社サイトの問題点を、UXやUIのエキスパートからWeb上でアドバイスしてくれるサービス【UX FORCE】
bubble-04

心理セラビー用のオフィススペースを、Airbnbのように貸し借りできるサービス【PsychSpaces】
bubble-05 といった感じで、すでに多数のWebサービスが「Bubble」を使って運営されているのが分かります。

作れるジャンルは特に制限がなく、ショップ系やマッチング系のサービスから、情報収集系、プラットフォーム系、自社サービス運営まで、とても幅広い分野で使われています。


実際に使ってみよう!
それでは、「Bubble」を使ってどのようにWebサービスを作っていくのかを、実際にデモを制作しながら詳しく見ていきましょう!

今回は簡単なデモとして、ユーザーが入力した都市名を「Googleマップ」へマッピングしていくWebアプリを作ってみたいと思います。
bubble-06

そこで、マイページから新規アプリを作成すると、ブラウザ上に開発エディタが表示されます。
bubble-07 この画面上で、多彩なWebサービスが開発できるようになっているわけです。


まずは、左メニューから「入力ボックス」を選択し、画面に配置します。
bubble-08

ボックス内テキストに「都市名を入力」と指定しておくと良いでしょう。
bubble-09

そして、マッピング用の「ボタン」も同じように配置していきます。
bubble-10

ボタンは、クリックした時に入力された都市名を「マッピング」する処理を行うため、「イベントエディタ」ボタンをクリックします。
bubble-11

すると、イベント処理を登録できるエディタが表示されます。
bubble-12

ここで、入力された「都市名」を抽出し、地図上のロケーションに変換する処理を行うのですが、いずれも選択するだけで簡単に指定が可能です。
bubble-14

次に、マップを画面に配置します。
bubble-15

最後に、先ほど変換したロケーションとマップを紐付ければ完了です!
bubble-16

画面右上にある「プレビュー」ボタンをクリック!
bubble-17

これでもう立派なWebアプリの完成です!
bubble-19 都市名を入力して「マッピング」ボタンをクリックすれば、地図上にマッピングされていくのが分かります。

また、このままクリック一発で世界中に公開することも可能で、修正・更新もエディタ上で自由に作業することが出来るので非常に便利です。

今回はご紹介できてませんが、ユーザー会員登録やSNS認証、外部APIを使った高度なアプリケーションも制作可能で、おまけにスマホ対応もしっかりサポートしてくれているスグレモノです。


非常に充実したサポート体制!
「Bubble」を使っていて、特に素晴らしいと感じたのは充実したチュートリアルやフォーラムの存在でしょう。

よくありがちな、文字だらけのドキュメントページを用意しているのではなく、動画を使った活用方法やエディタ上にアニメーション表示で操作方法を指示してくれる機能などが搭載されています。
bubble-20 これにより、英語が苦手な人でも、指示された箇所をマウスで選択していくだけで、簡単なデモが制作できるように設計されています。


また、投票形式による新機能募集や、アップデート履歴などが活発に更新されているので好感を持てます。
bubble-22

もちろん、分からないことや相談したいことを、フォーラムに投稿するページも用意されています。
bubble-21

まとめ
今までWeb開発を挫折してしまった人も、これから始めたい人も、「Bubble」を利用すれば、今すぐ独自のWebサービスやアプリなどを開発できるようになるでしょう。

まだ公開されたばかりのサービスですが、これだけ自由度の高いWeb開発を簡単にできるサービスというのは聞いたことがありません。

今後さらに使いやすくアップデートされ、機能拡充していけば「Bubble」を使って仕事を受注する人も現れるのではないでしょうか。


<参考>
「Bubble」公式サイト



written by 0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る