はじめに
先日リリースした『ねねちーのお昼ご飯大作戦ある!』では、スクリーンショット付きで結果をツイートすることができます。
そしてこのたび、ここで使用したスクリプトを切り出して、GitHub にて公開いたしました。
使い方
テキストのみツイートする
TweetFromUnityWebgl.jslib
内の TweetFromUnity()
を実行することでツイートができます。以下のように呼び出してください。
#if !UNITY_EDITOR && UNITY_WEBGL [System.Runtime.InteropServices.DllImport("__Internal")] static extern string TweetFromUnity(string rawMessage); #endif public void Tweet() { #if !UNITY_EDITOR && UNITY_WEBGL TweetFromUnity("ツイートメッセージです"); return; #endif }
PC 環境で実行すると、twitter.com の投稿画面がブラウザで開きます。モバイル環境だと、Twitter アプリが起動します。
Sample1_Tweet
シーンにこの例がありますので、ご参照ください。
スクリーンショット付きでツイートする
ゲームのスクリーンショット付きでツイートすることもできます。Imgur を使用した例を以下に示します。
※ Imgur のクライアント ID が必要です。
[SerializeField] string imgurClientId; #if !UNITY_EDITOR && UNITY_WEBGL [System.Runtime.InteropServices.DllImport("__Internal")] static extern string TweetFromUnity(string rawMessage); #endif public IEnumerator TweetWithScreenshot() { yield return new WaitForEndOfFrame(); var tex = ScreenCapture.CaptureScreenshotAsTexture(); var wwwForm = new WWWForm(); wwwForm.AddField("image", Convert.ToBase64String(tex.EncodeToJPG())); wwwForm.AddField("type", "base64"); // Upload to Imgur var www = UnityWebRequest.Post("https://api.imgur.com/3/image.xml", wwwForm); www.SetRequestHeader("AUTHORIZATION", "Client-ID " + imgurClientId); yield return www.SendWebRequest(); var uri = ""; if (!www.isNetworkError) { var xDoc = XDocument.Parse(www.downloadHandler.text); uri = xDoc.Element("data")?.Element("link")?.Value; if (uri != null) { // Remove ext uri = uri.Remove(uri.Length - 4, 4); } } #if !UNITY_EDITOR && UNITY_WEBGL TweetFromUnity($"ツイートメッセージです%0a{uri}"); yield break; #endif }
Sample2_TweetWithScreenshot
シーンにこの例がありますので、ご参照ください。
特殊文字
改行やハッシュタグをツイート文に含めたい場合は、以下のようにしてください。
- 改行 :
%0a
- ハッシュタグ (#) :
%23
例:
TweetFromUnity("ツイートメッセージに、改行や%0aハッシュタグを含めることもできます!%0a%0a%23TweetFromUnityWebGL");
↓
ツイートメッセージに、改行や ハッシュタグを含めることもできます! #TweetFromUnityWebGL
インストール
Package Manager
https://github.com/Gigacee/tweet-from-unity-webgl.git?path=Assets/Plugins/tweet-from-unity-webgl
手動
Assets/Plugins/tweet-from-unity-webgl/TweetFromUnityWebgl.jslib
を、自分のプロジェクトにコピーしてください。
※ 必ず Assets/Plugins/
に配置してください。でないと機能しません。
余談:このスクリプトができるまで
Unity WebGL からツイートするための方法は、ネットで調べるといくつかの情報がヒットします。ですがその多くが、すでに廃止されている Application.ExternalEval()
を使用したもので、最新の Unity で動作するようなスクリプトは見つけることができませんでした。
とはいえ、Unity WebGL から JavaScript の関数を呼び出すこと自体は、前作の『かえちゃんジャンプ!!』でやったことがあります。その応用で、Unity 内で生成した文字列を JavaScript に渡し、twitter.com を開けばツイートできるのでは? と考え、最初に書いたコードが以下のようなものです。
// TweetFromUnityWebgl.jslib mergeInto(LibraryManager.library, { TweetFromUnity: function (rawMessage) { var message = Pointer_stringify(rawMessage); window.open("https://twitter.com/intent/tweet?text=" + message, "_blank"); }, });
Pointer_stringify()
は、Unity 内の文字列を JavaScript 文字列に変換するためのものらしいです。
あとは Unity 内から TweetFromUnity("ツイート文だよ~")
という感じで呼び出せば、 window.open(uri)
で twitter.com の投稿画面が開き、ツイートができる! 完璧!! ……と思っていたのですが、iOS の Safari でゲームを実行すると、ポップアップブロック機能が働いてしまい、投稿画面が開いてくれませんでした。かと言って、 location.href = uri
で遷移すると、ゲームを実行しているタブと同じタブで投稿画面が開いてしまい、ゲームが終了してしまいます。
どうしたものか……としばらく考え、モバイル端末なら大抵 Twitter アプリが入っているはずだから、そのアプリを直接起動すれば良いのでは??? と考えました。つまり、こんなコードです。
// TweetFromUnityWebgl.jslib mergeInto(LibraryManager.library, { TweetFromUnity: function (rawMessage) { var message = Pointer_stringify(rawMessage); location.href = "twitter://post?message=" + message; }, });
モバイル環境で twitter://post?message=
を実行すると、Twitter アプリが開きます。この URI (?) を調べるのに、だいぶ苦労しました……。
ですがこれだと、今度は PC でツイート画面が開けませんから、どうにかして実行環境が PC かモバイルかを判別しなくてはなりません。これに関してはネットに豊富な情報がありましたので、苦労せず実装することができました。
// TweetFromUnityWebgl.jslib mergeInto(LibraryManager.library, { TweetFromUnity: function (rawMessage) { var message = Pointer_stringify(rawMessage); var mobilePattern = /Android|iPhone|iPad|iPod/i; if (window.navigator.userAgent.search(mobilePattern) !== -1) { // Mobile location.href = "twitter://post?message=" + message; } else { // PC window.open("https://twitter.com/intent/tweet?text=" + message, "_blank"); } }, });
ユーザーエージェントを取得し、その中に「Android」「iPhone」「iPad」「iPod」のいずれかが含まれていたらモバイル端末、というように判別します。これで、すべての環境*1でツイートをすることができるようになりました!🎉 めでたしめでたし😊
追記(2020.10.18)
あとから知ったのですが、iOS 13.0 以降の iPad*2だと、ユーザーエージェントに「iPad」の文字列が入ってないんですね……。そのため、上記のコードだと iPad で Twitter アプリが開きません。iPad でも Twitter アプリが開くよう、以下のように修正しました。
// TweetFromUnityWebgl.jslib <feff>mergeInto(LibraryManager.library, { TweetFromUnity: function (rawMessage) { var message = Pointer_stringify(rawMessage); var mobilePattern = /android|iphone|ipad|ipod/i; var ua = window.navigator.userAgent.toLowerCase(); if (ua.search(mobilePattern) !== -1 || (ua.indexOf("macintosh") !== -1 && "ontouchend" in document)) { // Mobile location.href = "twitter://post?message=" + message; } else { // PC window.open("https://twitter.com/intent/tweet?text=" + message, "_blank"); } }, });
ua.indexOf("macintosh") !== -1
で「Macintosh」の文字列を見つけ、なおかつ "ontouchend" in document
でタッチ操作がサポートされているかを調べます。タッチ操作ができる Macintosh => iPad というわけですね。
なお、この PC かモバイルかを判別するスクリプトをさらに切り出したものを公開しているので、もしよければそちらもご覧になってください。