アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

企業向けアプリ開発に最適なチャートライブラリWijmoを試す

ハイブリッドアプリは幅広く使われていますが、特に需要が高いのが企業向けアプリです。マルチプラットフォームでの動作やWeb技術を使った素早い開発スタイルが好まれています。



そんな業務システムを作る上で欠かせないのがグラフやチャートではないでしょうか。膨大なデータも可視化することでトレンドを見いだしたり、経営判断をする上で大事な指標になることでしょう。



ということで今回は有償のチャート、UIライブラリであるWijmoをMonacaアプリ上で試したいと思います。



グラフの種類



まずは基本となる棒グラフです。グラフはSVGで描かれているので描画が高速です。





タップイベントによるドリルダウンに対応しており、インタラクティブなグラフが描けます。さらに描画はレスポンシブで縦向き、横向き両方に対応しています。





グラフをリアルタイムに切り替えることもできます。例えば円グラフに切り替えた場合。





複数の項目を並べることもできます。





別なグラフと組み合わせる表示もサポートしています。





グラフはSVGで表示されていますのでスタイルシートを使ってスタイルの変更ができます。





リアルタイムにデータを追加していくグラフも利用できます。





実際にデータが追加されている時にはこのように表示されます(画像をクリックすると再生されます)。監視系やストリーム系データを扱うときに重宝しそうです。





それ以外にも曲線グラフや、





エリアグラフもあります。





タブレットサイズにも対応



レスポンシブに対応しているということもあり、タブレットでの横型サイズでも問題ありません。SVGなのでサイズが大きくなってもグラフはぼやけることなく綺麗です。むしろ細部まで確認したい時にはタブレットサイズのが良さそうです。





曲線のエリアグラフも綺麗です。





プロットだけの描画。





このように2カラムとしてグラフとその説明を表示するのもタブレット向きです。





軸のラベルやヘッダー、フッターなどのラベルを変更するのも簡単です。





タップした時にイベントを実行できます。








多機能な分、読み込むファイルも多くなりますのでMonaca IDEでアップロードするよりもLocalKitで実行した方が良いかと思います。Wijmo自体はグラフだけでなく、UIライブラリも含んでいるのでExcelのような表計算表示であったり、日付時刻や色選択など多彩な入力コンポーネントが用意されています。Webブラウザで見られるデモが用意されていますので気になる方はチェックしてみてください。



WijmoとMonacaアプリの相性は良いように感じます。業務アプリで求められる機能が数多く提供されていますのでぜひ試してみてください。



HTML5/AngularJS/TypeScript対応JavaScriptライブラリ - Wijmo [ ウィジモ ] | グレープシティ株式会社

Google Chart Toolsを使ってサイトマップを描こう!

こんにちは!最近寒いですが、みなさんいかがお過ごしでしょうか。
クリスマスも近いということで、クリスマスツリー→ツリー→組織ツリー→組織図!エンジニアのクリスマスはツリーですね!
今回は、Org Chartを使ってサイトマップを描いてみたいと思います。

1. Google Chart Toolsって?


Googleが提供している、グラフや表を簡単に作成するAPIです。(Google Chart Tools
チャートギャラリーには、様々なグラフがギャラリー形式で並んでいます。
中には、メーターや世界地図、札束積み上げグラフ(?)など、ユニークなグラフもあります。
Code Playgroundでは、実際にコードを書いて即時実行しながら、様々なチャートで遊ぶことができます。

今回は、この中からOrg Chart(組織図)を使って、サイトマップを描いてみます。

2. サイトマップの作成


Org Chartでは、こんなかんじでサイトマップが描けます。



どんなコードかというと、こちら!



<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      var chart;
      // visualizationを読み込む
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
  
      // チャートの設定と描画
      function drawChart() {
        var data = new google.visualization.DataTable();  // ---(1-1)
        data.addColumn('string', 'Name');                 // ---(1-2)
        data.addColumn('string', 'Parent');               // ---(1-3)
        data.addColumn('string', 'ToolTip');              // ---(1-4)
  
        // ---(2)
        data.addRows([
          [{v:'top', f:'トップページ'}, '', 'tooltip'], // ---(3)
            [{v:'company', f:'会社紹介'}, 'top', ''],
              [{v:'company-index', f:'ご挨拶'}, 'company', ''],
              [{v:'about', f:'会社概要'}, 'company', ''],
            [{v:'system', f:'Webシステム構築'}, 'top', ''],
            [{v:'school', f:'PHPスクール'}, 'top', ''],
              [{v:'course', f:'各コースの概要と紹介'}, 'school', ''],
                [{v:'course1', f:'PHP基礎編'}, 'course', ''],
                [{v:'course2', f:'PHP中級実務編'}, 'course', ''],
                [{v:'orientation', f:'講座説明会(無料)のご案内'}, 'school', ''],
              [{v:'business', f:'製品/サービス'}, 'top', ''],
              [{v:'phppro', f:'PHPプロ!'}, 'business', ''],
              [{v:'phpbiz', f:'PHPbiz'}, 'business', ''],
        ]);
  
        // (4)
        chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml: true,} );
      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>


