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

記事サムネイル

目次

1. はじめに 2. メインコード 3. 使い方 4. まとめ

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

はじめに

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);
        }
    }

    /// 
    /// WebViewを開く
    /// 
    /// 表示するURL
    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();
    }

    /// 
    /// ボタンの位置を設定
    /// 
    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();
        }
    }

    /// 
    /// 単色のテクスチャを生成
    /// 
    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;
    }

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

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

    /// 
    /// 次のページに進む
    /// 
    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);
        }
    }

    /// 
    /// ダブルタップ判定処理
    /// 
    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 を生成しています。

便利なGUIボタンの仕組み

WebViewが開くと、画面上部に「←」「→」「X」のボタンが表示されます。これらは OnGUI メソッドで描画されています。

戻るボタンの対応

意外と忘れがちなのが、端末自体の「戻るボタン」への対応です。 このコードでは Update メソッド内で KeyCode.Escape を監視しています。

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

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

まとめ

いかがでしたか? 今回は、UnityWebViewをスマートに管理するためのWebviewManagerをご紹介しました。 URLを渡すだけで、ナビゲーションボタン付きのブラウザがサクッと立ち上がるのは、一度使うと手放せなくなる便利さです。 皆さんのプロジェクトでも、ぜひこのコードを活用して、ユーザーに優しいアプリ体験を届けてみてくださいね。 それでは、また別の記事でお会いましょう。。_(:3 」∠)_

ゲーム企画ジェネレーターツールも試す【PR】

他の記事

AIツール・開発・アプリ関連の記事を取り扱っています。

全記事一覧 ←前の記事 次の記事→

ツール

本サイトでは、暮らしや作業をサポートするウェブツールの運営もしております。

ツール一覧

いいなと思ったら応援

以下の方法で応援を受け付けております。

PayPal.Me:チップを送って応援
ハヤデビのロゴ

著者兼運営:ハヤデビ

長きにわたりゲームやアプリの開発・動画編集・ブログ運営等を続けている個人クリエイター

X(旧Twitter):公式アカウント