[BaaS] Parseの登録方法＆初期設定(Webアプリ編)

おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。最近よくBaaS(Backend as a Service)という言葉を聞くようになりました。

BaaSとはかんたんに言うと「サーバーサイドの機能をクラウド上で利用できる」サービスのことです。

スマートフォン・WebブラウザからAPIを使って利用することで、バックエンド開発を行わずにアカウント管理やデータベース、Push通知機能等さまざまな機能をかんたんに利用することができます。

現在ではさまざまな企業がBaaSを提供しており、BaaSで調べてみると「Parse」「Firebase」「Milkcocoa」等の名前をよく見かけます。

今回は、上記の「Parse」について、登録方法＆簡単な使い方を見ていきましょう。登録後にJavaScriptを使ったサンプルを実際に動かしてみます。

スポンサーリンク

Parseって？

まず初めにParseの特徴をかんたんに紹介します。

Parseは2013年4月にFacebookが買収したことで、安定したサービスの継続が見込めるようになったBaaSのひとつです。

また、無料プランで使える枠が比較的広く、無料で使える機能は2015年7月現在では次の通りです。

上記の枠を超えると料金が発生します。無料プランからそのまま追加料金を払うことで、気軽に枠を増やすことができるので便利ですね。

よく利用するであろう機能は次の通り。

あとはアクセス解析、画像の投稿、管理画面の利用もできます。個人で使う場合はよほど規模が大きく無い限り、ほぼほぼ無料で利用できるので気軽に試してみると良いかと思います。

Parseに登録する

では、さっそくParseに登録していきましょう。まずは下記のParse公式ページにアクセスします。

LINKParse

画面右上の「Sign up for free」をクリック。

登録画面が開きます。登録はFacebook, GitHub, Googleのアカウントからもおこなうことができます。

今回はFacebookアカウントを使って登録してみましたが、お好きな方法で進めてみてください。Facebookマークをクリックします。

画面が切り替わるので、利用したいアプリの名前を入力しましょう。今回は「First App」としておきました。

「Quickstart Guide」をクリックすることで管理画面に飛びます。App Keysはあとで取得できるので、そのままでOKです。

この時点で管理画面にログインしていますので、ここから実際にJavaScriptを使ったWebアプリのサンプルプログラムを作成していきましょう。

Webアプリのテンプレートコードの利用

それぞれのアイコンをクリックすればマニュアル等が表示されます。ここからテンプレートファイルを取得することができるので、そちらを元に進めていきましょう。

また、日本語のJavaScriptガイドが下記リンクから読めるので合わせてどうぞ。

参考JavaScript Developers Guide | Parse

まずは「Data」 をクリックします。

「Web」を選択。

「New project」をクリック。

「Download the blank JavaScript/HTML5 project」からJavaScriptのテンプレートをダウンロード＆解凍しておきましょう。また、その下のParse.initialize~に「APPLICATION_ID」と「JAVASCRIPT_KEY」がそれぞれ記述されているのでコピーしておきます。

解凍した「parse-js-blank」フォルダの中身は次の通りです。

「index.html」を開いて42行目あたりのkeysを設定している項目を、先ほどコピーした「APPLICATION_ID」と「JAVASCRIPT_KEY」に書き換えましょう。

Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");

↓

Parse.initialize("コピーしたID", "コピーしたKEY");

変更したらブラウザでindex.htmlを開いてみましょう。次のような画面が表示されればOKです。

実行結果の確認

このテンプレートでは「TestObject」というObjectのサブクラスを作り、saveから「フィールド:foo」「値:”bar”」の形でデータベースに保存するプログラムが記述されています。

よって、このindex.htmlをブラウザで表示させれば、ParseのDBにデータベースが作成されるはずです。

管理画面に戻って上部タブ「Core」を選択してデータベースを確認してみましょう。

このようにTestObjectクラスが自動で作成され、その中にあるfooに対して値barが保存されているのが確認できました。ちなみに、フィールド「objectId」は、自動で振られるindexで固有の番号が割り振られて便利です。

テンプレートファイルを使うことで、ほとんど初期設定なしでDBの作成からデータの記録までおこなうことができました。

ぜひ活用してみてください。

まとめ

BaaSを使うことで、バックエンド開発を行わずにアプリを作成することができました。

今回はParseに登録してサンプルアプリを動かしてみて、かんたんにデータベースに値を記録することができましたね。

次回以降は、ユーザー管理の設定の記事を順次公開していこうと思います。

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

私はまだアプリを作成し始めたばかりなので、もっとBaaSについての勉強をしていこうと思います。本記事がみなさんの参考になれば幸いです。

Web開発のお仕事を募集しています