先週ご紹介したライブラリで色んなものを簡単にスクレイピングできるようになったので、
次は集めたデータをどうやって可視化しようかなと思ってました。
ことの発端は先週です。モバイルSEOのツールを高機能にしていくことになりまして、
簡単に高機能なものを作りたいと思ってました。
しかも、モバイルサイトのSEOをするという本当の意味の「モバイルSEO」だけじゃなくて、
モバイルSEOなだけにSEOする人がモバイルで、どこでもSEOをできるものを作りたいです。
SEOのベタな技術は結構色んなところに載ってますが、
技術はもとよりSEOツールは、おそらく企業秘密なのであまり良さげな情報がありません。
なので携帯で順位を確認したり、サイトの要素をチェックしたりそんなんができるやつを作ります。
ほんで前回が結構簡単に使えるものだったように、今回も誰でも簡単に作れるものがいいので、
その方向で考えると取得データを可視化するツールは、
Google Chart APIに行き着きました
このAPIはパラメータをくっつけてできたURLを「img」タグに入れるだけです。
すごい簡単
ただそのURLの作り方には２種類ありまして、
パラメータを自分で入れてURLを作る方法と、
PHPのラッパークラスが提供されているのでそれを利用する方法があります。
後者からいきましょう。
まずコチラのサイトのダウンロードから、
「gChart2.php」をダウンロードして下さい。
次に、ページトップのちょっと下の「code link」というところから、
「util.php」をコピーしてPHPファイルとして保存します。
ちなみに「util.php」は「gChart2.php」で読み込まれてるから必要なんです。
なかったらエラーでますよ。気をつけて下さい。
ほんでからこの２つをPHPから読み込めるところにおきます。
これ書いて下さい。
//置いてるとこまでのパスを書いて下さい
require_once "gChart2.php";
//インスタンス化
$piChart = new gPieChart;
//描画データの設定
$piChart->addDataSet(array(112,315,66,40));
//ラベルの設定
$piChart->valueLabels = array("first", "second", "third","fourth");
//色の設定
$piChart->dataColors = array("ff3344", "11ff11", "22aacc", "3333aa");
//URL取得
$url = $piChart->getUrl();
var_dump($url);exit;
中身を見てみると、
string(124) "http://chart.apis.google.com/chart?cht=p&chs=300x200&chd=t:112,315,66,40&chdl=first&chco=ff3344,11ff11,22aacc,3333aa&chl=first|second|third|fourth"
何かこんなん出てきませんでしたか？
これにそのままアクセスすればグラフでますし、
<img src=”[ココ]”>「ココ」にURLを入れれば画像として読み込めます。
出してみるとこんなんです。
簡単ですよね
「gPieChart」はこんな円グラフがかけるやつです。
あと折れ線グラフ(gLIneChart)とか棒グラフ(gBarChart)とかいろんなのが書けます。
ただ「gChart2.php」の中のクラスの数には限りがありますので、
どこまでできるか試してないですが、最終的にはできることが限られてきます。
そこですべての機能を使いたいという人のために、１つ目の方法が存在するのです。
自力でパラメータくっつけていきます
ではこのページに目を通して下さい。
下まで長いページですが当然下まで全部違うことが書いてます。
それだけパラメータに指定できる値が多いってことです！！
なんせ国にまで色塗って表示したりできますもんね。
もうここまでできたらチャートの域を超えて塗り絵ですね。
遊べます。自由です。
適当にブワーッと放り込んでみたらこんなんでてきました。
http://chart.apis.google.com/chart?cht=lc&chd=t:100,82,91,64,52,31,36,1&chs=450x300&chxt=x,y&chf=bg,s,efefef&chl=2008/9|2008/10|2008/11|2008/12|2009/1|2009/2|2009/3|2009/4&chg=4,30&chf=bg,s,efefef
おーなんかそれっぽいですなー！
めちゃくちゃパラメータの種類が多いのでまだ全部見ていませんが、
何かすごいものができそうです。と言ってもチャート界の中ではすごいという意味です。
そんなにチャートにこだわりなく使うなら、
「gChart2.php」で紹介されている方法で十分使えます。
こだわってすごいかっこいいチャートを作るなら自力でパラメータを作る方がいいでしょう。
僕はもうどんなのを作ろうかワクワクしてしまいます！
最終的に携帯で見る場合「img」にほりこんで「width」を240にしておけば、
大体は横幅MAXで気持ちよくみれると思います。
また気になる人は、使う機種の横幅データをとってきて指定して下さい。
携帯で日々見れたら本当の意味でのモバイルSEOができますよ。
最終的にツールに利用するパラメータが決まったら、
パラメータキーは固定で値部分だけを変数にするなどして、
常に新しいデータがグラフ更新されるようにカスタマイズしていきましょう！
さぁどんどんツールがパワーアップしてきましたよ！
先週からここまでをおさらいすると、まずhtmlSQLを使って簡単にネット上のデータを取得します。
そして取得したデータをそれっぽくするために、Google Chart APIを使って可視化するということでしたね！
可視化するとちょっとこぎれいになるのでテンションあがりますもんね。
みなさんもGoogle Chart APIを使って日々のデータを可視化してみましょう！