上記のコードが基本形です。まず、(1)についてご説明します。
(1-1)では、DataTableのインスタンスを作成します。
(1-2)〜(1-4)では、そのDataTableにカラムを3つ追加しています。
(1-4)でツールチップカラムを追加すると、そのノード(青いボックス)にマウスを合わせた時、ぺろっとツールチップが表示され、そこに表示する文字列を設定することができます。
データベースでいうと、addColumnでカラムを作るというイメージです。


var data = new google.visualization.DataTable();  // インスタンス作成
data.addColumn('string', 'Name');                 // はじめのカラム:ノードの名前
data.addColumn('string', 'Parent');               // 次のカラム:親ノードの名前
data.addColumn('string', 'ToolTip');              // 最後のカラム:ツールチップ


つまり、ノードと親ノードだけ最低でも設定すればよく、ツールチップは付加的なものということです。

次に、(2)でデータを追加していきます。
data.addRowsは、データベースでいうINSERTに近いイメージです。今回のソースでは、ノードの親子関係がわかりやすいようインデントをつけました。

(3)では、実際にデータを定義しています。
はじめの要素であるノードの名前をキーと値の配列にすることで、データのIDと表面に出る文字列を別々に定義できます。
2つめのParentカラムを空文字にすることで、親ノードがないもの(ルートノード)を定義できます。
3つめのToolTipには、マウスを合わせた際のツールチップで表示する文字列を定義します。



[{v:'top', f:'トップページ'}, '', 'tooltip'],  // ルートノード:一意なキーはtop,  表示するのは「トップページ」
  [{v:'company', f:'会社紹介'}, 'top', ''],    // キーcompany、「会社紹介」というノードは、親のキーが「top」


こうして、ノードにNameを振り、親ノードのNameをParentに指定していくことで、どんどんツリーをぶら下げていくことができます。
キーと表示する文字列が同じ場合は、下記のように簡単に書けます。



['top' '', 'tooltip'],  // ルートノード:キーはtopで、表示もtopとなる。
  ['company', 'top', ''],    // キーはcompanyで、親のキーはtop


最後に、(4)で、ドキュメント内のchar_divというDIVに、チャートを書き込みます。
描かれたOrg ChartはHTMLのTable要素で書かれています。



chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml: true,} );


これで、基本的なOrgChartを描くことができます!

3. もっと!Org Chart



これまでの説明では、Org Chartの基本的な部分について触れました。
ここからは、もっとOrgChartを豊かにするためのオプションについてご説明します。

CSSでデザインを変えたい



CSSでまとめてデザイン変更したいですね?調べておきました。



  .google-visualization-orgchart-node
    ノードに付いている基本的なクラス

  .google-visualization-orgchart-node-medium
    後述する、ノードの大きさによるクラス。
    small, medium, largeがあるので、末尾を変えてください。

  .google-visualization-orgchart-nodesel
    ノードをクリックしたときに適用されるクラス。



ノードのスタイルを変更したい



ノード全体のスタイルならばCSSで変更できますが、このノードだけ変更したい!ということはないでしょうか。
例えば、ルートノードだけピンクにしたい…とか。
そういった場合、クラスはどれも同じなため、CSSで「このノードだけ」「こうしたい」と変更するのはなかなか難しいですね。

これで、ノードを指定してスタイルを変更できます!



data.setRowProperty(2, 'style', 'background:#ffe5ff;border-color:#ff8989;');
data.setRowProperty(1, 'selectedStyle', 'background:#FF0000;');


