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コードに記述します。
以上で、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のアプリケーション作成の参考になれば幸いです。
完
