【Unity】WebViewを1行で実装！戻る・進む・閉じるボタン完備のマネージャースクリプト大公開【C#コピペだけ】

Unityでアプリを作っていると、
ふとした瞬間に「あ、ここでWebページを表示したいな」と思うこと、ありませんか？

例えば、最新のお知らせをWeb側で更新したかったり、利用規約やプライバシーポリシーを外部URLで管理していたり。

そんな時に便利なのがWebViewですが、いざ実装しようとすると「ボタンはどうする？」「Androidの戻るボタン対応は？」と、意外と考えることが多くて手が止まってしまいがちです。

今回は、そんな悩みを一気に解決してくれる
戻る・進む・閉じるボタンを完備したWebViewマネージャーの実装方法をご紹介します。

これさえあれば、
実質1行のコードでアプリ内ブラウザを呼び出せるようになるので、開発効率がグッと上がるはずです。

*当記事はプロモーションも含みます。

メインコード
使い方と解説
まとめ

メインコード

以下のコードを、
新しく作成した WebviewManager.cs にコピー＆ペーストして使ってください。

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class WebviewManager : MonoBehaviour
{
    public WebViewObject webViewObject;
    public static WebviewManager instance = null;

    // GUI用の変数
    private bool showButtons = false;
    private Rect closeButtonRect;
    private Rect backButtonRect;
    private Rect forwardButtonRect;

    private void Awake()
    {
        if (instance == null)
        {
            instance = this;
            DontDestroyOnLoad(this.gameObject);
        }
        else
        {
            Destroy(this.gameObject);
        }
    }

    /// <summary>
    /// WebViewを開く
    /// </summary>
    /// <param name="url">表示するURL</param>
    public void OpenWebview(string url)
    {
        // 既存のWebViewがあれば破棄
        if (webViewObject != null) Destroy(webViewObject.gameObject);
        
        // 新しいWebViewを生成
        webViewObject = (new GameObject("WebViewObject")).AddComponent<WebViewObject>();
        webViewObject.Init(
            ld: (msg) => Debug.Log(string.Format("CallOnLoaded[{0}]", msg)),
            enableWKWebView: true);

#if UNITY_EDITOR_OSX || UNITY_STANDALONE_OSX
        webViewObject.bitmapRefreshCycle = 1;
#endif

        // ボタン用のスペースを確保（上部に120pxのマージン）
        int topMargin = 120;
        webViewObject.SetMargins(0, topMargin, 0, 0);
        webViewObject.LoadURL(url);
        webViewObject.SetVisibility(true);

        // ボタンを表示
        showButtons = true;
        SetupButtonRects();
    }

    /// <summary>
    /// ボタンの位置を設定
    /// </summary>
    private void SetupButtonRects()
    {
        float buttonSize = 80f;
        float margin = 20f;

        // 閉じるボタン（右上）
        closeButtonRect = new Rect(Screen.width - buttonSize - margin, margin, buttonSize, buttonSize);

        // 戻るボタン（左上）
        backButtonRect = new Rect(margin, margin, buttonSize, buttonSize);

        // 進むボタン（左上、戻るボタンの右）
        forwardButtonRect = new Rect(margin + buttonSize + 10f, margin, buttonSize, buttonSize);
    }

    void OnGUI()
    {
        if (!showButtons || webViewObject == null) return;

        // ボタンのスタイル設定
        GUIStyle buttonStyle = new GUIStyle(GUI.skin.button);
        buttonStyle.fontSize = 30;
        buttonStyle.fontStyle = FontStyle.Bold;
        buttonStyle.normal.textColor = Color.white;
        buttonStyle.hover.textColor = Color.yellow;

        // 背景色設定（半透明の黒）
        Color backgroundColor = new Color(0.2f, 0.2f, 0.2f, 0.8f);
        Texture2D backgroundTexture = MakeTexture(2, 2, backgroundColor);
        buttonStyle.normal.background = backgroundTexture;
        buttonStyle.hover.background = backgroundTexture;
        buttonStyle.active.background = backgroundTexture;

        // 戻るボタン
        if (GUI.Button(backButtonRect, "←", buttonStyle))
        {
            GoBack();
        }

        // 進むボタン
        if (GUI.Button(forwardButtonRect, "→", buttonStyle))
        {
            GoForward();
        }

        // 閉じるボタン
        if (GUI.Button(closeButtonRect, "X", buttonStyle))
        {
            CloseWebview();
        }
    }

    /// <summary>
    /// 単色のテクスチャを生成
    /// </summary>
    private Texture2D MakeTexture(int width, int height, Color color)
    {
        Color[] pixels = new Color[width * height];
        for (int i = 0; i < pixels.Length; i++)
        {
            pixels[i] = color;
        }

        Texture2D texture = new Texture2D(width, height);
        texture.SetPixels(pixels);
        texture.Apply();
        return texture;
    }

    /// <summary>
    /// WebViewを閉じる
    /// </summary>
    public void CloseWebview()
    {
        if (webViewObject != null)
        {
            webViewObject.SetVisibility(false);
            Destroy(webViewObject.gameObject);
            webViewObject = null;
        }
        showButtons = false;
    }

    /// <summary>
    /// 前のページに戻る
    /// </summary>
    private void GoBack()
    {
        if (webViewObject != null)
        {
            webViewObject.GoBack();
        }
    }

    /// <summary>
    /// 次のページに進む
    /// </summary>
    private void GoForward()
    {
        if (webViewObject != null)
        {
            webViewObject.GoForward();
        }
    }

    private int touchCount = 0;

    void Update()
    {
        // Escapeキーまたは戻るボタン（Android）の処理
        if (Input.GetKeyDown(KeyCode.Escape))
        {
            touchCount++;
            // 1回目は前のページに戻る
            if (touchCount != 2 && webViewObject != null) 
            {
                webViewObject.GoBack();
            }
            Invoke("DoubleEvent", 0.3f);
        }
    }

    /// <summary>
    /// ダブルタップ判定処理
    /// </summary>
    void DoubleEvent()
    {
        // ダブルタップされていない場合
        if (touchCount != 2) 
        { 
            touchCount = 0; 
            return; 
        }
        
        // ダブルタップされた場合、WebViewを閉じる
        touchCount = 0;
        CloseWebview();
    }
}

