「[Office用アプリ]画像を挿入する。」でsetSelectedDataAsyncメソッドを使ってOfficeドキュメントに画像を挿入する方法を紹介しましたが、今回は動画を挿入する方法を紹介します。
動画と言えば「Word 2013では文書にオンライン ビデオを挿入できるようになりました。」で紹介しているようにWord 2013で追加された新機能「オンライン ビデオ」があるわけですが、今回はこの機能と同様の機能をOffice用アプリで実装してみます。
では早速コードです(元々はEmbedding videos in the documentの回答用に書いたものです)。
※ 下記コードはWord専用になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>
<script>
Office.initialize = function(reason){}
$(function(){
$("#btnInsertVideo").click(function(){
var vdName = "My Video";
var vdHtml = '<iframe width="800" height="600" src="http://www.youtube.com/embed/qk51u8-4uo4" frameborder="0" allowfullscreen></iframe>'; //YouTube埋め込みコード
//var vdHtml = '<object width="800" height="600"><param name="movie" value="http://i.d.com.com/av/video/embed/player.swf" /><param name="background" value="#333333" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="true" /><param name="FlashVars" value="playerType=embedded&type=id&value=50139900" /><embed src="http://www.cnet.com/av/video/embed/player.swf" type="application/x-shockwave-flash" background="#333333" width="800" height="600" allowFullScreen="true" allowScriptAccess="always" FlashVars="playerType=embedded&type=id&value=50139900" /></object>'; //CNET's Video埋め込みコード
var vdWidth = 800;
var vdHeight = 600;
insertOnlineVideo(vdName, vdHtml, vdWidth, vdHeight);
});
});
//Insert Online Video
function insertOnlineVideo(vdName, vdHtml, vdWidth, vdHeight){
if(Office.CoercionType.Ooxml){
var xmlCode = replaceCode(vdName, escapeHtml(vdHtml), vdWidth, vdHeight);
Office.context.document.setSelectedDataAsync(
xmlCode,
{coercionType:"ooxml"}
);
}
}
//Replace OOXML
function replaceCode(){
var i = 0;
var args = arguments;
var str = $('#xmlcode').val();
return str.replace(/@@/g, function(){return args[i++];});
}
//Escape HTML
function escapeHtml(str){
var elm = document.createElement('pre');
if(typeof elm.textContent != 'undefined'){
elm.textContent = str;
}else{
elm.innerText = str;
}
return elm.innerHTML.replace(/["']/g, '"');
}
</script>
</head>
<body>
<input id="btnInsertVideo" type="button" value="Insert Video">
<!-- OOXML Code Start -->
<textarea id="xmlcode" style="display:none;"><?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?mso-application progid="Word.Document"?>
<pkg:package xmlns:pkg="http://schemas.microsoft.com/office/2006/xmlPackage">
<pkg:part pkg:name="/_rels/.rels" pkg:contentType="application/vnd.openxmlformats-package.relationships+xml" pkg:padding="512">
<pkg:xmlData>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml" />
</Relationships>
</pkg:xmlData>
</pkg:part>
<pkg:part pkg:name="/word/_rels/document.xml.rels" pkg:contentType="application/vnd.openxmlformats-package.relationships+xml" pkg:padding="256">
<pkg:xmlData>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image" Target="media/image1.png" />
</Relationships>
</pkg:xmlData>
</pkg:part>
<pkg:part pkg:name="/word/document.xml" pkg:contentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml">
<pkg:xmlData>
<w:document mc:Ignorable="w14 w15 wp14" xmlns:wpc="http://schemas.microsoft.com/office/word/2010/wordprocessingCanvas" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:wp14="http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" xmlns:w10="urn:schemas-microsoft-com:office:word" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:w14="http://schemas.microsoft.com/office/word/2010/wordml" xmlns:w15="http://schemas.microsoft.com/office/word/2012/wordml" xmlns:wpg="http://schemas.microsoft.com/office/word/2010/wordprocessingGroup" xmlns:wpi="http://schemas.microsoft.com/office/word/2010/wordprocessingInk" xmlns:wne="http://schemas.microsoft.com/office/word/2006/wordml" xmlns:wps="http://schemas.microsoft.com/office/word/2010/wordprocessingShape">
<w:body>
<w:p w:rsidR="00AE3E50" w:rsidRDefault="00DE2072">
<w:r>
<w:drawing>
<wp:inline distT="0" distB="0" distL="0" distR="0">
<wp:extent cx="2194560" cy="1463040" />
<wp:docPr id="1" name="@@" />
<wp:cNvGraphicFramePr>
<a:graphicFrameLocks noChangeAspect="1" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" />
</wp:cNvGraphicFramePr>
<a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
<a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
<pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
<pic:nvPicPr>
<pic:cNvPr id="1" name="" />
<pic:cNvPicPr />
</pic:nvPicPr>
<pic:blipFill>
<a:blip r:embed="rId2">
<a:extLst>
<a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
<a14:useLocalDpi val="0" xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" />
</a:ext>
<a:ext uri="{C809E66F-F1BF-436E-b5F7-EEA9579F0CBA}">
<wp15:webVideoPr embeddedHtml="@@" w="@@" h="@@" xmlns:wp15="http://schemas.microsoft.com/office/word/2012/wordprocessingDrawing" />
</a:ext>
</a:extLst>
</a:blip>
<a:stretch>
<a:fillRect />
</a:stretch>
</pic:blipFill>
<pic:spPr>
<a:xfrm>
<a:off x="0" y="0" />
<a:ext cx="2194560" cy="1463040" />
</a:xfrm>
<a:prstGeom prst="rect">
<a:avLst />
</a:prstGeom>
</pic:spPr>
</pic:pic>
</a:graphicData>
</a:graphic>
</wp:inline>
</w:drawing>
</w:r>
</w:p>
</w:body>
</w:document>
</pkg:xmlData>
</pkg:part>
<pkg:part pkg:name="/word/media/image1.png" pkg:contentType="image/png" pkg:compression="store">
<pkg:binaryData>iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAHN6w8ZAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
jwv8YQUAAAAGUExURQAAAAAAAKVnuc8AAAACdFJOU/8A5bcwSgAAAAlwSFlzAAAOxAAADsQBlSsO
GwAAAAxJREFUGFdjYBgYAAAAeAABoRR6NAAAAABJRU5ErkJggg==</pkg:binaryData>
</pkg:part>
</pkg:package></textarea>
<!-- OOXML Code End -->
</body>
</html>
コードだけを見ると何やら複雑なことをしていそうですが、やっていることはオンラインビデオ用OOXMLのひな型を用意して、必要な部分を書き換えた後setSelectedDataAsyncメソッドでOfficeドキュメントに挿入しているだけです。
YouTubeとCNET’s Videoでしか動作確認をしていませんが、動画共有用の埋め込みコードさえ取得できれば、恐らく他の動画共有サービスの動画も埋め込むことができるだろうと思います。
(OOXMLのひな型はドキュメントからXMLコンバートしたものを元にしているので正しい書き方になっているのか微妙なところではありますが、とりあえず目的は達成できます・・・(^^; )
■ 参考Webページ:
・Inserting images with apps for Office
http://blogs.msdn.com/b/officeapps/archive/2012/10/26/inserting-images-with-apps-for-office.aspx
・JavaScript で ヒアドキュメントもどき
http://uupaa.hatenablog.com/entry/2012/11/08/154422
この記事へのコメントはありません。