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

目次

はじめに

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

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

動作環境と注意事項

  • Google Chrome や Microsoft Edge、Mozilla Firefox 等のブラウザーを利用してください。
  • HTML を編集するときの注意点は、 Garoon ヘルプサイト (External link) を確認してください。

完成イメージ

本記事では、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 (External link) を利用します。

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

  • 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 (External link)

PDF.js の準備
ライブラリのダウンロード

次の手順で必要なファイルをダウンロードします。

  1. GitHub のリリースページ (External link) にアクセスします。
  2. 「Assets」の「pdfjs-2.7.570-dist.zip」をクリックしてダウンロードします。
  3. zip ファイルを展開します。

展開したファイルのうち、「build」フォルダー内の「pdf.worker.js」「pdf.js」を使用します。

ファイル管理へのアップロード

Garoon のファイル管理に「pdf.worker.js」を追加します。

  1. ファイル管理の任意のフォルダーに、「pdf.worker.js」を追加します。

  2. ダウンロードボタンを右クリック>[リンクのアドレスをコピー]をクリックして得た URL をメモしておきます。(★2)

HTML ポートレットの作成

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」を作成します。
このとき、次の箇所を書き換えてください。

  • 12 行目の https://YYYYY:(★1)の PDF の URL
  • 15 行目の https://ZZZZZ:(★2)の「pdf.worker.js」の URL

書き換えたら、文字コードを「UTF-8」にしてファイルを保存します。

 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);
  };
})();
ポートレットへの適用

ポートレットを作成し、「JavaScript / CSS によるカスタマイズ」画面でカスタマイズファイルを読み込みます。
ファイルを読み込む順番は、次の記載とおりにしてください。

おわりに

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

information

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