質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
PDF

PDF(Portable Document Format)とはISOによって国際標準として制定されている電子ドキュメント用の拡張子です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

7174閲覧

HTML上で表示するPDFの目次を作成し、ページ遷移を可能にしたい

退会済みユーザー

退会済みユーザー

総合スコア0

PDF

PDF(Portable Document Format)とはISOによって国際標準として制定されている電子ドキュメント用の拡張子です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/02/06 01:39

現在、パソコンに疎い方々へ、紙で配布していたものを、PDFで配布する試みを行っています。
しかし、しおりの使い方(出し方)もままならず、毎回説明を行っており、HTMLで目次を作成し、単純にiframe等でPDFを表示、目次中をクリックしたら該当のページを開くようにしてはどうかという話になり簡単に作ってみました。

動作条件

条件は、サーバー上で動作するわけではなく、手元のパソコンで、オフラインでも動作する、ということのため、PDF.jsのようなファイルを読み込むスクリプトを利用することができません。
色々な方々が居られ、IE、Chrome、Firefoxなど、主要ブラウザで利用する。

抱えている問題

次のような作業を行っています。
【1】初回起動:iframe内のPDFはabout:blank、または表紙用PDFを利用
【2】HTMLの目次から、見たいページをクリック → iframe内PDFは、目的の動作を達成し、該当のページが表示される。
【3】HTMLの目次から、次に見たいページをクリック → iframe内PDFは、目的の動作を達成せず、表示は何も変わらない。

Javascriptを用いて、目次をクリックするたびに、ページを遷移する前に、一度iframe内をabout:blankにする。
【1】初回起動:iframe内のPDFはabout:blank、または表紙用PDFを利用
【2】HTMLの目次から、見たいページをクリック → iframe内PDFは、目的の動作を達成し、該当のページが表示される。
【3】HTMLの目次から、次に見たいページをクリック → iframe内PDFは、一瞬真っ白になり目的の動作を達成し、該当のページが表示される。
※但し、IEを利用した場合、AcrobatReaderの起動に時間がかかるため、処理が非常に遅く、実用的な動作速度を見込めない。

該当のソースコード

以下のようなとても単純なものです。

html

1<html> 2<body> 3 <a href="name.pdf#page=1" target="pdf">1</a><br /> 4 <a href="name.pdf#page=10" target="pdf">10</a><br /> 5 <a href="name.pdf#page=20" target="pdf">20</a><br /> 6 <a href="name.pdf#page=30" target="pdf">30</a><br /> 7 <iframe src="about:blank" name="pdf"></iframe> 8</body> 9</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/02/06 02:09 編集

PDFにこだわる理由はありますか?HTMLだけで作ったものを配布すれば全て解決するように思えます
退会済みユーザー

退会済みユーザー

2018/02/06 02:10

はい。600ページに及ぶPDFとなっております。中には図形や数式もありまして、PDFであれば5MB程度なのですが、svgにすると数百MBになったりします。
Lhankor_Mhy

2018/02/06 02:38

adobe script ではダメでしたか?
退会済みユーザー

退会済みユーザー

2018/02/06 02:43

こちら、以前調べたところ、セキュリティの設定によっては動作しない、などの制約があるように思われたのですが、そのあたりは問題なさそうでしょうか? Adobe Scriptは経験が一切無いため、たとえばIEならJavascriptが含まれるローカルファイルを開く際に、最初に実行していいか警告がでますが、許可ボタンを押す程度のため、予め資料に含めることができます。
退会済みユーザー

退会済みユーザー

2018/02/06 03:18

調べていただいたようですいません。ありがとう御座います。 後付で大変申し訳ありません。「しおり」がダメだった理由のひとつに、Acrobat Readerではない別のリーダーを使っている人もいた、ということが担当からあがっておりました。そのページを見てなぜ「しおり」をデフォルトで表示する設定は試さなかったのだろうと思い出しました。 逆に言えば、問い詰めればどんどん不毛になってしまいますね。素直にSVGに落とそうかという話に変えてみようと思います。
KojiDoi

2018/02/06 03:22

図表をどうしてもSVGにしなければならない理由があるのでしょうか。jpgかpngにしてしまえば、画像だけで数百MBとはならないように思えますが。
退会済みユーザー

退会済みユーザー

2018/02/06 03:29

