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

Garoon 開発 Tips

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 に書き換えます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!--
* Garoon Portlet sample program
* Copyright (c) 2021 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
-->

<object data="https://XXXXX" type="application/pdf" width="500vw" height="600vh"> <!-- width と height は任意に調整 -->
  <iframe src="https://XXXXX" width="100%" height="100%"> <!-- width と height は任意に調整 -->
    <p><b>表示されない時の表示</b>: <a href="https://XXXXX">PDF をダウンロード</a></p>
  </iframe>
</object>

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 ポートレットの「ポートレットの内容」に、以下のコードを記載します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!--
* Garoon Portlet sample program
* Copyright (c) 2021 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
-->

<div class="margin_b10_grn_kit">
  <button id="prev" class="button_normal_sub_grn_kit">前ページ</button>
  <button id="next" class="button_normal_sub_grn_kit">次ページ</button>
</div>
<canvas id="pdf-canvas"></canvas>

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


/*
* Garoon Portlet sample program
* Copyright (c) 2021 Cybozu
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/

(function() {
  'use strict';
  let currentPage = 1;
  const url = 'https://YYYYY'; // ★1で取得したURLを記載する
  let pdfDoc;
  const pdfjsLib = window['pdfjs-dist/build/pdf'];
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://ZZZZZ'; // ★2で取得したURLを記載する

  pdfjsLib.getDocument(url).promise.then((pdf) => {
    pdfDoc = pdf;
    renderPage(pdfDoc);
  });

  function renderPage(pdf) {
    pdf.getPage(currentPage).then((page) => {
      const scale = 1;
      const viewport = page.getViewport({scale: scale});
      const canvas = document.getElementById('pdf-canvas');
      const context = canvas.getContext('2d');
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      page.render(renderContext);
    });
  }

  document.getElementById('next').onclick = function() {
    currentPage++;
    renderPage(pdfDoc);
  };

  document.getElementById('prev').onclick = function() {
    currentPage--;
    renderPage(pdfDoc);
  };
})();

作成した「viewPDF.js」と、ダウンロードした CSS ファイル（grn_kit.css）、JavaScript ファイル（pdf.js）を「JavaScript / CSS によるカスタマイズ」画面で読み込みます。

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

pdf.js
viewPDF.js

おわりに

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

この Tips は、2021 年 4 月版 Garoon で動作を確認しています。

Garoon 開発 Tips