こんにちは、吉岡([twitter:@yoshiokatsuneo])です。
ウェブサービスを作るにはどのような方法があるでしょうか？
言語は、PHP、Java、Ruby、Python、JavaScript・・・
フレームワークは、Laravel、Ruby on Rails, Struts・・・
フロントエンドは、jQueryUI、Sencha、AngularJS、React・・・
データベースは、MySQL、PostgreSQL、MongoDB・・・
プログラムを簡単・効率よく開発するために、様々な言語・フレームワーク等がありますが、いずれにしても「プログラム」を書く必要があります。
今回紹介するBubble.isは「プログラム不要」で、「ウェブサービス」が作れるサービスです。繰り返しますが、「ウェブページ」ではなく、「ウェブサービス」です。
データベースを操作することもでき、例えば、Bubble.isを使ってTwitterそっくりに動作するウェブサービスもあります。
Bubble.isのメインサイト自体もBubble.isで作れらています!
Bubble.isの大きな特徴として、分かりやすいチュートリアルが充実していることがあります。チュートリアルに従って、順番にボタンを押していくだけで、サンプルアプリケーションを作ることができます。
試しに、最初のチュートリアルに沿って、アプリケーションを作ってみましょう。
最初のチュートリアルは、Google Mapsの地図を検索して、検索場所を表示・保存するアプリケーションです。Buuble.isではこのような外部サービスとの連携も充実しています。
■プロジェクトの作成
まず、ログイン後のページから最初のチュートリアル(Saving data)を選択してプロジェクトを作成します。
The best way to build web apps without code | Bubble
プロジェクト作成と同時にチュートリアルが始まりのダイアログが表示されますので、「Start」(開始)ボタンを押します。
■入力フォームの作成
「入力ボックスを作成しましょう」というダイアログが表示されますので「Next」(次へ)を押します。
「入力フォーム」要素を選ぶように赤い矢印で促されますので選択します。(矢印が出てこない場合はダイアログの「show arrow」をクリックしてください。)
赤い矢印が移動して、入力フォームの作成を促されますので、適当な大きさで範囲を選択して作成します。なお、ダイアログは邪魔な場合ドラッグ＆ドロップで移動できます。
入力欄の質問文の入力を赤い矢印で促されますので、Placeholderに「場所を入れてください...」のように入力します。
入力すると、「最初の要素作成おめでとう」ダイアログが表示されます! 「Continue」(続き)を押します。
■ボタンの作成
次にボタンを作成します。入力欄と同様に赤い矢印が指しているボタンを選びます。
範囲を選択してボタンを作成します。
ボタンのテキストを「保存」などに書き換えます。
ボタンが完成すると「よくできました！」ダイアログが表示されます!
「Continue」(続く)を選びます。
■ボタンの動作作成
続いて、ボタンを押した時の動作を指定します。「Start/Edit workflow」(ワークフローの作成・編集)を選択して、「保存」ボタンを押した時の動作(ワークフロー)を作成します。
ワークフロー作成画面が開きますので、「Continue」(続く)を押します。
保存ボタンを押した時の動作を作成するため、「Click here to add an action...」(ここをクリックしてアクションの作成)を押します。
「Data(Things)」(データ)の「Create a new thing...」(新しいものを作成...)を選びます。
場所情報を作成するので、「Type」から「Create a new type...」を選択し、「Location」と入力します。
「Continue」(続く)を押します。
場所情報を保存するため、「Set another field」(他のフィールド設定)を押します。
「Click here」(ここをクリック)を押します。
「Create a new field」(新しいフィールドを作成)を選びます。
新規フィールド作成画面が表示されますので、「Field Name」に「Address」を入力し、「Field type」に「geographic address」(地理情報)を選択し、「Create」ボタンを押します。
入力欄の内容を取り込むため、「Click here」を押して、「Input Address」を選択します。
入力欄の値を取り込むので、「's value」(の値)を選びます。
入力欄の内容を保存することができました!
「Continue」を押します。
入力欄をリセットするため、「Click here to add an action」(クリックしてアクション作成)を押して、２つ目のアクションを作成します。
「Element Actions」から「Reset content」(内容をリセット)を選びます。
これで、「保存」ボタンの動作設定は完成です！ これで、保存ボタンを押すと、位置情報を保存し、入力欄をリセットするようになりました。
「Continue」を押して次に進みます。
デザインアイコンをクリックして、デザインモードに戻ります。
■地図の作成
地図要素を配置するため、地図アイコンをクリックし、入力欄の下に配置します。
入力したすべての場所を表示するため、「Numbers of makers」は「List」を選択します。
場所を表示するので、「Type of makers」は「Location」を選択します。
「Continue」で続けます。
表示する場所を指定するため「Data source」で「Do a search for」(〜を検索)を選択します。
「Type」は「Location」を選びます。
「Map Style」で地図のスタイルを変更できます。ここでは、「Apple Map Style」を選んでみます。
これでウェブサービスが完成しました!!!
「Continue」を押します。
画面右上の「Preview」(プレビュー)をクリックすると、実際に作成したウェブサービスを実行できます。
■まとめ
Bubble.isでは、このようにプログラムを一切書くことなく、ウェブサービスを作成することができます。データベースにも保存できることや、豊富なプラグインで外部サービスとも連携できることから、かなりの範囲のアプリケーションをカバーすることができ、特にプロトタイプやプログラミングの学習目的には優れています。今回のサンプル以外にもチュートリアルも豊富にありますので、ぜひ試してみてください。
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