科学的な数式も多く、印刷物ではあきらめていた拡大が出来る利点から、細かなところまで再現した図、バクテリアなどの構造、設計図が多くあり、pngやjpgにすれば多くの画像に10000px x 10000px程度の解像力が必要となってきますし、再利用が出来なくなってきます(我々の利用分には元データをおいておけば良いですが、中にはそのPDFから新たな資料を作成される方も居ます)。綺麗な資料である必要があるため、写真などはjpgで十分ですが、どちらかといえばベクトルデータのほうが多いものとなります。内容は内部資料のためあまり詮索しないで頂きますとありがたいです。
Lhankor_Mhy

2018/02/06 03:34

なるほど、「パソコンに疎い方々」がGoogleAppsやモバイル環境で開く、みたいな話ですか……。> Acrobat Readerではない別のリーダーを使っている
退会済みユーザー

退会済みユーザー

2018/02/06 03:36

ですね、素直にAdobeReader使えばいいのに、と内心思いはしますが、MS OfficeではないOfficeが標準でついていたりするのと同じように、買った時点でついているリーダーがあったりするようです。
KojiDoi

2018/02/06 03:39

どうしてもベクトルデータが必要ということは理解しました。そういう要件を明らかにしたかっただけで、内部資料を詮索しているなどと受け取られたのは非常に不本意です。
退会済みユーザー

退会済みユーザー

2018/02/06 03:42

KojiDoi さん。不快にさせてしまい申し訳ありません。謝罪いたします。
defghi1977

2018/02/06 03:42

どのみち「パソコンに疎い人がPDFを使いこなせるはずがない」と割り切り, 推奨環境を提示した上でその決められた環境での操作マニュアルを提示するのが最善かとおもいます. 「あらゆる環境であらゆるスキルの人がストレスなくPDFを扱える」ために検証コストが掛かり過ぎて, 結局紙で配ったほうが安上がりとなったら本末転倒ですし.
退会済みユーザー

退会済みユーザー

2018/02/06 03:44

defさん。そうなんです。しかし、なんとかしてくれ、という要望が消されることがなく、お金は出していただいているので試行錯誤を継続している状況です。最悪は閲覧専用ソフトの開発に至るのではとも言われていますね。笑
退会済みユーザー

退会済みユーザー

2018/02/06 03:47

皆様大変申し訳ありません、解決は困難と判断し、このあたりで応対を停めたいと思います。ご相談に対応いただきましてありがとうございました。
guest

回答3

0

「質問への追記・修正、ベストアンサー選択の依頼」欄でのコメントのやり取りを見ましたが、典型的な炎上案件ですね^^;

目的をしっかり整理したほうが良いです。

・紙で配布していたものを、PDFで配布する試み

これは何らかの目的に対しての手段だと思います。
例えば

・配布コストの低減
・閲覧性の向上
・検索性の向上
・図表の拡大への対応

等が、考えられますが、まずそのあたりを整理して、必要外のモノは後回しにすることを検討するのが、プロジェクトを適切にクローズするために必要な処置です。
「iframe等でPDFを表示、目次中をクリックしたら該当のページを開く」とか、多分「目的のために、pdf 化を選び、pdf 化をしたために、目的外の挙動を強要されている」状態だと思います。

ダウンロードした pdf ファイルを開かせる「標準手順」を作成するってのが良いか気がします。

・pdf ファイルのダウンロード方法
・AcrobatReader のインストール方法
・AcrobatReader で、ダウンロードした pdf を開く方法
・AcrobatReader の使い方

このあたりのマニュアルを揃えて、完了!って感じでどうでしょう?

投稿2018/02/06 04:35

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/06 04:42 編集

質問内容に対するものではなく、業務方針を変更するのは回答にはなっておらず、マニュアルや推薦環境は既に用意しております。
guest

0

ベストアンサー

目的の解決は、いたちごっこのため、解決は不可能である、と判断いたしました。
また、HTMLにてPDFの目次・リンク付け対応は出来ないものと判断いたしました。

投稿2018/02/06 04:39

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

html

1 <a href="name.pdf?p1#page=1" target="pdf">1</a><br /> 2 <a href="name.pdf?p10#page=10" target="pdf">10</a><br /> 3 <a href="name.pdf?p20#page=20" target="pdf">20</a><br /> 4 <a href="name.pdf?p30#page=30" target="pdf">30</a><br />

このようにするとキャッシュがクリアされるので目的の動作を達成できるのではないでしょうか。

投稿2018/02/06 03:24

naga3

総合スコア1293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/06 03:52

ありがとう御座います。 試してみたところ、確かに目的の動作にはなるのですが、Javascriptでabout:blankを入れた例と同じように、IEですとAdobeReaderが再起動を繰り返してしまいますため、解決、という形には至りませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問