第1引数は、ノードの番号です。これは、addRowsされた順番に0から振られている番号です。
つまり、先ほどのコードでいうと、0は「トップページ」、1は「会社紹介」、2は「ご挨拶」というような指定の方法です。

第2引数は「style」か、「selectedStyle」を指定します。
style はそのノードのスタイル、selectedStyleはクリックしたときのスタイルです。

第3引数には、インラインスタイルを入れてください。

このsetRowPropertyは、addRowsからdrawの間に入れてください。
データを定義する→データにスタイルを適用する→チャートを描くという流れだからです。

drawするときのプロパティを指定したい


drawするときに、プロパティを指定することができます。



chart.draw(data, {
  allowHtml: true,            // ノードのHTMLを許可するか。Default=false
  size: 'medium',             // セルの大きさ。Default='medium'
  allowCollapse: false,       // ダブルクリックしてどうなるか。Default=false
  nodeClass: 'asial',         // ノードのクラス名
  selectedNodeClass: 'asial'  // クリックされたとき(Selected)のクラス名
});


allowHtmlは、ノードの表示する文字列内にHTMLを含めてもよいか設定する項目です。
デフォルトはfalse(許可しない)ですが、trueにすると以下のように、HTMLを含めることができます。



[{v:'top', f:'<span style="color: #FF0000;">トップページ</span>'}, '', 'tooltip'],


sizeは、ノードのサイズです。small, medium, largeから選ぶことができます。デフォルトはmediumです。
ここで選択したノードのサイズが、クラス名としてTD要素に適用されます。(.google-visualization-orgchart-node-mediumなど)

allowCollapseは、ノードをダブルクリックしたときに表示・非表示アクションをさせるかどうか設定する項目です。
デフォルトはfalse(常に表示)で、ノードは全部展開されています。
trueにすると、子ノードがあるノードをダブルクリックしたときに、子ノードを隠すようなアクションをします。
もう一度ノードをダブルクリックすると子ノードを展開します。

nodeClassは、各ノードのクラス名です。
デフォルトのクラス名でなく、独自のクラスが使いたいときに利用します。
同様に、selectedNodeClassも、クリックされたときのクラス名となります。

おわりに



この他にもOrg Chartでは、イベントの取得や様々なメソッドなどが提供されています。
Chart ToolsにはOrg Chart以外にも魅力的なチャートがたくさんありますから、ぜひ使ってみてください!

GoogleChartAPIをPHPから簡単に使うライブラリ「GoogChart」を使ってみた

IDEA*IDEAさんでGoogleChartAPIをPHPから簡単に使えるライブラリ「GoogChart」が紹介されてたので試してみました。

まずはダウンロード
http://luddep.se/notebook/2008/04/charts_with_php_and_google_charts_api
上記URLの中ほどにあるDownloadリンクから本体のzipを入手します。


wget http://luddep.se/mint/pepper/tillkruess/downloads/tracker.php?uri=http%3A//luddep.se/files/googchart/googchart_0_1.zip


その後unzip


$ unzip googchart_0_1.zip 
Archive:  googchart_0_1.zip
  inflating: example.php             
  inflating: GoogChart.class.php     


解凍するとexample.phpとGoogChart.class.phpが出てきます。
あとはこのGoogChart.class.phpをincludeして使うだけのようです。
うーん、シンプル。

サンプルのグラフを一つ表示させてみます。



<?php
include_once('GoogChart.class.php');

$data = array(
  'IE7' => 22, 
  'IE6' => 30.7,
  'IE5' => 1.7,
  'Firefox' => 36.5,
  'Mozilla' => 1.1,
  'Safari' => 2,
  'Opera' => 1.4,
);

$chart = new googChart();
$chart->setChartAttrs( array(
  'type' => 'pie',
  'data' => $data,
  'size' => array( 300, 200 )
));
echo $chart;
?>




ほんとに簡単ですね。
簡単すぎて書くことがないです。

グラフの種類もオプションの一つとして指定するようになっているので、例えば type='pie' を type='line' に変えるだけで円グラフから線グラフに変換できちゃったりします。
setChartAttrs()にオプション配列を渡すことでグラフの形が決まります。
以下にそのオプションの一覧を載せておきます。

type
チャートの種類
pie, line, sparkline(XY軸が非表示のline), bar-horizontal, bar-vertical の5種類

