結構古いサイトに対する追加改修で、リアルタイムで変動するデータを折線グラフ化して見せたいという要望がありました
とりあえずJQueryのライブラリflotを使って実現
https://www.flotcharts.org/
ただし、一部ユーザがガラケーで、そのユーザ向けにどうしても対応したいとの相談。
今更ガラケー対応ですか？と思いつつ、お金をいただけるのであれば調べましょう
まずガラケーなのでJQueryはまともに動かない
なのでグラフを画像化して表示すればよさそうなことはすぐに思いついたが、個人ごとにグラフデータが異なる仕様。しかも結構リアルタイムなグラフ情報が欲しいのです。
調べた挙句PhantomJSのスクリーンショット機能を使ってグラフをＰＮＧ画像にすることで対応した
PhantomJSというのはJSで動くスクリプトブラウザです。
http://phantomjs.org/
このブラウザ経由させるとアクセスしたページを画像に変換できるので、flotで描画されたグラフをＰＮＧ画像にしてやることで解決
つまりどうゆうことかと言うと、
１・ガラケーがPHPページにアクセス
２・PHPがサーバ内部でPhantomJSをキック
３・PhantomJSがflotのグラフページにアクセス
４・グラフ画像生成
５・ガラケー向けのＨＴＭＬレスポンスに生成グラフ画像のイメージタグを記載
但し画質は悪く、一部ＡＵの端末でPNGが使えなかったので、GIF画像でも描画することにしたが、GIFはさらに画質が悪いというスパイラルに。
お客様と相談した結果、折線グラフを超シンプルにすることで対応
こんな感じ（本物は貼れないのでイメージ図です）
