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

[Office用アプリ]カレンダーから日付入力前のページ

[Office用アプリ]Officeストアでアプリが公開されました。次のページ

関連記事

  1. Office関連

    OfficeのコマンドID(コントロールID)リストがGitHubで公開されました。

    前回の記事でも触れていますが、メインストリームサポート期間内のOffi…

  2. Office関連

    選択範囲内で文字列検索を行うWordマクロ

    今日は選択範囲内で文字列検索を行うWordマクロについて考えてみます。…

  3. Office関連

    「Excel VBAでIEを思いのままに操作できるプログラミング術」の見本誌をいただきました。

    「VBAアクションゲーム?Excel(エクセル)で動かそう!」で有名な…

  4. Office アドイン

    Office Scriptsってどんな機能?

    昨年の11月、Ignite 2019で発表されたオンライン版Excel…

  5. Office関連

    覚えていますか?ISHとLHA、パソコン通信の思い出

    この記事のアイキャッチ画像、文字化けしているわけではないですよ。画…

  6. Office関連

    続・Microsoft Edgeを操作するVBAマクロ(DOM編)

    以前VBAからMicrosoft Edgeを操作するマクロについて記事…

コメント

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

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

Time limit is exhausted. Please reload CAPTCHA.

Translate

最近の記事

アーカイブ

PAGE TOP