JavaScript でプレゼンテーションを HTML5 に変換

Aspose.Slides は HTML5 エクスポートをサポートしています。この HTML5 エクスポートプロセスを使用すると、Web 拡張機能や依存関係なしで PowerPoint を HTML に変換できます。独自のテンプレートを使用して、エクスポートプロセスと生成される HTML、CSS、JavaScript、アニメーション属性を定義する非常に柔軟なオプションを適用できます。

PowerPoint を HTML5 にエクスポート

この JavaScript コードは、Web 拡張機能や依存関係なしでプレゼンテーションを HTML5 にエクスポートする方法を示しています:

var pres = new aspose.slides.Presentation("pres.pptx");
try {
    pres.save("pres.html", aspose.slides.SaveFormat.Html5);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

この場合、クリーンな HTML が得られます。

シェイプアニメーションやスライドトランジションの設定をこのように指定したい場合:

var pres = new aspose.slides.Presentation("pres.pptx");
try {
    var html5Options = new aspose.slides.Html5Options();
    html5Options.setAnimateShapes(false);
    html5Options.setAnimateTransitions(false);
    pres.save("pres5.html", aspose.slides.SaveFormat.Html5, html5Options);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

PowerPoint を HTML にエクスポート

この JavaScript は標準的な PowerPoint → HTML プロセスを示しています:

var pres = new aspose.slides.Presentation("pres.pptx");
try {
    pres.save("pres.html", aspose.slides.SaveFormat.Html);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

この場合、プレゼンテーションのコンテンツは以下のような形で SVG を通じてレンダリングされます:

<body>
<div class="slide" name="slide" id="slideslideIface1">
     <svg version="1.1">
         <g> THE SLIDE CONTENT GOES HERE </g>
     </svg>
</div>
</body>

Note

この方法で PowerPoint を HTML にエクスポートすると、SVG レンダリングのため、特定の要素にスタイルを適用したりアニメーションを付けたりすることができなくなります。

PowerPoint を HTML5 スライドビューにエクスポート

Aspose.Slides を使用すると、スライドがスライドビューモードで表示される HTML5 ドキュメントに PowerPoint プレゼンテーションを変換できます。この場合、生成された HTML5 ファイルをブラウザーで開くと、Web ページ上でスライドビューモードのプレゼンテーションが表示されます。

この JavaScript コードは、PowerPoint → HTML5 スライドビューエクスポートプロセスを示しています:

var pres = new aspose.slides.Presentation("pres.pptx");
try {
    var html5Options = new aspose.slides.Html5Options();
    html5Options.setAnimateShapes(true);
    html5Options.setAnimateTransitions(true);
    pres.save("HTML5-slide-view.html", aspose.slides.SaveFormat.Html5, html5Options);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

コメント付き HTML5 ドキュメントへのプレゼンテーション変換

PowerPoint のコメントは、スライド上の特定の要素に対してノートやフィードバックを残すためのツールです。特に共同プロジェクトで有用で、複数のユーザーがメインコンテンツを変更せずにコメントや提案を追加できます。各コメントには作成者の名前が表示されるため、誰がコメントしたかを簡単に追跡できます。

たとえば、“sample.pptx” ファイルに保存された以下の PowerPoint プレゼンテーションがあるとします。

プレゼンテーションスライドの 2 つのコメント

PowerPoint プレゼンテーションを HTML5 ドキュメントに変換するとき、出力ドキュメントにコメントを含めるかどうかを簡単に指定できます。そのためには、Html5Options クラスの notes_comments_layouting プロパティでコメントの表示パラメータを指定します。

以下のコード例は、スライドの右側にコメントを表示した状態でプレゼンテーションを HTML5 ドキュメントに変換します。

let html5Options = new aspose.slides.Html5Options();
html5Options.getNotesCommentsLayouting().setCommentsPosition(aspose.slides.CommentsPositions.Right);

let presentation = new aspose.slides.Presentation("sample.pptx");
presentation.save("output.html", aspose.slides.SaveFormat.Html5, html5Options);
presentation.dispose();

“output.html” ドキュメントは以下の画像に示されています。

出力された HTML5 ドキュメントのコメント

FAQ

HTML5 でオブジェクトアニメーションやスライドトランジションの再生を制御できますか？

はい、HTML5 では shape animations と slide transitions を個別に有効または無効にするオプションが用意されています。

コメントの出力はサポートされていますか？また、スライドに対してどこに配置できますか？

はい、HTML5 でコメントを追加でき、layout settings を使用してスライドの右側など任意の位置に配置できます。

セキュリティまたは CSP の理由で JavaScript を呼び出すリンクをスキップできますか？

はい、保存時に JavaScript 呼び出しを含むハイパーリンクをスキップできる setting が用意されています。これにより、厳格なセキュリティポリシーに準拠できます。

プレゼンテーションビューア