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

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

getChildByName
を使用。

txt.name="name1";

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

みたいな。

リファレンス。

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

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してみよう。

地図情報をD3で使えるJSON形式に

地図情報を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
こんなページがありました。
試してみます。。。

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";

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

EaselJSでのtouchの実装部分コード、リンクメモ

EaselJSでのtouchの実装部分コード、リンクメモ。
http://www.createjs.com/Docs/EaselJS/files/easeljs_ui_Touch.js.html#l41

APIリファレンスはtouchについての言及が少ないのは残念。
http://www.createjs.com/Docs/EaselJS/classes/Touch.html
基本、モバイルよりパソコンを主眼にしておられるのだろうか。

頑張ってmouse eventのAPIを見ながらやるしかないかも。
http://learnaboutjs.blogspot.jp/2015/01/easeljsmouse-eventapi_5.html

EaselJSでオブジェクトをグループ化するメモ

EaselJSでオブジェクトをグループ化するメモです。（超初心者な記事で失礼）
方法が以下にあったのでリンク。
http://community.createjs.com/discussions/easeljs/1146-how-to-group-different-objects

containerをつくって、stageにaddしてOK.

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

追記：containerはいろいろ便利。
ただ、若干のoverheadは発生する様子。

各iPhoneの画像解像度について分かりやすい表。

iPhoneの画像解像度について、まとめてあった。
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

paintcodeのサイトから。

pointとpixelと再サンプリングの関係がやっとわかった。
ありがたい表でしたm(_ _)m
(pointはあくまでpoint。解像度とは違う。pointが320でも、解像度で言えばretinaだと640pixel。ということだとやっと理解。)

他にも、ios全般についてのサイズの纏めがあった。

http://www.iosres.com

いろいろありがたい。4s以前がないが。

（実際の確認はリンク先のサイト自体にてお願いいたします。）

で、要するに、以下のようにpointを考えれば良いようだ。解像度はおいておいて。

Logical resolution (points)

320 x 568

375 x 667

414 x 736

1024x768

1024x768

それぞれ横幅だけで考えると、320,375,414,768,768。

320pointを基準に考えると、0,+55,+94,*2+128,*2+128

そこから考えると、各iPhoneは320にちょっと50~100プラスぐらい。

iPadは320の2倍強。

解像度は、*2,*3がある。6+、iPad retinaが*3。

それらの画像を用意する。

縦は、

568,667,726,1024,1024

0,+99,+158,*2-112,*2-112

