ミライノ記録

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

adobe AnimaterとNCMBのお話(後半)

さて前回の続きでadobe Animateでの作業です。

 

 

サンプルなので画面にボタンがあるという程度いいのですが、5枚の画面を[Next]と[Prev]ボタンで行き来するように作成しました。ファイル名はtest01.flaです。

 

f:id:jeffry1461:20170611163316p:plain

 

パブリッシュしますと、html、とjsが作られますね。先程のファイル2つと合わせて5ファイルが作業フォルダにあります。

f:id:jeffry1461:20170611165914p:plain

 

 

出力されたhtmlファイルを見てみますとこうなっております(adobeのアップデートで変更の可能性あります)

f:id:jeffry1461:20170611163749p:plain

 

これに先程のNCMBのSDKを呼び出せるように追加します。

16行目の後に以下の2行を追加します。(ディレクトリ分けは各自対応してください)

<script type="text/javascript" src="ncmb.min.js" charset="utf-8"></script>

<script type="text/javascript" src="func.js" charset="utf-8"></script>

 

 

htmlを保存したあと、Animate側のパブリッシュ設定で以下を設定しておきましょう。

つまりhtmlファイルを上書きしないようにしておくのです。

f:id:jeffry1461:20170611164154p:plain

 

 

 あとは、Animate側のJavaScriptにて、DBSave_data()を呼び出すとNCMBにデータが書き込まれます。例えば開始時、問題の回答ボタン、終了ボタンなどですね。

 

f:id:jeffry1461:20170611171014p:plain

この例の場合、btNextボタンクリックでページを遷移し、最後のページの時にDBSave_data("123");を呼び出しています。このDBSaveはfunc.jsに定義してあります。

 

今回の引数はpageに登録する数値(文字列)です。NCMBでのフィールドの設定で数値タイプにも変更できます。

f:id:jeffry1461:20170611173219p:plain

 

 

さてhtmlを実行し、DBSave_data()を呼び出してみてください。

エラーがなく実行できたとしたら、NCMBの方を見てみましょう。

f:id:jeffry1461:20170611173359p:plain

 

ちなみにDBSave_data()を一度呼び出すごとに1件のレコードが作成されます。1件のレコード内のデータを増やしたいときはフィールドを追加し、DBSave_data()内で.setで増やします。例えば確認テストの1問目2問目を記録したいのなら、フィールドを増やす方がよいでしょう。

 

 これでできる、ハズですはい。