ミライノ記録

楽しく学べるアプリの紹介、モバイルアプリ開発記録等

adobe AnimaterとNCMBのお話(前半)

AnimateからNCMBにデータを登録したい

 adobe Animater(旧Flash)のCanvasタイプにて、教育コンテンツを制作するお仕事を受ける事があります。アニメーションだけでなくインタラクティブなものです。

 

私が受けてきたコンテンツは、みなLMSgoogle Analyticsも使わないのですが、履歴データを一時的にでも記録できないかという要望があったので考えてみました。

 

 

ネットにデータを溜め込むとなりますと・・・サーバを用意してPHPでDBにデータを登録とかでしょうか?(あまりやりたくない)

 

手間を考えますと、私の場合はNCMBNifty cloud mobile backend)がちょうど良いと思いました。特に一般公開するものではないのというのがピタリです。

 

年間契約で管理を任されれば有料プランにするのですが、今回は無料プランでいきます。本来スマホ用なのですが、JavaScriptなのでPCでも動作します。

 (一般公開する場合、このまま作業を行うとセキュリティー的に危険なのでご注意ください。理由はJavaScriptファイルでIDなどが見られてしまうからです。回避方法はいくつかあるようなのですが、今回は割愛させていただきます)

 

 

 


 

 

【やりたいこと】

1)abobe  AnimateのCanvasにてコンテンツを制作

2)コンテンツ再生時、ボタンクリック回数などのデータをネット上に保存したい

3)集まったデータをPC上のテキストファイルとして一覧で見たい

 

 

【手順】

1)NCMBにてアカウント登録、アプリとクラスの設定をする

2)NCMBのSDKをダウンロードする

3)NCMBへの登録用のjsファイルを作成する

4)adobe AnimateでファイルをCanvas で作成し、一度パブリッシュ

5)adobe Animateが書き出したHTMLに行を追加、SDKを配置

6)NCMB上でデータを確認後、エクスポートでファイルにする

 

 

NCMBのアカウント登録の説明は割愛しますm(_ _)m

 

アカウント登録しログインした後、サイト上で「アプリの新規作成」を行ってください。NCMBは1アプリごとに管理します。アプリ名というのはプロジェクト名と考えてください。実際のアプリとは関係ないのです。

 f:id:jeffry1461:20170611161423p:plain

 

 

 ここの「アプリケーションキー」と「クライアントキー」は後ほど使用しますが、今はOKで閉じてしまって大丈夫。

f:id:jeffry1461:20170611161715p:plain

 

 

ついでにクラスの制作もしましょう。スクリプトでもできるのですが、目で確認できたほうが良いかと思います。データストアからクラス「+作成」のボタンを押し、「新規作成「を選びます。

f:id:jeffry1461:20170611171242p:plain

 

 

クラス名はなんでも良いですが、今回はUserDataという名前にしました。

クラスとは1件分のデータの型というところです。

f:id:jeffry1461:20170611171344p:plain

 

 

さらにクラス内にフィールド(変数の入れ物)を設定します。今回はpageidを作成しました。

f:id:jeffry1461:20170611171421p:plain

 

 

フィールドpageidが登録されました。まだデータは0件です。

f:id:jeffry1461:20170611171643p:plain

 

 

 


 

 

 

次はSDKをダウンロードしましょう。ココです。

いろいろファイルがありますが、実際に使うのは ncmb.min.js だけです。

 SDKファイル(ncmb.min.js)を作業ディレクトリに置いてください。

 

ついでに、NCMBにデータを登録する関数を定義するjsファイルも作成しておきましょう。ファイル名は func.js としました。(コードの色分け表示が未だにわからないのでスクショです)

f:id:jeffry1461:20170611170740p:plain

UserDataはNCMBで作成したクラス名です。pageidは追加したフィールド名となります。

 

 

 

ここに先程のNCMBでアプリを作成した時にでた「アプリケーションキー」と「クライアントキー」をセットします。ちなみに画面右側の「アプリ設定」というボタンからも確認できます。(変更はできません)

f:id:jeffry1461:20170611165518p:plain

現在作業フォルダには「func.js」と「ncmb.min.js」があります。

 

 


 

 さてそろそろAnimateでの作業ですが、後半へ続きます。

 

f:id:jeffry1461:20170529101447p:plain