トップ > PDF > PDFをGoogleドキュメントビューアで開く

PDFをGoogleドキュメントビューアで開く

PDF





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>

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('&nbsp;<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>このページは、ｊQueryを使って、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>
TOP