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
48
49
50
/*
* 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,
    isEvalSupported: false,
  }).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年5月版Garoonで動作を確認しています。