PPTXjsの場合は、読みやすく表示されるPowerPointもあれば、
背景色やフォントの色が適切に変換されず、まったく読めないスライドもあります。
日本語でのPPTXjsの利用実績を見つけることはできませんでした。これをそのままで使うのは難しいと思います。また、slideModeはdivs2slidesjsおよびrevealjsともに動作しませんでした。PPTXjsのデモのページでも動作していないため、APEXへの組み込み方に問題があるわけでも無さそうです。
とはいえ、PowerPointをブラウザ上でHTMLに変換して表示するJavaScriptライブラリは、ほとんど無いようです。どのようなものか、動作を確認してみる価値はあります。
mammoth.jsを使ったWordの変換では、大体は読める形式でHTMLに変換してくれる感じです。ただし、追加の実装をしないと埋め込まれた画像は表示されません。
以下より、APEXアプリケーションの作り方を紹介します。
PowerPointやWordのドキュメントをBLOBとして保存する表を作成します。
クイックSQLの以下のモデルから、表EBAJ_DOCV_DOCUMENTSを作成します。
# prefix: ebaj_docv
documents
title vc80 /nn
document fileレビューおよび実行をクリックします。
次のページでスクリプト名を入力し実行をクリックし、表示された確認画面で即時実行をクリックします。
表EBAJ_DOCV_DOCUMENTSが作成されます。
続けて、アプリケーションの作成をクリックします。確認画面が表示されるので、再度アプリケーションの作成をクリックします。
アプリケーション作成ウィザードが起動します。表EBAJ_DOCV_DOCUMENTSをソースとしたフォーム付き対話モード・レポートのページはあらかじめ追加されています。
ページの追加をクリックし、空白のページとしてWord Viewer、PowerPoint Viewerさらにdownloadを追加します。
以上で、アプリケーションの作成を実行します。
アプリケーションが作成されたら、ファイルのアップロードとダウンロードの機能を調整します。ソースとなる表にBLOB列が含まれていると、アプリケーション作成ウィザードおよびページ作成ウィザードは、ファイルをBLOBにアップロードする機能と、BLOBをファイルとしてダウンロードする機能を自動的に作成してくれます。しかし、ファイル名列やMIMEタイプ列は自動では設定されません。
ページ・デザイナで、ページ番号２の対話モード・レポートのページを開きます。
列DOCUMENTを選択し、BLOB属性のMIMEタイプ列にDOCUMENT_MIMETYPE、ファイル名列にDOCUMENT_FILENAME、最終更新列にDOCUMENT_LASTUPD、文字セット列にDOCUMENT_CHARSETを設定します。
以上で変更を保存します。
ページ・デザイナで、ページ番号３のフォームのページを開きます。
ページ・アイテムP3_DOCUMENTを選択し、ストレージのMIMEタイプ列にDOCUMENT_MIMETYPE、ファイル名列にDOCUMENT_FILENAME、文字セット列にDOCUMENT_CHARSET、BLOB最終更新列にDOCUMENT_LASTUPDを設定します。
以上で変更を保存します。
この時点でAPEXアプリケーションを実行し、確認に使用するPowerPointとWordのファイルをアップロードします。
表EBAJ_DOCV_DOCUMENTSの対話モード・レポートのページを開き、作成をクリックします。
ドロワーが開くので、適当にタイトルをつけてPowerPointやWordのファイルをアップロードします。
動作確認に使用するファイルを複数アップロードします。
続いて、JavaScriptのコード中よりURLを指定して、BLOBのデータを取り出せるようにします。
ページ・デザイナでdownloadのページを開きます。
空白ページdownloadに、表EBAJ_DOCV_DOCUMENTSの主キーIDの値を渡して、BLOBをファイルとして返す機能を実装します。
ダウンロードするBLOBのIDを受け付けるページ・アイテムP6_IDを作成します。タイプは非表示、セッション・ステートのストレージはリクエストごと(メモリーのみ)とします。
ページ・アイテムP6_IDに渡されたIDのBLOBを、ファイルとしてダウンロードするプロセスを作成します。識別のタイプとしてAPEX 24.1で新設されたダウンロードを選択します。
設定のファイルの表示形式として添付を選択し、ソースのSQL問合せとして、以下を記述します。
select document, document_filename from ebaj_docv_documents where id = :P6_ID
以上の設定を行うことにより、BLOBをファイルとして取得するURLをAPEX_PAGE.GET_URLにより生成できるようになりました。以下のように呼び出します。
declare
l_url varchar2(400);
begin
l_url := apex_page.get_url(
p_application => :APP_ID
,p_page => 'download'
,p_items => 'P6_ID'
,p_values => :P4_ID -- assume select list on page 4
);
:P4_DOCUMENT_URL := l_url;
end;最初にWord Viewerのページに、mammoth.jsを使ったWordビューワーを実装します。
ページ・デザイナでWord Viewerのページを開きます。
ページ・プロパティのHTMLヘッダーに、mammoth.jsをロードするためにimportmapを設定します。
<script type="importmap">
{
"imports": {
"mammoth": "https://cdn.jsdelivr.net/npm/mammoth@1.8.0/+esm"
}
}
</script>
select title d, id r from ebaj_docv_documents
追加値の表示はオフ、NULL値の表示はオン、NULL表示値として- Select Document -を設定します。
以前の値を記憶するように、セッション・ステートのストレージはセッションごと(永続)とします。
ページを送信して選択したドキュメントをプレビューするボタンを作成します。
識別のボタン名はVIEW、ラベルはView、動作のアクションはページの送信です。外観のホットをオン、テンプレート・オプションのWidthはStretchに設定します。
BLOBの取り出しに指定するURLを保持するページ・アイテムP4_DOCUMENT_URLを作成します。本来であればタイプは非表示とすべきですが、値を確認できるようにタイプはテキスト・フィールドとします。セッション・ステートのストレージはセッションごと(永続)を選びます。
以下のPL/SQLコードを実行し、BLOBを取り出すURLをページ・アイテムP4_DOCUMENT_URLに設定します。
declare
l_url varchar2(400);
begin
l_url := apex_page.get_url(
p_application => :APP_ID
,p_page => 'download'
,p_items => 'P6_ID'
,p_values => :P4_ID -- assume select list on page 4
);
:P4_DOCUMENT_URL := l_url;
end;サーバー側の条件のボタン押下時はVIEWです。
mammoth.jpを呼び出し、Wordドキュメントから生成したHTMLを表示します。
静的コンテンツのリージョンを作成し、以下のコードをソースのHTMLコードに記述します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="container"></div> | |
| <script type="module"> | |
| import mammoth from 'mammoth'; | |
| const element = document.getElementById("container"); | |
| const url = apex.item("P4_DOCUMENT_URL").getValue(); | |
| fetch( url ) | |
| .then(response => response.arrayBuffer()) | |
| .then(arrayBuffer => { | |
| mammoth.convertToHtml( { arrayBuffer: arrayBuffer }) | |
| .then(result => { | |
| element.insertAdjacentHTML("afterbegin", result.value); | |
| }); | |
| }); | |
| </script> |
以上で、Word Viewerは完成です。
アプリケーションは以下のGIF動画のように動作します。
次にPPTXjsを組み込んだPowerPoint Viewerを実装します。
GitHubのReleasesのページを開き、最新バージョンのv1.21.1（といっても2年以上前）のSource code (zip)をダウンロードします。PPTXjs-1.21.1.zipがダウンロードされます。
ダウンロードされたPPTXjs-1.21.1.zipを展開します。ディレクトリPPTXjs-1.21.1が作成され、その下にPowerPointをHTMLに変換するために必要なファイルが含まれます。
ディレクトリPPTXjs-1.21.1へ移動し、必要なファイルをpptxjs.zipにまとめます。
cd PPTXjs-1.21.1
zip -r pptxjs.zip js/d3.min.js js/dingbat.js js/divs2slides.js js/divs2slides.min.js js/filereader.js js/jszip.min.js js/nv.d3.min.js js/pptxjs.js js/pptxjs.min.js css/pptxjs.css css/nv.d3.min.css
% cd PPTXjs-1.21.1
PPTXjs-1.21.1 % zip -r pptxjs.zip js/d3.min.js js/dingbat.js js/divs2slides.js js/divs2slides.min.js js/filereader.js js/jszip.min.js js/nv.d3.min.js js/pptxjs.js js/pptxjs.min.js css/pptxjs.css css/nv.d3.min.css
adding: js/d3.min.js (deflated 65%)
adding: js/dingbat.js (deflated 90%)
adding: js/divs2slides.js (deflated 65%)
adding: js/divs2slides.min.js (deflated 53%)
adding: js/filereader.js (deflated 75%)
adding: js/jszip.min.js (deflated 69%)
adding: js/nv.d3.min.js (deflated 80%)
adding: js/pptxjs.js (deflated 87%)
adding: js/pptxjs.min.js (deflated 80%)
adding: css/pptxjs.css (deflated 74%)
adding: css/nv.d3.min.css (deflated 77%)
PPTXjs-1.21.1 %
共有コンポーネントの静的アプリケーション・ファイルを開き、ファイルの作成をクリックします。
コンテンツに先ほど作成したpptxjs.zipを選択し、ファイルの解凍をオンにします。
作成をクリックします。
ファイルが作成されたことを確認するため、静的アプリケーション・ファイルを開きます。
pptxjs.zipに固めたファイルが、静的アプリケーション・ファイルの一覧に含まれていれば準備は完了です。
ページ・デザイナでPowerPoint Viewerのページを開きます。
ページ・アイテムP5_ID、ボタンVIEW、ページ・アイテムP5_DOCUMENT_URL、それと、プロセスGet Document URLは、Word Viewerと同様に作成します。ページ番号が５になっているため、その部分は変更します。
静的コンテンツのリージョンDocument ViewerのHTMLコードは以下になります。
<div id="container" class="h600"></div>
ページ・プロパティのJavaScriptのファイルURLに以下を記述します。
#APP_FILES#js/jszip.min.js
#APP_FILES#js/filereader.js
#APP_FILES#js/d3.min.js
#APP_FILES#js/nv.d3.min.js
#APP_FILES#js/dingbat.js
#APP_FILES#js/pptxjs.min.js
#APP_FILES#js/divs2slides.min.jsCSSのファイルURLに以下を記述します。
#APP_FILES#css/pptxjs.css
#APP_FILES#css/nv.d3.min.cssJavaScriptのページ・ロード時に実行に以下を記述します。
$("#container").pptxToHtml({
pptxFileUrl: apex.item("P5_DOCUMENT_URL").getValue(),
slideMode: false,
keyBoardShortCut: false
});
以上でPowerPoint Viewerは完成です。
アプリケーションは以下のGIF動画のように動作します。
今回の記事は以上です。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-document-viewer.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
