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

アプギガトップ > Webサービス > コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
注目記事ピックアップ
美女と過ごす時間もポイントに変換!「時間」を貯めて使うアプリ「タイムウォレット」が面白い!
share0
美女と過ごす時間もポイントに変換!「時間」を貯めて使うアプリ「タイムウォレット」が面白い!
制作済みプロモーションビデオを、好きなように再編集して自分用に公開可能な「Viosk」が無料公開中!
share0
制作済みプロモーションビデオを、好きなように再編集して自分用に公開可能な「Viosk」が無料公開中!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
Unityアセットストアに眠る、謎の「Unity仮面3Dモデル(無料)」を使ってみた!
share0
Unityアセットストアに眠る、謎の「Unity仮面3Dモデル(無料)」を使ってみた!
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
share0
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
Twitchの配信が、いつの間にか「ゲーム開発ノウハウ」の実況相談所と化している件!
share0
Twitchの配信が、いつの間にか「ゲーム開発ノウハウ」の実況相談所と化している件!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
話題の「スタートアップ企業」に特化した情報収集が可能なWebサービスまとめ!
share0
話題の「スタートアップ企業」に特化した情報収集が可能なWebサービスまとめ!
Twitterを別次元のWebアプリに変貌させる「ツイート」活用事例6選がスゴイ!
share0
Twitterを別次元のWebアプリに変貌させる「ツイート」活用事例6選がスゴイ!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
YouTube動画内の人物をタグ付けし、自動トラッキング可能な「WIREWAX」がスゴイ!
share0
YouTube動画内の人物をタグ付けし、自動トラッキング可能な「WIREWAX」がスゴイ!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
share0
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
「Googleマップ」アプリで、パックマンの居場所15箇所を突き止めてみた!
share0
「Googleマップ」アプリで、パックマンの居場所15箇所を突き止めてみた!
世界中の人気ユーチューバーが「動画ノウハウ」を伝授してくれる「クリエイターアカデミー」が最強!
share0
世界中の人気ユーチューバーが「動画ノウハウ」を伝授してくれる「クリエイターアカデミー」が最強!
日本から革命が起きそうな「ハード系スタートアップ」が集結したSlush Asiaへ潜入レポ!
share0
日本から革命が起きそうな「ハード系スタートアップ」が集結したSlush Asiaへ潜入レポ!
コーディング不要のHTML5ゲームエンジン「WiMi5」は、課金実装も可能で全部無料!
share0
コーディング不要のHTML5ゲームエンジン「WiMi5」は、課金実装も可能で全部無料!
2014年「アプギガ!!」SNSシェア数2000超えの記事ランキング「トップ10」!
share0
2014年「アプギガ!!」SNSシェア数2000超えの記事ランキング「トップ10」!
GitHubサービスを、大幅に機能拡張するWebサービス7選で新しい使い方が可能に!
share0
GitHubサービスを、大幅に機能拡張するWebサービス7選で新しい使い方が可能に!
Webサービス
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...

ページトップへ戻る