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関連

    [Excel Services ECMAScript]アクティブセルが変更されたときのイベントを利用…

    埋め込んだExcelワークブックの、アクティブセルが変更されたときのイ…

  2. Office関連

    [Office]スケッチ機能で図形の線を手書き風に!

    ※ 下記情報はInsider版のOfficeを元にしています。バージョ…

  3. アイコン一覧

    Office 365アイコン(imageMso)一覧(C)

    Office 365のデスクトップ版Officeアプリケーション(Wo…

  4. アイコン一覧

    Office 2013 アイコン一覧(W)

    ・Office 2013 アイコン一覧 NUM…

  5. Office関連

    Office XP Developer Toolsでリボン対応のCOMアドインを作成する。

    「Visual Basic 6でリボン対応のアドインを作成する」ではV…

  6. Office アドイン

    [Officeアドイン]地図記号挿入アドイン

    ちょっとずつ作成していたWord用のOffice アドインがようやくO…

コメント

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

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP