【Unity】Social ConnectorでTwitterにスクショを投稿する

UnityでTwitterやFacebook、InstagramなどのSNSに画像を投稿する機能を追加するにはSocial Connectorを使うのが便利です。2018年5月現在、Androidをターゲットにするとうまく動かないポイントがあったので、それを含めて紹介していきたいと思います。

Social Connectorの入手と設定

Social Connectorは現在Asset Storeでは配布されていないようですので、次のサイトから入手して下さい。
github.com

ダウンロードできたら、SocialConnector.unitypackageをダブルクリックしてアセットをプロジェクトにインポートして下さい。Assets以下にSocialConnectorフォルダができるはずです。

次にwrite accessの設定を行います。メニューバーからEdit→Project Settings→Playerを選択して、Player Settingsを表示して、Other Settingsのwrite accessの項目を「External（SD Card）」に設定して下さい。

スクショを投稿するスクリプトを作成する

プロジェクトウィンドウで右クリック→Create→C# Scriptを選択し、ShareControllerという名前で保存します。保存できたら次のスクリプトを入力して下さい。

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.Share(tweetText, tweetURL, imgPath);
    }
}

_Shareコルーチンの中でスクリーンショットの撮影と、SNSへの投稿を行っています。Unityでスクリーンショットを撮影するにはScreenCapture.CaptureScreenshotを使います。以前まではApplication.CaptureScreenshotでしたが、いつの間にか変わったようですね（^^;）

ただ、CaptureScreenshotの機能は変わっていません。相変わらず、スクリーンショットの保存が完了した時にコールバックを返してもらえないので、撮影画像の保存が完了するまで待つループを差し込んでいます。適当に数秒待つのは危険なので止めておきましょう。

最後に SocialConnectorクラスのShareメソッドを使ってSNSへの投稿画面を表示をしています。Shareを実行すると次のようにSNSの選択画面が表示され、投稿したいSNSを選択するとそのアプリが起動します。

Androidで動かない場合の対策

2018年5月現在、iPhoneでは上記の手順で問題なく動作するのですが、Androidを使用した場合、上記の手順のままではSNSの選択画面が出てきませんでした。

原因と対策も上記サイトにまとめられています。

Android API Level 24 から、画像のシェアにおいて FileProvider の使用が必須となりました。このため、プロジェクト単位で AndroidManifest.xml をカスタマイズしなければいけません。

1. Androidフォルダの移動

Assets/SocialConnector/Plugins/AndroidフォルダをAssets/Plugins/Androidフォルダーに移動（Pluginsフォルダながければ作成）してください。

2. AndroidManifest.xmlの編集

次に、Assets/Plugins/Android/AndroidManifest.xml内のcom.kyusyukeigo.socialconnector.fileproviderのxxx.xxx.xxx.fileproviderの「x」の部分を自分のパッケージ名に書き換えてください。パッケージ名は、Player SettingsのIdentificationやApplication.identifierで確認できます。

上の２つの手順を行うことで、AndroidでもSNSへの投稿画面が表示されるようになりました。

MoLMoL2 の遊び方

このたび、MoLMoL2 というゲームアプリをリリースしました！！

MoLMoL2 にはiOS版とAndroid版があり、次のリンクからダウンロードできます。MoLMoL2 は無料で遊べて、アプリ内課金、アプリ内広告もありませんので、安心してお楽しみいただけます。

　

MoLMoL2 ってどんなゲーム？

MoLMoL2 は、高校化学で習うmolの考え方が、遊んでいると勝手に身につくゲームアプリです。

遊び方は超簡単！

1. 場にあるカードと同じ元素
2. 場にあるカードと同じmol数

のどちらかを手札から出せます。

制限時間内に手札をどんどん出して高得点を狙いましょう！

場にあるカードと同じ元素の場合

例えば次の場合、場には窒素（N）があるので、手札からは窒素の札をすべて出せます。

場にあるカードと同じmol数の場合

また次の場合、 場にある札が0.5molなので、手札からは0.5molの札をすべて出せます。

お手つきをせずに連続して正解し続ければ、コンボボーナスでどんどん得点が上昇しますよ！

MoLMoL2 を遊ぶときの唯一の注意点！

同じmol数でも、炭素の後に気体、または気体の後に炭素は出せないので注意！

攻略情報（というか虎の巻）

「MoLMoL2 面白そう！早速遊びたいけど・・・
すぐにmol数なんて分からないよ！」
という人も大丈夫！
チート表を用意しました！

場にあるカードが酸素の1mol（32.0） なら、赤枠で囲った横列のカード（同じ元素）または縦列のカード（同じmol数）が出せます！

ポケット周期表について

MoLMoL2 では高い得点を出せば、周期表の元素がどんどん開いていきます！目指せ元素記号118番！笑

世界で一番美しい元素図鑑

元素118の新知識 引いて重宝、読んでおもしろい (ブルーバックス)

【Unityシェーダ】Shader Graph超入門

Unity2018からシェーダをノードベースで作れる「Shader Graph」という機能が提供されています（まだPreviewですが）これまでは、ノードベースでシェーダを開発しようとするとShader Forgeとかの有料アセットを使う必要がありましたが、これからは「Shader Graph」に一本化されそうですね。

