Google Swiffyオブジェクトを指定要素内に配置したい
Specify the element you want to put Google Swiffy object
デフォルトの状態では、「swiffyobject」はHTML ドキュメントのBODY タグの中に埋め込まれるようになっています。
In the default state, "swiffyobject" is to be embedded in an HTML document the BODY tag.
<body>
<div> ここに埋め込まれます</div>
</body>
上記のように、<body> ～ </body> タグの中に<div> ～ </div> タグが作られて、そこに埋め込まれるのですが、
As mentioned above, in the<body> ~ </ body> tag <div> ~ </ div> tag is made, but there is embedded,
<body>
<div id=” test” >
<div> ここに埋め込まれます</div>
</div>
</body>
こんな感じで、指定した要素の中にオブジェクトを配置したい場合には、ちょっとコードを変更する必要があります。
Like this, if you want to place an object in a given element, there is little need to change the code.
<script>var stage = new swiffy.Stage(document.body, swiffyobject);</script>
▲こんな感じのコードの赤字部分を
▼こんな感じに変更しちゃいます。
var test = document.getElementById("test");
var stage = new swiffy.Stage(test, swiffyobject);こう変更することで、「id=” test”」が設定されている要素の中に埋め込むことができます。
初期状態ではdocument.body（HTML ドキュメントの<body> タグの中）にコード再生の<div> 要素が生成
されるようになっていますが、変更後のコードでは
var test = document.getElementById("test");で、変数「test」の中に、html ドキュメント内のid=” test” でセレクトしたものを取得して
var stage = new swiffy.Stage(test, swiffyobject);
その要素の中にStage（<div> 要素）を生成するという感じです。
おまけ。
var elem = document.createElement('DIV');
elem.id = "obj";
var stage = new swiffy.Stage(document.body.appendChild(elem), swiffyobject);という感じで、Div要素を作っちゃうって手もあります。
上のように書くと
<body>
<div id="obj" >
<div> ここにHTML5 が再生されます</div>
</div>
</body>
こうなります。
「var test = document.getElementById("CSSセレクタ名");」で変数testに取得出来る。
そう覚えておけばいいでしょう。
PDFにまとめてみたので、是非。
スマホの人は、アクセスしてみてください。（Webkitブラウザのみ）