/Blackboard

A simple drawing and saving application. This app is a sample of Nifty Cloud mobile backend.

Primary LanguageC#

【Unity】描いた絵をクラウドで共有しましょう！

簡単な絵を描いて、クラウドに保存・取得するのアプリ「Blackboard」

概要

ニフクラmobile backendって何？？

スマートフォンアプリのバックエンド機能（プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト）が開発不要、しかも基本無料(注1)で使えるクラウドサービス！今回はデータストアを体験します

注1：詳しくはこちらをご覧ください

画像2

動作環境

  • MacOS Mojave v10.14.6 (18G103)
  • Android studio: 3.4.1
  • Simulator: Pixel 2 Android OS Version 10
  • Unity 2019.2.17f1

※上記内容で動作確認をしています。

手順

『STEP 1』準備＆アプリ起動

1. ニフクラmobile backendの会員登録とログイン→アプリ作成

  • 上記リンクから会員登録（無料）をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します

画像3

  • アプリ作成されると下図のような画面になります
  • この２種類のAPIキー（アプリケーションキーとクライアントキー）は次のステップで使います。

画像4

2. GitHubからサンプルプロジェクトのダウンロード

  • 上記のリンクをクリックして、プロジェクトをダウンロードして下さい。

3. Unityでアプリを起動

  • ダウンロードしたフォルダを解凍し、Unityから開いてください。その後、blackboardシーンをダブルクリックして開いてください （シーンに関連オブジェクトが見えない場合はこちらをご覧ください）。

4. APIキーの設定

  • blackboardシーンのNCMBSettingsを編集します
  • 先程ニフクラmobile backendのダッシュボード上で確認したAPIキーを貼り付けます

画像07

  • 貼り付けたらシーンを保存して下さい。

5. アプリ再生

  • Unity画面で上部真ん中の実行ボタン（さんかくの再生マーク）をクリックして、次の画面が出たら、成功です！


『STEP 2』アプリ操作 ＆ 動作確認

  • ブラックボードに適当な絵や文字を描いて、「Save」ボタンをクリックして下さい。

* セーブが完了したら、ブラックボードは初期化されます。「Gallery」をクリックすると、先ほど描いた絵を確認できます。

  • ダッシュボードも確認しましょう！
    1. ニフクラmobile backendのダッシュボードで、左の「ファイルストア」をクリックして下さい。
    2. 先ほど描いた絵の画像ファイルが保存されていることが確認できます。 画像14

機能解説

SDKのインポートと初期設定

コード解説

プロジェクトのコードファイルは以下の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で表示しています。

画像07

  • 最新画像を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ビューで見ることができます。

参考