とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

紙面ビューアーに使える。canvasの描画処理が簡単にできるJSパッケージ「JimmyJS」

紙面ビューアーに使える。canvasの描画処理が簡単にできるJSパッケージ「JimmyJS」

新聞や雑誌など

紙媒体のメディアを

webサイトに転用したいとか

画像を公開したいけど

大人の事情で見せたくない部分がある

とかそういったときに使えそうなJSパッケージを

ご紹介します。

 

デモをみるのが早いのでまずはデモから。

https://demo-laravel52.capilano-fw.com/jimmy

 

いろいろな描写が可能です。

  • arrow ・・・ 矢印
  • line ・・・ 線
  • lineWithDot ・・・ ●がくっついた線
  • strokeOval ・・・ 線の楕円形
  • fillOval ・・・ 塗りつぶされた楕円形
  • strokeCircle ・・・ 線の円
  • fillCircle ・・・ 塗りつぶされた円
  • strokeRect ・・・ 線の四角形
  • fillRect ・・・ 塗りつぶされた四角形
  • strokeText ・・・ 線のテキスト
  • fillText ・・・ 塗りつぶされたテキスト

これらに

  • 太さ
  • 背景
  • フォント

を描写することができて、さらに

  • 元に戻す
  • やり直す
  • クリアする

という処理が可能。

canvasで画像になにかを描写させたい

場合のニーズが全部つまったようなJSです。

 

詳しくは公式のブログがありましたので

参考にしてもらればと思います。

Canvas を楽に管理できる JavaScript パッケージ「JimmyJS」を公開! – console dot log

 

使いドコロがわからん、と

思うかもしれませんが、

たとえば新聞社やメディアに

こういう機能を実装して、

紙面ビューワーでも運用しませんか、

という提案はありだとおもいます。

 

紙面ビューアーは

大人の事情で広告を非表示に

する必要があったりするからです。

スポンサーとの契約上、紙面をwebに

掲載するのはNGだからですね。

そういう場合は、広告部分を黒く塗りつぶしたり

ぼかしをかけたりします。

 

下記の画像は、日経の紙面ビューアーですが、

広告部分にぼかしが入っています。

まさにこれですね。ぼかしではなく

矩形での塗りつぶしでも運用できればいい。

 

日経の紙面ビューアー

日経の紙面ビューアー

 

ということで、

いま現在実際にプロジェクトで

動いている案件があり、紙面ビューアー

を実現したいのでこのJSを参考に

実装してみようかなと思っています。

 

GitHub - SUKOHI/JimmyJS: A JavaScript package for HTML5 canvas