PowerPoint または Word 用アドインからドキュメント全体を取得する

[アーティクル]
08/06/2024

Office アドインを作成して、PowerPointプレゼンテーションまたは Word 文書をリモートの場所に送信または発行できます。この記事では、すべてのプレゼンテーションまたはドキュメントをデータオブジェクトとして取得し、HTTP 要求を介してそのデータを Web サーバーに送信する、PowerPointまたは Word 用の単純な作業ウィンドウアドインを構築する方法について説明します。

PowerPoint または Word 用アドインを作成するための前提条件

この記事では、PowerPoint または Word 用の作業ウィンドウアドインの作成にテキストエディターを使用することを前提にしています。作業ウィンドウアドインを作成するには、次のファイルを作成する必要があります。

共有ネットワークフォルダーまたは Web サーバーでは、次のファイルが必要です。
- ユーザーインターフェイスと JavaScript ファイル (Office.js およびアプリケーション固有 の .js ファイルを含む) とカスケードスタイルシート (CSS) ファイルへのリンクを含む HTML ファイル (GetDoc_App.html)。
- アドインのプログラミングロジックを格納する JavaScript ファイル (GetDoc_App.js)。
- アドインのスタイルと書式設定を含む CSS ファイル (Program.css)。
共有ネットワークフォルダーまたはアドインカタログで使用できるアドイン用のアドイン専用マニフェストファイル (GetDoc_App.xml)。マニフェストファイルは、前に説明した HTML ファイルの場所を指す必要があります。

または、次のいずれかのオプションを使用して、Office アプリケーション用のアドインを作成することもできます。必要な各ファイルと同等のファイルを更新できるため、新しいファイルを作成する必要はありません。たとえば、Yeoman ジェネレーターオプションには、 ./src/taskpane/taskpane.html、 ./src/taskpane/taskpane.js、 ./src/taskpane/taskpane.css、 ./manifest.xmlなどがあります。

PowerPoint
- Visual Studio
- Office アドイン用の Yeoman ジェネレーター
Word
- Visual Studio
- Office アドイン用の Yeoman ジェネレーター

作業ウィンドウアドインを作成するために知っておくべき主要な概念

この PowerPoint または Word 用アドインの作成を開始する前に、Office アドインの作成と HTTP 要求の操作についてよく理解しておくことが必要です。この記事では、Web サーバー上の HTTP 要求から Base64 でエンコードされたテキストをデコードする方法については説明しません。

アドインのマニフェストを作成する

Office アドインのマニフェストファイルは、アドインをホストできるアプリケーション、HTML ファイルの場所、アドインのタイトルと説明、その他の多くの特性など、アドインに関する重要な情報を提供します。

テキストエディターで、次のコードをマニフェストファイルに追加します。

<?xml version="1.0" encoding="utf-8" ?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:type="TaskPaneApp">
    <Id>[Replace_With_Your_GUID]</Id>
    <Version>1.0</Version>
    <ProviderName>[Provider Name]</ProviderName>
    <DefaultLocale>EN-US</DefaultLocale>
    <DisplayName DefaultValue="Get Doc add-in" />
    <Description DefaultValue="My get PowerPoint or Word document add-in." />
    <IconUrl DefaultValue="http://officeimg.vo.msecnd.net/_layouts/images/general/office_logo.jpg" />
    <SupportUrl DefaultValue="[Insert the URL of a page that provides support information for the app]" />
    <Hosts>
        <Host Name="Document" />
        <Host Name="Presentation" />
    </Hosts>
    <DefaultSettings>
        <SourceLocation DefaultValue="[Network location of app]/GetDoc_App.html" />
    </DefaultSettings>
    <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

UTF-8 エンコードを使用 してファイルをGetDoc_App.xml としてネットワークの場所またはアドインカタログに保存します。

アドインのユーザーインターフェイスを作成する

アドインのユーザーインターフェイスでは、 GetDoc_App.html ファイルに直接書き込まれた HTML を使用できます。アドインのプログラミングロジックと機能は、JavaScript ファイル (たとえば、 GetDoc_App.js) に含まれている必要があります。

以下の手順を使用して、見出しと 1 つのボタンを含むアドインの簡単なユーザーインターフェイスを作成します。

テキストエディターの新しいファイルで、選択した Office アプリケーションの HTML を追加します。

