javascript学習記

2015年1月16日金曜日

EaselJSでObjectにnameをつけて、アクセスする方法メモ。

getChildByName
を使用。

txt.name="name1";

var txt1=stage.getChildByName["name1"];

みたいな。

リファレンス。

http://www.createjs.com/Docs/EaselJS/classes/Container.html#method_getChildByName

2015年1月11日日曜日

EaselJS(CreateJS)のtutorialリスト

EaselJSのtutorialページ群のリストがみつからないので、ここにメモ。

http://www.createjs.com/tutorials/Getting%20Started/

http://www.createjs.com/tutorials/Fonts/

http://www.createjs.com/tutorials/Inheritance/

http://www.createjs.com/tutorials/Animation%20and%20Ticker

http://www.createjs.com/tutorials/Mouse%20Interaction/

http://www.createjs.com/tutorials/HitTest/

元はこちらのrepository
https://github.com/CreateJS/EaselJS/

EaselJSのAPIリストはこちら
http://www.createjs.com/Docs/EaselJS/modules/EaselJS.html

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

以下は、本家以外のチュートリアルで役に立ったもの、ありがたきもの。

http://msto.jp/p/3/
（TweenJSについての包括的なサンプル。動くサンプルが多く、丁寧でわかりやすい。多謝）

http://www.dagage.com/weblog/archives/1103
cacheの使い所がわからなかったのですが、わかりました。
なるほど。ベクター画像をぐりぐり描いていて、速度が落ちたのでcacheしてみよう。

2015年1月6日火曜日

地図情報をJSON形式にしてD3.js等で表示させるために、以下のページが参考になる。
http://ja.d3js.node.ws/blocks/mike/map/

そして、国土数値情報というサイトにデータがある。
http://nlftp.mlit.go.jp/ksj/
利用規約をよく読み、ダウンロード。

以下のページに非常に親切な解説があった。
http://blog.hitsuji.me/make-shape-file/
親切で感謝です。
こちらも参考になりました。
http://kshigeru.blogspot.jp/2013/03/d3-geojson-polygon.html

そして、以下のページは日本語にも訳されており、基本を網羅してくださっているページなので、とても大事。
http://ja.d3js.node.ws/blocks/mike/map/
勉強になります。（筆者はD3の開発者さんですね。）

で、国土地理院から.shpデータを落とし、
それを親切なサイトさんで紹介してあってインストールしたQGISにてgeoJSON形式に変換し、
terminalにてtopoJSONに変換して、表示。

が、中心座標をその県の中心座標にしないと表示が真っ白で「あれれ？」となりました。
中心座標を緯度経度で決め、表示スケールを決めてみると、無事表示されました。

よかった！

参考：QGIS入門

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

補足1：topojson -p N03_004 -o hokkaido_topo.json hokkaido.geojson
　といった形で、propertyをN03_004で市区町村データを保持してやり、-oでアウトプット。
　東京の場合は「区」のデータが抜けるので、N03_003も加えてある必要あり。
　topojson -p N03_004 -p N03_003 -o tokyo_topo.json tokyo.geojson

　複数県に渡る場合は、N03_001の県情報も加えてやる必要があるかもしれず、その場合はN03_001を加え、「d.properties.N03_001」などでアクセスすると吉。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

補足2：geoJSONを生成する際に、「OGR error:Failed to create GeoJSON datasource:」というようなエラーが出て悩みました。
単純に、「Save as」のところで「Browse」をクリックして、保存先フォルダを選ぶ必要があっただけでした。。。こちらのページが参考になりました。感謝。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

追記1：topoJSONに変換しても、頂点データ数が多すぎて表示が重いので、減らす方法を探すと、便利なサイトがありました！！
感激しました。。。
大感謝です。
http://www.mapshaper.org/

ここにgeoJSONやtopoJSONをアップするだけ。
そして、頂点数を減らしていくと、1.1MBだったファイルが65kBなどに。。。
すごいっす。
（私のsafariでは変換後のデータをDLできず、chromeではOKでした。）

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

追記2：command lineでtopoJSONに変換する際、ファイルサイズが大きいとrun out of memoryとなる。そこで解決策をググると、
https://github.com/mbostock/topojson/issues/71
こんなページがありました。
試してみます。。。

2015年1月5日月曜日

keycodeのobject作成

objectでkeycodeと対応文字列を格納したので、ここにメモしておきます。
あちこちさがしましたが、ぴったりなものが転がっていませんでしたので。

var keycodes={48:0,49:1,50:2,51:3,52:4,53:5,54:6,55:7,56:8,57:9,65:"a",66:"b",67:"c",68:"d",69:"e",70:"f",71:"g",72:"h",73:"i",74:"j",75:"k",76:"l",77:"m",78:"n",79:"o",80:"p",81:"q",82:"r",83:"s",84:"t",85:"u",86:"v",87:"w",88:"x",89:"y",90:"z",188:",",189:"-",190:".",191:"/",16:"shift",13:"enter",8:"delete",37:"left",38:"up",39:"right",40:"down",32:"space",186:";",219:"@",0:"¥"};

タイピングソフトを作るときなどには使えそうです。

jQueryのコードを手で書いて、なぜか実行されない時。。

jQueryのコードを手で書いて、
なぜか実行されない時。。

$(function(){...});

のラップを忘れている確率高し。自分。。。。

手書きで時々書くと、忘れるんですよね。。。
恥を忍んで、忘れぬように書いておきます。

EaselJSでのmouse EventクラスAPIリファレンス。

EaselJSでのmouse EventクラスAPIリファレンス。
http://www.createjs.com/Docs/EaselJS/classes/MouseEvent.html

pointerIDがユニークIDの参照プロパティ。

primaryは、最初のtouchの認識。boolean。mouseの場合は、いつもtrue。

timeStampもあった。number。イベントが発火した時間を取得。

targetはObjectを返す模様。

EaselJSのtextクラスのAPIリンクメモ

EaselJSのtextクラスのAPIリファレンスリンクメモ。
http://www.createjs.com/Docs/EaselJS/classes/Text.html

title = new createjs.Text(txt, "36px Arial", "#777777");

と、一度中身を書いたテキストも、

title.text="test";

といった感じで、変更可能。