UnityUnityメモ

【簡単解説】Unityでウェブページを開くボタンの作り方

Unity

はじめに

Unityを使ってゲームやアプリを作っていると、「ボタンをクリックしたら外部のウェブサイトを開きたい!」と思うことがありますよね。例えば、プレイヤーに詳しいゲームの情報を提供したり、フィードバックフォームに誘導したりする時に役立ちます。

この記事では、Unity初心者でも簡単にできる「ボタンでURLを開く方法」をわかりやすく解説します。
細かい手順を一つずつ追っていくので、「Unityはまだ始めたばかり…」という方も安心してください!

Unityを使ったことがないという方はコチラの記事から見てみてください!


ステップ1:ボタンを作成する

まずは、URLを開くためのボタンをUnity内に作成しましょう!以下の手順で簡単に追加できます。


手順

  1. ヒエラルキー(Hierarchy)ウィンドウで右クリック
    • 「右クリック」→「UI」→「Button」を選択します。
  2. ボタンがシーンに追加される
    • ボタンがシーンビューに表示され、ヒエラルキーに「Button」という名前のオブジェクトが追加されます。
  3. ボタンの見た目を調整
    • ヒエラルキーでボタンを選択すると、インスペクター(Inspector)でボタンのデザインをカスタマイズできます。
    • ボタンのサイズやテキスト(デフォルトでは「Button」と書かれています)を変更しましょう。
      • テキストを変更するには「Button」の子オブジェクト「Text」を選択し、インスペクターで好きな文字を入力してください。例えば、「URLを開く」などにするとわかりやすいですね。

補足:初心者向けのポイント

  • ボタンは「UI」オブジェクトなので、Canvas(キャンバス)が自動的に作成されます。このCanvas内に配置されることで、画面上にボタンが表示されます。
  • ボタンの位置やサイズは、シーンビューでドラッグするだけで調整可能です!

これで、ボタンの準備ができました!次は、このボタンに機能を追加していきますよ。




ステップ2:スクリプトを作成する

次は、ボタンをクリックしたときにURLを開く機能を作成します。そのために新しいスクリプトを作成して、コードを書いていきましょう。


手順

  1. スクリプトを作成する
    1. プロジェクトウィンドウで右クリック
      • プロジェクトウィンドウで右クリックして、「Create」→「C# Script」を選択します。
    2. スクリプト名を設定する
      • 作成されたスクリプトに名前を付けましょう。ここでは「OpenURL」と名付けます。
  2. スクリプトを開いてコードを書く
    • 作成したスクリプトをダブルクリックして開きます。
    • 以下のコードを追加しましょう:
using UnityEngine;

public class OpenURL : MonoBehaviour
{
    // URLを開く関数
    public void OpenWebsite(string url)
    {
        Application.OpenURL(url);
    }
}

コードの説明

  • Application.OpenURL(string url)
    このUnityの機能を使うと、指定したURLをデフォルトのブラウザで開くことができます。
  • public void OpenWebsite(string url)
    この関数をボタンと連携させることで、URLを動的に開けるようになります。

初心者向けのアドバイス

  • コードをコピーして貼り付けるだけでOK!意味がまだわからなくても心配しなくて大丈夫です。
  • スクリプトの名前を「OpenURL」にするのを忘れないでください。Unityではスクリプト名とクラス名が一致していないとエラーが出ることがあります。

これで、URLを開くためのスクリプトが完成しました!次は、このスクリプトをボタンにアタッチして機能を結び付ける作業をします。



ステップ3:スクリプトをボタンにアタッチする

作成したスクリプトをボタンにアタッチすることで、ボタンをクリックした際に機能が動くようになります。このステップでは、その手順を説明します。


手順

  1. スクリプトを選択する
    • プロジェクトウィンドウで、先ほど作成した「OpenURL」スクリプトを見つけます。
  2. ボタンにドラッグ&ドロップ
    • プロジェクトウィンドウからスクリプトをドラッグして、ヒエラルキーの「Button」オブジェクトにドロップします。
  3. スクリプトが正しくアタッチされたか確認
    • ボタンを選択し、インスペクター(Inspector)を確認します。
    • 「OpenURL」という名前のスクリプトコンポーネントが追加されていればOKです。

これで、スクリプトがボタンに結び付けられました!次は、ボタンのクリックイベントにスクリプトを紐づける設定を行います。




ステップ4:ボタンの設定をする

ここでは、作成したスクリプトを使ってボタンが実際にURLを開くように設定していきます。


