- ニフティクラウドmobile backendの『ファイルストア機能』を利用してUnityのサンプルププロジェクトです
- 簡単な操作ですぐに ニフティクラウドmobile backendの機能を体験いただけます★☆
スマートフォンアプリのバックエンド機能（プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト）が開発不要、しかも基本無料(注1)で使えるクラウドサービス！今回はデータストアを体験します
注1：詳しくはこちらをご覧ください
- windows7以上、或いはOS X
- Unity5.3.5以上
- Android 4.4 - 7.x
- IOS 9
※上記内容で動作確認をしています。
###『STEP 1』準備＆アプリ起動
1. ニフティクラウドmobile backendの会員登録とログイン→アプリ作成
- 上記リンクから会員登録（無料）をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します
- アプリ作成されると下図のような画面になります
- この２種類のAPIキー（アプリケーションキーとクライアントキー）は次のステップで使います。
2. GitHubからサンプルプロジェクトのダウンロード
- 上記のリンクをクリックして、プロジェクトをダウンロードして下さい。
- ダウンロードしたフォルダを解凍し、Unityから開いてください。その後、blackboardシーンをダブルクリックして開いてください （シーンに関連オブジェクトが見えない場合はこちらをご覧ください）。
- blackboardシーンの
NCMBSettingsを編集します - 先程ニフティクラウドmobile backendのダッシュボード上で確認したAPIキーを貼り付けます
- 貼り付けたらシーンを保存して下さい。
- Unity画面で上部真ん中の実行ボタン（さんかくの再生マーク）をクリックして、次の画面が出たら、成功です！
###『STEP 2』アプリ操作 ＆ 動作確認 * ブラックボードに適当な絵や文字を描いて、「Save」ボタンをクリックして下さい。
- ダッシュボードも確認しましょう！
- ニフティクラウドmobile backendのダッシュボードで、左の「ファイルストア」をクリックして下さい。
- 先ほど描いた絵の画像ファイルが保存されていることが確認できます。
##機能解説
- ニフティクラウドmobile backend のドキュメント（クイックスタート）をUnity版に書き換えたドキュメントをご用意していますので、ご活用ください。
プロジェクトのコードファイルは以下の5つになります。これから、「SaveImage.cs」と「LoadImage.cs」について解説します。
`````Asset/script
``````````ButtonController.cs ボタンのclickeventの処理
``````````DrawLine.cs 絵を描く機能の処理
``````````ScreenAdapter.cs シーン「gallery」に展示する四枚の画像の位置・サイズ調整
``````````SaveImage.cs 描いた絵をスクリーンショットで取得し、クラウドに保存する
``````````LoadImage.cs クラウドで保存された最新の四枚の画像を取得し、展示する
###「SaveImage.cs」 ####画像を取得し、クラウドに保存
- Texture2D.ReadPixels()関数を使って、変数「camera」（シーンのMainCamera）が撮った画面をbyte[]タイプのスクリーンショットで取得する処理：
public Camera camera;
RenderTexture renderTexture;
public void saveImage () {
float width = Screen.width;
float height = Screen.height;
renderTexture = new RenderTexture (Screen.width, Screen.height, 0);
camera.targetTexture = renderTexture;
camera.Render ();
RenderTexture.active = renderTexture;
Texture2D virtualPhoto =
new Texture2D((int)width, (int)height, TextureFormat.RGB24, false);
// false, meaning no need for mipmaps
virtualPhoto.ReadPixels( new Rect(0, 0, width, height), 0, 0);
RenderTexture.active = null; //can help avoid errors
camera.targetTexture = null;
byte[] bytes;
bytes = virtualPhoto.EncodeToPNG();
saveToCloud (bytes,getName());
}- 取得した画像データをクラウドに保存する処理：
void saveToCloud(byte[] bytes, string name){
NCMBFile file = new NCMBFile (name, bytes);
file.SaveAsync ((NCMBException error) => {
if (error != null) {
// 失敗
Debug.Log("upload image error");
} else {
//成功
Debug.Log("upload image success");
Application.LoadLevel("blackboard");
}
});
}###「LoadImage.cs」 ####クラウドから画像を取得し、スクリーンで表示
- シーン「gallery」に4つのImage Gameobjectを用意します。クラウドから取得した画像は、この4つのGameobjectで表示しています。
- 最新画像を1つずつクラウドから取得する処理：
- 「imageList」の中身は、シーンから取得した4つのImage Gameobjectです。
public List<Image> imageList;//シーン「gallery」の四つのImage Gameobject
// Use this for initialization
void Start () {
//シーンが開始した時、1つずつ画像を取得する
for(int i=0; i<imageList.Count; i++){
LoadOneImage (i, imageList[i]);
}
}
public void LoadOneImage(int index, Image go){
NCMBQuery<NCMBFile> query = NCMBFile.GetQuery ();
//検索条件を設定する
query.Skip = index;
query.Limit = 1;
query.OrderByDescending ("createDate");
query.FindAsync ((List<NCMBFile> objList, NCMBException error) => {
if (error != null) {
// 検索失敗
} else {
// 検索成功
foreach (NCMBFile file in objList) {
file.FetchAsync ((byte[] fileData, NCMBException e) => {
if (e != null) {
// 取得失敗
} else {
// 取得成功
SaveBytes(fileData, go);
}
});
}
}
});
}- 取得した画像をImage Gameobjectで表示する処理：
void SaveBytes(byte[] b, Image go){
Texture2D texture = new Texture2D (100,100);
texture.LoadImage (b);
Sprite sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), Vector2.zero);
go.sprite = sprite;
Resources.UnloadUnusedAssets();
}##トラブルシューティング
- Unityから開いた後、blackboardシーンに関連オブジェクトが見えない場合
「Projectビュー」から「blackboard」を ダブルクリックすると、関連オブジェクトがHierarchyビューで見ることができます。
- ニフティクラウドmobile backend のドキュメント（ファイルストア）
- このアプリを基にした落書きゲーム「Doodle」
- このアプリで使用した素材：
画像 https://www.w3.org/2016/Talks/W3CTrack-IH/ http://www.cutemomentsphotography.com/blackboardadventures.html
フォント http://www.11-d.net/11-D35_fonts.htm