PDF ファイルを Garoon の HTML ポートレットに表示しよう

（著者：サイボウズ 江﨑 全英）

Index

• はじめに
• 動作環境と注意事項
• 完成イメージ
• 1. 外部の PDF ファイルを表示する方法
• 2. Garoon のファイル管理内の PDF ファイルを表示する方法
• おわりに

はじめに

Garoon のポータル上で PDF ファイルを表示したいと感じることはありませんか。
本記事では、Garoon の HTML ポートレット上に PDF ファイルを表示する方法をご紹介します。

ポータルを開くだけで PDF ファイルが表示されるため、
社内に広く周知させたい PDF ファイルや、よく参照される PDF ファイルを配置することで、
わざわざ手動でダウンロードして閲覧する手間を省けて、業務の効率化に貢献できるかと思います。

動作環境と注意事項

• Google Chrome や Microsoft Edge、Mozilla Firefox 等のブラウザをご利用ください。
• サンプルプログラムは、その動作を保証するものではありません。
• サンプルプログラムの技術的なサポート等は行っていません。
• HTML を編集するときの注意点は、Garoon ヘルプサイトをご覧ください。

完成イメージ

本記事では、2つのパターンでの表示方法を紹介します。

1. 外部の PDF ファイルを表示する方法

Garoon の外部にある PDF ファイルを表示しています。
この方法では、縦スクロールで PDF ファイルを閲覧できます。

2. Garoon のファイル管理内の PDF ファイルを表示する方法

Garoon のファイル管理内に保存した PDF ファイルを表示しています。
この方法では、ボタンを押下することで、PDF ファイル内の次のページ（前のページ）を閲覧できます。

1. 外部の PDF ファイルを表示する方法

表示する PDF ファイルの準備

HTML ポートレットに表示する PDF ファイルの URL を確認しておきます(※)。
※ Garoon のファイル管理内の URL の場合、ポートレットの画面を表示する毎に、
　ローカルに PDF ファイルをダウンロードする挙動になります。
　ファイル管理内（Garoon内）に保存した PDF ファイルを表示する場合は、「2.」の方法をご利用ください。

HTML ポートレットの作成

新規に作成した HTML ポートレットの「ポートレットの内容」に、以下のコードを記載します。
この時、コード内の「https://XXXXX」の部分（3箇所）を、「表示する PDF ファイルの準備」で確認した PDF ファイルの URL に書き換えます。

object タグで表示ができない場合は iframe タグで表示、
iframe タグでも表示ができない場合は、PDF ファイルをダウンロードするハイパーリンクが表示されるようになっています。

ツールバーの表示

https://XXXXX の末尾に「#toolbar=0」をつけることで、以下のようにツールバーの表示の有無を切り替えることができます。

2. Garoon のファイル管理内の PDF ファイルを表示する方法

表示する PDF ファイルの準備

HTML ポートレットに表示する PDF ファイルの URL を確認しておきます。
Garoon のファイル管理に保存している PDF ファイルを HTML ポートレットに表示します。

ファイル管理の一覧画面で表示したい PDF ファイルのダウンロードボタンを右クリック > [リンクのアドレスをコピー] をクリックして得られる URL をメモしておきます。(★1)

ライブラリの準備

ライブラリとして、Garoon html/css/image-Kit for Customize と PDF.js を利用します。

以下のバージョンで動作確認しています。

• PDF.js v2.7.570
• Garoon html/css/image-Kit for Customize

Garoon html/css/image-Kit for Customize の準備

以下の Github から CSS ファイル(grn_kit.css)をダウンロードします。
https://github.com/garoon/css-for-customize

PDF.js の準備

ダウンロードページの Download > Prebuilt > Stable (vX.X.XXX) からダウンロードした zip ファイルを展開します。

ファイル管理の任意のフォルダーに、zip 展開したフォルダの build 配下の pdf.worker.js を読み込み、
ダウンロードボタンを右クリック > [リンクのアドレスをコピー] をクリックして得られる URL をメモしておきます。(★2)

HTML ポートレットの作成

新規に作成した HTML ポートレットの「ポートレットの内容」に、以下のコードを記載します。

「viewPDF.js」を作成します。（文字コードは「UTF-8」で保存してください）
この時、13行目の「https://YYYYY」に (★1) の PDF の URL を、16行目の「https://ZZZZZ」に (★2) の pdf.worker.js の URL を書き換えます。

作成した「viewPDF.js」とあらかじめダウンロードしておいた CSS ファイル(grn_kit.css)と、
JavaScript ファイル(build フォルダ配下の pdf.js)を
「JavaScript / CSSによるカスタマイズ」画面で読み込みます。

JavaScriptファイルは次の順番で設定してください。

• pdf.js
• viewPDF.js

おわりに

PDF ファイルを Garoon の HTML ポートレットに表示する方法を紹介しました。
この方法を利用することで、PDF ファイルを画像に変換して HTML ポートレットに貼り付ける必要がなくなりますし、
頻繁に参照する PDF ファイルをローカルにダウンロードすることなく閲覧することができます。
この Tips が社内でのポータル活用の手助けになれれば幸いです。

このTipsは、2021年4月版 Garoonで確認したものになります。