PDF ファイルを Garoon の HTML ポートレットに表示しよう
はじめに
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 の準備
ライブラリのダウンロード
次の手順で必要なファイルをダウンロードします。
- GitHub のリリースページ にアクセスします。
- 「Assets」の「pdfjs-2.7.570-dist.zip」をクリックしてダウンロードします。
- zipファイルを展開します。
展開したファイルのうち、「build」フォルダー内の「pdf.worker.js」「pdf.js」を使用します。
ファイル管理へのアップロード
Garoonのファイル管理に「pdf.worker.js」を追加します。
-
ファイル管理の任意のフォルダーに、「pdf.worker.js」を追加します。
-
ダウンロードボタンを右クリック>[リンクのアドレスをコピー]をクリックして得たURLをメモしておきます。(★2)
HTML ポートレットの作成
HTMLポートレットを作成し、ポータルに作成したポートレットを追加します。
コードの作成
新規に作成したHTMLポートレットの「ポートレットの内容」に、以下のコードを記載します。
|
|
「viewPDF.js」を作成します。
このとき、次の箇所を書き換えてください。
- 12行目の。https://YYYYY:(★1)の PDFのURL
- 15行目の。https://ZZZZZ:(★2)の「pdf.worker.js」の URL
書き換えたら、文字コードを「UTF-8」にしてファイルを保存します。
|
|
ポートレットへの適用
ポートレットを作成し、「JavaScript / CSSによるカスタマイズ」画面でカスタマイズファイルを読み込みます。
ファイルを読み込む順番は、次の記載とおりにしてください。
- JavaScriptカスタマイズ
- pdf.js( PDF.js の準備でダウンロードしたファイル)
- viewPDF.js
- CSSカスタマイズ
- grn_kit.css( Garoon html/css/image-Kit for Customize の準備でダウンロードしたファイル)
おわりに
PDFファイルをGaroonのHTMLポートレットに表示する方法を紹介しました。
この方法を利用することで、PDFファイルを画像に変換してHTMLポートレットへ貼り付けたり、頻繁に参照するPDFファイルをローカルにダウンロードする必要なく閲覧ができます。
このTipsが社内でのポータル活用の手助けになれば幸いです。
このTipsは、2024年2月版Garoonで動作を確認しています。