![こじゃら](/wp-content/uploads/avatars/avatar-0001-01.png)
![こじゃら](/wp-content/uploads/avatars/avatar-0001-01-dark.png)
ゲーム画面をTwitterでシェアする機能を作りたいけど、全然分からないの~
![このは](/wp-content/uploads/avatars/avatar-0002-01.png)
![このは](/wp-content/uploads/avatars/avatar-0002-01-dark.png)
やり方は一つじゃないけど、Imgurという画像共有サービスを用いてTwitterでの画像シェア機能が作れるわ!Twitter APIを使わない手軽な方法なの。
画像共有サービスImgurを用いてTwitterにゲーム画面を投稿する方法の紹介です。
本記事の内容を理解すると、次のようにTwitterの投稿URLを開いて画像をシェアできるようになります。
こんばんは
— ねこじゃらシティ@2/22で活動1周年
また暫く間が開いてしまいました
1週間ゲームジャム(#unity1week)の最後の追い込みをしていました
完成までもう一息となりました~♪
ステージ毎のランキングを表示したり、プレイ結果を画像付きで投稿できるようになっています!
大遅刻ですが明日には投稿したいと思いますpic.twitter.com/7uOSmN5SC0
(@nekojara_city) March 9, 2021
ゲームアプリからTwitterに画像を投稿する方法は一通りではありませんが、本記事で紹介する方法には次のメリットがあります。
- Twitterのアプリ認証が不要
- 画像共有のための独自サーバーが不要
- WebGL環境でも動作可能
アプリ認証やサーバーが不要なことは、開発者とプレイヤー双方にとって大きなメリットでしょう。
ただし、次のようなデメリットも存在します。
- Imgurサービスを利用するために電話番号によるSMS認証が必須
- リンク先のアイキャッチ画像として疑似的な画像投稿となる
電話番号を入力しないといけないのはリスクに感じるかもしれませんが、SMS認証以外では使用されず問題になったことはありません。
2つめの疑似的な画像投稿とは、Twitterのメディア投稿ではなくリンク先のアイキャッチ画像が代わりに表示されることです。よく見ると画像投稿と違いが分かりますが、オリジナルの画像を投稿しているように見せることができます。
Twitterへの画像投稿までの流れは次のようになります。
- 画面をTexture2D形式でキャプチャ
- キャプチャした画像をImgurサーバーにアップロード
- アップロードした画像URLをImgurから受け取る
- 画像URLを含んだツイートURLを開く
本記事では、Imgurサービスを利用して、ゲームからTwitterに画像を投稿する方法を解説していきます。
記事を読み進めるにあたり、UnityやC#スクリプト周りの基本知識が必要になりますので、予めご了承ください。
- Unity 2021.1.19f1
目次 非表示
ゲーム画面のキャプチャ
ゲーム画面をアップロードできるようにするためには、まず画面をTexture2D形式でキャプチャする必要があります。
次の2種類のキャプチャ方法を紹介します。
- UIを含む画面全体のキャプチャ
- UIを含まない特定カメラの画面をキャプチャ
それぞれ実装方法が全く異なるので、個別に解説していきます。
UIを含む画面全体のキャプチャ
ゲーム画面全体をTexture2Dとして取得したい場合は、次のメソッド呼び出しだけで完結できます。
ただし、呼び出しタイミングはレンダリング終了時でなければいけません。それ以外のタイミングで呼び出した場合はエラーとなります。
したがって、実際にキャプチャを実行するコードは次のようになります。
コルーチンを用い、WaitForEndOfFrameでレンダリング終了まで待機することがポイントです。
引数は高解像度やステレオ視に関する指定ですが、画面全体の解像度そのままでキャプチャしたい場合は省略できます。引数の詳細については、公式ドキュメントをご確認ください。
参考:ScreenCapture-CaptureScreenshotAsTexture – Unity スクリプトリファレンス
UIを含まない特定カメラのキャプチャ
キャプチャ時にUIを含めたくない場合は、RenderTextureを用いてカメラの描画内容を取得すれば良いです。
対象カメラの描画先を一時的に独自のRenderTextureに指定してキャプチャし、RenderTextureからピクセルデータをTexture2Dオブジェクト側に転送するといった流れになります。
Imgurを使えるようにする
Imgurサービスを利用して画像をアップロードするためには、Imgurアカウントを作成し、アプリケーション登録する必要があります。
アカウント登録
以下Imgur公式サイトにアクセスし、右上のSign upよりユーザー登録を行ってください。既にImgurアカウントをお持ちの場合は、Sign inよりそのままログインしてください。
ユーザー登録ページでは、メールアドレスのほか、TwitterやGoogleアカウント等で登録することも可能です。いずれの登録方法でも、電話番号は必ず求められますので、入力後に指示に従ってSMS認証を行ってください。
![](/wp-content/uploads/2021/09/unity-imgur-twitter-share-1-1024x653.png)
アプリケーション登録
画像を匿名ユーザーからアップロードするために、Imgurにアプリケーションを登録します。以下リンクより登録を行ってください。
https://api.imgur.com/oauth2/addclient
アプリケーション登録では、次の通り項目を入力します。
- Application name: アプリケーション名
- Authorization type: Anonymous usage without user authorizationを選択
- Authorization callback URL: 任意のURL
- Email: 自身のEメールアドレス
![](/wp-content/uploads/2021/09/unity-imgur-twitter-share-2-1024x586.png)
一通り入力したら、reCAPTCHA認証を行い、Submitボタンをクリックしてください。
![](/wp-content/uploads/2021/09/unity-imgur-twitter-share-3-1024x283.png)
アプリケーション登録に成功すると、次の画面に遷移します。
![](/wp-content/uploads/2021/09/unity-imgur-twitter-share-4-1024x439.png)
今回は匿名ユーザーからの画像投稿機能のみを使うため、Client IDのみ使います。Client IDをメモしておきます。
なお、登録したアプリケーションのClient IDは、以下ページからいつでも確認可能です。
https://imgur.com/account/settings/apps
![](/wp-content/uploads/2021/09/unity-imgur-twitter-share-5-1024x403.png)
以上でアプリケーション登録は完了です。
画像データのアップロード方法
Imgurへの画像データのアップロードは、次のアップロード用API呼び出しで行います。
Request URL | https://api.imgur.com/3/image |
Request Method | POST |
Headers | Authorization: Client-ID [Client ID] |
Form Data | image: [Base64でエンコードされた画像データ] |
上記APIを叩く処理は次のようになります。
アップロードする画像データは、Base64形式 のデータに変換する必要があります。
Texture2DをBase64形式のデータに変換するには、Texture2D→バイナリ形式→Base64形式の順に変換処理を実行します。
そして、UnityWebRequestを用いて必要データを指定して上記APIを叩いています。
APIの実行に成功すると、次のようなレスポンスがJSON形式で返されます。
このJSONデータの中に、アップロードされた画像のURL等の情報が含まれています。画像URLは、data.linkに格納されています。
Imgur APIを利用する際の注意点
頻繁にアップロードのAPI呼び出しを行いすぎると、アップロード処理に失敗することがあります。そのため、エラー処理を行うことを強く推奨します。
また、WebGL環境で画像投稿を行う場合、ローカルホスト(http://localhostなど)で実行すると次のようなエラーが返され必ず失敗してしまう状況です(2021/9/11現在)。
原因は、APIを実行するときに、リファラにlocalhostが指定されていると、Imgurサーバー側が必ずエラーを返す挙動になっているためです。
WebGL環境でのテストの際は十分ご注意ください。
Twitterへの投稿
Imgurにアップロードされた、JSONのレスポンスに含まれている画像URL(data.link)から拡張子を除いたURLをツイート文言に含めることで、疑似的に画像投稿ができます。
URLの例
![](/wp-content/uploads/2021/09/unity-imgur-twitter-share-6-1024x696.png)
Twitterの投稿画面は、ツイート文言を含んだURLを直接開くことで実装できます。
WebGL環境の場合は、新しいウィンドウを開くJavaScriptプラグインを実装して対応する必要があります。Application.OpenURL()メソッドを使うと現在プレイしているゲームが中断されてしまうためです。
WebGL以外の環境では、Application.OpenURL()メソッド呼び出しで対応可能です。
サンプルスクリプト
ゲーム画面をキャプチャし、Imgur経由でTwitterに画像投稿するまでの流れを実装したサンプルスクリプトです。スペースキーを押すと処理が開始されます。
コード量が多いため、機能ごとにクラス分けしました。
一連の流れを動かすためには、上記スクリプトすべてをUnityプロジェクトに保存する必要があります。
また、WebGL環境では次のスクリプトをPlugins配下に置く必要があります。
ビルド対象にWebGLが指定されていることも念のため確認しておきます。
![](/wp-content/uploads/2021/09/unity-imgur-twitter-share-7-1024x559.png)
使い方
ShareExampleスクリプトのみを適当なゲームオブジェクトにアタッチし、インスペクターより必要項目を設定します。
![](/wp-content/uploads/2021/09/unity-imgur-twitter-share-8.jpg)
ツイート文言は、string.Format()メソッドを使って文字列{0}の部分に画像URLが入るようにしました。
このスクリプトは記事用の例としたサンプルですので、実際のゲームで使う際はこのままではなくクラス設計してから使うことをお勧めします。
![このは](/wp-content/uploads/avatars/avatar-0002-01.png)
![このは](/wp-content/uploads/avatars/avatar-0002-01-dark.png)
あくまでもサンプルなので、クラス分けや設計などは各自でしっかり行ってね!
実行結果
ここまでの手順を成功させると、スペースキーを押して暫くするとTwitterへの投稿画面が開きます。
もし開かない場合は、Imgur APIの実行に失敗しているか、手順に不備がある可能性があります。
API実行に失敗している場合、しばらく時間をおいてから再びスペースキーを押すと上手くいくことがあります。
さいごに
ゲーム画面をキャプチャし、Imgur経由でTwitterに画像投稿するまでの一連の流れを実装する方法を解説しました。
画面キャプチャ、Imgurの使い方、Imgur APIの使い方、HTTPリクエスト送信、JSON解析、JavaScriptプラグイン作成(WebGL環境の場合)、Twitter送信URL作成などを行う必要があります。
それぞれの要素技術の使い方を理解できれば、ここから様々な応用ができるようになるでしょう。