• かちびと.net

    リンク先のPDFファイルを、Google Docs Viewerでその場で閲覧できる様にするjQueryプラグイン・gDocsViewerのご紹介です。通常のアンカーリンクを書くだけでその場でPDFを表示できるようにしてくれます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

リンク先のPDFファイルを、Google Docs Viewerでその場で閲覧できる様にするjQueryプラグイン・gDocsViewer

スポンサーリンク

使い方次第ではなかなか便利かも、と思った
のと諸事情でメモがてら記事にします。よく
あるPDFファイルへのリンクを、その場で
Google Docs Viewerで閲覧出来るように
するjQueryプラグイン・gDocsViewerです。
このままだとアレですが、工夫すれば結構
便利になりそう。

アンカータグだけ貼ればビューアが貼り付けられるのでソースもすっきりします。まぁあんまり使用頻度は無いかもですけど、PDFへの直接リンクはなかなか不評だったりするのでこういう手を使うのもありかなと思いました。まぁアイデア的なメモですね・・

gDocsViewer


普通にリンクしただけですが、このようにGoogle Docs ViewerでGoogleのSEOスターターガイドが貼り付けられています。


少し装飾された状態です。こちらもSEOスターターガイド。お前どんだけ始まりたいんだみたいな感じですみません。ほかに公開していいPDF知らないもので。

デモをご用意しました。ソースも合わせてご覧ください。

Demo※別窓

コードとマークアップ

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type="text/javascript" src="jquery.gdocsviewer.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
	$('a.embed').gdocsViewer({width: 600, height: 750});
	$('#embedURL').gdocsViewer();
});
/*]]>*/
</script>
 

本体とプラグインを読み込んでセレクタとかサイズとか決めます。

<a href="http://www.google.co.jp/intl/ja/webmasters/docs/search-engine-optimization-starter-guide-ja.pdf" class="embed">Google SEOスターターガイド</a>

マークアップは指定したセレクタにあわせてアンカータグをマークアップすればいいだけ。上記例は$(‘a.embed’)と書いたのでclassにembedが指定されています。

他にも応用できそうな仕様ですね・・ライセンスはMITとなっています。

Google Docs Viewer plugin for jQuery

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services