paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

プログラミング経験がなくても大丈夫!Webサービスを一発作成する方法

f:id:paiza:20151217152725j:plainこんにちは、吉岡(@)です。

ウェブサービスを作るにはどのような方法があるでしょうか?

言語は、PHPJavaRubyPythonJavaScript・・・
フレームワークは、Laravel、Ruby on Rails, Struts・・・
フロントエンドは、jQueryUI、Sencha、AngularJS、React・・・
データベースは、MySQLPostgreSQL、MongoDB・・・

プログラムを簡単・効率よく開発するために、様々な言語・フレームワーク等がありますが、いずれにしても「プログラム」を書く必要があります

今回紹介するBubble.isは「プログラム不要」で、「ウェブサービス」が作れるサービスです。繰り返しますが、「ウェブページ」ではなく、「ウェブサービス」です。

f:id:paiza:20151217180948p:plain bubble.is

データベースを操作することもでき、例えば、Bubble.isを使ってTwitterそっくりに動作するウェブサービスもあります。

f:id:paiza:20151217180716p:plain notrealtwitter.com

Bubble.isのメインサイト自体もBubble.isで作れらています!

f:id:paiza:20151217180904p:plain Edit Bubble.is

Bubble.isの大きな特徴として、分かりやすいチュートリアルが充実していることがあります。チュートリアルに従って、順番にボタンを押していくだけで、サンプルアプリケーションを作ることができます。

試しに、最初のチュートリアルに沿って、アプリケーションを作ってみましょう。

最初のチュートリアルは、Google Mapsの地図を検索して、検索場所を表示・保存するアプリケーションです。Buuble.isではこのような外部サービスとの連携も充実しています。

f:id:paiza:20151217182241p:plain

■プロジェクトの作成

まず、ログイン後のページから最初のチュートリアル(Saving data)を選択してプロジェクトを作成します。

Bubble - Visual Programming

f:id:paiza:20151217181112p:plain

プロジェクト作成と同時にチュートリアルが始まりのダイアログが表示されますので、「Start」(開始)ボタンを押します。

■入力フォームの作成

f:id:paiza:20151217181130p:plain

入力ボックスを作成しましょう」というダイアログが表示されますので「Next」(次へ)を押します。

f:id:paiza:20151217181142p:plain

「入力フォーム」要素を選ぶように赤い矢印で促されますので選択します。(矢印が出てこない場合はダイアログの「show arrow」をクリックしてください。)

f:id:paiza:20151217181217p:plain

赤い矢印が移動して、入力フォームの作成を促されますので、適当な大きさで範囲を選択して作成します。なお、ダイアログは邪魔な場合ドラッグ&ドロップで移動できます。

f:id:paiza:20151217181225p:plain

入力欄の質問文の入力を赤い矢印で促されますので、Placeholderに「場所を入れてください...」のように入力します。

f:id:paiza:20151217181237p:plain

入力すると、「最初の要素作成おめでとう」ダイアログが表示されます! 「Continue」(続き)を押します。

f:id:paiza:20151217181302p:plain

■ボタンの作成

次にボタンを作成します。入力欄と同様に赤い矢印が指しているボタンを選びます。

f:id:paiza:20151217181318p:plain

範囲を選択してボタンを作成します。

f:id:paiza:20151217181327p:plain

ボタンのテキストを「保存」などに書き換えます。

f:id:paiza:20151217181345p:plain

ボタンが完成すると「よくできました!」ダイアログが表示されます!

f:id:paiza:20151217181414p:plain

「Continue」(続く)を選びます。

■ボタンの動作作成

続いて、ボタンを押した時の動作を指定します。「Start/Edit workflow」(ワークフローの作成・編集)を選択して、「保存」ボタンを押した時の動作(ワークフロー)を作成します。

f:id:paiza:20151217181425p:plain

ワークフロー作成画面が開きますので、「Continue」(続く)を押します。

