Lightbox風メディアビュアー”Fancybox”でPDFを表示する

マルチメディアギャラリーの中でLightboxのようなビュアーを組み込もうと思ったところ、PDFをどうしたものかなと。

PDFやSWF、youtubeなどに対応出来るLightboxライクなJavascriptとして、”Dumpbox“や”Fancybox“があります。

Dumpboxは、スタンドアロンなスクリプトで外部のライブラリを必要としないのですが、逆にJqueryに干渉することもあるっぽい…ようです?
後、個人的に見た目が派手すぎて気に食わなかったり(笑)

そんな理由で、今回はJqueryベースの”Fancybox“(v2.1.4)を使わせて頂く事にしました。

【設置方法】

解凍したら出てくる、”source”フォルダをfancybox等にリネームして、サーバーの適当な場所(この例ではjsフォルダの下)に置き、HTMLのheadタグ内で

<link rel="stylesheet" href="/js/fancybox/jquery.fancybox.css" type="text/css"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script src="/js/fancybox/jquery.fancybox.js" type="text/javascript"></script>

のように読み込ませます。

【基本的な使い方】

<a href=”hogehoge.jpg” class=”fancybox”>リンク用テキストorイメージ</a>

のようなタグをHTMLに書き置いて

<script type="text/javascript">
  $(document).ready(function($){
    $('a.fancybox').fancybox();
  });
</script>

でOKというお手軽仕様です。
後はブラウザ上でリンクを押すといい感じに表示してくれます。

【PDFを読ませる】
基本の例では、画像系ファイルしかビュアーが起動しません。
PDFに対応させるには一工夫要ります。
PDFなファイルの場合は別のCSSクラスを振って動作を分けるのが公式のサンプルにあるのですが……PG出力時に判定を書くのがめんどくさい(笑
ので、JS側で自動的にどうにかさせます。
いっそのこと、メディアファイルっぽいものはクラスを振らないでも全部ビュアーで見せることにします。

↓こんな感じ

<script type="text/javascript">
  $(document).ready(function($){
    $('a[href$=".jpg"] , a[href$=".gif"] , a[href$=".png"], .fancybox').fancybox();
    $('a[href$=".pdf"]').fancybox({
      autoSize: true,
      type:'iframe',
      iframe: {
        preload: false
      }
    });
  });
</script>

肝は    iframe: { preload: false } の記述です。
これが無いと、IEでPDFの読込が終わってくれたことを検知しないのか、何時までも読込画面のままになりました。

この例ではPDFの読込部分をiframeで記述してますがembedタグ(plugin読込)を使って書くことも出来ます。
↓こんな感じ

$('a[href$=".pdf"]').click( function(){
  $.fancybox({
    type: 'html',
    content: '<embed type="application/pdf" src="'+
      this.href +
      '#nameddest=self&amp;page=1&amp;view=fitH&amp;toolbar=1"' +
      ' type="application/pdf"' +
      ' height="' + Math.round( $(window).height() * 0.8 ) + '"' +
      ' width="' + Math.round( $(window).width() * 0.8 ) + '" />' +
      '<noembed>Can not load PDF</noembed>' ,
    beforeClose: function() {
      $(".fancybox-inner").unwrap();
    }
  });
  return false;
});

長いですね(^^;

iframeとembedどっちがいいかですが……
embedタグを使って書く場合、pluginがインストールされてない場合にインストール画面が表示されてしまったり、または真っ白な枠だけ出たりとよろしくないです。
iframeの場合、ブラウザ内で表示できる設定では無いときはPDFのダウンロード画面になります。

という理由で、私はiframeでの表示を採用しました。

私の作成したメディアギャラリープログラムにはPDFのサムネイル生成機能を付けてるので、サムネイルを並べた中からJPGでもPDFでも意識せずに閲覧できるギャラリーが作れました。

PHPカンファレンス関西2013

土曜にPHPカンファレンス関西2013にお邪魔してきました。
普段他の技術者の方の話を聞く機会が少ないので、かなりイイ刺激になりました。
お話下さった方々ありがとうございました。

これを機会に自分も色々してみたいなぁ…
と思い、取りあえず何かしらBlogでも書いていこうかなと。

…何書いたらいいかなぁ(苦笑
鯖ネタ(主にFreeBSD)は色々あるんですけど、コマンド手順ばっかりメモしてるから、そこの応答まで書かないと説明になりませんよね(笑
まぁ、とりあえずいいか。

ウィルスバスター

使っていたウィルスバスター2009の期限が切れたので、新しく2010に入れ直そうかと取りあえず体験版をDLしてきてインストーラーを起動してみると、何故かMS OfficeのインストールDiscが要求される。
??と思いつつDiscを出すのも手間だったのでキャンセルで逃げて続行したら、2009のアンインストール画面で処理が止まってしまう状況に。
仕方がないのでWindowsを再起動させて、もう一度最初からやり直し…
再びOfficeのDiscを要求させるので、今度はちゃんとDiscを挿入して続行すると、2009のアンインストールは正常に終わり、2010のインストール画面へ。

が、今度は2010のインストールで「迷惑メール対策ツールバー for Microsoft Outlookをインストールしています…」で画面が止まる。
Outlook Expressは普段使ってないとはいえ、一応設定はしてあるからなぁと思いつつも何度かリトライするもにっちもさっちもいかず…
しばらく考えた末に
「迷惑メール対策ツールバー for Microsoft Outlookをインストールしています…」
… Outlook Expressじゃなくて、Office付属の”Outlook”か!
起動時設定すらしてないから、プラグインが入れられずにこけてたのか……
そういうときは警告出してスキップできるようにしておいて下さいよ、TrendMicroさん。
一番最初の「OfficeのCDを要求される」が伏線になってたとは思わなかったよ(--;
(なんでOfficeのDiscが要求されたかは納得できたけど)