iPhoneは568に100~150プラスぐらい。(4以前はおいておいて）

iPadは2倍弱。

CreateJSのCDNリンク。EaselJS第一歩。

CreateJSの現在の最新版CDNリンク。
https://code.createjs.com/createjs-2014.12.12.min.js

総合ページは以下。
http://code.createjs.com


easelJS始め方のページ
getting started


個人的には公式の「ぐるぐる」のデモが好き。

また、「Drag & Drop」というこのデモでは、daisyの画像の花びらの無い空白部分ではマウスオーバーしても反応しない、というのがすごいと驚いた。どうなってるんでしょう。

これらのデモは、右下の「LIVE EDIT+」というボタンで、ライブ編集できる。
グルグルのデモを色々いじって遊んでみた。
良く出来ている。

色々アプリのアイデアがあるので、これから一つ一つやってみたい。

FALSHデベロッパーの大御所の方が中心になって開発しておられる、ということで、これまでのFlash関連の情報が活用できそうなのもありがたい。


こちらではWonderFLからの移植をしておられる方の解説があり、面白かった。

canvas系のjsライブラリを色々物色して。

canvas系のjsライブラリを色々探してみた。
結局、今のニーズを色々満たしそうなのは、王道のCreateJSかな、と。

私のニーズは
・ドキュメント類、サンプルが多い。
・マルチデバイス（touch）対応
・書き方がシンプル目
・拡張性が高い
・表示が軽い（WebGL対応）
といったところ。

以下、完全に私的感想です。

まず、pixi.jsを試してみて、かなり良かったが、ドキュメント類がちょっと自分にとっては分かりにくめ。APIのドキュメントなど。WebGL対応や、拡張性の高さ、書き方のシンプルさなど、かなりポイントは高く、私のようなヘタレでなければかなり使えるのでは。
googleやマクドナルドが公式に利用してサイトアプリに使っているのもすごい感じ。

two.jsを使ってみて、かなり好印象だったが、まだテキストなどの描画に対応していないので、残念ながら棄却。サンプル類は、かなり自分の好みだったが。「まだ対応していない」と書いてあるので、そのうち対応するのだろう。

fabric.jsは、ドキュメント類がとても親切で、分かりやすく、好印象。制作陣がドキュメントを大事にし、ユーザーを大事にしている様子が伝わってきた。メインのプログラマは、prototype.jsのコア開発者の一人だったよう。まだWebGLに対応しておらず、現時点ではパス。今後のtodoの中に、WebGL対応が書いてあるので、それが実現されれば使いたいツール。

Paper.jsは面白い感じだが、touch系のAPIについて言及が無い感じなので、実際はあるのかもしれないがパス。これも面白そうなライブラリではある。うにょうにょして面白い。

tmlib.jsは、国内の若手の方が開発しておられる様子。面白そう。子どもと一緒にプログラミングを学ぶ時にとっつきやすそうなサイトの作り。イラストがとても可愛い。WebGLにこだわらないときは良さそう。

ひよこのキャラで自由に使える素材があるなど、楽しい。

enchant.js。ゲームづくりに便利そう。レンダリングの面で、pixiやCreateJSのWebGLとの差が見え、またこの半年ほどバージョンアップ情報が無いことから、少し力が今は入っていないのかな、という感じで様子見。

CreateJSは王道の様子。しかし、クロスプラットフォームで、特にAndroidで困った、という記事を読み、ちょっと敬遠してみていたが、どうもそれはそもそものAndroidの対応によるバグのようなので、他のライブラリでもだめだろうと予想。CreateJSの問題ではなく。

WebGLへの対応も出来たようで、pixi.jsよりもドキュメント類も多い印象なので、こちらで行ってみよう、という次第です。

それぞれ良さとニーズのあわなさがあるので、一長一短ですが、

いずれにしても私のようなへっぽこにとってはありがたい限りです。

pixi.jsでタッチの位置取得などをしようとした時、interactionManagerを参照

pixi.jsでtouchの位置取得などをしようとした時は、interactionManagerを参照するべし、という自己メモです。
http://www.goodboydigital.com/pixijs/docs/classes/InteractionManager.html

mouseの位置や、touchesのidなどいろいろ取得できて便利そう。

pixi.jsはすごい2dのjsライブラリだ。

pixi.jsというライブラリがすごい。
cocos2dをブラウザで実装した、というイメージ。

http://www.pixijs.com/examples/

webGLをつかってのレンダリングを実装しているので、
非常に画像の処理が軽い。

以下のページをクリックしていくと、その凄さが感じられる。
http://www.goodboydigital.com/pixijs/bunnymark/

 ：：：：：：：：：：：：：：：：：：：：

日本語のドキュメントは少なそうだが、
APIのドキュメントはここ。
http://www.goodboydigital.com/pixijs/docs/

最初の一歩の解説はここ。
http://www.goodboydigital.com/pixi-js-tutorial-getting-started/

SVG習得開始

SVGを習得しようと思い立ちました。
ブラウザで画像を生成できる便利な代物。
昔は十分ブラウザが対応していませんでしたが、
いつのまにか、普通に使える代物になっていました。

さて、がんばります。

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

またD3.jsというライブラリも使い始めました。
かつてはRaphaelを使っていましたが、d3が熱い感じで、ちょっと試行中。

いずれにしてもSVGの理解が重要だということで。

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