手順

  1. ボタンを選択する
    • ヒエラルキー(Hierarchy)で、先ほど作成した「Button」をクリックして選択します。
  2. インスペクターで「On Click ()」セクションを探す
    • インスペクター(Inspector)ウィンドウの下部に「On Click ()」というセクションがあります。ここがボタンをクリックしたときの動作を設定する場所です。
  3. 新しいエントリを追加する
    • 「+」ボタンをクリックして、新しいエントリを追加します。
  4. スクリプトをアタッチしたオブジェクトを指定する
    • 「Object」フィールド(エントリの左側)に、スクリプトをアタッチしたオブジェクトをドラッグ&ドロップします。
    • 例えば、ボタン自体にスクリプトをアタッチしている場合は、そのボタンオブジェクトをここに設定します。
  5. 関数を指定する
    • 「No Function」と書かれたドロップダウンメニューをクリックします。
    • 表示されるリストから「OpenURL」スクリプト → 「OpenWebsite(string)」を選択します。
  6. URLを入力する
    • ドロップダウンの右側にテキストボックスが表示されます。
    • ここに開きたいURLを入力しましょう。
      例:https://example.com

ポイント:初心者向けの注意

  • URLの入力ミスに注意
    入力したURLが正しいか確認しましょう。間違ったURLを入力するとページが開けません。
  • スクリプトを正しくアタッチ
    スクリプトがオブジェクトにアタッチされていないと、「関数が見つからない」というエラーが出ることがあります。

動作確認をしてみよう

ここまでの設定が正しく行えているか、Unityエディターで動作確認をしてみましょう!


手順

  1. Unityエディターで再生ボタンを押す
    • 上部の「▶(再生ボタン)」をクリックして、プレイモードに切り替えます。
  2. シーンビューでボタンをクリックする
    • シーンビューまたはゲームビューで作成したボタンをクリックしてみてください。
    • 正しく設定されていれば、指定したURLがブラウザで開きます。
  3. ブラウザが開くか確認
    • 入力したURLが正しい場合、デフォルトのブラウザでページが表示されます。



よくあるトラブルと解決方法

  • URLが開かない場合
    • スクリプトが正しくアタッチされているか確認。
    • 「On Click ()」の設定で「OpenWebsite(string)」関数が選ばれているかチェック。
    • URLを入力したテキストフィールドにスペルミスがないか確認。
  • エラーが表示される場合
    • コンソールウィンドウにエラーが表示されていないか確認してください。
    • もしエラーがある場合は、スクリプト名や関数名が間違っていないかチェックしましょう。
  • モバイルデバイスで動かない場合
    • モバイルデバイスでは、動作にブラウザやOSの設定が影響する場合があります。PCで動作確認ができるかまず確認してください。

動作確認が無事に完了したら、ボタンのデザインを調整したり、他の機能を追加してみたりして、さらにプロジェクトをカスタマイズしていきましょう!また、他のUnityの機能を試してみるのも良いですね。

これで「UnityでURLを開くボタンを作成する」方法が完成です!お疲れ様でした🎉


まとめ

今回は、Unityでボタンを作成してURLを開く方法を解説しました。ボタンの配置からスクリプトの作成、設定までの一連の手順を実践すれば、初心者の方でも簡単に機能を実装できたのではないでしょうか?

この方法をマスターすれば、外部のウェブページへの誘導や、ユーザーエクスペリエンスの向上に役立てることができます。例えば、プレイヤーに追加情報を提供したり、フィードバックを集めたりするシーンでとても便利です。


おすすめアセットでデザインをもっと魅力的に!

ボタンの機能を実装するだけでなく、見た目にもこだわることで、さらに完成度の高いゲームやアプリを作ることができます。以下のアセットを使えば、ボタンのデザインやUI全体のクオリティが一気にアップしますよ!

  • 6000+ Flat Buttons Icons Pack
    → 多彩なカラーバリエーションとデザインで、あらゆるプロジェクトにマッチ!
  • Modern UI Pack
    → 洗練されたスタイリッシュなUIで、プロフェッショナルな印象を簡単に演出!
  • 3D Button Collections
    → 立体的なボタンで、UIに深みとインパクトをプラス!


機能の実装ができたら、ぜひデザインにもこだわってみてください。これらのアセットを活用することで、プロフェッショナルな見た目のUIを手軽に導入できます。あなたの作品がもっと魅力的になるはずです!ぜひUnity Asset Storeをチェックしてみてくださいね。