ウェブベースのドキュメントビューワー「FlexPaper」の実装メモ

とある案件で使用した「FlexPaper」の導入備忘録。
特に難しいことはしないんですが、日本語ドキュメントが皆無に等しいので書いておきます。
※紹介するのは、Flash Version(1.4.5)での実装方法です。

FlexPaperをダウンロード

まずはFlexPaperをダウンロードします(Latest Stable Releaseの「1.4.5 Flash Version」)。

zipファイルを解凍すると色々同梱されてます。
この中で実際に使用するファイルは、以下の2つになります。

  • flexpaper_flash.js
  • FlexPaperViewer.swf

jQueryとSWFObjectはGoogle Libraries APIから読み込みます。
※詳細は省きますが、SWFObjectよりもjQuery SWFObjectを推奨します。

HTML

JavaScriptの読み込み

  • src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"
  • src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject_src.js"
  • src="pathto/flexpaper_flash.js"

flexpaper_flash.jsは、共有フォルダなどからの読み込みでも大丈夫です。
環境に合わせて「pathto」部分を書き換えましょう。

ビューワーのHTML(サンプル)

<div id="viewer">
  <div id="viewerPlaceHolder">
    <noscript>
    <!-- JavaScriptオフ環境への文言など -->
    </noscript>
  </div>
  <script type="text/javascript">
    // ビューワーのJavaScriptコード(次項で解説)
  </script>
</div>

JavaScript

ビューワーのJavaScriptコード

<script type="text/javascript">
/* <![CDATA[ */
var fp = new FlexPaperViewer(
       
       // FlexPaperViewer.swfへのパス(拡張子「.swf」は記述しません)
       'pathto/FlexPaperViewer',
       
       // ビューワーの表示エリアのidを指定
       'viewerPlaceHolder', { config : {
       
       // 表示させるswfファイルへのパス(私は「./docs/」としました)
       SwfFile : escape('pathto/paper.swf'),
       
       // オプション
       Scale : 0.6,
       ZoomTransition : 'easeOut',
       ZoomTime : 0.5,
       ZoomInterval : 0.6,
       FitPageOnLoad : true,
       FitWidthOnLoad : false,
       PrintEnabled : true,
       FullScreenAsMaxWindow : false,
       ProgressiveLoading : false,
       MinZoomSize : 0.2,
       MaxZoomSize : 5,
       SearchMatchAll : false,
       InitViewMode : 'Portrait',
       
       // FlexPaperViewerの各メニューの表示・非表示を制御
       ViewModeToolsVisible : true,
       ZoomToolsVisible : true,
       NavToolsVisible : true,
       CursorToolsVisible : true,
       SearchToolsVisible : true,
       
       // ※日本語(ja_JP)に変えないように
       localeChain: 'en_US'
       
       }});
/* ]]> */
</script>

localeChain: 'en_US'は、ビューワー(GPLライセンス版)のFlexPaperロゴクリックで表示されるダイヤログ内の言語設定。今のところ日本語は未対応のようです。
※「日本語環境でFlexPaperを使用できない」という意味ではないです。

flexpaper_flash.jsの編集

version: [10, 0],
expressInstall: "js/expressinstall.swf"

23~24行目にFlash Playerのバージョンとexpressinstall.swfへのパスの記述があります。
ここも環境に合わせて書き換えました。

FlexPaper – ExamplesではHTML5版(Beta)なども紹介されています。
導入するサイトは稀かもしれませんが、個人的にはFlexPaperの今後に注目しています。

記事が長くなったので、次回に続きます。
※詳しい仕様については、FlexPaperのサイトを参照ください。

Published:
Tag: