[BaaS] Parseの登録方法&初期設定(Webアプリ編)
2017/01/31
こんにちは、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月現在では次の通りです。
- リクエスト数
- ファイルストレージ
- データーベースストレージ
- 通信容量
- Push
1秒間に30リクエストまで
20GBまで
20GBまで
2TBまで
月100万回まで
上記の枠を超えると料金が発生します。無料プランからそのまま追加料金を払うことで、気軽に枠を増やすことができるので便利ですね。
よく利用するであろう機能は次の通り。
- DB
- ユーザー管理
- SNSを利用したログイン機能
- Push通知
- 端末
NoSQL形式で好きなデータを保存できる
デフォルトでユーザー管理機能がついている。下のSNSを利用したログイン機能と併用して使える
デフォルトでTwitter, Facebookを利用したログイン機能が利用できる
デフォルトでPush通知機能を利用できる
SDKを利用することでiOS,Android,Webアプリから利用できる
あとはアクセス解析、画像の投稿、管理画面の利用もできます。個人で使う場合はよほど規模が大きく無い限り、ほぼほぼ無料で利用できるので気軽に試してみると良いかと思います。
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に登録してサンプルアプリを動かしてみて、かんたんにデータベースに値を記録することができましたね。
次回以降は、ユーザー管理の設定の記事を順次公開していこうと思います。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。
「Ruby on Rails」「JavaScript(jQuery, Reactなど)」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
PC用AdSense
PC用AdSense
こちらもどうぞ
- PREV
- 人生初キャバクラで6万取られた話
- NEXT
- ブログ始めて4ヶ月!PV数とか人気記事とか紹介