Unity2020でよく見るデザイン・外観のダイアログを開く！

# 0.やりたかったこと
こういうダイアログを開いて、アプリ内にローカル保存のデータ（画像とか）をインポート、そのデータを利用する、というもの
![完成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/c60145a6-1203-42fb-49aa-ae5106c5a993.png)
※間違ってもこの↓↓古いデザインのダイアログではない…
懐かしいけれどもね…？💦
(こちらのやり方もリクエストがあれば書きますが…いりますかね…OpenFileDialogを使う方法だと、自分の環境ではこんなダイアログになるんです…)
![完成図そのⅡ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/533c0f41-5332-5681-9422-2d88fa50339a.png)

# 1.環境
- Windows10Pro Version 20H2
- Unity2020.3.21f (LTS)
- Microsoft Visual Studio Community 2019 Version 16.11.8

# 2.使用するもの
外部アセットとしてこれを使わせていただきます…！
制作者の方には心よりの感謝を…(*- -)(*_ _)ペコリ

https://github.com/gkngkc/UnityStandaloneFileBrowser

# 3.導入手順
画像多めで説明しますので、おそらく秒で導入できるのではないかと…

## 3-1.Unityプロジェクトの下準備
①適当なUnityプロジェクトを作成します
![スクリーンショット (373).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/bd3c8d57-60d2-10ad-5847-d77eece39973.png)

