HPB19 | HPB18 コンテンツ一覧
ホーム > HPB19 > HTML PDFファイルの貼付け方 インラインフレームの活用
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML PDFファイルの貼付け方 インラインフレームの活用


HTML PDFファイルの貼り付け方



PDF ファイルを画像ファイルのようにページに貼り付けて表示する方法は、下記 3通りあります


1. <iframe> ~PDFファイル名~ </iframe>
2. <object> ~PDFファイル名~ </object>
3. <embed> ~PDFファイル名~


どの方法を用いても、表示結果、操作感とも同じです




<iframe> 記述例



<iframe src="http://abhp.net/hp/img/HP_HTML_000002.pdf#page=1&view=Fit&viewrect=0,0,570,0&pagemode=none&scrollbar=0" width="600" height="332" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"></iframe>




PDFファイルの貼り付け方 解説



各タグの 「 src 」、もしくは、「 data 」属性で指定したファイルを、プラグインソフトに渡します
PDF ファイルの場合、通常、プラグインソフトは、「Acrobat (Reader)」で、実際にPDFファイルを表示するのは、「Acrobat (Reader)」となります

その為、ページの表示直後、フォーカスはプラグインソフ ト「Acrobat (Reader)」 に渡ってしまうので、マウスホイールを回しても、ページはスクロールしません
<iframe>、<object>、<embed> 表示でないところをクリックして、フォーカスをページに戻してやる必要があります

<embed>


<embed>は、HTML5で、標準仕様となる予定ですが、 もともと、Netscape Navigator独自の仕様で、HTML4.01の仕様に含まれていない為、ホームページビルダーで使用する際は、ビジュアルサイトビュー(サイトの確認)画面で、ページを表す長矢印に「 × 」マークが付きます

Internet Explorerにも実装されており、使用上の問題はありません
「まるごとチェック」にも引っ掛かりません

<object>


HTML4.01仕様に従うならば、<embed>タグではなく、<object>タグを使用することになりますが、ブラウザにより対応していない場合があるため、<embed>タグを使う方が一般的です

<iframe>


それぞれ、一長一短がありますので、ここは間を取って(?)、<iframe>(インラインフレーム)タグを使用しましょう




1. <iframe> によるPDFの表示 


表示例




記述例

<iframe src="http://abhp.net/hp/img/HP_HTML_000002.pdf#page=1&scrollbar=0&view=Fit&viewrect=0,0,570,0" width="600" height="332" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"></iframe>




URL 中でのPDFファイルパラメータの指定方法



