Unityダイアログボックスを使って画像を開く方法

はじめに
その１.アセットの導入
その２.画像を開く準備をする
その３.画像を開くスクリプトを書く
その４.記載したスクリプトの紐づけ
その５.動作確認
最後に

はじめに

UnityではUnityStandaloneFileBrowserアセットを使うことによってダイアログボックスを使ってUnity側に読み込ませることができます。
ダイアログボックスとは、下の画像のようなウィンドウのことです。

今回はUnityStandaloneFileBrowserアセットを使って試しに画像を読み込んでいきたいと思います。

その１.アセットの導入

まず下のボタンをクリックして、UnityStandaloneFileBrowserアセットの配布ページに行ってください。

UnityStandaloneFileBrowserアセットの配布ページ

次に配布ページから、①Download Packageをクリックしてアセットをダウンロードしてください。

次にダウンロードしたアセットファイルをUnityのProject内にドラッグアンドドロップしてください。
次にImportUnityPackageウィンドウが出てくるので右下のImportを押してください。

Importボタンを押すとアセットをプロジェクトにインストールするので少々お待ちください。
インストールが終了したらProjectのAssets内に①「StandaloneFileBrowser」フォルダが作成されていると思います。
これでアセットの導入は完了です。

その２.画像を開く準備をする

次にHierarchyを右クリックして①UI>②Legacyの順にカーソルを合わせて③Buttonをクリックしてボタンを配置してください。

次にCanvas内を右クリックして①UIにカーソルを合わせて②RawImageをクリックしてRawImageを配置してください。
これで画像を開く準備は完了です。
次に画像を読み込むためのスクリプトを書いていきましょう！

その３.画像を開くスクリプトを書く

スクリプトの追加

次に画像を開くためのスクリプトを書いていきましょう。
まず先ほど作成した①ボタンをヒエラルキーから選択してください。
次に②AddComponentをクリックしてください。

クリックすると①の場所に検索バーがあるのでここに追加するスクリプト名を入力してください。
今回私は「OpenDialogSample」にしました。

入力すると①New scriptが現れるのでクリックしてください。

クリックすると①Create and Addが表示されるのでクリックしてください。

次に右側のInspectorに先ほど追加したスクリプトがあるのでそれを右クリックしてください。
右クリックすると①Edit Scriptという項目があるのでクリックしてください。

クリックしたらスクリプトエディターが起動するのでここにスクリプトを書いていきます。

スクリプトに記述

先ほど作成したスクリプトに以下を記述してください。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using SFB;

public class OpenDialogSample: MonoBehaviour
{

    public RawImage output;

    /// <summary>
    /// クリック時ダイアログボックスを開く
    /// </summary>
    public void ClickOpenImageButton()
    {
        //選択できる拡張子を設定
        var extensions = new[] { new ExtensionFilter("画像ファイル", "png", "jpg") };
        //左上に表示されるタイトル、最初に表示されるディレクトリ場所、拡張子フィルタ,複数選択可能かどうか？
        var paths = StandaloneFileBrowser.OpenFilePanel("画像のロードテスト", "", extensions, false);
        if(paths.Length > 0)
        {
            Debug.Log("Paths=>" + paths[0]);
            StartCoroutine(LoadImage(new System.Uri(paths[0]).AbsoluteUri));
        }
    }

    /// <summary>
    /// ダイアログボックスで選択されたパスから画像を読み取りoutputにテクスチャを渡す
    /// </summary>
    /// <param name="path">ダイアログボックスで選択されたパス</param>
    private IEnumerator LoadImage(string path)
    {
        var loader = new WWW(path);
        yield return loader;
        output.texture = loader.texture;
    }

}

重要な部分の解説

スクリプトの中から重要な行を抜粋して解説します

17行目.拡張子フィルター

まず17行目、この部分は拡張子のタイトル表示と拡張子フィルターを設定しています。

        var extensions = new[] { new ExtensionFilter("画像ファイル", "png", "jpg") };

拡張子のタイトル表示とは下の画像の①の場所に表示されるタイトルです。
拡張子フィルターは②(.png,.jpg)に記載されている拡張しか読み込めないようにフィルターをかけれます。

19行目.ダイアログボックスの呼び出し

次に19行目、この「StandaloneFileBrowser.OpenFilePanel(“1⃣”, “2⃣”, 3⃣, 4⃣);」部分でダイアログボックスを開く動作をしています。

        //左上に表示されるタイトル、最初に表示されるディレクトリ場所、拡張子フィルタ,複数選択可能かどうか？
        var paths = StandaloneFileBrowser.OpenFilePanel("画像のロードテスト", "", extensions, false);