LoginSignup
5

More than 5 years have passed since last update.

posted at

updated at

Organization

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

こちらは

の解説記事になります。

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

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

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

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

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

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

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

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

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

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

image.png

この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で返却されていることがわかります。

image.png

③アップロードが成功すると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);
        }

アップロードされてますね!!
image.png

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

最後に

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5