現在、mixiアプリに挑戦中です。ネットの情報を印刷してサンプルコードを読みながら作ってます。至ってシンプルなアプリケーションながら、面白いんじゃないかな~と思って作ってます。アイデアはマイミクにしか公表してないんですが(ソーシャルアプリなので、テストユーザを募集するために説明)、出来上がったらまたここでも発表しようと思います。
最初は外部サーバと連携した作りにしようと思って、Ruby & MySQLでゴニョゴニョとやってみようとしたのですが、Ruby/MySQLが使いにくかったのと(Ruby勉強始めたばっかりであんまりわかってないというのが原因であるとは思うが)、外部に頻繁にアクセスするとパフォーマンスが気になったので、javascriptオンリーで作成中です。javascriptはライブラリ使ってます。例によってprototype.js。
グラフを書くためのjavascriptライブラリとしてhtml5.jpのグラフライブラリを使うことにしました。
http://www.html5.jp/library/graph_circle.html
canvasタグを使ってるので、IEでは動かないのですが、ExplorerCanvasを使えばIEでも動くようになるということだったのでそれも読み込ませるようにしてみました。にもかかわらず!IEだとうまく動かなかったのです。
すでにjsライブラリ群は読み込み済みとして… <div id="main"></div> <script type="text/javascript"> var output = []; output.push('<div><canvas id="graph" width="400" height="300"></canvas></div>'); $('main').update(output.join('')); var cg = new html5jp.graph.circle("graph"); if( ! cg ) { return; } var items = [['typeA', 10], ['typeB', 10], ['typeC', 10], ['typeD', 10], ['typeE', 10], ['typeF', 10], ['typeG', 10]]; cg.draw(items); </script>
firefox, chromeだとグラフが出たのですが、IEだとダメでした。数時間悩みましたが、原因がわかりました。
canvasタグはjavascriptで動的に追加してはいけませんでした。
IEだとcanvasタグは使えないので、ExplorerCanvasがcanvasタグを見つけてIEで使える形式に直してくれるということなのですが、これはページを表示した時点でしか動作しないため、最初からcanvasタグが必要であるということでした。えらい時間がかかりましたが、直すことができてよかったです。