ほんとにWebデザイナーでもできる?Milkcocoaを使ったバックエンド楽ちん実装(2)

ほんとにWebデザイナーでもできる?Milkcocoaを使ったバックエンド楽ちん実装(2)

1. Milkcocoaを使う準備

では実際に使っていきましょう。
まずはアカウント登録・・・ってこれは説明しなくてもいいですね。

ログインして、アプリを登録したら、こんな画面になります。

Milkcocoa

まず最初にしなければならないことは、

MilkCocoa APIを利用するには、このscriptタグをHTMLに読み込んでください

<script src='https://cdn.mlkcca.com/v2.0.0/milkcocoa.js'></script>

Webデザイナーでもこのくらいは朝飯前です。
なんかうまくいかないな~っていうときは、とりあえずこのjsファイルを落として、自分のMonacaプロジェクトに組み込んでしまいましょう。

それからもうひとつ気をつけなければならないことは、Milkcocoaを使った処理よりも前に、このファイルを読み込んでおくということです。
当たり前のようですが、私は一回やりました。

2. access originの設定

いろんなチュートリアルなどをさまよううちに、「ホワイトリスト」とか「セキュリティ」とか「アクセスオリジン」みたいな言葉が出てくると思います。
とりあえずMonacaプロジェクトの一番下あたりに表示されているであろう、config.xmlを開いてください。

<access origin="*" />

こんなのがあると思います。

こいつは何かというと、ここで指定したネットワークのアクセスを許可しますよ、という設定です。
たとえば、

<access origin="http://google.com/" />

だったら、http://google.com/と通信できます。

ワイルドカードとして「*」を使うこともできます。

<access origin="*" />

とした場合、すべてのネットワークでの通信を許可してしまうので、危ない気がします。
でも今回はMonacaで丸め込むし、ユーザーが自由に入力できるinputなどがないのでとりあえずこれでいきます。
まずは使えるようにしたいですからね。

これをやってないと、チュートリアルやドキュメント見てサンプルコードをコピってもどうにも動かないって感じになったりします。

3. 「たった1行」とはこれのこと

ダッシュボードで概要を見てみると、

こちらのコードはJavaScriptのコード中でお使いください。milkcocoaというたった1つのオブジェクトがあなたを力強くサポートします。

var milkcocoa = new MilkCocoa(“アプリのID.mlkcca.com”);

とありますね。

この1行を仕込むことで、最初に読み込んだjsが裏側でいろいろ働いてくれるようになります。

またまた当たり前の話ですが、このコードを入れる場所は、milkcocoaを使った処理を記述するよりも前です。
なにかのfunction()の中とかに入れてると、ほかの場所で使いたいときにオブジェクトを見失ってしまいます。

4. データを送信・保存する

ではいよいよ、アプリからデータを送信してみたいと思います。
「データストア」というのは、電話のアドレス帳のようなものです。
「友達」「会社」「サークル」といった名前がついたそれぞれの電話帳の中に

・1件目「ID○○、名前□□△△、電話番号xxx-xxxx-xxxx」
・2件目「ID●●、名前■■▲▲、電話番号xxx-xxxx-xxxx」

といったデータが格納されているものだと思ってください。

ここから先は、下記のドキュメントを見てやっていくことにしましょう。
Monacaで開発してるので、AndroidであってもJacaScriptのドキュメントを見るんですよ。

今回は、データを送信したいのでユーザのログインとかは読み飛ばしましょう。
「DataStore」のところを見てみます。

push()

データストアに新しいデータを追加するメソッドです

間違いなくこれですね!これを使います。

引っ張るようですが、眠くなってきたので続きはまた次回( ˘ω˘)スヤァ