【Unity】Social ConnectorでTwitterにスクリーンショットを投稿する機能を実装する

socialconnector.png

 Unityでボタンを押したらTwitterを立ち上げて画像と文章がセットされた状態にする機能を実装します。

 以前、🔍ブラウザを立ち上げてTwitterに文章をセットする方法を紹介しましたが、URLを直叩きしているだけなので画像のセットまではできませんでした。Twitterで共有をする最も簡単な方法でしたが、やはりスクリーンショットを共有したいですよね。というわけで今回は一歩踏み込んで、Twitterで画像+文章を共有する方法です。さらにFacebookやLINEにも対応させます。

 今回お世話になるアセットは『Social Connector』です。このアセットは共有ウィンドウを立ち上げて、選んだSNSに応じて画像+文章をセットしてくれるアセットです。ネットで検索してみると古い文法の記事などがヒットしやすく、そのまま入力しても動作しない場合が多いです。今回はUnity 2019.4.1f1(LTS)で動作を確認した最新情報をお届けしたいと思います。

それでは、導入方法から実際の実装までみていきましょう。

Social ConnectorでTwitterにスクリーンショットを投稿する機能

  1. KuroMikanの環境
  2. ダウンロード
  3. FileProviderの設定(androidのみ)
  4. スクリプト(iOS/android共通)

①KuroMikanの環境

  • Windows10 Home Edition
  • Unity 2019.4.1f1(LTS)

②ダウンロード

Social ConnectorはUnity Asset Storeで取り扱っていませんので、GitHubからダウンロードして下さい。


a) ダウンロード後、アセットをインポートします。
 Assets > Import Package > Custom Package...

b) Write Permission を Extarnal(SDCard) に設定します。
 Edit > Project Settings > Player > Other Settings

socialconnector1.png

③FileProviderの設定(androidのみ)

a) Androidフォルダ構成を整理します。
 インポートした構成のままだとAndroidManifest.xmlがダブってしまいますので、Assets/SocialConnector/Plugins/AndroidフォルダをAssets/Plugins/Androidフォルダに移動します。
 なお、Google AdMobを使っている場合はAdMobに必要な情報が上書きされて消えてしまうので退避しておいて下さい。
    <meta-data android:name="com.google.android.gms.ads.AD_MANAGER_APP" android:value="true" />
<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-xxxx~xxxx" />
 Social Connectorを実装してからGoogle AdMobを導入するのが安全かもしれません。

b) AndroidManifest.xmlを編集します。
 Assets/Plugins/Androidフォルダにあります。
 「com.kyusyukeigo.socialconnector.fileprovider」となっている箇所を
 「自分のPackage名.fileprovider」に書き換えます。

④スクリプト(iOS/android共通)

a) ShareController.cs を作成して以下のスクリプトを入力します。
(SocialConnector.csというファイル名はやめましょう。既にアセット内に存在します)
using UnityEngine;
using System.IO;
using System.Collections;
using SocialConnector;
using UnityEngine.UI;

public class ShareController : MonoBehaviour
{
public void Share()
{
StartCoroutine(_Share());
}

public IEnumerator _Share()
{
string imgPath = Application.persistentDataPath + "/image.png";

// 前回のデータを削除
File.Delete(imgPath);

//スクリーンショットを撮影
ScreenCapture.CaptureScreenshot("image.png");

// 撮影画像の保存が完了するまで待機
while (true)
{
if (File.Exists(imgPath)) break;
yield return null;
}

// 投稿する
string tweetText = "";
string tweetURL = "";
SocialConnector.SocialConnector.Share(tweetText, tweetURL, imgPath);
}
}
 tweetText、tweetURLに内容を記載するのをお忘れなく。

b) 「ShareController」を配置してスクリプトをアタッチします。
 ヒエラルキー上に空のGameObjecctを配置して「ShareController」にリネーム。
 ShareControllerに ShareController.cs をアタッチ。

c) Twitter投稿をさせたいボタンのスクリプトを編集します。
 下記スクリプトでShare()を実行します。
    public void OnClick()
{
GameObject sc = GameObject.Find("ShareController");
sc.GetComponent().Share();
}
これで完了です。


Twitterボタンを押すと共有ウィンドウが立ち上がります。
(下記はandroidの画面です)

Screenshot_20200704-174832.png

「Twitter」を選択すると、ツイッターが立ち上がります。
「Facebook」や「LINE」を選択すれば、それぞれのアプリが立ち上がります。

Screenshot_20200704-202420.png

文章と画像がセットされた状態になります。サンプルでは横画面のアプリで作成したためこのような表示になっていますが、縦画面のアプリではちゃんと縦画面になりますのでご安心下さい。

なお、共有ウィンドウでGmailを選択すると、文章と画像がセットされたメールを作成できます。
Facebookは文章の共有が禁止されているため、画像のみがセットされます。
LINEは画像+文章の共有はできますが、文章のみの共有はできません。