PDFをGoogleドキュメントビューアで開く
PDF形式のファイルタイプは、インターネットよりも、印刷の為の原稿の受け渡しや、図面のやり取りなどに、頻繁に利用されるファイル形式です。
作成するのが簡単な為に、「html初心者の人には、PDFを勧める」人もおり、企業ホームページなどの、決算報告や、カタログの配布などに使われています。
常に気になるのですが、実際にPDFのリンクを開くと、壊れていたりするとクラッシュしてみたり、非常に大きなサイズのものが、リンクされていたり「クリックして後悔し」「しばらく経つとまた、気になりだす」いつもこの繰り返しになってしまう。
Adobeのプログラムを起動せずに、シンプルなgoogleのPDFビューアで開く方法は、グリースモンキーやプラグインなどで、閲覧者の人の工夫として普及している様子です。
インターネットのプレイヤー側からも、リンクに工夫を加えておけば、今の、PDFが立ち上がるまでは、操作ができないという「やっちまったなぁ」感を軽減できるので、「あると思います」と発言してみることにしました。
アドビのPDFを起動させずに、Googleのドキュメントビューアで開くように、リンクを記述する方法
http://docs.google.com/viewer?url=http://www.example.com/sample.pdf
とリンクすることができる模様
ただ、現実問題としてすでに存在するPDFのハイパーリンクをすべて書き換えるというのは、非効率なので、.htaccessを使ったリダイレクトのサンプルを書いてみました。
<IfModule mod_rewrite.c> RewriteEngine On # Set next line to your root RewriteBase / #URL rewriting. RewriteRule ^(.*)\.pdf$ http://docs.google.com/viewer?url=http://www.example.com/$1.pdf [L] </IfModule>
- 読み込みの途中でも閉じることができる
Adobeプロダクトファミリーガイド 3M をPDFで開く- 読み込み終了するまで何もできない。
- apacheの分散設定を使わなくても、javascript等でもリダイレクトができます。
jQueryを使った、サンプルファイルもご覧ください。
jQuery Sample
jQuery を使ったりダイレクトのhtmlソース
<!DOCTYPE html> <head> <meta charset=utf-8> <title>PDFをグーグルビューアで表示する html5</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link ref="stylesheet" href="http://html5resetcss.googlecode.com/files/html5-reset-1.4.css" media="all"> <!--Include YUI Loader: --> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yuiloader/yuiloader-min.js"></script> <!--Use YUI Loader to bring in your other dependencies: --> <script type="text/javascript"> // Instantiate and configure YUI Loader: (function() { var loader = new YAHOO.util.YUILoader({ base: "", require: ["base","fonts","grids","reset"], loadOptional: false, combine: true, filter: "MIN", allowRollup: true, onSuccess: function() { } }); loader.insert(); })(); </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> jQuery(function() { jQuery('a[href$=".pdf"]').each(function(){ jQuery(this).after(' <a target="_blank" href="http://docs.google.com/viewer?url='+jQuery(this).attr("href")+'">google viewer</a>'); }); }); </script> <style type="text/css"> body{ margin:0; padding:0; border-top:12px ridge red; } header,article,section,nav { display:block; } div[class^=yui-t] { } nav { } .bar { height:50px; } .vevent { border:1px solid #ccc; margin:10px; padding:10px; } span.location { color:green; } .vevent:before { content:"example"; display:block; text-decoration:underline; font-weight:700; margin-bottom:10px; } ul.html5-element{ font-size:16px; } ul.html5-element .new{ color:#f55; } ul.html5-element .optional:after{ content:"optional elemant"; color:red; margin-left:1em; /*http://dev.w3.org/html5/html-author/#metadata-content*/ } table{width:100%;} td{border:0;} td a{text-decoration:none;} /** * nav link style * * * */ nav { width: 12em; padding: 0 0 1em 0; margin-bottom: 1em; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; /*background-color: #90bade;*/ color: #333; } nav ul { list-style:none; margin: 0; padding: 0; border:none; } nav li { border-bottom: 1px solid #90bade; margin: 0; list-style-type:none; } nav li a { display: block; padding: 5px 5px 5px 0.5em; color: blue; text-decoration: none; width: 100%; } html>body nav li a { width: auto; } nav li a:hover { background-color: #2586d7; color: #fff; } /*heading*/ header{ padding:10px 0; } h1{ font-family: times, Times New Roman, times-roman, georgia, serif; color: orange; margin: 0; font-size: 40px; line-height: 62px; padding: 0px 25px 0px 0px; letter-spacing: -2px; text-shadow: 2px 2px 0 #efefef; /*ie*/ filter: dropshadow(color=#374683,offX=0,offY=-2); /*ie*/ filter: dropshadow(color=#374683,offX=0,offY=-2); } h2{ font-family: times, Times New Roman, times-roman, georgia, serif; color: #444; margin: 0; font-size: 2em; line-height: 36px; padding: 0px 25px 0px 0px; letter-spacing: -2px; } </style> </head> <body> <!--[if lte IE 6]> <div class="ie6-warning"> <p>Warning, if you are viewing this website in Internet Explorer 6 or below some parts of it may not render correctly as built it using progressive enhancement. These issues will be corrected so that all content is viewable in due course.</p> </div> <![endif]--> <!-- t1-t6 column width--> <div class="yui-t2" id="doc2"> <header class="bar"> <h1>PDFをグーグルビューアで表示する</h1> </header> <article id="yui-main"> <section class="yui-b" > <h2>jQueryによるリダイレクト</h2> <div class="excerpt"> <p>htmlは、見る人を強制しないほうがいい</p> <p>このページは、jQueryを使って、PDF形式のファイルをリダイレクトして、グーグルビューアを使ってPDFファイルを表示させるサンプルです。</p> <p><a href="http://d.hatena.ne.jp/tenman/20091115/p1">PDFをGoogleドキュメントビューアで開く</a>というエントリの動作確認サンプルとして制作しました。</p> </div> <div class="vevent"> <a class="url" href="http://wwwimages.adobe.com/www.adobe.com/jp/joc/a9guide/pdf/acro9_brochure.pdf">test</a> </div> </section> </article> <nav class="yui-b" id="toc"> <h2>link</h2> <ul> <li> <a href="http://d.hatena.ne.jp/tenman/">ミショニポー</a> </li> </ul> </nav> <br style="clear:both;" /> </div> <footer class="bar"> <address>http://d.hatena.ne.jp/tenman/</address> </footer> </body> </html>