PowerPoint
Word

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        <title>Publish presentation</title>
        <link rel="stylesheet" type="text/css" href="Program.css" />
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
        <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
        <script src="GetDoc_App.js"></script>
    </head>
    <body>
        <form>
            <h1>Publish presentation</h1>
            <br />
            <div><input id='submit' type="button" value="Submit" /></div>
            <br />
            <div><h2>Status</h2>
                <div id="status"></div>
            </div>
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        <title>Publish document</title>
        <link rel="stylesheet" type="text/css" href="Program.css" />
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
        <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
        <script src="GetDoc_App.js"></script>
    </head>
    <body>
        <form>
            <h1>Publish document</h1>
            <br />
            <div><input id='submit' type="button" value="Submit" /></div>
            <br />
            <div><h2>Status</h2>
                <div id="status"></div>
            </div>
        </form>
    </body>
</html>

UTF-8 エンコードを使用 してファイルをGetDoc_App.html としてネットワークの場所または Web サーバーに保存します。

注:

アドインの ヘッド タグに、Office.js ファイルへの有効なリンクを含む スクリプト タグが含まれていることを確認します。

いくつかの CSS を使用して、アドインにシンプルでモダンでプロフェッショナルな外観を提供します。次の CSS を使用して、アドインのスタイルを定義します。

テキストエディターで、新しいファイルに次の CSS を追加します。

body
{
    font-family: "Segoe UI Light","Segoe UI",Tahoma,sans-serif;
}
h1,h2
{
    text-decoration-color:#4ec724;
}
input [type="submit"], input[type="button"]
{
    height:24px;
    padding-left:1em;
    padding-right:1em;
    background-color:white;
    border:1px solid grey;
    border-color: #dedfe0 #b9b9b9 #b9b9b9 #dedfe0;
    cursor:pointer;
}

UTF-8 エンコードを使用 してProgram.css ファイルをネットワークの場所または GetDoc_App.html ファイルが配置されている Web サーバーに保存します。

ドキュメントを取得するための JavaScript を追加する

アドインのコードでは、Office.initialize イベントのハンドラーが、フォーム上の [送信] ボタンのクリックイベントのハンドラーを追加し、アドインの準備ができたことをユーザーに知らせます。

次のコード例は、 Office.initialize イベントのイベントハンドラーと、ステータス div に書き込むヘルパー関数 ( updateStatus) を示しています。

// The initialize or onReady function is required for all add-ins.
Office.initialize = function (reason) {

    // Checks for the DOM to load using the jQuery ready method.
    $(document).ready(function () {

        // Run sendFile when Submit is clicked.
        $('#submit').on("click", function () {
            sendFile();
        });

        // Update status.
        updateStatus("Ready to send file.");
    });
}

// Create a function for writing to the status div.
function updateStatus(message) {
    var statusInfo = $('#status');
    statusInfo[0].innerHTML += message + "<br/>";
}

UI で [送信] ボタンを選択すると、アドインは Document.getFileAsync メソッドの呼び出しを含む sendFile 関数を呼び出します。 getFileAsync メソッドは、Office JavaScript API の他のメソッドと同様に非同期パターンを使用します。これには、1 つの必須パラメーター fileType と、 オプション と コールバックという 2 つの省略可能なパラメーターがあります。

