Unity(WebGL)からGyazoAPIを使って画像をアップロードする

こちらは

UnityのWebGL出力でも画像シェアやりたいよね…。でもどうすれば・・・。

という前々からの悩みを「とりあえず、gyazoにアップロードしたリンク貼ろう。twitterでは画像展開されないけど、まぁよかろう」という一応の結論にたどり着いたので、過去のゲームに組み込んでみました。解説記事はまた今度 https://t.co/4OqRNYQhM5

— すずきかつーき (@divideby_zero) 2018年1月30日

の解説記事になります。

手順としては非常にシンプルで

①Gyazoにアプリケーションを登録、AccessTokenを取得

②Gyazo APIのUpload parameter(画像バイナリ・AccessToken）をセットしてPostする

③アップロードが成功するとJSONが返却されるので、そこからURLを取得

④本文に取得したURLを書いてTweetする。

です。　では順に行きます。

①Gyazoにアプリケーションを登録、AccessTokenを取得

まず、Gyazoのユーザーが無いとどうしようもないので、登録はしておいてください。
その後 https://gyazo.com/api へ行き、「アプリケーションを登録」

「New Application」のボタンを押し、NameとCallbackURLを入れます。
Nameには自分の好きな名前を。今回は「UnityWebGLImageUpload」としました。
CallbackURLは適当に入れました。よくわかってません。

Submitして作られたApplication名をクリックして、認証情報表示画面へ。
Your access token の下に「Generate」のボタンがあると思うので、クリックして、AccessTokenを生成。

↓

このAccessTokenによって画像アップロードの認証をするので、コピーしてメモ帳にでも取っておきます。
(もちろん、もう一度この画面を開けば確認できますし。「Regenerate」で再生成も出来ます。）

②Gyazo APIのUpload parameter(画像バイナリ・AccessToken）をセットしてPostする

https://gyazo.com/api/docs/image#upload に書いてある仕様に合わせてPostデータを作って送信します。

UnityでPostするにはUnityWebRequest.Postを、Postデータは WWWWFormを使いました。

注意：ここで使われているScreenCapture.CaptureScreenshotAsTextureはUnity2017.3以降じゃないと動きません

そこそこシンプル目サンプルコード

using System;
using System.Collections;
using System.IO;
using UnityEngine;
using UnityEngine.Networking;
using UnityEngine.UI;

public class GyazoUploadTest1 : MonoBehaviour
{
    public Button _sendButton;
    public Text _timeText;

    public void Start()
    {
        //クリックしたらスクリーンショットを撮って、Gyazoにアップロード
        _sendButton.onClick.AddListener(() =>
            StartCoroutine(UploadGyazoIterator("取っておいたAccessTokenを書きねぇ"))
        );
    }

    private IEnumerator UploadGyazoIterator(string accesstoken)
    {
        //スクリーンショット取得
        yield return new WaitForEndOfFrame();
        var tex = ScreenCapture.CaptureScreenshotAsTexture();

        var gyazoUploadUrl = "https://upload.gyazo.com/api/upload";

        var form = new WWWForm();
        form.AddField("access_token", accesstoken);
        form.AddBinaryData("imagedata", tex.EncodeToPNG(), "screenshot.png", "image/png");
        using (var request = UnityWebRequest.Post(gyazoUploadUrl, form))
        {
            yield return request.SendWebRequest();
            var response = request.downloadHandler.text;

            Debug.Log("Gyazo Upload Response:\n" + response);
        }
        UnityEngine.Object.Destroy(tex);//後始末
    }

    void Update()
    {
        //現在時間を表示
        _timeText.text = DateTime.Now.ToString();
    }
}

form.AddFieldでAccessTokenを
form.AddBinaryDataで画像データ(byte[])を格納しています。

これだけで、UnityEditor（およびWEBGLなどでも）実行してボタンをタップすると、現在のスクリーンショットがGyazoにアップロードされ、responseがJSONで返却されていることがわかります。

③アップロードが成功するとJSONが返却されるので、そこからURLを取得する。

返却はJSONデータで、内容はhttps://gyazo.com/api/docs/image#upload に書いてあるとおりです。

このJSONをパースする方法はいくつかありますが、高速かつ他ライブラリをインポート使う必要が無いという点で、JsonUtility.FromJson<T>(string JSON);を使いました。

そのためには、まずレスポンスで返却されるkeyを全部メンバとして持つSerializableなclassを用意します。

JSONパース用クラス

    [Serializable]
    public class GyazoResponse
    {
        public string image_id;
        public string permalink_url;
        public string thumb_url;
        public string url;
        public string type;
    }

そして、response(JSON)からパースしてあげます。

パース＋ブラウザオープン処理

        using (var request = UnityWebRequest.Post(gyazoUploadUrl, form))
        {
            yield return request.SendWebRequest();
            var response = request.downloadHandler.text;
            Debug.Log("Gyazo Upload Response:\n" + response);

            //パース処理+ブラウザによるOpen処理
            var gyazoResponseObj = JsonUtility.FromJson<GyazoResponse>(response);
            Application.OpenURL(gyazoResponseObj.permalink_url);
        }

アップロードされてますね！！

やってみると特につまづきポイントも無く結構簡単！！
（むしろ、ちゃんとスクリーンショットを撮る方がつまづきポイント多いような・・・）

最後に

サンプルコードのgithubによる公開および、これら機能を簡単に使えるunitypackage形式のAssetなどを準備中です。
完成次第追記したいと思います。

サンプルコード、unitypackge作りました！　↓
Unity(WebGL)から簡単にGyazoAPIを使って画像をアップロードする

それでは良いGyazoライフを。