Office アドイン

[Office用アプリ]動画を挿入する。

[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, '&quot;');
            }
        </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

関連記事

  1. アイコン一覧

    Office 2013 アイコン一覧(D)

    ・Office 2013 アイコン一覧 NUM…

  2. Office関連

    テーブルの罫線色情報を列挙するPowerPointマクロ

    テーブルが多いプレゼンテーションファイルの、各テーブルの線の色の情報を…

  3. Office関連

    SkyDriveの同期フォルダーのパスを取得するWordマクロ

    無料で使える便利なクラウドストレージ「SkyDrive」にはローカルフ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP