ミライノ記録

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

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

 

いるかとなにか。 というゲームアプリ

 4年前くらいからでしょうか、「いるかとなにか。」という絵本を作りまして。

絵本といっても絵にBGMをつけた動画でしたけども。

 

これを子供向けのインタラクティブ絵本として作り直したいなと考えております。

 

・・・という構想も3年くらい前からあるのですが、サンプル作成→面白くない、を数回繰り返しておりまして。結局完成に至りませんでした。

 

それでも、面白くなくても、たいしたことなくても、作品として完成させないと先に進めない気がしておりまして、4度か5度目の挑戦で再度作り直すことにしました。

 

 

f:id:jeffry1461:20170607092753p:plain

f:id:jeffry1461:20170607092807p:plain

f:id:jeffry1461:20170607092815p:plain

 

これらの絵にボタンがつく感じですね。タッチでアニメーションや画面効果があるという予定でございます。

 

ただし、絵をシンプルな感じで書き直した方が良いという意見もでておりまして、目下検討中でございます。

 

 

 

続々・Unityで線を描いてみたい

Unityにて、漢字の書き順を教えるアプリ作りたいと思いまして、まずは指で線を描ける仕組みを作り始めました。

 

悩みましたが、Prefabをいくつも置いていく方式としました。

1:単純で理解できる(私の知能的に)
2:色を変えやすい(色違いのプレファブを複数用意するだけ)
3:座標と色番号だけ記録すればいいので、リプレイし易い

という理由でございます。

 

 

【指でなぞって線を描いてみた動画】 


Unityで線を描いてみたい けっこうできた

 



2点間に点を打つというサンプルコードを置こうと思ったのですが、いまだにコードの置き方がわからないので止めました。んーきれいに置くにはどうするのか・・・ 


さて、この後は書いた漢字のデータを保存、読み込み、再生をしたいのですが、どう保存したら良いものか・・・。先は長いです。

 


続・Unityで線を描いてみたい

Unityにて、漢字の書き順を教えるアプリ作りたいと思いまして、まずは指で線を描ける仕組みを作り始めました。

 

昨日はPrefab方式かLineRenderer方式かすら決まらなかったのですが、慣れ親しんでいる(?)Prefab方式をもう少し進めました。

 

マウスポインタ部分に、インクにみたてたPrefabを置く方式ですが、マウス(もしくは指)を早く移動すると点と点の隙間ができてしまいます。

f:id:jeffry1461:20170602120109p:plain

 

 

点と点を線で繋げばいいだけなのですが、Unityではそういうメソッドがみつかりません。(あったら教えてください!)となると、自前で計算して線を引くしかないです。

頑張って線を描くアルゴリズムを移植してみたのがこちらです。


Unityで線を描いてみたい

 

 


 

やはり線を描画するといえば、昔からある「プレゼンハムのアルゴリズム」ですね。

ただこれは整数を使用するので、Unityの画面に合わなかったのでFor文をやめてWhile文で無理やり回しました。

 

(ここでコードでも久しぶりに貼ろうかと思いましたがやり方忘れました)

 

 

まだかなり粗いので、これから細かく描けるように調整していきます。いやそれより描画の保存と再現をするべきかも。

f:id:jeffry1461:20170603115743p:plain