vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

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

      2017/01/31

LINEで送る
Pocket

start-parse
こんにちは、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月現在では次の通りです。

  • リクエスト数
  • 1秒間に30リクエストまで

  • ファイルストレージ
  • 20GBまで

  • データーベースストレージ
  • 20GBまで

  • 通信容量
  • 2TBまで

  • Push
  • 月100万回まで

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

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

  • DB
  • NoSQL形式で好きなデータを保存できる

  • ユーザー管理
  • デフォルトでユーザー管理機能がついている。下のSNSを利用したログイン機能と併用して使える

  • SNSを利用したログイン機能
  • デフォルトでTwitter, Facebookを利用したログイン機能が利用できる

  • Push通知
  • デフォルトでPush通知機能を利用できる

  • 端末
  • SDKを利用することでiOS,Android,Webアプリから利用できる

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

Parseに登録する

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

LINKParse

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

start-parse2

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

start-parse3

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

start-parse4

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

start-parse5

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

start-parse6

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

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

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

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

参考JavaScript Developers Guide | Parse

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

start-parse7

「Web」を選択。

start-parse8

「New project」をクリック。

start-parse9

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

start-parse10

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

start-parse11

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

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

↓

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

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

start-parse12

実行結果の確認

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

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

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

start-parse13

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

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

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

まとめ

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

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - BaaS

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

関連記事はありませんでした

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。