fbpx

PDFをHTML5に替えると得られる、7つのメリットとはなにか?
メリット①コンテンツを“制御”できるようになります

カタログや図面・設計図、報告書などのまとまった文書をネットで公開するならPDF形式――というのは過去の常識です。いまは違います、PDFよりも効率的で便利なHTML5やSVGというフォーマットがあります。これらを使わない手はありません。 前回に引き続き、PDFをやめてHTML5/SVGに替えるメリットを紹介します。いまPDF形式でウェブに載せている企業や役所のみなさんの身近なお話です。

PDFのコンテンツは、ユーザがブラウザでPDFファイルをダウンロードした後は、どのように表示させるかは「ユーザまかせ」です。ここに2つの問題があります。

ひとつ目の問題は、ブラウザのPDF表示機能で見ているのか、Acrobat Readerで見ているのか、あるいは別のビューアでみているのか、よくわからないことです。ブラウザには最大の表示可能ページ数の制限があり、拡大縮小の範囲も違います。PDFを提供する側としては、ユーザがちゃんと読めているのか確認できないので、不安になります。

二つめの問題は、PDFビューアの機能の差が大きいことです。便利なビューアは、画面送りの方法や見開き表示、サムネール表示、検索などの機能を提供しています。グラフィックを多用する雑誌なら、全画面の見開きで見栄えの良い見せ方をしたいでしょう。取扱説明書なら、目次、サムネール、検索枠を表示して、ユーザの欲しい情報にすばやく飛べるようにしたいでしょう。こうした配慮がユーザのビューアで利用可能なのか、PDF提供側にはよくわかりません。

HTML5/SVGでは、コンテンツとビューアをセットにして、いっしょに提供できます。ユーザがHTML5/SVGのページをクリックすると、両方がまとめてダウンロードされ、ビューアのウィンドウ内にコンテンツが表示されます。その際に、ビューアについて、ユーザ側では何の操作をする必要はありません。

実例をご覧ください。下図は、雑誌を開いた画面です。ブラウザのウィンドウ内に見開きで表示されています。ブラウザ上部には操作メニューが表示され、誌面のデザインをジャマしない表示になっています。

下図は、技術書を開いた画面です。ブラウザ上部に操作メニュー、左に検索枠と各ページのサムネール(縮小図)が表示されています。最初から検索枠とサムネールを表示しておくことで、情報を探す手段をそれとなくユーザに案内できます。

なおBuildVuのHTML5/SVGビューアには、ここで示した検索機能が標準で組み込まれています(検索機能を利用しないこともできます)。

また、PDFに目次が設定されている場合には、自動的に目次も作成されます。

なおPDFにも、URLの末尾に付ける文字列で画面表示の方法や、開くページなどを指定する機能があります。しかし検索エンジン経由では、これらの指定は無視されてしまいます。

下図(左)は、PDFへのURLをクリックして開いた場合です。URLは「https://docs.intwk.co.jp/blog/sample.pdf#page=4&view=fit」というもので、4ページ目をブラウザウィンドウに収まるように表示するパラメタが付いています(URLの太字の部分)。実際、そのように開かれています。

下図(右)は、検索エンジンで見つけた同じURLをクリックして開いた場合です。1ページ目が開かれ、ページの一部がウィンドウからはみ出しています。検索エンジン経由だとURL末尾のパラメタ「#page=10&view=fit」が無視されるのが原因です。

繰り返しになりますが、検索エンジン経由だと、PDFは常に1ページ目から表示されているのです。たとえPDF提供者がページ番号や表示方法を指定していても、です。

HTML5/SVGなら、検索エンジン経由で開いてもPDFのような問題が出ません。各ページごとにURLが生成されるので、そのページにしっかりユーザを案内できます。

また、閲覧者が検索エンジン経由だったとしても、コンテンツに最も適したビューアや、最も適した設定で表示できます。

このようにHTML5/SVGなら、コンテンツを最大限に魅力的で便利に姿でユーザに見ていただくことができます。

BuildVuについて

BuildVuは、雑誌や図面などをHTML5/SVGで“見た目”どおりに表示するツールとして20年以上の実績があります。PDFからHTML5/SVGへの変換ツール、HTML5/SVGビューアは、ぜひBuildVuにお任せください。
PDFからHTML5/SVGへの変換入門は、こちらをご覧ください

ぜひ今すぐにBuildVuで、あなたのPDFファイルをHTML5に変換してみてください。変換と専用ビューアでの閲覧をこちらからお試しいただけます(メールアドレスの登録不要、無料です)
BuildVuオンラインコンバーター※1
https://www.idrsolutions.com/ja/online-pdf-to-html5-converte

※1 開発元のIDRsolutions社の提供するサービスです。

    Facebook
    Twitter
    Email
    公式ブログロゴ

    製品に関する記事や開発者のブログ

    PDFってこうなってる? 実践でPDFの内部構造を学ぼう Part 7:色を操るグラフィックスステート

    今回は、画面に色を付けてみましょう。その過程で、グラフィックスステート(グラフィックス状態)について説明します。PDFファイルには、グラフィックスステートというデータ構造が関連付けられています。このデータ構造には、グラフィックスの描画方法を記述する情報が格納されます。現在の色や使用可能な色などの値がグラフィックスステートに保存されます。また、現在のクリップ、変換行列、線に対して行える面白い操作、ユーザー空間(PDFの座標系)からデバイス空間(モニター)へのグラフィックスの描画方法を変更するその他の命令など、様々な要素が含まれます。

    PDFってこうなってる? 実践でPDFの内部構造を学ぼう Part 6:パスで図形を描こう

    「Part 4: 白紙のPDFページを自作する」で示したように、PDFはストリームオブジェクト内にある一連のコマンドを使って描画されます。これらのコマンドを通じて、PDFビューアーはページ上に表示される全コンテンツを描画する方法を理解できます。この記事では、グラフィックコマンドを探究し、ページ上に数本の線を描画するPDFをテキストエディタで作成します。

    PDFってこうなってる? 実践でPDFの内部構造を学ぼう Part5:Hello WorldのPDFを作ろう

    「Part 1: PDFを理解するための第一歩」で、私はPDFファイルを構成するさまざまなオブジェクトについて説明しました。その中で言及したのがストリームオブジェクトです。ストリームオブジェクトは、PDFページの見た目を記述する命令を全て含んでいます。この記事の最後までに、私たちは「Hello World」のPDFを作成できるようになります。そのためには、PDFドキュメントにテキストを挿入するためのストリームオブジェクトを使う必要があります。

    PDFファイルを扱うシステム開発・ウェブ開発に役立つ

    開発者向けPDF入門ガイド

    開発者向けPDF入門ガイド

    PDFの基礎から応用まで開発者のための入門ガイド2024年版

    PDF の仕様や活用方法など、開発者に必要な情報がコンパクトにまとめました。初めてPDFを扱う開発者にも分かりやすく、基礎から応用までカバーしているため、PDF のポテンシャルを最大限に引き出し、アプリケーション開発やドキュメント管理の効率化を図るための手引きとなるでしょう。技術的な側面に興味がある開発者だけでなく、ビジネスでPDFを有効活用したい方にもおすすめの一冊です。

    MENU
    PAGE TOP
    ロボット
    PDFソフトウェアの開発に役立つ情報をメールでお届けします