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ファイル内の次のページ（前のページ）を閲覧できます。

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」をつけることで、以下のようにツールバーの表示の有無を切り替えることができます。

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 の準備

ライブラリのダウンロード

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

1. GitHub のリリースページ にアクセスします。
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ポートレットの「ポートレットの内容」に、以下のコードを記載します。

 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によるカスタマイズ」画面でカスタマイズファイルを読み込みます。
ファイルを読み込む順番は、次の記載とおりにしてください。

• 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で動作を確認しています。