WordPress利用のサイト で unity の WebPlayer版を表示させるのに
UnityDog ていうプラグインを使ってたけど、ちゃんとhtml記述で表示
させてみようと思い、ソースが書いてあるページを発見(Unity公式w)したので
それを丸パクしてちょっと変えてみた ...の備忘録。
概要
基本的には原文ソースのままだけど html記述内にjavascript直書きしてる部分があるので その部分をjsファイル読込み記述に置き換える(jsファイル名は適当につける) 上記で必要になる変数は別途html内に記述しておく。 あとは ちょこっと気になる部分を書き換えただけ。※テスト用に、適当なフォルダに直接全ファイル突っ込んで表示までさせてます。
作業内容
以下の3つを用意する 1.表示用ファイル(.html)→ test.html
2.表示分岐用ファイル(.js)→ dispUWebP.js (名前は適当に決めた)
3.WebPlayer用unityビルド済みファイル(.unity3d)→ WebPlayer.unity3d
上記【2、3】 のファイルを任意の場所に設置。
(サーバーに設置する場合)
<!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">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p> -->
</body>
</html>
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>
実行するとこんな↓
※Chromeブラウザでうまく表示できない場合は開発者設定でNPAPIを有効にする
(NPAPI有効は非推奨【セキュリティ的に】なので自己責任らしいです)
てかChromeはサポート外ですか・・・ PPAPIへの移行待ち?
※アドレスバーに以下を記述して遷移
chrome://flags/#enable-npapi
→ “NPAPI を有効にする”オプションを有効化する
→ Chrome再起動
NPAPIは完全廃止予定らしいんで、なんにせよ上記は応急措置です。