ここでは、2018年5月の段階で、とりあえずShader Graphを触ってみる、というところまで解説したいと思います。目次は次のとおりです。

プロジェクトを作成する

「Shader Graph」はUnity2018以降で使うことができます。ということで、まずはUnity2018をインストールしましょう。

インストールができたら、早速プロジェクトを作ります。「Shader Graph」は現在のところ、Lightweightのプロジェクトでしか使うことができないようです。プロジェクトを作成するときにはTemplateでLightweight RP(Preview)を選択するようにしましょう。

Shader Graphをインストールする

Unity2018.0f2ではまだShader GraphはPreviewの状態なので、手動でインストールしなければ使うことができません。

ツールバーのWindow→Package Managerを選択して、Allのタブを選択し、「ShaderGraph 1.1.4」をクリック、右ペインで「Install」ボタンを押してください。

これで、ようやくUnity2018で「Shader Graph」を使うことができるようになりました。

Shaderとマテリアルを作成する

通常のシェーダと同じく、まずはシェーダファイルを作ります。プロジェクトウィンドウで右クリックし、Create→Shader→PBR Graphを選択してください。名前はblendTexとしておきましょう。

また、このシェーダを適用するマテリアルを作ります。作成したblendTexture.shaderを選択した状態で、右クリック→Create→Materialを選択してください。作成したマテリアルは適当なオブジェクトにアタッチしておきましょう。

Shader Graphを使ってテクスチャブレンドする

さて、いよいよ「Shader Graph」の出番です。今回は初回なので2枚のテクスチャをブレンドするだけの超簡単なシェーダプログラムにしましょう。

まずはblendeTexをダブルクリックすると、「Shader Graph」のウインドウが立ち上がります。左側にあるのは外部からシェーダへ値を入力できるプロパティウインドウ、真ん中がGUIでシェーダを作る部分、右側が出力結果のウインドウ（やたらでかい）になります。

ノードを配置する

まずは使用する２枚のテクスチャ読み込むノードを配置しましょう。ウインドウ上で右クリックするとメニューが出てきます。Create Nodeをクリックして、Input→Texture→Sample Texture 2Dを選択してください。配置できたら、左側にあるタグの丸ポチをクリックして、テクスチャを読み込んでください。

画面上にテクスチャ読み込み用のノードが配置されます。同様の方法で、同じノードをもう一つ追加しましょう（cmd+Dでノードを複製することもできます）追加できたら、こちらもテクスチャを読み込みましょう。

続いてこの2枚のテクスチャをブレンドするためのノードを配置します。Create Nodeをクリックして、Artistic→Blend→Blendを選択して、Blendノードを配置してください。

ノードを接続する

これで必要なノードを配置することができました。次はこれらのノードを接続していきましょう。1枚目のSample Texture 2Dノードの出力RGBA(4)からBlendノードのBase(1)へドラッグ＆ドロップします。

同様にして2枚目のSample Texture 2Dノードの出力RGBA(4)からBlendノードのBlend(1)へドラッグ＆ドロップします。ノードを接続した結果はこんな感じになります。

２枚のテクスチャをブレンドする割合はBlendノードのOpacityで設定します。ここではOpacityを0.5に設定して２枚のテクスチャが半分ずつ混ざるようにしておきましょう。

最後にBlendノードのOut(1)からPBR MasterのAlbedo(3)へドラッグ＆ドロップします。これで作成したシェーダの内容が出力結果に反映されるようになります。

ここまでで、今回の「Shader Graph」の作成は終了です。最後に左上のSave Assetボタンを押して作成したシェーダを保存してください。

もう少し便利にする

テクスチャのブレンド具合を変更する場合、いちいち値を入力するのは面倒ですね。（実はOpacityの「X」をドラッグすると値を変えられるのですが・・・笑）そんな時のためにSliderというノードが用意されています。

ウインドウ上で右クリックしてCreate Nodeを選択し、Input→Basic→Sliderを選択してください。SliderノードのOut(1)からBlendノードのOpacity(1)にドラッグ＆ドロップして、これらのノードを接続してください。

Sliderノードのスライダーをドラッグ＆ドロップすることでブレンド具合を変更することができるようになります。

インスペクタからシェーダの値を変えられるようにする

「Shader Graph」の中で指定した値をUnityのインスペクタから操作したい場合、値をPropertyに変換する必要があります。ここではSliderノードの値をインスペクタから変更したいので、Sliderノードを選択した状態で右クリックして、Convert to Propertyを選択して下さい。

再度、ShaderGraphのウインドウ左上のSave Assetをクリックしてから、Unityエディタに戻ってインスペクタを見てみて下さい。Vector1という欄が追加されていると思います。ここの値を変更することで、ブレンド具合を変えることができます。

結果確認

Unityのウインドウに戻ると、作成したシェーダが反映されていることがわかると思います。このように「Shader Graph」を使うことで、複雑なプログラムを書かなくても簡単にシェーダを作成することができるようになります。

次回以降、これまでに作成したUnityのシェーダを「Shader Graph」を使って書き直していきたいと思います！その他のUnityシェーダはこちらからご覧になれます。

nn-hokuson.hatenablog.com

Unityの教科書 Unity 2017完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)