f:id:paiza:20151217181440p:plain

保存ボタンを押した時の動作を作成するため、「Click here to add an action...」(ここをクリックしてアクションの作成)を押します。

f:id:paiza:20151217181458p:plain

「Data(Things)」(データ)の「Create a new thing...」(新しいものを作成...)を選びます。

f:id:paiza:20151217181513p:plain

f:id:paiza:20151217181518p:plain

場所情報を作成するので、「Type」から「Create a new type...」を選択し、「Location」と入力します。

f:id:paiza:20151217181550p:plain

f:id:paiza:20151217181558p:plain

f:id:paiza:20151217181617p:plain

「Continue」(続く)を押します。

場所情報を保存するため、「Set another field」(他のフィールド設定)を押します。

f:id:paiza:20151217181637p:plain

「Click here」(ここをクリック)を押します。

f:id:paiza:20151217181646p:plain

「Create a new field」(新しいフィールドを作成)を選びます。

f:id:paiza:20151217181656p:plain

新規フィールド作成画面が表示されますので、「Field Name」に「Address」を入力し、「Field type」に「geographic address」(地理情報)を選択し、「Create」ボタンを押します。

f:id:paiza:20151217181721p:plain

入力欄の内容を取り込むため、「Click here」を押して、「Input Address」を選択します。

f:id:paiza:20151217181737p:plain

入力欄の値を取り込むので、「's value」(の値)を選びます。

f:id:paiza:20151217181747p:plain

入力欄の内容を保存することができました!

f:id:paiza:20151217181816p:plain

「Continue」を押します。

入力欄をリセットするため、「Click here to add an action」(クリックしてアクション作成)を押して、2つ目のアクションを作成します。

f:id:paiza:20151217181837p:plain

「Element Actions」から「Reset content」(内容をリセット)を選びます。

f:id:paiza:20151217181854p:plain

f:id:paiza:20151217181902p:plain

これで、「保存」ボタンの動作設定は完成です! これで、保存ボタンを押すと、位置情報を保存し、入力欄をリセットするようになりました。

f:id:paiza:20151217181922p:plain

「Continue」を押して次に進みます。

デザインアイコンをクリックして、デザインモードに戻ります。

f:id:paiza:20151217181944p:plain

■地図の作成

地図要素を配置するため、地図アイコンをクリックし、入力欄の下に配置します。

f:id:paiza:20151217181957p:plain

f:id:paiza:20151217182012p:plain

入力したすべての場所を表示するため、「Numbers of makers」は「List」を選択します。

f:id:paiza:20151217182028p:plain

f:id:paiza:20151217182035p:plain

場所を表示するので、「Type of makers」は「Location」を選択します。

f:id:paiza:20151217182047p:plain

「Continue」で続けます。

f:id:paiza:20151217182059p:plain

表示する場所を指定するため「Data source」で「Do a search for」(〜を検索)を選択します。

f:id:paiza:20151217182116p:plain

「Type」は「Location」を選びます。

f:id:paiza:20151217182126p:plain

「Map Style」で地図のスタイルを変更できます。ここでは、「Apple Map Style」を選んでみます。

f:id:paiza:20151217182138p:plain

これでウェブサービスが完成しました!!!

f:id:paiza:20151217182155p:plain

「Continue」を押します。

f:id:paiza:20151217182212p:plain

画面右上の「Preview」(プレビュー)をクリックすると、実際に作成したウェブサービスを実行できます。

f:id:paiza:20151217182241p:plain

■まとめ

Bubble.isでは、このようにプログラムを一切書くことなく、ウェブサービスを作成することができます。データベースにも保存できることや、豊富なプラグインで外部サービスとも連携できることから、かなりの範囲のアプリケーションをカバーすることができ、特にプロトタイプやプログラミングの学習目的には優れています。今回のサンプル以外にもチュートリアルも豊富にありますので、ぜひ試してみてください。




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp





プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編