fileType パラメーターは、FileType 列挙体の 3 つの定数 (Office.FileType.Compressed ("compressed")、Office.FileType.PDF ("pdf")、または Office.FileType.Text ("text") のいずれかを想定しています。各プラットフォームの現在のファイルの種類のサポートは、 Document.getFileType 解説の下に一覧表示されます。 fileType パラメーターに Compressed を渡すと、getFileAsync メソッドは、ローカルコンピューターにファイルの一時的なコピーを作成して、現在のドキュメントをPowerPointプレゼンテーションファイル (*.pptx) または Word 文書ファイル (*.docx) として返します。

getFileAsync メソッドは、File オブジェクトとしてファイルへの参照を返します。 File オブジェクトは、次の 4 つのメンバーを公開します。

size プロパティ
sliceCount プロパティ
getSliceAsync メソッド
closeAsync メソッド

size プロパティは、ファイル内のバイト数を返します。 sliceCountは、ファイル内の Slice オブジェクトの数 (この記事で後述) を返します。

次のコードを使用して、Document.getFileAsync メソッドを使用して現在のPowerPointまたは Word 文書をFile オブジェクトとして取得し、ローカルに定義された getSlice 関数を呼び出します。 File オブジェクト、カウンター変数、およびファイル内のスライスの合計数は、匿名オブジェクト内のgetSliceの呼び出しで渡されることに注意してください。

// Get all of the content from a PowerPoint or Word document in 100-KB chunks of text.
function sendFile() {
    Office.context.document.getFileAsync("compressed",
        { sliceSize: 100000 },
        function (result) {

            if (result.status === Office.AsyncResultStatus.Succeeded) {

                // Get the File object from the result.
                var myFile = result.value;
                var state = {
                    file: myFile,
                    counter: 0,
                    sliceCount: myFile.sliceCount
                };

                updateStatus("Getting file of " + myFile.size + " bytes");
                getSlice(state);
            } else {
                updateStatus(result.status);
            }
        });
}

ローカル関数 getSlice は、 File.getSliceAsync メソッドを呼び出して、 File オブジェクトからスライスを取得します。 getSliceAsync メソッドは、スライスのコレクションからSlice オブジェクトを返します。このメソッドには、 sliceIndex と callback という 2 つの必須パラメーターがあります。 sliceIndex パラメーターは、インデクサーとして整数をスライスのコレクションに取り込みます。 Office JavaScript API の他のメソッドと同様に、 getSliceAsync メソッドもコールバック関数をパラメーターとして受け取り、メソッド呼び出しの結果を処理します。

Slice オブジェクトを使用すると、ファイルに含まれるデータにアクセスできます。 getFileAsync メソッドの options パラメーターで特に指定しない限り、Slice オブジェクトのサイズは 4 MB です。 Slice オブジェクトは、size、data、index の 3 つのプロパティを公開します。 size プロパティは、スライスのサイズ (バイト単位) を取得します。 index プロパティは、スライスのコレクション内のスライスの位置を表す整数を取得します。

// Get a slice from the file and then call sendSlice.
function getSlice(state) {
    state.file.getSliceAsync(state.counter, function (result) {
        if (result.status == Office.AsyncResultStatus.Succeeded) {
            updateStatus("Sending piece " + (state.counter + 1) + " of " + state.sliceCount);
            sendSlice(result.value, state);
        } else {
            updateStatus(result.status);
        }
    });
}

Slice.data プロパティは、ファイルの生データをバイト配列として返します。データがテキスト形式 (つまり、XML かプレーンテキスト) の場合、スライスには生テキストが含まれています。 Document.getFileAsyncの fileType パラメーターに Office.FileType.Compressed を渡すと、スライスにはファイルのバイナリデータがバイト配列として含まれます。 In the case of a PowerPoint or Word file, the slices contain byte arrays.

バイト配列のデータを Base64 でエンコードされた文字列に変換するには、独自の関数を実装 (または利用可能なライブラリを使用) する必要があります。 JavaScript での Base64 エンコーティングについては、「 Base64 エンコードとデコード」を参照してください。

データを Base64 に変換したら、HTTP POST 要求の本文など、いくつかの方法でデータを Web サーバーに送信できます。

スライスを Web サービスに送信するために次のコードを追加します。

注:

このコードは、PowerPointまたは Word ファイルを複数のスライスで Web サーバーに送信します。 Web サーバーまたはサービスは、個々のスライスを 1 つのファイルに追加し、そのスライスを .pptx または .docx ファイルとして保存してから、操作を実行する必要があります。

function sendSlice(slice, state) {
    var data = slice.data;

    // If the slice contains data, create an HTTP request.
    if (data) {

        // Encode the slice data, a byte array, as a Base64 string.
        // NOTE: The implementation of myEncodeBase64(input) function isn't
        // included with this example. For information about Base64 encoding with
        // JavaScript, see https://developer.mozilla.org/docs/Web/JavaScript/Base64_encoding_and_decoding.
        var fileData = myEncodeBase64(data);

        // Create a new HTTP request. You need to send the request
        // to a webpage that can receive a post.
        var request = new XMLHttpRequest();

        // Create a handler function to update the status
        // when the request has been sent.
        request.onreadystatechange = function () {
            if (request.readyState == 4) {

                updateStatus("Sent " + slice.size + " bytes.");
                state.counter++;

                if (state.counter < state.sliceCount) {
                    getSlice(state);
                } else {
                    closeFile(state);
                }
            }
        }

        request.open("POST", "[Your receiving page or service]");
        request.setRequestHeader("Slice-Number", slice.index);

        // Send the file as the body of an HTTP POST
        // request to the web server.
        request.send(fileData);
    }
}

名前が示すように、 File.closeAsync メソッドはドキュメントへの接続を閉じ、リソースを解放します。 Office アドインサンドボックスでは、ファイルへのスコープ外の参照がガベージコレクションされますが、コードが完了したら、ファイルを明示的に閉じるのがベストプラクティスです。 closeAsync メソッドには、呼び出しの完了時に呼び出す関数を指定するコールバックという 1 つのパラメーターがあります。

function closeFile(state) {
    // Close the file when you're done with it.
    state.file.closeAsync(function (result) {

        // If the result returns as a success, the
        // file has been successfully closed.
        if (result.status === Office.AsyncResultStatus.Succeeded) {
            updateStatus("File closed.");
        } else {
            updateStatus("File couldn't be closed.");
        }
    });
}

最終的な JavaScript ファイルは次のようになります。

/*
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

// The initialize or onReady function is required for all add-ins.
Office.initialize = function (reason) {

    // Checks for the DOM to load using the jQuery ready method.
    $(document).ready(function () {

        // Run sendFile when Submit is clicked.
        $('#submit').on("click", function () {
            sendFile();
        });

        // Update status.
        updateStatus("Ready to send file.");
    });
}

// Create a function for writing to the status div.
function updateStatus(message) {
    var statusInfo = $('#status');
    statusInfo[0].innerHTML += message + "<br/>";
}

// Get all of the content from a PowerPoint or Word document in 100-KB chunks of text.
function sendFile() {
    Office.context.document.getFileAsync("compressed",
        { sliceSize: 100000 },
        function (result) {

            if (result.status === Office.AsyncResultStatus.Succeeded) {

                // Get the File object from the result.
                var myFile = result.value;
                var state = {
                    file: myFile,
                    counter: 0,
                    sliceCount: myFile.sliceCount
                };

                updateStatus("Getting file of " + myFile.size + " bytes");
                getSlice(state);
            } else {
                updateStatus(result.status);
            }
        });
}

// Get a slice from the file and then call sendSlice.
function getSlice(state) {
    state.file.getSliceAsync(state.counter, function (result) {
        if (result.status == Office.AsyncResultStatus.Succeeded) {
            updateStatus("Sending piece " + (state.counter + 1) + " of " + state.sliceCount);
            sendSlice(result.value, state);
        } else {
            updateStatus(result.status);
        }
    });
}

function sendSlice(slice, state) {
    var data = slice.data;

    // If the slice contains data, create an HTTP request.
    if (data) {

        // Encode the slice data, a byte array, as a Base64 string.
        // NOTE: The implementation of myEncodeBase64(input) function isn't
        // included with this example. For information about Base64 encoding with
        // JavaScript, see https://developer.mozilla.org/docs/Web/JavaScript/Base64_encoding_and_decoding.
        var fileData = myEncodeBase64(data);

        // Create a new HTTP request. You need to send the request
        // to a webpage that can receive a post.
        var request = new XMLHttpRequest();

        // Create a handler function to update the status
        // when the request has been sent.
        request.onreadystatechange = function () {
            if (request.readyState == 4) {

                updateStatus("Sent " + slice.size + " bytes.");
                state.counter++;

                if (state.counter < state.sliceCount) {
                    getSlice(state);
                } else {
                    closeFile(state);
                }
            }
        }

        request.open("POST", "[Your receiving page or service]");
        request.setRequestHeader("Slice-Number", slice.index);

        // Send the file as the body of an HTTP POST
        // request to the web server.
        request.send(fileData);
    }
}

function closeFile(state) {
    // Close the file when you're done with it.
    state.file.closeAsync(function (result) {

        // If the result returns as a success, the
        // file has been successfully closed.
        if (result.status === Office.AsyncResultStatus.Succeeded) {
            updateStatus("File closed.");
        } else {
            updateStatus("File couldn't be closed.");
        }
    });
}

次の方法で共有

PowerPoint または Word 用アドインからドキュメント全体を取得する

PowerPoint または Word 用アドインを作成するための前提条件

作業ウィンドウアドインを作成するために知っておくべき主要な概念

アドインのマニフェストを作成する

アドインのユーザーインターフェイスを作成する

ドキュメントを取得するための JavaScript を追加する

その他のリソース

次の方法で共有

PowerPoint または Word 用アドインからドキュメント全体を取得する

PowerPoint または Word 用アドインを作成するための前提条件

作業ウィンドウ アドインを作成するために知っておくべき主要な概念

アドインのマニフェストを作成する

アドインのユーザー インターフェイスを作成する

ドキュメントを取得するための JavaScript を追加する

その他のリソース

作業ウィンドウアドインを作成するために知っておくべき主要な概念

アドインのユーザーインターフェイスを作成する