WWWブラウザでのPDFの表示について

HTML Help、あるいは通常のHTMLと、PDFを組み合わせて運用したいというお便りを時々いただきます。しかし、これが難問で、なかなか思うように行きません。以前からQ&AなどでPDFの問題を扱ってきましたが、改めてまとめてみました。
動作環境やPDF文書の内容によって、表示結果が異なるかもしれません。「私も試したけれど違う結果になった。」という場合は、ishida@keiyu.com までご連絡いただければ幸いです。

HTML文書からPDF文書にリンクするには

HTML文書で次のように設定すると、PDF文書にリンクできます。

<A href="test.pdf">PDF文書を表示</A>

リンクテキスト(上例では「PDF文書を表示」)をクリックすると、ブラウザ内にPDF文書が表示されます。

(一覧に戻る)

HTML文書からPDF文書の指定ページにリンクするには

Acrobat 4.0以降では、HTML文書で次のように設定すると、指定ページにリンクできます。

<a href="http://www.keiyu.com/test.pdf#page=3">3ページ目を表示</a>
  • ローカルのハードディスまたはネットワークサーバのHTMLではこの機能は無効のようです。
  • Internet Explorer 6でこの機能が動作せず、1ページ目が表示される場合があるようですが、再現性が分かりません。同じOSのバージョン、Acrobatのバージョンでも動作が異なるようです。私が試した限りでは、IE 7、Firefox、Operaでは指定ページが表示されています。

(一覧に戻る)

HTML文書にPDF文書を埋め込むには

リンクではなく、HTML文書自体にPDFを埋め込むこともできます。ただし制限が多く、またこの方法では、Acrobatがインストールされていない場合にいきなり空白ページが表示されてしまうので、あまりお勧めはできません。

方法としては、EMBED要素を使う方法と、OBJECT要素を使う方法の2種類があります。

EMBED要素を使う

以下のように設定し、設定したHTML文書を表示すると、そのページの中にPDFが表示されます。

<EMBED
src="test.pdf"
width="60%"
height="80%"
>

  • Netscapeの場合、複数ページのPDFを埋め込んでも、1ページ目しか表示されません。
  • IEの場合は、他のページにも移動できます。

OBJECT要素を使う

IEの場合は、以下のように設定し、設定したHTML文書を表示すると、そのページの中にPDFが表示されます。

<OBJECT
classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"
width="60%"
height="80%"
id=Pdf1>
<PARAM name="SRC"
value="test.pdf">
</OBJECT>

(一覧に戻る)

HTML HelpとPDF文書の組み合わせ

コンパイル形式のHTML Helpの場合

コンパイル形式のHTML Help+IE4.0以降の場合、これまで説明してきたリンクする方法、埋め込む方法のいずれもうまく動作しません。

  • リンクの場合は、トピックファイル中のリンクテキストをクリックすると、[ファイルのダウンロード]ダイアログが表示され、Acrobat Readerを別に起動して開くことになったり、空白ページが表示されたりします。
  • EMBEDで埋め込んだ場合は、PDFを絶対パスで指定すると表示できるのですが、相対パスで指定すると空白ページが表示されます。

Javascriptを使うと、絶対パスを使わずに外部のPDFファイルにリンクし、HTML Helpウインドウの中にPDFを表示できます。その例が、MSDNライブラリの以下のページに掲載されています。
Example: link to file outside of your help system (英語)

この方法は、Javascriptで現在のトピックファイルの位置を取得し、そこからドライブ名とディレクトリ名だけを抜き出して、外部ファイル名に追加するというものです。このため、外部ファイルとchmファイルを同じフォルダに置いておかないと動作しません。少々設定が複雑ですが、サンプルをそのままHTMLファイルに貼り付けてファイル名を変えるだけで動作します。

上記の方法以外では、HTML Helpのショートカット機能を使い、Acrobat Readerを別に起動して表示する方法があります。[ファイルのダウンロード]ダイアログは表示されず、Acrobat Readerが直接起動してPDFが表示されます。

ショートカットを設定するには、「プログラムへのショートカットを設定する」に記載の方法で、ショートカットを設定し、 [HHCTRL: ShortCut]ダイアログの[Program]にPDFファイル名を入力します。([Parameter]でなく[Program]に入力する点に注意してください。)

トピック中のボタンをクリックすると、Acrobat Readerが起動し、指定したPDFが表示されます。

  • PDFへのリンクは、chmファイルの位置からの相対パスで指定する必要があります。PDFへのリンクを設定したトピックファイル(*.htm/*.html)の位置からの相対パスでは、PDFを参照できません。
    たとえば、次のようなファイル構成だったとします。

    htmlhelpフォルダ:chmファイルが作成される
          htmlフォルダ:トピックファイルが入っている
                 pdfフォルダ:test.pdfが入っている

    この場合、htmlフォルダ中のトピックファイルから、その下の階層のpdfフォルダ中のtest.pdfを参照するには、<A href="html\pdf\test.pdf">のように指定します。
    コンパイル時には、test.pdfが見つからないというエラーが表示されますが、 chmファイルを開いてリンクテキストをクリックすると、test.pdfが表示されます。

Web形式のHTML Helpの場合

コンパイルせずにInternet Explorerに直接表示するWeb形式のHTML Help(「操作の流れ:Web形式」参照)の場合は、通常Internet Explorerに表示する場合と同じ方法(<A href="test.pdf">PDF文書を表示</A>など)で、ブラウザ内にPDFを表示できます。

また、ヘルプの目次、キーワードからPDFを表示することもできます。目次からPDFを表示する場合は、[Contents]タブの(Insert a page)でHTMLファイルの代わりにPDFを指定します。キーワードからPDFを表示する場合は、[Index]タブの(Insert a keyword)でPDFを指定します。目次、キーワードをクリックすると、対応するPDFがブラウザの右側のフレーム内に表示されます。

(一覧に戻る)

WebにPDF文書を掲載する際に考慮していただきたいこと

PDFには、様々なアプリケーションで作成した文書を、原型に近いかたちで手軽にオンラインドキュメントとして配布でき、元のアプリケーションがなくても表示・印刷できるという利点があります。MacintoshとWindowsで文書を共有できる点も重宝します。

しかし、PDFには

  • Adobe Readerがインストールされていない環境では、表示できない。(Adobe Readerのダウンロード/インストール方法が分からない初心者が困る)
  • 音声読み上げソフトで読み上げる場合に、アクセシビリティに配慮されていないPDFでは読み上げづらい場合がある。(詳しくは、「PDFとアクセシビリティ」をご覧ください。)
  • オンラインでは通常のHTMLより読みづらい。

という問題があります。

最近公共機関などでもPDFで文書を公開している例が多くなってきましたが、この点を心に留めておいていただけたらと思います。W3CのアクセシビリティガイドラインなどでもPDFで掲載する場合は、そのテキスト版を別に用意することが推奨されています。また、単純なテキスト中心の文書の場合は、PDFよりもHTMLとして掲載できないか、検討してみてください。

(一覧に戻る)