pukiwikiプラグイン/mpo

2018-02-27 (火) 21:25:04 (541d)
お名前:

表記、そんな感じのものを作ったので、一応公開しておきます。

プラグイン概要

3D立体視用画像フォーマット(MPO) の画像ファイルを表示するためのプラグインです。
AZOさんの公開している JavaScript:「azo_mpo.js」を利用しています。
こちら→ http://domisan.sakura.ne.jp/article/mpo/mpo.html

残念ながら、mpo 形式はいまだ一般的とは言えないため、このプラグインを使用するためにはサーバや pukiwiki 自体に多少の修正が必要なケースがあります。

※azo_mpo.js は、IE11ではうまく動作していないようです。

インストール方法

  1. 上記、AZOさんのサイトにある azo_mpo.js をダウンロードし、pukiwiki のルートディレクトリ(pukiwiki.ini.phpのあるディレクトリ)においてください。
  2. 本ページに添付されている下記ファイルをダウンロードし、pukiwiki の pluginフォルダに「mpo.inc.php」の名前で保存してください。
  3. mpo ファイルを利用できるようにするために、pukiwiki 自体を一部修整します。
    1. pukiwiki の mime設定ページ:「:config/plugin/attach/mime-type」を開き、そこに mpo を追加します。
      image/mpo|mpo|mpo 画像
      • これをしないと、mpoファイルをアップロードできません。
    2. plugin ディレクトリにある ref プラグインで定義されている PLUGIN_REF_IMAGE に mpo を追加します。
      元 :define('PLUGIN_REF_IMAGE', '/\.(gif|png|jpe?g|swf)$/i');
      修正:define('PLUGIN_REF_IMAGE', '/\.(gif|png|jpe?g|swf|mpo)$/i');
      • これをしないと、プラグインを使っても画像が表示されません(refプラグインが画像を取得しません)
  4. 必要に応じて、attach プラグインでの添付可能サイズを修正してください。
    デフォルトの1MBだと、Nintendo3DSの画像はぎりぎりアップロードできますが、FUJI Filmの 3D REAL系ではサイズ不足になります。

上記で pukiwiki 自体の設定は完了です。

  1. 必要に応じてサーバ側の mime設定も変更してください。
    設定方法はサーバによって異なるため、詳細割愛します。
    • 設定していないと、プラグインを使っても画像が表示されないことがあります (mpoダウンロードが httpの404エラーになる場合があります)

使い方

表示したいmpoファイルをpukiwiki の添付機能で添付してください。 その添付ファイルのあるページに、mpo プラグインを記載してください。

mpoプラグインでは3つの動作モードがあります。

  1. 平行/交差法形式での表示
    • この場合のパラメータは以下の通りです。
      #mpo(fix,<file name>,<width>,<mode>)
  2. 2画像アニメ方式での表示
    • この場合のパラメータは以下の通りです。
      #mpo(anime,<file name>,<width>,<height>,<diff>,<speed>,<smoothing>)
  3. 上記2方式の併用
    初期状態は「平行法」表示。表示されているボタンを押すことで「平行・交差」⇔「アニメ」が切り替わります。
    • この場合のパラメータは以下の通りです。
      #mpo(,<file name>,<width>,<height>,<diff>,<speed>,<smoothing>)

パラメータ詳細

  • 先頭パラメータ(fix/anime/other)
    • 動作モード。fix,anime以外の値は何を入れても同じです。
  • <file name>
    • 表示対象のファイル名。当該ページに添付されている mpo ファイル名を指定すること。

これ以降のパラメータは省略可能です。

  • <width>
    • 画像表示幅。省略時は「240」扱いです。
      • 平行/交差法では「片目分の画像」の表示幅です。
        そのため、実際の画面上ではこれの2倍+αの幅をとります。
      • アニメ方式では、単純表示幅です。
        実際には、これに後述の視差情報による多少の減少が起こります。
  • <height>。省略時は「180」扱いです。
    • 画像の表示高さ。
      平行/交差法では指定できません。
  • <mode>
    • 初期表示時の、平行/交差法の指定。
      trueなら交差法、それ以外なら平行法が初期状態です。省略時は「平行法」。
  • <diff>
    • アニメ表示時の、2枚の画像の視差情報。
      マイナス〜0〜プラスの任意整数値。省略すると「0」。
      • これが相応の値になっていないと、アニメ時の画像が「ブレ」てしまいます。
        うまく表示できるように適時修正してください。
  • <speed>
    • アニメ表示時の切り替え速度(msec)。省略すると「300(msec)」。
  • <smoothing>
    • アニメ表示時のスムージングの有効(true)・無効(false)。省略するとfalse。

実施例

#mpo(div,DSCF1756.MPO,266,200,7)

技術的な話。

  • 基本的に、指定されたパラメータに応じて azo_mpo.js のパラメータをはめ込んでいるだけです。
    • azo_mpo.js に渡す「mpoファイル」では、refプラグインを利用しています。
      pukiwikiでは添付ファイルを「拡張子なしのファイル」として保存しており、いくつかのサーバではそれを直接ダウンロードできないためです。
  • 「2方式併用」の際には、2つの div 要素に「平行・交差」と「アニメ」をそれぞれセットし、操作に応じて表示・非表示切り替えています。
    • 1stリリースでは「ダブルクリック」で切り替えでしたが、Ver0.3以降はボタンによる切り替えに変更しました。
      スマートフォンではダブルクリック操作ができない(ダブルタップを変倍扱いにしているなど)ケースがあるためです。

コメント

ご意見などがあれば。


お名前:

お名前:


添付ファイル: filempo.inc.php_0.3 38件 [詳細] fileDSCF1756.MPO 37件 [詳細] filempo.inc.php 29件 [詳細]