WebページでunityのWebPlayerを表示する

WordPress利用のサイト で unity の WebPlayer版を表示させるのに
<a href="https://wordpress.org/support/view/plugin-reviews/unitydog" >UnityDog</a> ていうプラグインを使ってたけど、ちゃんとhtml記述で表示
させてみようと思い、<a href="http://docs.unity3d.com/ja/current/Manual/WorkingwithUnityObject.html" >ソースが書いてあるページを発見</a>（Unity公式w）したので
それを丸パクしてちょっと変えてみた ...の備忘録。

<h1>概要</h1>
基本的には原文ソースのままだけど
html記述内にjavascript直書きしてる部分があるので
その部分をjsファイル読込み記述に置き換える（jsファイル名は適当につける）
上記で必要になる変数は別途html内に記述しておく。
あとは
ちょこっと気になる部分を書き換えただけ。

※テスト用に、適当なフォルダに直接全ファイル突っ込んで表示までさせてます。
<br>

<h1>作業内容</h1>
以下の3つを用意する
![test2.png](https://qiita-image-store.s3.amazonaws.com/0/23248/e5fb99b6-9dbd-f241-5e88-0271c8f7c381.png)



	1.表示用ファイル（.html）→ test.html
	2.表示分岐用ファイル（.js）→ dispUWebP.js （名前は適当に決めた）
	3.WebPlayer用unityビルド済みファイル（.unity3d）→ WebPlayer.unity3d

---

上記【2、3】 のファイルを任意の場所に設置。
（サーバーに設置する場合）

---

```lang:test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ページタイトル（ブラウザタブに表示される部分）</title>

	    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	    <script type="text/javascript" >
	        <!--
	        var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
	        if (document.location.protocol == 'https:')
	            unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
	        document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
	        -->
	    </script>
	    <script type="text/javascript" >
	        var fileName = 'WebPlayer.unity3d';
	    </script>
	    <script type="text/javascript" src="dispUnityWebPlayer.js"></script>
    </head>

    <body>
        <p class="header">
            <span>body内記事タイトル </span>
        </p>
        <div class="content">
            <div id="unityPlayer">
                <div class="missing">
                	<!-- WebPlayerプラグインが無い場合の初期記述 -->
                    <a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
                        <img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
                    </a>
                </div>
            </div>
        </div>
        <p>説明文</p>
        <!--<p class="footer">&laquo; created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> &raquo;</p> -->
    </body>
</html>
```

<br>


```lang:dispUWebP.js
var u = new UnityObject2();
u.observeProgress(function (progress) {
    var $missingScreen = jQuery(progress.targetEl).find(".missing");
    switch(progress.pluginStatus) {
        case "unsupported":
            showUnsupported();
        break;
        case "broken":
            alert("You will need to restart your browser after installation.");
        break;
        case "missing":
            $missingScreen.find("a").click(function (e) {
                e.stopPropagation();
                e.preventDefault();
                u.installPlugin();
                return false;
            });
            $missingScreen.show();
        break;
        case "installed":
            $missingScreen.remove();
        break;
        case "first":
        break;
    }
});
jQuery(function(){
    u.initPlugin(jQuery("#unityPlayer")[0], fileName);
});
```


表示用ファイル test.html 【編集箇所】

・上記【dispUWebP.js】の呼び出し記述部分を必要に応じて修正する。
（階層指定とか。）
	
	    <script type="text/javascript" src="/js/dispUWebP.js"></script>

	
・定義変数「fileName」の内容を必要に応じて修正
（.unity3dファイルの「ファイル名」に相当）
	
        <script type="text/javascript" >
            var fileName = 'WebPlayer.unity3d';
        </script>
	
・下記の jquery呼出し記述については、既に他の部分で読込んでる場合は消しとく

	　　<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

---

実行するとこんな↓

![表示テスト1.png](https://qiita-image-store.s3.amazonaws.com/0/23248/437fbc00-ed9c-6b83-af27-ae7f80d9b249.png)

---

※Chromeブラウザでうまく表示できない場合は開発者設定でNPAPIを有効にする
<a href="http://japan.unity3d.com/blog/?p=2276" >（NPAPI有効は非推奨【セキュリティ的に】なので自己責任らしいです）</a>

てかChromeはサポート外ですか・・・ PPAPIへの移行待ち？


	　　※アドレスバーに以下を記述して遷移

	　　chrome://flags/#enable-npapi

	　　→ “NPAPI を有効にする”オプションを有効化する
	　　→ Chrome再起動


　NPAPIは完全廃止予定らしいんで、なんにせよ上記は応急措置です。