②先述のページの中ほどにある[Download Package](https://github.com/gkngkc/UnityStandaloneFileBrowser#:~:text=Basic%20WebGL%20support.-,Download%20Package,-Example%20usage%3A)をクリックしてUnityPackageをダウンロード
そのUnityPackageをUnityプロジェクト内にドラッグ＆ドロップでインポートします
![スクリーンショット (374).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/5b4e2bbd-5a5f-8222-b87a-40f6115aa352.png)

③インポートをおします
![スクリーンショット (375).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/a03daf24-e26a-9f73-1192-ada9916470ec.png)

④エラーがいくつか吐いていると思います。
これらはUnity既存のパッケージで競合しているものがあるのが原因なようで、解決するべく左上のタスクバーのWindowsをおします
![スクリーンショット (376).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/d1b638fc-da7c-fc07-d325-270d14009e5e.png)

⑤Windows→PackageManagerとおします
![スクリーンショット (377).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/893b4146-6f42-0fde-87d0-c2cdcb28aa24.png)

⑥VersionControlがあると思いますので、これをRemoveで削除してください
![スクリーンショット (378).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/f7524a0c-3a53-3d68-49d8-4e08ac685252.png)

⑦…これで準備完了なのですが、未だ残っているエラーメッセージが気になる人はクリアしてください…
![スクリーンショット (379).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/e1b9dac9-4476-96b1-ddb6-e5ccb4c75beb.png)

## 3-2.ボタンの設置
⑧ヒエラルキーウィンドウでButtonのUIを作成します
![スクリーンショット (382).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/569533a9-77fc-4503-8866-03b9dd80ce9d.png)

⑨Buttonのサイズなど、微調整は各自お願いします
私はわかりやすいように、後でstretch×stretchで画面サイズピッタリにしました
![スクリーンショット (383).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/d10aff88-7604-1e9e-6044-2392fc69366f.png)

## 3-3.スクリプトの作成・アタッチ
⑩プロジェクトウィンドウでC#スクリプトを作成してください
![スクリーンショット (380).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/76daacfe-786e-c796-94ce-18d66e768e00.png)

⑪スクリプトの名前は```OpenExplorer```にしました
![スクリーンショット (381).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/431ca721-9764-4451-207b-82e09e8b3ce3.png)

⑫スクリプトをダブルクリックして、実際にスクリプトを作成します
### 入力するスクリプト

```c#:OpenExplorer.cs
using UnityEngine;
using UnityEngine.UI;
using SFB; //追加(ダイアログ出す用,今回の本題)
using System.IO; //追加(画像データを加工する用)

public class OpenExplorer : MonoBehaviour
{
    Image image; //スクリプトをアタッチしたbuttonのImageコンポーネント
    void Start()
    {
        image = GetComponent<Image>();
    }

    /// <summary>
    /// ボタンを押したらダイアログが表示される
    /// ダイアログで指定した画像をボタンに反映する
    /// </summary>

    public void OnClickFileOpen()
    {
        // フィルタはここで追加操作する
        // new ExtensionFilter("表示名", "拡張子1", "拡張子2", ...)
        var extensions = new[] {
            new ExtensionFilter("画像ファイル", "png","jpg"),
            new ExtensionFilter("すべてのファイル", "*"),
        };

        // ダイアログを表示する
        // StandaloneFileBrowser.OpenFilePanel("タイトル", "最初のディレクトリ場所", [フィルタ設定], [複数選択可能かどうか(true or false)])
        string[] path = StandaloneFileBrowser.OpenFilePanel("画像ファイルを選択", "", extensions, false);

        // Pathは文字列の配列だから、1つの場合は1個のみかの判定 + null判定
        if (path.Length == 1 && path[0] != null)
        {
            //OKボタンがクリックされたとき、選択されたファイル名を表示する
            Debug.Log(path[0]);

            //選択した画像をバイト型のデータで読み込む
            byte[] bytes = File.ReadAllBytes(path[0]);

            //バイト型のデータをTexure2D型に変換
            Texture2D texture = new Texture2D(1, 1);
            texture.LoadImage(bytes);

            //Texure2D型のデータをsprite型に変換して代入
            image.sprite = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), Vector2.zero);
        }
    }
}
```
⑬スクリプトを作成したら、Buttonにドラッグ＆ドロップしてアタッチします
また、Buttonを選択したまま、OnClick()の下の＋をおします
![スクリーンショット (384).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/5c97364a-bdd5-df85-f9a6-7618da470d71.png)

⑭NoneとなっているところにButtonをドラッグ＆ドロップします
![スクリーンショット (385).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/8b1d1974-075f-dc31-fcbc-2e33b298c829.png)

⑮NoFunctionを押し、OpenExplorer → OnClickFileOpen()を選択します
![スクリーンショット (387).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/913043b2-7b6e-f637-a741-9044e2591cf9.png)

# 4.テストプレイすると
お疲れさまでした。これで実装手順は終了です
再生ボタンを実際に押して…
![スクリーンショット (388).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/0e3fea6b-a31f-bbef-a50f-fd2c2fee75b5.png)

その後ボタンをクリックすると…よく見るダイアログが出てきたでしょうか…？
実際に適当な画像を選択すると…
![スクリーンショット (390).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/dc4454b4-feba-717b-cc3c-375a7251d46a.png)

こんな感じで画面に反映されます
![スクリーンショット (391).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/e0645b42-e617-7cbd-1edd-05439b36ea59.png)

# 5.ビルド時の注意
上記の手順で、Unityエディタ上の挙動はすべて作成可能だと思うのですが、スタンドアロンビルド(パソコン用ビルド)するのであれば、設定面でひと手間が必要なようです。

①UnityBuildの画面からPlayerSettingにいきます
![スクリーンショット (392).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/6e676044-de69-410e-d1f3-b825c29b5f5b.png)

②PlayerのProjectSettingを下へとスクロールし…
![スクリーンショット (393).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/a06e302b-1b96-99ac-5e5f-f68510429f54.png)

③APIを```.NET 4.x```にします
![スクリーンショット (394).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1233990/bd3cd7e4-0968-5c31-24bb-96a899667e52.png)

④あとはビルドすればうまくいくはず！

# 6.編集後記
この場を借りまして、今回の件に関して快く相談に乗ってくれ、解決策を惜しみなく教えてくれた職場の同僚・友人に心よりの感謝を。いつも自分を助けてくれてありがとう。2022年もどうかよろしく！