使い方と解説

さて、コードをコピペした後の具体的な使い方についてお話ししますね。

このマネージャーは「シングルトン」という仕組みを使っているので、一度シーンに置いてしまえば、どこからでも簡単に呼び出せます。

セットアップの手順

まずは、GitHubなどで公開されている「unity-webview」プラグインをプロジェクトにインポートしておいてください。

その後、空のGameObject（名前は WebviewManager などでOK）を作成し、先ほどのスクリプトをアタッチします。

これだけで準備は完了です。
Awake メソッド内で DontDestroyOnLoad を呼んでいるので、シーンを切り替えてもこのマネージャーは消えずに残り続けてくれます。

WebViewを開く・閉じる

実際にWebViewを表示したい時は、他のスクリプトからたった1行書くだけです。

            //
            Googleを開く例
        
            WebviewManager.instance.OpenWebview("https://www.google.com" );

OpenWebview メソッドの中では、
古いWebViewが残っていれば破棄し、新しく WebViewObject を生成しています。

ここで注目してほしいのが SetMargins の部分。
上部に 120px の余白を作っていますが、
これは後述する「戻る・進む・閉じるボタン」を表示するためのスペースを確保するためです。

便利なGUIボタンの仕組み

WebViewが開くと、画面上部に「←」「→」「X」のボタンが表示されます。

これらは OnGUI メソッドで描画されています。

「わざわざ OnGUI？」と思うかもしれませんが、WebViewはUnityの通常のUI（uGUI）よりも手前に表示されることが多いため、確実にボタンを前面に出すためにこの手法をとっています。

ボタンの背景には MakeTexture で生成した半透明の黒色を敷いて、どんなWebページの上でも視認性が保たれる工夫もしてます。

「戻るボタン」対応

Androidアプリで意外と忘れがちなのが、端末自体の「戻るボタン」への対応です。

このコードでは Update メソッド内で KeyCode.Escape を監視しています。

・1回押し: ブラウザ内で前のページに戻る
・0.3秒以内に2回押し: WebView自体を閉じる

というダブルタップ判定（DoubleEvent）を実装しているので、ユーザーが「前のページに戻りたいだけなのにアプリの画面まで戻っちゃった！」というストレスを感じにくい設計になっています。

おすすめUnityアセット3選【PR】

❮

❯

まとめ

いかがでしたか？

今回は、UnityでWebViewをスマートに管理するための WebviewManager をご紹介しました。

URLを渡すだけで、ナビゲーションボタン付きのブラウザがサクッと立ち上がるのは、一度使うと手放せなくなる便利さですよ。

アプリ開発において、WebViewは「とりあえずこれで見せておこう」という妥協の産物になりがちですが、こうしてしっかりとした操作系を整えてあげるだけで、アプリ全体の完成度が一段階上がったように感じられるはずです。

皆さんのプロジェクトでも、ぜひこのコードを活用して、ユーザーに優しいアプリ体験を届けてみてくださいね。

それでは、また別の記事でお会いましょう。。_(:3 」∠)_

最新Unity開発記事まとめ

☝Unity開発に関する最新情報をチェックしよう！

イラスト守るくん(Google Play)

☝絵師必見！AI無断学習対策アプリ

X(旧Twitter)：ハヤデビ(開発垢) 仕事依頼：ココナラ 開発支援：全般