前回dojo.data.ItemFileWriteStoreを使って、JSONからデータを読み込みました。
実際これだけであればデータストアを使う意味はないのですが、ポイントは色々な形式を使えるということです。
ということで色々な形式から読み込んでみようと思います。
とりあえず適当にXMLファイルを作成。
https://www.ibm.com/developerworks/mydeveloperworks/blogs/pandrbox/entry/dojox_data_xmlstore_dijit_tree?lang=en
> こんな風に表示されました。
jsIdってどっから出てきた。
https://www.ibm.com/developerworks/wikis/pages/viewpage.action?pageId=126649096
> XmlStore はパラメータを設定することにより、トップレベルのデータ項目として返す要素（タグ）の名前や仮想的な属性を指定することができます。
うん、その具体的な指定方法がわからないわけだが。
dojo.dataオブジェクトを利用して共通処理を行うどころかdojo.dataオブジェクトに変換すること自体ができなかった。
そもそもdojox.data.XmlStoreの日本語情報が十数件しかひっかからない時点で挑んでみるのは無謀だったか。
残念。
実際これだけであればデータストアを使う意味はないのですが、ポイントは色々な形式を使えるということです。
ということで色々な形式から読み込んでみようと思います。
とりあえず適当にXMLファイルを作成。
<?xml version="1.0"?> <data> <items> <item> <name>Item 1</name> <value>9166.85</value> </item> <item> <name>Item 2</name> <value>9258.32</value> </item> <item> <name>Item 3</name> <value>9230.56</value> </item> <item> <name>Item 4</name> <value>9218.88</value> </item> <item> <name>Item 5</name> <value>9210.49</value> </item> </items> </data>で、これをパースするにはdojox.data.XmlStoreに引数を与えないといけないのですが、その書き方がわからん。
https://www.ibm.com/developerworks/mydeveloperworks/blogs/pandrbox/entry/dojox_data_xmlstore_dijit_tree?lang=en
> こんな風に表示されました。
jsIdってどっから出てきた。
https://www.ibm.com/developerworks/wikis/pages/viewpage.action?pageId=126649096
> XmlStore はパラメータを設定することにより、トップレベルのデータ項目として返す要素（タグ）の名前や仮想的な属性を指定することができます。
うん、その具体的な指定方法がわからないわけだが。
dojo.dataオブジェクトを利用して共通処理を行うどころかdojo.dataオブジェクトに変換すること自体ができなかった。
そもそもdojox.data.XmlStoreの日本語情報が十数件しかひっかからない時点で挑んでみるのは無謀だったか。
残念。
PR
前回の続き。
dojoによるグラフはこれまで配列を直接突っ込んでいましたが、dojo.dataオブジェクトを使用することができます。
dojox/data/配下には大量のデータAPIがあり、JSONやXMLやCSVやHTMLテーブルなどからデータを読み取ると全てdojo.dataオブジェクトとなり以後は統一的に扱えますよ、ということになるみたいです。
とりあえずサンプルで動作確認。
dojoによるグラフはこれまで配列を直接突っ込んでいましたが、dojo.dataオブジェクトを使用することができます。
dojox/data/配下には大量のデータAPIがあり、JSONやXMLやCSVやHTMLテーブルなどからデータを読み取ると全てdojo.dataオブジェクトとなり以後は統一的に扱えますよ、ということになるみたいです。
とりあえずサンプルで動作確認。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojox.charting.DataSeries");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.charting.Chart2D");
var drawChart = function(){
//JSONデータ
var jsonData = {
data:{items:[
{value:9166.85},
{value:9258.32},
{value:9230.56},
{value:9218.88},
{value:9210.49}
]}
};
//データを読み込む
var store = new dojo.data.ItemFileWriteStore(jsonData);
//折れ線グラフ
var myChart = new dojox.charting.Chart2D("myChart");
myChart.addPlot("default", {type: "Lines"});
//グラフに値追加はdojox.charting.DataSeriesを経由
myChart.addSeries("stockprice", new dojox.charting.DataSeries(store));
myChart.render();
}
//起動時実行
dojo.addOnLoad(drawChart);
</script>
</head>
<body class="claro">
<div id="myChart" style="width: 400px; height: 200px;"></div>
</body>
</html>
前回の続き。
今度は描画したグラフにイベントを設定します。
http://codezine.jp/article/detail/5572
マウスオーバーやクリックで別ページに移動などが行えるようです。
と思ったら使用法も出さずにすぐdojo.dataが出てきやがりました。
元々これがわからんかったからDojo道場始めたんだよなあ。
で、解説記事だとイベントとデータAPIが不可分なかんじに書かれているのですが、よく読んでみたら別に一緒に使わなければならないというわけではないようです。
ていうかconnectToPlot()の使い方が一切書いてないじゃない。
とりあえずdojo.dataはパスしてイベントだけ設定してみます。
まずはただの円グラフ。
今度は描画したグラフにイベントを設定します。
http://codezine.jp/article/detail/5572
マウスオーバーやクリックで別ページに移動などが行えるようです。
と思ったら使用法も出さずにすぐdojo.dataが出てきやがりました。
元々これがわからんかったからDojo道場始めたんだよなあ。
で、解説記事だとイベントとデータAPIが不可分なかんじに書かれているのですが、よく読んでみたら別に一緒に使わなければならないというわけではないようです。
ていうかconnectToPlot()の使い方が一切書いてないじゃない。
とりあえずdojo.dataはパスしてイベントだけ設定してみます。
まずはただの円グラフ。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.PurpleRain");
var drawChart = function(){
//折れ線グラフ
var myChart = new dojox.charting.Chart2D("myChart");
myChart.addPlot("default", {type: "Pie", startAngle:270});
//グラフに値を追加
var persentage1034 = [77.4, 7.7, 5.8, 4.0, 2.9, 1.9, 0.3];
myChart.addSeries("ハード別ソフト販売割合", persentage1034);
//テーマ
myChart.setTheme(dojox.charting.themes.PurpleRain);
//描画
myChart.render();
}
//起動時実行
dojo.addOnLoad(drawChart);
</script>
</head>
<body>
<div id="myChart" style="width: 300px; height: 300px;"></div>
</body>
</html>
前回の続き。
前回まではJavaScriptで完全にグラフを作成してから<div>に突っ込んでましたが、これとは別に、JavaScriptをほとんど書かないでいい使い方もあります。
HTMLに値を書いておいてそれを使ってグラフを作成、という方法です。
むしろ適当に属性を書いておくだけでdojoが勝手にグラフ化してしまいます。
HTMLを作成。
前回まではJavaScriptで完全にグラフを作成してから<div>に突っ込んでましたが、これとは別に、JavaScriptをほとんど書かないでいい使い方もあります。
HTMLに値を書いておいてそれを使ってグラフを作成、という方法です。
むしろ適当に属性を書いておくだけでdojoが勝手にグラフ化してしまいます。
HTMLを作成。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojox.charting.widget.Chart2D");
</script>
</head>
<body>
<div dojoType="dojox.charting.widget.Chart2D" id="myChart" style="width: 400px; height: 200px;">
<div class="plot" name="default" type="Lines" tension="3"></div>
<div class="series" name="2008年度売上高" stroke="{color: 'red', width: 2}"
data="13000, 13000, 13000, 15000, 16000, 17000, 27000, 30000, 38000, 38000, 25000, 23000"></div>
<div class="series" name="2009年度売上高" stroke="{color: 'green', width: 3}"
data="27000, 30000, 30000, 35000, 40000, 45000, 46000, 42000, 37000, 35000, 38000, 40000"></div>
<div class="axis" name="x" majorTickStep="1" natural="true"
labels="[{value: 1, text: '4月'}, {value: 2, text: '5月'}, {value: 3, text: '6月'},
{value: 4, text: '7月'}, {value: 5, text: '8月'}, {value: 6, text: '9月'},
{value: 7, text: '10月'}, {value: 8, text: '11月'}, {value: 9, text: '12月'},
{value: 10, text: '1月'}, {value: 11, text: '2月'}, {value: 12, text: '3月'}]"></div>
<div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true"></div>
</div>
</body>
</html>
前回の続き。
引き続きdojox.charting.Chart2Dを使います。
前回は単にグラフを出しただけですが、あれだと何のグラフだかわかりません。
ラベルやその他のプロパティを色々指定できるみたいなので試してみます。
まあほとんどサンプルで書かれてるやつそのまんまなのですが。
http://codezine.jp/article/detail/5547?p=3
http://codezine.jp/article/detail/5547?p=4
引き続きdojox.charting.Chart2Dを使います。
前回は単にグラフを出しただけですが、あれだと何のグラフだかわかりません。
ラベルやその他のプロパティを色々指定できるみたいなので試してみます。
まあほとんどサンプルで書かれてるやつそのまんまなのですが。
http://codezine.jp/article/detail/5547?p=3
http://codezine.jp/article/detail/5547?p=4
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.PurpleRain");
var drawChart = function(){
//Chart2Dオブジェクト
var myChart = new dojox.charting.Chart2D("myChart");
//折れ線グラフ
var revenues2008 = [13000, 13000, 13000, 15000, 16000, 17000, 27000, 30000, 38000, 38000, 25000, 23000];
var revenues2009 = [27000, 30000, 30000, 35000, 40000, 45000, 46000, 42000, 37000, 35000, 38000, 40000];
myChart.addPlot("default", {type: "Lines"});
myChart.addSeries("2008年度売上高", revenues2008);
myChart.addSeries("2009年度売上高", revenues2009);
//棒グラフ
var contracts2008 = [11, 12, 11, 20, 22, 20, 32, 30, 35, 30, 10, 5];
var contracts2009 = [20, 17, 21, 31, 41, 41, 31, 28, 21, 20, 32, 33];
myChart.addPlot("columns", {type: "ClusteredColumns", vAxis: "right", gap: 5});
myChart.addSeries("2008年度新規契約数", contracts2008, {plot: "columns"});
myChart.addSeries("2009年度新規契約数", contracts2009, {plot: "columns"});
//ラベル
var labels = [
{value: 1, text: "4月"}, {value: 2, text: "5月"},
{value: 3, text: "6月"}, {value: 4, text: "7月"},
{value: 5, text: "8月"}, {value: 6, text: "9月"},
{value: 7, text: "10月"}, {value: 8, text: "11月"},
{value: 9, text: "12月"}, {value: 10, text: "1月"},
{value: 11, text: "2月"}, {value: 12, text: "3月"}
];
myChart.addAxis("x", {majorTickStep: 1, natural: true, labels: labels});
myChart.addAxis("y", {vertical: true, fixUpper: "micro", includeZero: false});
myChart.addAxis("right", {vertical: true, leftBottom: false, fixUpper: "major", includeZero: true});
//プロット(格子)
myChart.addPlot("grid", {type: "Grid"});
//テーマ(色)
myChart.setTheme(dojox.charting.themes.PurpleRain);
// グラフを描画
myChart.render();
}
//起動時実行
dojo.addOnLoad(drawChart);
</script>
</head>
<body>
<div id="myChart" style="width: 400px; height: 200px;"></div>
</body>
</html>
「Dojo道場」～実用アプリ構築のためのベストプラクティス
http://codezine.jp/article/corner/397
dojo.dataについて調べていたのですがなんだかよくわかりませんでした。
なんかデータストアの共通インターフェイスっぽいというのはわかったんですが、値を取得とか加工とかしようとするとよくわからなくなってくる。
よくよく考えたてみたらそれ以前にJavaScriptの基礎知識自体あんまり持っていないことが判明したので、とりあえずこちらの記事に従って進めていってみようと思います。
未だにプロトタイプってのがわかんないんだよね。
まず記念すべき第一回は…「グラフを使いこなす（前編）」
http://codezine.jp/article/detail/5547
いきなりそんな高度っぽい内容で大丈夫なのか？
グラフの表示はdojox.chartingで行えるようです。
http://codezine.jp/article/detail/5547?p=2
見てのとおり棒グラフ、円グラフ、折れ線グラフなどの基本は揃っている上散布図やら円柱グラフまでだいたいのものは表現できるようです。
JpGraphなんていらなかったんや！
ありがたいことにサンプルファイルを用意してくれているのでダウンロードしてみました。
http://codezine.jp/article/detail/5547?p=3
まずはdojox.charting.Chart2Dを使用した折れ線グラフを再現してみます。
サンプルファイルchart1-3-1.htmlを表示してみると、Firefox、Chromeでは表示できるのに、IEでは「終了していない文字列型の定数です」とか言われてしまいました。
これはサーバがHTTPヘッダで文字コードを返していないときに発生することがあります。
ということでそこらへんを加味したHTMLがこんな。
http://codezine.jp/article/corner/397
dojo.dataについて調べていたのですがなんだかよくわかりませんでした。
なんかデータストアの共通インターフェイスっぽいというのはわかったんですが、値を取得とか加工とかしようとするとよくわからなくなってくる。
よくよく考えたてみたらそれ以前にJavaScriptの基礎知識自体あんまり持っていないことが判明したので、とりあえずこちらの記事に従って進めていってみようと思います。
未だにプロトタイプってのがわかんないんだよね。
まず記念すべき第一回は…「グラフを使いこなす（前編）」
http://codezine.jp/article/detail/5547
いきなりそんな高度っぽい内容で大丈夫なのか？
グラフの表示はdojox.chartingで行えるようです。
http://codezine.jp/article/detail/5547?p=2
見てのとおり棒グラフ、円グラフ、折れ線グラフなどの基本は揃っている上散布図やら円柱グラフまでだいたいのものは表現できるようです。
JpGraphなんていらなかったんや！
ありがたいことにサンプルファイルを用意してくれているのでダウンロードしてみました。
http://codezine.jp/article/detail/5547?p=3
まずはdojox.charting.Chart2Dを使用した折れ線グラフを再現してみます。
サンプルファイルchart1-3-1.htmlを表示してみると、Firefox、Chromeでは表示できるのに、IEでは「終了していない文字列型の定数です」とか言われてしまいました。
これはサーバがHTTPヘッダで文字コードを返していないときに発生することがあります。
ということでそこらへんを加味したHTMLがこんな。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojox.charting.Chart2D");
var drawChart = function(){
//表示値
var revenues2008 = [13000, 13000, 13000, 15000, 16000, 17000, 27000, 30000, 38000, 38000, 25000, 23000];
var revenues2009 = [27000, 30000, 30000, 35000, 40000, 45000, 46000, 42000, 37000, 35000, 38000, 40000];
//折れ線グラフ
var myChart = new dojox.charting.Chart2D("myChart");
myChart.addPlot("default", {type: "Lines"});
//グラフに値を追加
myChart.addSeries("2008年度売上高", revenues2008);
myChart.addSeries("2009年度売上高", revenues2009);
// グラフを描画
myChart.render();
}
//起動時実行
dojo.addOnLoad(drawChart);
</script>
</head>
<body>
<div id="myChart" style="width: 400px; height: 200px;"></div>
</body>
</html>
詳解! Dojo Toolkit 1.0(Dijit編) - ウィジェットプログラミングのツボ
http://journal.mycom.co.jp/special/2008/dojo/002.html
> この設定を行っておくことで、後述する「dojoType」属性が付与された要素をDojoが収集し、UIウィジェットとして表示を行ってくれる。
どういうこと？
まずはサンプル。
マイコミジャーナルのサンプルは細切れになっていますが、くっつけて書くとこうなります。
http://journal.mycom.co.jp/special/2008/dojo/002.html
> この設定を行っておくことで、後述する「dojoType」属性が付与された要素をDojoが収集し、UIウィジェットとして表示を行ってくれる。
どういうこと？
まずはサンプル。
マイコミジャーナルのサンプルは細切れになっていますが、くっつけて書くとこうなります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset =UTF-8">
<style type="text/css">
@import "dojo/resources/dojo.css";
@import "dijit/themes/soria/soria.css";
</style>
<script src="../dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
</script>
</head>
<body class="soria">
<div id="dijitFormButton" dojoType="dijit.form.Button"
label="クリックして!"
onClick="alert('こんにちは!');">
</div>
</body>
</html>
日時形式をブラウザだけで操作可能なライブラリです。
<html>
<head>
<script src="../dojo/dojo.js"></script>
</head>
<body>
<div id="dojoDateDiv"></div>
<script type="text/javascript">
dojo.addOnLoad(function(){
//Dateオブジェクト
var nowDate = new Date();
var pastDate = new Date(2011, 0, 1, 20, 0, 0);//2011年1月1日
//dojo.date読み込み
dojo.require("dojo.date");
//今月の日数を取得
console.debug(dojo.date.getDaysInMonth(nowDate));
//今年が閏年かどうか
console.debug(dojo.date.isLeapYear(nowDate));
//日時の比較
//前者が新しければ1、古ければ-1、同じであれば0
console.debug(dojo.date.compare(nowDate, pastDate, "datetime"));
//日時の差を求める
console.debug(dojo.date.difference(pastDate, nowDate, "day"));
//日時を足す
console.debug(dojo.date.add(nowDate, "hour", -24));
//dojox.date.posix
dojo.require("dojox.date.posix");
//今年が何週あるか
console.debug(dojox.date.posix.getIsoWeeksInYear(nowDate));
//今日が今年の何週目か
console.debug(dojox.date.posix.getIsoWeekOfYear(nowDate));
//今週の開始日
console.debug(dojox.date.posix.getStartOfWeek(nowDate));
//指定した週の開始日を取得 setという名前だがsetしない
console.debug(dojox.date.posix.setIsoWeekOfYear(nowDate, 1));
//日時を文字列として取得
console.debug(dojox.date.posix.strftime(nowDate, "%Y年%m月%d日 %H時%M分%S秒"));
});
</script>
</body>
</html>
無敵のJavaScriptツール、Dojoツールキット。
http://dojotoolkit.org/
解説記事なんかはいくつか見つかるのですが、そもそもDojoって何なんだという疑問には何故か誰も答えてくれません。
http://journal.mycom.co.jp/special/2007/dojo1/index.html
http://codezine.jp/article/detail/3476
要するにjQueryとかYUILibraryの仲間ってことでいいのか？
まずダウンロード。
http://dojotoolkit.org/download/
uncompressedは中にコメントが書いてある閲覧用、compressedはコメントなどを削除した公開用、Dojo Toolkitは便利なサンプルが山ほど入った開発用のようです。
とりあえずDojo Toolkitをダウンロード、適当に解凍します。
dojo/dojo.jsがDojoの中心となるJavaScriptで、それ以外はサンプルライブラリです。
サンプルといっても用意されているのはサンプルのJavaScriptで、HTMLは無いので作らないといけません。
今回作ってみるのはマイコミジャーナルのこのサンプル。
http://journal.mycom.co.jp/special/2007/dojo1/001.html
クリックすると入力した内容を表示するというよくあるボタンです。
名前を入力:
ソース
ちなみに同じものをjQueryで作成するとこう。
あれ？全く一緒？
ハンドラの設定方法が多少違っていて、jQueryではセレクタで選択したオブジェクトにハンドラを連結するのに対し、Dojoではdojo.connectでオブジェクトとハンドラを結びつけるという形になっています。
それ以外はとりあえずほぼ同じです。
今回はほぼ同じですが、Dojoはalert()みたいな汎用メソッドまで捕捉できるみたいです。
http://journal.mycom.co.jp/special/2007/dojo1/005.html
jQueryではbindで特定のイベントを捕捉できますが、汎用メソッドではやり方がわかりませんでした。
http://semooh.jp/jquery/api/events/
http://dojotoolkit.org/
解説記事なんかはいくつか見つかるのですが、そもそもDojoって何なんだという疑問には何故か誰も答えてくれません。
http://journal.mycom.co.jp/special/2007/dojo1/index.html
http://codezine.jp/article/detail/3476
要するにjQueryとかYUILibraryの仲間ってことでいいのか？
まずダウンロード。
http://dojotoolkit.org/download/
uncompressedは中にコメントが書いてある閲覧用、compressedはコメントなどを削除した公開用、Dojo Toolkitは便利なサンプルが山ほど入った開発用のようです。
とりあえずDojo Toolkitをダウンロード、適当に解凍します。
dojo/dojo.jsがDojoの中心となるJavaScriptで、それ以外はサンプルライブラリです。
サンプルといっても用意されているのはサンプルのJavaScriptで、HTMLは無いので作らないといけません。
今回作ってみるのはマイコミジャーナルのこのサンプル。
http://journal.mycom.co.jp/special/2007/dojo1/001.html
クリックすると入力した内容を表示するというよくあるボタンです。
名前を入力:
ソース
<html>
<head>
<script src="./dojo.js"></script>
<script type="text/javascript">
dojo.addOnLoad(function(){
dojo.connect(dojo.byId("button"), "onclick", function() {
alert("こんにちは、" + dojo.byId("name").value + "さん!");
});
});
</script>
</head>
<body>
名前を入力:<input type="text" id="name">
<input type="button" id="button" value="クリック!">
</body>
</html>
マイコミジャーナルでは解説のためあえて長く書いてありますが、まとめるとこんなものです。ちなみに同じものをjQueryで作成するとこう。
<html>
<head>
<script src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function () {
alert("こんにちは、" + $("#name").val() + "さん!");
});
});
</script>
</head>
<body>
名前を入力:<input type="text" id="name">
<input type="button" id="button" value="クリック!">
</body>
</html>
あれ？全く一緒？
ハンドラの設定方法が多少違っていて、jQueryではセレクタで選択したオブジェクトにハンドラを連結するのに対し、Dojoではdojo.connectでオブジェクトとハンドラを結びつけるという形になっています。
それ以外はとりあえずほぼ同じです。
今回はほぼ同じですが、Dojoはalert()みたいな汎用メソッドまで捕捉できるみたいです。
http://journal.mycom.co.jp/special/2007/dojo1/005.html
jQueryではbindで特定のイベントを捕捉できますが、汎用メソッドではやり方がわかりませんでした。
http://semooh.jp/jquery/api/events/
http://www.itmedia.co.jp/enterprise/articles/1005/26/news031.html
Firefoxのクリエイティブを率いるエイザ・ラスキン氏は、Webブラウザのタブでユーザーが見ていたページをこっそり詐欺サイトに切り替え、ログイン情報を盗み出す新たな手口を報告している。同氏はこの攻撃を「タブナッピング」と名付け、解説・実証するページを公開した。
"タブナッピング"でググってもITMediaの孫引きしか見つからず、具体的なことを書いてるサイトが何一つ見つからないわけだがどういうことだ。
つか、"解説・実証するページ"って何処だ。