title
チャートのタイトル文字列

data
グラフに使用するデータ配列

size
横幅、縦幅の指定 array(グラフの横幅, グラフの縦幅)

color
色の指定 array(1つ目のプロットの色, 2つ目のプロットの色, …)

fill
線グラフを塗りつぶすかどうかの色指定 array(1つ目の線グラフの塗りつぶし色、2つ目の・・・)
線グラフ以外に付けると不思議な感じになります

background
背景色 デフォルトは#ffffff

labelsxy
X軸Y軸のラベルを表示するかどうか
デフォルトはfalse

legend
凡例を表示するかどうか
デフォルトはtrue



使ってみた感想としてはとにかく簡単。
思った通りにコードを書けば、思った通りのグラフが表示されます。
円グラフ・棒グラフ・線グラフなどの単純なグラフであれば、これだけで十分そうです。

ただし、それ以外のグラフ形式や、細かい設定は全く対応していないので、凝ったグラフが描きたい人は他のライブラリを使ったほうがよさそうです。(JpGraphとかね!)
また、日本語の表示はソースコードをUTF8にすることである程度表示させることが出来ましたが、大半の文字は□に変わってしまいました。
この辺もまだまだ既存のグラフライブラリの方がよさそうです。(JpGra…

とりあえず手っ取り早く表示できればいいや、という人にはものすごくオススメなのでぜひ使ってみましょう。

アニメーションがカッコいいグラフ描画ライブラリ FusionCharts を使ってみた

こんにちは。松田です。
今日はグラフ描画ライブラリのFusionChartsを使ってみたいと思います。

FusionChartsのグラフ描画エンジンはFlashで出来ているので、Flashが得意なアニメーションなどを駆使して非常に見栄えのよいグラフを描画することができます。
また、データのXMLファイルをいじるだけで、PHPなどのプログラミングの知識がなくてもこれらのグラフを書くことができるのも特徴です。

下のリンクから「View」ボタンを押すとデモをみることができますが、かなりカッコいいグラフが表示できます。
http://www.fusioncharts.com/LiveDemos.asp?gMenuItemId=4

FusionChartsには有償版、有償版のトライアルバージョン、Free版などがありますが、今回はこのFree版であるFusionChartsFreeとPHPを使って棒グラフを作ってみたいと思います。
FusionChartsFreeは有償版と比べいくつかの機能が削られていますが、基本的な動作はほとんど変わりません。

下記に有償版とFree版の違いが乗っていますが、主にエフェクトの有無のようですね。
http://www.fusioncharts.com/free/Comparison.asp?gMenuItemId=6
Free版は非商用目的にのみ使うことができ、商用利用する際にはライセンスを購入する必要があります。


■ダウンロードとインストール

それではまずはライブラリをダウンロードしましょう。
以下のURLを開き、必要な項目を入力して「Download」ボタンを押します。
http://www.fusioncharts.com/free/Download.asp?gMenuItemId=5

その後ダウンロード用のアイコンが表示されるので、それをクリックしてFusionChartsFree.zipをダウンロードします。

これを解凍すると中には以下のファイルとフォルダが含まれています。


Charts/
Code/
Contents/
JSClass/
Index.html


このIndex.htmlはFusionChartsFreeのドキュメントになっていますが、今回ここで書くことはこれの触りの部分を軽くまとめただけなので、こっちも目を通しておくと良いでしょう。

今回はPHPで実装することにしますが、その際に必要になるファイルは以下のものだけです。


Charts/
Code/PHP/
JSClass/

これらをルートディレクトリ以下の好きな場所に設置してください。

■データXMLファイルの作成

FusionChartsはグラフのベースとなるswfファイルに、XML形式で記述したデータを読み込ませることでグラフを出力します。
まずはそのデータXMLを作成しましょう。

以下をData.xmlという名前で保存し、Dataディレクトリあたりに入れておきます。



<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
    <set name='Jan' value='462' color='AFD8F8' />
    <set name='Feb' value='857' color='F6BD0F' />
    <set name='Mar' value='671' color='8BBA00' />
    <set name='Apr' value='494' color='FF8E46' />
    <set name='May' value='761' color='008E8E' />
    <set name='Jun' value='960' color='D64646' />
    <set name='Jul' value='629' color='8E468E' />
    <set name='Aug' value='622' color='588526' />
    <set name='Sep' value='376' color='B3AA00' />
    <set name='Oct' value='494' color='008ED6' />
    <set name='Nov' value='761' color='9D080D' />
    <set name='Dec' value='960' color='A186BE' />
</graph>


■グラフ出力スクリプトの作成

次はHTML側を記述します。以下のファイルをgraph.phpとして保存します。


<?php
include("Code/PHP/Includes/FusionCharts.php");
?>
<HTML>
   <HEAD>
      <TITLE>FusionCharts Free - Simple Column 3D Chart</TITLE> 
   </HEAD>
   <BODY>
   <?php
      echo renderChartHTML("Charts/FCF-Column3D.swf", "Data/Data.xml", "", "myFirst", 600, 300); 
   ?>
   </BODY>
</HTML>


これで準備完了です。早速開いてみましょう。
これだけでうにょーんと伸びる棒グラフが完成しました。なかなかカッコいいです。


ここで使用したrenderChartHTML()関数がFlashの表示に必要なタグを勝手に生成してくれます。
引数は以下の通りです。


renderChartHTML($chartSWF, $strURL, $strXML, $chartId, $chartWidth, $chartHeight) 



$chartSWF・・・グラフの基本swfファイル
$strURL ・・・データXMLファイルの位置を指定する
$strXML ・・・データXMLファイルを文字列として渡す
$chartID ・・・出力されるグラフの<object>タグのid
$chartWidth・・・グラフの幅
$chartHeight・・・グラフの高さ


$strURLにはXMLデータを出力するURLを指定し、$strXMLではXMLを文字列で渡すことができます。この二つはどちらかが指定されていれば良いので、使用しないほうには空文字「""」を指定しておきます。

DBから値を読み込んでグラフを動的に生成する場合などは、DBのデータからXML形式の文字列を生成し、$strXMLに渡すことになります。


■あれ?JSClassは使わんの?

さて、これで基本的なグラフは作れたわけですが、解凍したファイルのJSClass/FusionCharts.js はまだ使っていません。
これはいったいなんに使うんでしょう。

どうやらFusionChartsでは、グラフの出力を

1. <Object>タグによるHTML出力
2. <script>タグによるJavaScript出力

の二つから選べるようです。
JSClass/FusionCharts.js はこの2つ目の方法で出力する場合に必要となります。

<script>タグで出力する場合のソースは以下のようになります。
<HEAD>内で JSClass/FusionCharts.js を読み込ませ、renderChartHTML()の代わりにrenderChart()を使います。



<?php
include("Code/PHP/Includes/FusionCharts.php");
?>
<HTML>
   <HEAD>
      <TITLE>FusionCharts Free - Simple Column 3D Chart</TITLE> 
      <SCRIPT LANGUAGE="Javascript" SRC="JSClass/FusionCharts.js"></SCRIPT>
   </HEAD>
   <BODY>
   <?php
      echo renderChart("Charts/FCF_Column3D.swf", "Data/Data.xml", "", "myFirst", 600, 300, false, false);
   ?>
   </BODY>
</HTML>



Objectタグで出せれば十分なのに、なんでわざわざ<script>タグで出す必要があるの?と思った人もいるでしょう。

上のグラフを見て気付いた人がいるかもしれませんが、グラフにカーソルを乗せるとブラウザによっては、
「クリックするとこのコントロールをアクティブにして使用します」
というホバーメッセージが現れ、一度グラフをクリックするまで正常に表示させることが出来ません。
わざわざ2種類の出力方法が用意されているのは、この問題を回避するためのようです。

そして下が実際の表示結果です。これならメッセージは出ないはずです。


Chart.



■グラフ表示のカスタマイズ

グラフの表示形式は、全てデータXMLの属性値を変化させることで実装します。
基本はすべてドキュメントに載っていてそちらのほうが分かりやすいので、その中から使いそうなものだけを軽く紹介します。

・特定のバーだけ非表示にする。
<set>タグのvalue属性を消す。

・X軸のラベルを90度傾ける
<graph>タグに「rotateNames='1'」属性を付ける

・X軸のラベルを消す
<set>タグに「showName='0'」を付ける

・バーにカーソルを乗せたときのホバーテキストを設定する
<set>タグに「hoverText='hogehoge'」を付ける

・バーに透過度をつける
<set>タグに「alpha='0-100の数値'」を付ける

ドキュメントでは、Index.htmlを開き左メニューの「Advanced Charting」を選べばカスタマイズ方法のページを見ることができます。



■日本語表示は?

データXMLの中身を日本語に書き換えただけでは日本語表示してくれません。
日本語を表示するためには、renderChart()、rendarChartHTML()の第2引数$strURLでXMLファイルを指定するのではなく、第3引数の$strXMLを使用しなければいけないようです。



<?php
include("Code/PHP/Includes/FusionCharts.php");
?>
<HTML>
   <HEAD>
      <TITLE>日本語表示</TITLE> 
      <SCRIPT LANGUAGE="Javascript" SRC="JSClass/FusionCharts.js"></SCRIPT>
   </HEAD>
   <BODY>
   <?php

$strXML = <<<STR
<graph caption='日本語を使用したグラフ' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
    <set name='1月' value='462' color='AFD8F8' />
    <set name='2月' value='857' color='F6BD0F' />
    <set name='3月' value='671' color='8BBA00' />
    <set name='4月' value='494' color='FF8E46' />
    <set name='5月' value='761' color='008E8E' />
    <set name='6月' value='960' color='D64646' />
    <set name='7月' value='629' color='8E468E' />
    <set name='8月' value='622' color='588526' />
    <set name='9月' value='376' color='B3AA00' />
    <set name='10月' value='494' color='008ED6' />
    <set name='11月' value='761' color='9D080D' />
    <set name='12月' value='960' color='A186BE' />
</graph>
STR;

// $strXML = file_get_contents('Data/Data.xml'); でもいけますよ

      echo renderChart("Charts/FCF_Column3D.swf", "", $strXML, "myFirst", 600, 300, false, false);
   ?>
   </BODY>
</HTML>

ということは日本語を使う場合は必ずスクリプトを通す必要があるのかな・・・?

ちなみにマルチバイト言語を使うと、X軸のラベル文字を回転させたりすることは出来ないようです。

■最後に

ウチでもグラフ関連製品のJpGraphJSChartを出してるのでそっちもヨロシクネ!


-----------------------------------------------------------------
2007/10/24 追記
はてぶコメントにてPHPタグが閉じてないぽとご指摘いただいたので修正しました。
2箇所ほど</BODY>タグ直前の?>が抜けていたようです。
ありがとうございました。

ブックマークレット+円グラフでサイト解析してみる

こんにちは。松田です。
最近巷では、MacのCM→べつやくメソッドの流れで円グラフがちょっとしたブームらしいですね。
というわけで今回はその流行に乗っかって、ブックマークレットを使ってJpGraphで円グラフを表示させてみたいとおもいます。表示させる内容はいろいろと試してみた結果、最も簡単な「サイト内で使用されているHTMLタグ数」にしてみたいと思います。

「どうせならリリースしたてのJSChart使えよ!」という声が社内から聞こえてきそうですが、ブックマークレットに<script>タグが絡んでくると面倒そうなのと、実際途中まで作ってみて頓挫した経験を踏まえて、今回は素直にJpGraphを使って作成します。

今回作成したブックマークレットは下のリンクです。右クリックしてお気に入りに保存して使用してみてください。
 タグ解析ブックマークレット 


このブックマークレットの処理のおおまかな流れは以下の通りです。

ブックマークレットでサイトのURLをスクリプトに投げる
       ↓
PHPスクリプトで指定されたURLからHTMLを取得
       ↓
サイトを構成するHTMLタグを調べてカウント
       ↓
JpGraphで解析結果を出力



まずはブックマークレットの基本から
ブックマークレットとは、お気に入り(ブックマーク)にURLの代わりにJavaScriptのコードを仕込んでおき、サイト内で動作する機能を実現するモノの総称です。はてぶで使われている「はてなブックマークに追加」のブックマークレットなどは使ったことがある人も多いと思います。
ただ、自分もブックマークレットを使ったことはあっても、作ったことは無かったので、基礎はほとんど下記のサイトで勉強しました。ブックマークレット作成の基礎が習得できます。必読です。
Bookmarklet - ブックマークレットを作成する際のポイント


簡単なブックマークレットを作ってみる
上記を読んだら、まずは基本中の基本、ブックマークレットで「Hello World!」を出してみたいと思います。
上のサイトからブックマークレットのサンプルをコピペしてきてそれを元に作ってみます。

・サンプルのコピペ


javascript:(
    function(){ // 無名ファンクションの定義開始
        var contents='out';
        function abc(){
            var contents='in';
            alert(contents)
        };
        abc();
        alert(contents);
    }
)(); // 無名ファンクションを呼び出す


コメントとfunction()内のいらない処理を消してきれいに・・・


javascript:(
    function(){
    }
)();

これがブックマークレットのテンプレートになりそうです。

ここに「Hello World!」を出力するalert()文を付けて・・・


javascript:(
    function(){
        alert('Hello World!');
    }
)();


最後に余計なスペースと改行を消して一行にまとめる。


javascript:(function(){alert('Hello World!');})();

完成!


上のスクリプトを適当な名前を付けてお気に入りに登録。
ここを右クリック→お気に入りに登録でも可

これで作成したお気に入りをクリックすれば、「Hello World!」が表示されるハズです。


表示された!



ブックマークレットで画像を表示させてみる
ここまで出来たら次のステップへ。
JpGraphを使用されたことのある方はご存知かもしれませんが、JpGraphではグラフを出力する際に、<img>タグを使用して出力します。
例:<img src="draw_graph.php" alt="graph" />

今回もこんな感じでJpGraphを使用することになるので、ひとまずブックマークレットで<img>タグを出力するところから作ってみます。グラフを出力する draw_graph.phpはまだ作成していないので、代わりにアシアルのサイトのトップにあるロゴ画像を表示させてみましょう。

<img src="http://www.asial.co.jp/css/header2.png" alt="asial_logo" />



JavaScriptでタグを出力する方法は、document.createElementでタグのエレメントを生成し、document.body.appendChild();でbodyに追加する方法と、document.body.innerHTML にタグの構文を直接追加する方法がありますが、innerHTMLでは埋め込んだJavaScriptが動作しないことがあるので、createElementを使用して作成します。

・createElementを使用して<img>タグを生成


javascript:(
    function(){
        var el=document.createElement('img'); 
        el.alt='graph';
        el.src='http://www.asial.co.jp/css/header2.png'; 
        document.body.appendChild(el); 
    }
)();


・一行にまとめる


javascript:(function(){var el=document.createElement('img');el.alt='graph';el.src='http://www.asial.co.jp/css/header2.png'; document.body.appendChild(el);})();


これを先ほどと同様にお気に入りに追加し、クリックしてみましょう。
ページの一番下にアシアルのロゴ画像が表示されます。
ここを右クリック→お気に入り追加でも可




この位置だと画像が見づらいので、無理やり場所を変えて一番上まで持ってきたいと思います。
表示位置を強制的に指定するために、<img>タグのstyle属性で、position='absolute'、left='10px'、top='10px'を指定し、サイトの左上(10px, 10px)の場所に画像を表示させます。


javascript:( function() { 
	var el=document.createElement('img'); 
	el.alt='graph'; 
	el.src='http://www.asial.co.jp/css/header2.png'; 
	el.style.position='absolute';
	el.style.left='10px';
	el.style.top='10px';
	document.body.appendChild(el); 
} )(); 


これでもう一度ブックマークレットを作成し、実行すると、ロゴ画像が左上のほうに表示されます。

出た出た。



JpGraphでグラフを生成
ブックマークレットの基本だけでだいぶ長くなってしまいましたが、次はロゴ画像の代わりにグラフが表示されるように作成します。
ここで、JpGraphでグラフを出力するスクリプト draw_graph.php を作りますが、今回はそのついでに、JpGraphでグラフを作成する最も簡単でスピーディーな方法をお教えします。


1.弊社サイト内のJpGraph サンプル集を開く

2.表示されたグラフの中から、作りたいグラフに最も近いものを選んでクリック

3.そのグラフのソースコードが表示されるのでそれをコピペ

ね、簡単でしょう?


今回は基本的な円グラフさえ出せればいいので次のサンプルを利用しました。




その前にブックマークレットからURLを渡せるように修正
次に、グラフに表示させる値をサイトのHTMLから作成しないといけないのですが、サイトのURLを受け取る仕組みを作っていなかったので、ブックマークレットをちょっと改良します。ここではdraw_graph.phpにGETでURLを渡すことにします。現在表示しているページのURLは、location.hrefで取得することができるので以下のようになります。


javascript:( function() {
    var el=document.createElement('img'); 
    el.alt='graph';
    el.src='http://www.asial.co.jp/blog/scripts/176/draw_graph.php?url='+location.href;
    el.style.position='absolute';
    el.style.left='10px';
    el.style.top='10px';
    document.body.appendChild(el); 
} )();




JpGraphでグラフを生成の続き
draw_graph.php内でURLを受け取り、file_get_contents()でHTMLを取得します。


<?php
$url = $_GET["url"];
$contents = file_get_contents($url);


これをpreg_match_allにかけてタグを取得します。こんな感じ?


preg_match_all("/<(.+?)>/i", $contents, $matches);

この処理だけだと、$matches[1]には、閉じタグ(</p>とか)や、タグの要素(class="page"とか)も全て取り込んでしまうので、それらは無視するようにうまいこと処理します。
あとはこれをJpGraphを使って出力するだけです。

・draw_graph.php


<?php
include ("/lib/jpgraph/src/jpgraph.php");
include ("/lib/jpgraph/src/jpgraph_pie.php");

$url = $_GET["url"];
$contents = file_get_contents($url);
preg_match_all("/<(.+?)>/i", $contents, $matches);

// うまいこと処理
$tag_list = array();
foreach ($matches[1] as $key => $value) {
  if (substr($value, 0, 1) != "/") {
    list($tag, $tmp) = explode(" ", $value);
    $tag_list[$tag]++;
  }
}

// タグの個数順にソート
$new_tag_list = array();
foreach ($tag_list as $tag => $value) {
  $new_tag_list[] = array("tag" => $tag, "value" => $value);
}
for($i = 0; $i < count($new_tag_list); $i++) {
  for($j = $i+1; $j < count($new_tag_list); $j++) {
    if ($new_tag_list[$i]["value"] < $new_tag_list[$j]["value"]) {
      $tmp = $new_tag_list[$i];
      $new_tag_list[$i] = $new_tag_list[$j];
      $new_tag_list[$j] = $tmp;
    }
  }
}

// 値取得
foreach ($new_tag_list as $data) {
  $tagname_list[] = $data["tag"];
  $value_list[] = $data["value"];
  $label_list[] = $data["tag"] . ":" . $data["value"];
}


$graph = new PieGraph(400,300);
$plot = new PiePlot($value_list);

$plot->SetLabels(array_reverse($label_list));
$plot->value->SetFont(FF_ARIAL,FS_NORMAL,9);
$plot->value->Show();

$graph->Add($plot);
$graph->Stroke();
?>


やった。完成。
これでブックマークレットをクリックするとそのサイトのタグ解析結果がグラフで表示されます。


完成版タグ解析ブックマークレット



javascript:(function() {var el=document.createElement('img');el.alt='graph';el.src='http://www.asial.co.jp/blog/scripts/176/draw_graph.php?url='+location.href;el.style.position='absolute';el.style.left='10px';el.style.top='10px';document.body.appendChild(el);})();


完成版タグ解析ブックマークレット:右クリック→お気に入り登録


・実行結果

どうやらうちのサイトは<a>タグと<div>タグが多いようです。
※ちょっぴり解析結果が怪しいです。解析スクリプト間違ってるかも・・・


本当はHTMLのテキストを形態素解析して使用されている単語のジャンルを分類し、その結果を円グラフに表示する、ってのを作りたかったんですが、形態素解析ソフトのインストールに失敗しまくり眠気もピークに達してきたのでここまでにします。↑はヒマを見つけてそのうち作ってみます。

それではおやすみなさい。。

グラフ作成Webサービス「JSChart」をリリースしました。

グラフ作成WebサービスJSChartをリリースしました。

このサービスは、ウェブページにタグを貼り付けるだけで簡単にグラフを表示することができます。


ログインして管理画面でグラフのカスタマイズやデータの入力(CSVアップロード)もできますが、
タグのURLにデータを渡してやる方法・サーバに置いてあるCSVファイルを解析してグラフを描画する方法もご用意してます。

ロゴが付きますが無料版もご用意しておりますのでお気軽にご利用下さい。
無料のWebサービスAPI版の仕様はこちら