HTML5のPivotViewerをアップグレードしてみた

MSから出ていたSilverlightのPivotViewerという画像ビューワーがある。

 

http://www.blackcountrycaravans.co.uk/advanced-stocklist.aspx

こんな感じにかっこ良く動いてとても人気なのだが、Silverlight自体の存続が怪しいうえに、PivotViwerに関するMSのページも消えてしまった。使い続けるのはリスクが高い。

同じように困った人がいるようで、オープンソースのHTML5バージョンが存在する。

github.com

 

しかし、試してみたところ、このまま使うには問題があるようだった。

  1. フィルター領域のアイテム数表示がバグっている
  2. フィルターがたまに動かない
  3. 複数のビューアーを同一ブラウザに置けない
  4. サイズ変更がきかない
  5. このままだとWebサーバーが
  6. 状態のセーブ・ロードが実装されていない
  7. 重い

などなど。そこでいろいろ直してみたのがこちら。

 

https://bitbucket.org/yambe2002/html5-pivotviewer-specific-version

 

以下の修正・改善を入れた。

  1. SerializeViewerState()とSetViewerState()を実装
  2. 複数のビューアーが同時に存在できるように改善
  3. 64の画像を1つのPNGにパックするよう変更(パフォーマンスのため )
  4. JSON文字列、JSONへのパスどちらでも動く
  5. Windowリサイズに対して動的に縦横サイズを反映
  6. GridViewとGraphViewだけ
  7. ある程度古いIEでも動くように
  8. マージされてないプルリク上のFixを反映
  9. ライブラリ依存をある程度軽減