パラメータを複数指定する際は、アンパサンド(&)、または、パウンド(#)文字のいずれかで、それぞれのパラメータを区切ります

アクションは、URL 文字列のうち、左から右に処理、および、実行されますので、相反する指定をすると、後のアクションが前のアクションの効果をオーバライドすることがあります

移動先を名前で指定する場合を除き、コマンドは大文字と小文字の区別をしません
URL 中にスペースは入れられません


PDF パラメータ 説明
nameddest=destination PDF 文書内の移動先の名前を指定します
page=pagenum 整数値を使用して文書中のページ番号を指定します
文書の最初のページのpagenum 値は 1 です
comment=commentID PDF 文書内の指定ページのコメントを指定します
このコマンドの前にpage コマンドを使用してください
例えば、次のとおりです
#page=1&comment=452fde0e-fd22-457c-84aa-2cf5bed5a349
collab=setting 文書の注釈を読み込んだり、書き込んだりするために使用される注釈レポジトリを設定し、レビュー用のデフォルトの注釈サーバ、または、デフォルトの環境設定をオーバーライドします
setting はstore_type@location の形式で、store_type の有効な値は以下のとおりです
●DAVFDF(WebDAV)
●FSFDF(ネットワークフォルダ)
●DB(ADBC)
例えば、次のようになります #collab=DAVFDF@http://review_server/Collab/user1
注釈レポジトリについて詳しくは、『Acrobat Online Collaboration: Setup and Administration』を参照してください
zoom=scale
zoom=scale,left,top
浮動小数点数、または、整数値を用いて、ズームおよびスクロールの倍率を設定します
例えば、scale 値 100 は 100 %の倍率を示します
スクロール値left およびtop は、文書が回転されているかいないかに関わらず、表示中のページの左上隅を (0,0)とする座標系で表します
view=Fit
view=FitH
view=FitH,top
view=FitV
view=FitV,left
view=FitB
view=FitBH
view=FitBH,top
view=FitBV
view=FitBV,left
PDF 言語仕様で定義されたキーワード値を使用して、表示されるページ のビューを設定します
詳しくは、『PDF Reference』を参照してください
スクロール値left およびtop は浮動小数点数、または、整数の座標値であり、文書が回転されているかいないかに関わらず、表示中のページの左上隅を (0,0)とする座標系で表します
このコマンドの前にpage コマンドを使用してください
注意:このパラメータはコマンドラインではサポートされていません
viewrect=left,top,wd,ht 浮動小数点数、または、整数の座標値を使用して、スクリーンに表示される矩形(元の文書の表示したい範囲)を、pix 値で指定します
それらの座標値は、文書が回転されているかいないかに関わらず、表示中のページの左上隅を (0,0) とする座標系で表します
このコマンドの前にpage コマンドを使用して下さい
注意:このパラメータはコマンドラインではサポートされていません

<iframe>タグで用意した表示エリアの中に表示するPDF文書の、実際に表示したい範囲を指定します

例えば、PDF文書の幅が 820pix で、上下左右にある 10pix 幅の余白をカットしたい場合、「 viewrect=10,10,800,0 」 と指定します

「 ht 」 の値を 「 0 」 にしておくと、PDF文書の高さ全てが表示対象になりますので、実際の表示エリアの高さを、下記の、「 height="pix 値" 」で調整します
left 表示範囲の左端からの距離
top 表示範囲の上端からの距離
wd 表示範囲の幅
ht 表示範囲の高さ
pagemode=bookmarks
pagemode=thumbs
pagemode=none (デフォルト)
しおり( bookmarks )、または、サムネイル( thumbs )を表示するか、表示しない( none )かを指定します
デフォルト値は、pagemode=none (表示しない)ですが、ユーザの使用環境によっては表示されることがありますので、明示的に指定しておくことをおすすめします
scrollbar=1|0 スクロールバーをオン、または、オフにします
search=wordList 検索パネルを開き、指定された単語リストにあるすべての単語を検索します。文書の中で最初に一致する単語が強調表示されます
単語は引用符で囲み、スペースで区切ってください
例えば、次のとおりです #search="単語1 単語2"
検索は、単語のみ可能で、連語は検索できません
toolbar=1|0 ツールバーをオン、または、オフにします
statusbar=1|0 ステータスバーをオン、または、オフにします
messages=1|0 ドキュメントメッセージバーをオン、または、オフにします
navpanes=1|0 ナビゲーションペインおよびタブをオン、または、オフにします
highlight=lt,rt,top,btm 表示したページの指定された矩形を強調表示します。このコマンドの前にpage コマンドを使用してください
矩形値は座標系で整数値で示します。それらの座標値は、文書が回転されているかいないかに関わらず、表示中のページの左上隅を (0,0)とする座標系で表します
style="border:none;"

style="border-width : 1px;border-style : solid;border-color : gray;"
枠線無し

枠線幅 1 ピクセル
枠線種類 実線
枠線色 灰色
ホームページビルダーを使用している場合、PDFファイルの右クリックメニューから、「スタイルの設定」で設定できます
fdf=URL オープンする PDF ファイルのフォームフィールドに取り込む FDF ファイルを指定します
例えば、次のとおりです #fdf=http://example.org/doc.fdf
注意:fdf パラメータは、URL の最後で指定してください
<iframe> パラメータ 説明
width="pix 値" pix 値で、iframe 表示枠の横幅を指定します
height="pix 値" pix 値で、iframe 表示枠の縦の長さを指定します

Adobe Parameters for Opening PDF Files (日本語版) Adobe® Acrobat® SDK April 2007 Version 8.1 」 参照




注意.

PDFファイルは絶対URLで指定


<iframe src="~"> の 「 src= 」 には、HTMLファイル ( ~.html ) の場合、相対URL(現在位置からの相対的な位置を記述)が使用できますが、PDFファイル ( ~.pdf ) を指定する場合、絶対URL(http://~から記述する)を使用しないと、エラーになります

ホームページビルダーを使用していて、ファイル名変更等を行うと、ホームページビルダーは、絶対URLを相対URLに書換えてしまいますので、後で、手動で、絶対URLに戻してあげる必要があります

PDFファイルは手動でアップロード


<iframe src="PDFファイル名">指定した際の「src="http://abhp.net/img/~"」は、URL指定の為、「"PDFファイル名"」ファイルは、サイト上にあるファイルを表示するという設定になり、ホームページビルダーの「サイト公開」では、アップロードされません

このPDFファイルをサイト上にアップロードするには、下記3つの内のいづれかの方法を用います

1. 別途、そのPDFファイルにリンクを張る
2. 一旦、通常のイメージファイルの貼り付けの様に「src="/img/~"」とフォルダ名で指定して「サイト公開」する
その場合、ホームページビルダーではエラー扱いとなり、ビジュアルサイトビューに赤Xマークが付きますので、「サイト公開」後、URL指定に修正する
3. 後述の「不要ファイル 削除方法 ( FFFTPミラーリング )」で説明します、「FFFTP」のミラーリング機能等を利用する





2. <object> によるPDFの表示


表示例




記述例

<object data="http://abhp.net/hp/img/HP_HTML_000002.pdf#page=1&scrollbar=0&view=Fit&viewrect=0,0,570,0" width="600" height="332" hspace="0" vspace="0"></object>






3. <embed> によるPDFの表示


表示例




記述例

<embed src="http://abhp.net/hp/img/HP_HTML_000002.pdf#page=1&scrollbar=0&view=Fit&viewrect=0,0,570,0" width="600" height="332" hspace="0" vspace="0"><noembed>embed タグを利用した PDF ファイルの表示例</noembed>



注. 上記表示例で、<embed> タグを使用すると、ビジュアルサイトビュー画面に 「 × 」マークが付くため、上記記述例で全く同じ表示になる事を確認後、実際の表示は、<object> タグに変更しています

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML PDFファイルの貼付け方 インラインフレームの活用
   

© 2014 abhp.net All Rights Reserved.
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP