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

アプギガトップ > Webサービス > コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
注目記事ピックアップ
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
share0
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
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...

ページトップへ戻る