自分の為の技術メモです。普通の方は特に読む必要ないです。
リアルタイムで変動するデータをグラフ化してスマフォから見たいという案件。
JQueryのライブラリflotを使って実現 https://www.flotcharts.org/
一部ユーザがガラケーで、そいつらにどうしても対応したいと言い出した。ガラケーなのでJQueryは動かない。さてどうしよう！
グラフを画像化して表示すればよさそうなことはすぐに思いついたが、個人ごとにグラフデータが異なるんだよね。しかも結構リアルタイムな情報が欲しい。
調べた挙句PhantomJSのスクリーンショット機能を使ってグラフをＰＮＧ画像にすることで対応できそう。
PhantomJSというのはJSで動くブラウザです。http://phantomjs.org/
エンジンはサファリと同じらしい。このブラウザはアクセスしたページイメージを画像に変換できるので、flotで描画されたグラフをＰＮＧ画像にしてやることで解決
ページアクセス＞PhantomJSをキック＞グラフ画像を生成＞ＨＴＭＬページをレンダリング
但し画質は悪い。一部ＡＵの端末でＰＮＧが使えなかったので、ＧＩＦ画像でも描画することにしたが、ＧＩＦはさらに画質が悪い。
画質が悪いというか、でかいグラフを無理やりガラケーの画面サイズに縮小したので罫線とか、タイトルとか数値とかがまったくつぶれて見える。
なのでスマフォ向けのグラフをそのまま変換するのではなくて、ガラケー向けに線だけの超超シンプルグラフを作成し、そいつを読み込むことにする。
タイトルとか数値部分はガラケーのＨＴＭＬページレンダリング側で表示
グラフ自体の情報量が少ないので、マイナス値になったらグラフの線色を変えたりとか、シンプルなくせに意外にめんどくさい対応をした。
という感じだが、いいかげんガラケー向けの対応ってやめたい。