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アプリケーションの「最近使用したファイル」を削除するVBScript

    WordやExcel等のOfficeアプリケーションでは、下記サイトに…

  2. アイコン一覧

    Office 2013 アイコン一覧(S)

    ・Office 2013 アイコン一覧 NUM…

  3. Office関連

    「Excel VBAでラクラク Win64 APIプログラミング」(大村あつし著)レビュー

    当ブログでも以前書評を書いた「Excel VBAの神様 ボクの人生を変…

  4. Office関連

    Excel 2013で駅すぱあとWebサービス APIの「経路探索」を使ってみました。

    「「駅すぱあとWebサービス API無償提供」を利用してみました。」で…

  5. Office関連

    Office文書をパスワード付きPDFに変換するVBAマクロ

    4年ほど前に書いた、下記記事のマクロがWordでも使えるか?との質問を…

コメント

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

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

PAGE TOP