[createjs] ステージ上をドラッグしている途中のマウス位置を取得する

gihyo.jpのcreatejsの記事を実際にやってみてちょっとひっかかった
http://gihyo.jp/design/serial/01/createjs/0009

記事は2013年のもので、createjs側の書き方が変わっていたみたい
記事内ではTickerでstage.mouseXでマウス位置を取得していたが、easeljsのバージョン0.8.2ではマウスを移動しても、ドラッグしようとしてmousedownした際の位置の値が返ってくるだけで移動した後の位置は取得できなかった

新しい書き方はstageに対して「stagemousemove」というイベントを使うようだ。
これでタッチデバイスも反応するのかは調べてみよう

let stage = new createjs.Stage(canvasElement);
stage.addEventListener('stagemousemove', function(){
//ドラッグ中にしたい処理
});

シェイプなどのインスタンスをドラッグする際は「pressmove」というイベントらしい。

jQuery.dataとhtml5のdata-でどちらが速いか試してみた

状態や何かしらの値を要素と関連づいた状態で保存したい時がある。
例えばアコーディオンUIで今開いてる状態か閉じてる状態か…など。
（アコーディオンの場合はクラス名で良さそうだけど）

思いついたのはjQueryのdataメソッドを使う方法とhtml5のdata-**を使う方法
どっちが速いのか試してみた
それぞれ1000回、値を入れた後、取得するというやり方でやってみた。

/jQueryのdataの場合
$(要素).data('名前', 値);
//7ms

//html5のdata-の場合
$(要素).attr('data-名前', 値);
//11ms

※chromeで測定

測ってみたらdataを使う方が若干早かったけど、気にしなくてもいい程度だった。
html5の方がhtmlを変更する分、ずっと遅いのかと思っていたがそんなことなかった。

HTML5で書いているサイトはIE8以下で印刷するとレイアウトが崩れる

IE8はhtml5の要素に対応していないので、何も対策しないとレイアウトが崩れまくる。
なので、IE8以下向けに「html5.js」を読み込ませて対応してる。

それで概ね表示は大丈夫になるんだけど、印刷時には「html5.js」は効かないらしい。
印刷時にもレイアウトを崩さないようにするためには,「html5shiv-printshiv.js」を読み込ませる必要がある

参考：https://code.google.com/p/html5shiv-printshiv/

iosでcssでhover処理を入れていたaタグがクリック出来ない

タイトルの通り、hover処理を入れているaタグがiPhoneでクリックできなくなってた。
原因がわからなかったので対症療法でしか対応できなかった。

以下対応方法です。
クリックイベントが起きなくなってしまっていたので、touchstartでaタグのhrefを取って、ページを移動させてます。

$('a').on 'touchstart', ->
 location.href = this.getAttribute('href')

hover時にdisplay:blockしているaタグ要素の中身を表示させたりしているので、それが絡んでるんだと思います。
同じような状況になって、解決出来たって人いたら教えてください。

[js] IEのデバッグコンソールでJavaScriptのオブジェクトなどの中身を見たい

console.logを使ってオブジェクトの中身を見たい！って時に、IEは[Object object]なんていう文字列を吐いてくる。
で、中身は見れず。

その対策。
console.log(JSON.stringify(中身見たい変数など));

1行の文字列になるけど、これで中身は見れる

[jQuery] 取得済みの要素を合体させて操作する

jQueryで取得した2つの要素をまとめて、同じ処理をしたいって時がある。

先に取得していた要素1と後から取得した要素2に対して、途中までは別々の処理をするのだが、途中からは同じ処理をする…など。

はじめに2つまとめて取って、その中から要素をわける方がいいのかもしれないけど、処理の流れによっては…後からまとめる方がスッキリしたりする場合もあるかも

var $elem1 = $('.elem-1');
var $elem2 = $('.elem-2');
var $matome = $([$elem1.get(0), $elem2.get(0)]);

$matome.css... //2つの要素をまとめて処理する

console.timeで時間測ってみたが、chromeではまとめる方が、新たにまとめて取得するより、3倍くらい速かった。

[javascript] PreprosでZeptoを連結させるとエラーになった

普段、Preprosを使って、読み込むJavaScriptファイルを１つのファイルに連結してよみこんでるんだけど、Zeptoでそれをやったらエラーになった。

対応策は簡単
ZeptoのJSの最後に;（セミコロン）を追加するだけ。

処理が終わっていないと認識されてエラーになっていたみたい。
これだとZeptoをバージョンアップさせるたびにやらないといけなくなるな…

Zeptoだけ別ファイルで読みこめば問題は起きないが、読み込むファイルは減らしたい…

さすがにライブラリをバージョンアップしといて動作確認せずにファイルを更新…なんてことはないだろうとたかを括って、今回は１つに連結してやることにした。

[jQuery] position()で位置が取得できない

サイト内で使用している画像を保存させたくない場合に、透明のgif画像を指定の画像の上にかぶせて保存させづらく処理をした。

その際、jQueryのposition関数で画像の位置を取得していたのだが、場合によってかぶせる透明画像の位置がうまく重ならず、左にずれてしまうことがあった。

調べてみるとposition()で取得した値がtop, leftともに期待していたものと違っていた。

今回の対策としてはposition()をoffset()に変更することで対応できた。

position()の場合、スタイルのpositionがrelative, absolute, fixedになってる直近の親要素の左上を起点にして、相対的な位置を返してくるようだ。
htmlタグまでさかのぼってpositionがすべてstaticのままだったらhtmlタグが起点になる

offset()の場合、先祖要素のposition()は無視して、ページの左上からの位置を返すらしい。

なので、position()をoffset()に変えれば常にうまくいくというものでもなく、用途によって使い分ける必要があるようだ。
参考：jQuery の位置・サイズ関連メソッドまとめ

[bootstrap] Zeptoとbootstrapを一緒に使おうとしてエラーが出た場合の対処

bootstrap.jsはjQueryありきで書かれている箇所があるので、Zeptoに変えるとエラーが出る。
その際の対処法

グローバルのjQueryをZeptoで上書き。 bootstrap バージョン2.3ではこれでOKだった。 参考：http://stackoverflow.com/questions/16160755/using-bootstrap-with-zepto-undefined-is-not-a-function

windowsのメディアクエリによるリサイズとJavaScriptで登録したリサイズイベントのタイミング

レスポンシブデザインのサイトで使用するスライドショー的なものを作成した。
ウインドウサイズによって、レイアウトが変わるので、スライドショーもそれに合わせてリサイズするようにした
スライドショー側では、リサイズ後の要素のサイズを取得して、それをもとにスライダーのりサイズ処理をした。
そこがうまく動かない。
要素のサイズの取得がうまくいっていなかった

ウインドウを小さくすると、メディアクエリで設定してあるウインドウサイズでレイアウトが変わる。
その瞬間にJSで取得したサイズをconsole.logで見てみると…

レイアウトが変わる前のサイズが取得されていた。
つまり、cssの設定が反映される前に、JSのサイズ取得の処理が動いたようだ。

Macでは起きず、WindowsでもIEとfirefoxでのみ起きる現象だった。
俺のイメージと違った順序で進んでいたようなのでメモ。

レイアウト変更後のサイズ取得をsetTimeoutで少し遅らせることで対応した。

[js] Youtubeプレイヤーのクリックイベント登録

あるミュージシャンのサイトでsoundManagerを使って音楽を再生できるようにした。
ページによってはYouTubeが貼られてあるページがあって、YouTubeを再生する時にはBGMは停止することになった。

iPadやらも対象になっているのでYouTubeはiframeで埋め込んでる。
当然iframe内はYouTubeのドメインになっているので、JavaScriptで中を覗くことも、プレイヤーにクリックイベントを登録することもできない。

do ->
 # iframeがひとつしかない状態でしか確認してないので、複数ある場合は要注意
 $iframes = $('iframe')
 $ytFrames = $iframes.filter ->
  # facebookのiframeなどもあるのでsrcをチェック
  if this.src.indexOf 'youtube.com' != -1
   srcParts = this.src.split '/'
   id = srcParts.pop().split('?')[0]
   # YoutubeのAPIで使用するので、動画IDを保存しておく
   this.setAttribute 'data-movieid', id
   # iframeを作り変えるので、その格納用divを作成＆挿入
   $(this).after '
'
   return true

 # youtubeのiframeがなければやめる
 if $ytFrames.size() == 0
  return

 #　後々取得しやすいyにクラス名追加
 $ytFrames.addClass 'js-yt-frame'

 # ここはドキュメントに書いてあった。iframeのAPIを使用するために必要なscriptを読み込む
 tag = d.createElement 'script'
 tag.src = 'https://www.youtube.com/iframe_api'
 $('head').append tag

# scriptが読み込まれると、この名前の関数が呼ばれる
@onYouTubeIframeAPIReady = ->
 # 判別用につけたクラス名で取得
 $ytFrames = $('.js-yt-frame')
 $ytFrames.each ->
  $this = $(this)
  # 既存のiframeを新しく作るものと置き換えるので一旦非表示
  $this.hide()
  frame = this
  movieId = frame.getAttribute 'data-movieid'
  #　APIにあるオブジェクトをnew。これでiframeが作られる
  player = new YT.Player 'ytframe-' + movieId,
   # 幅・高さともに200px以上ないと再生できないので、最低値を設定
   width: Math.max(frame.getAttribute('width'), 200)
   height: Math.max(frame.getAttribute('height'), 200)
   videoId: movieId
   events:
    onReady: (e)->
     # もともとあったiframeを削除
     $this.remove()
    onStateChange: (e)->
     # クリックイベント登録
     if e.data == YT.PlayerState.PLAYING
      # 動画が再生状態になった場合の処理
      # 今回はここでsoundManagerを止めた。

     # もちろん停止状態になったら…とかも可能

参考サイト： YouTube Player API Reference for iframe Embeds(英語)

[TweenMax.js] TweenMaxでのアニメーションの連結

tween.jsを使ってみようと思っていて、気づいたらTweenMaxを触ってしまっていた。

正直、同じもんだろ？と勘違いしてました。

結局どっちをメインに使って見るかは軽く触ってから判断しようかと

で、tweenMaxのアニメーション連結方法

//複数のアニメーションを連結する場合はtimelineを使う
tl = new TimelineLite()
elem = document.getElementById 'id'
tl.to(elem, 0.4, {bottom: '11px'})
.to(elem, 1, {bottom: 0})

タイムラインは独立したオブジェクトって考えなのかな。

[jQuery] 画像の読み込み完了時にloadイベントが発動しない

htmlに記述してある画像を読み込んだら、ある処理を開始するというJavaScriptを書いたところ、処理が行われる時と行われない時でまちまちだった。

キャッシュかなとも思ったが違った。
実際はloadイベントを登録する前に画像の読み込みが終了していた場合、イベントが発動していないのが原因だった。

completeプロパティを調べて、すでに読み込み済みだったら明示的にloadイベントを発動させるという処理を追加して対応した

$('img').load ->
 //画像読み込み時の処理
 //ここにたどり着くまでに画像が読み込み終わっていたら発動しない
 if this.complete //読み込み完了しているかどうか判定するプロパティ
  $(this).load() //自分でloadイベントを起こす

completeというプロパティは知らなかった…
今回の問題はかなり初歩的な部分な気がするが…今まで一度も出会ったことがなかったのか…気づかずに過ごしてきたのか…

参考：
http://www.scollabo.com/banban/jsindex/sample/sample_042.html
http://stackoverflow.com/questions/3588102/jquery-load-not-working-on-my-image

[mootools] audioの再生終了イベントを使えるようにする

audioタグの再生が終わった時点で、ボタンの表示を変える処理をした。

//通常なら
var audio = $('audio-element')
audio.addEvent('ended', function(){
 //再生終了時の処理
});

ただaddEventしただけだと効かない。

//イベントを有効にする必要がある
Element.NativeEvents.ended = 2

clickとかchangeなんかの一般的なイベントはなにもしなくても使えるんだけど、html5なんかの新しいイベントはデフォルトでは無効になっている。
ちょっと面倒。

自分独自のイベントも登録できる。

//イベントを有効にする必要がある
Element.NativeEvents.unko = 2;
elem.fireEvent('unko');

参考：[mootools] cssでのアニメーションtransitionEndがイベント登録できない

 そろそろMooToolsの限界を感じつつある…

[Backbone.js] イベント関連で起きやすいメモリリーク

Backbone.jsを使っていて起きやすい問題ってのを紹介してくれている記事があった。 その中で、頻繁に起きてしまいそうなメモリリークの問題。 onを使ってview側でmodelのchangeイベントをbindしていると、viewを削除した後でもイベント経由でmodelからviewへの参照が残ってしまうらしく、メモリが解放されない。

var MyView = Backbone.View.extend({
	initialize: function(){
		this.model.on('change', this.render, this);
	},
	render: function(){
		//render処理
	}
});

viewをremoveした際に自動で参照を解除するにはonではなくlistenToに変更するとよい。

initialize: function() {
	this.listenTo(this.model, 'change', this.render);
}

違いはイベントをひもづけているのがmodel->viewからview->modelへ変わったこと。 なのでviewを削除すればview->modelへの参照も自動でなくなり、メモリも解放される。 参考Avoiding Common Backbone.js Pitfalls

[Backbone.js] 自分で作ったイベントをViewとCollection(またはModel)で連携させたい

「次を読む」ボタンを押すとAJAXで次のリスト一覧を取得する。 アンド、取得し終わったらさらに次のページがあるのかどうかチェックして、なかったら「次を読む」ボタンを非表示にするってのをやった。 まずはCollection側で独自イベント登録

var MyList = Backbone.Collection.extend({
 initialize: function(){
  //自分独自のイベントフックを登録
  this.on('nothingNext', this.myEvent)
 },
 load: function(){
  //何かを読み込む処理
  if(次のページがなかったら){
   //自分で作ったイベントを起動
   this.trigger('nothingNext');
  }
 },
 myEvent: function(){
  console.log('俺独自のイベントだ');
 }
});
var mylist = new MyList();

Viewも独自イベントに連動させる

var Btn = Backbon.View.extend({
 collection: MyList,
 initialize: function(){
  //collectionの独自イベントが起動した時に一緒に動かしたいメソッドを登録
  this.collection.on('nothingNext', hideMe);
 },
 hideMe: function(){
  this.$el.hide();
 }
});

CollectionをModelに変えてもできる

[MooTools] アニメーション中にIE7でエラーが起きる

IE7はサポート対象外だったこともあり、大した調査はしていないが、一応報告
MooToolsのTweenでtransitionをback:outにしていたら、恐らくアニメーションで変更する値の計算部分でエラーが起きたらしく、アニメーションの途中でいきなり止まってしまう問題があった。
起きていたのはIE7だけ。
今回はtransitionの種類を変更するだけで良かったので、原因は調べてない。
もし理由が判明しないけどtweenあたりでエラーが出る場合は試してみては。

[MooTools] MooTools1.4でもスクロールバーがカスタマイズできるプラグイン

MooTools1.4ではスクロールバーをカスタマイズできる系のプラグインはなかった(はず)
jQueryのjScrollPaneっていう有名なプラグインを羨ましげな目で見てたけど、もう大丈夫。

Scrollbars for MooTools 1.4

アニメーションとかはまだなくて、IEだと普通のスクロールバーが出るっぽいけど…
それでもありがたい。

自分でカスタマイズして、その機能を追加してもらうのもいいかもな。

他にはこんなのもあった
ScrollerBar
やっぱりスクロール時のアニメーションしなーい。

[iPhone] webページの高さが画面より小さい場合に画面にページサイズを合わせる

ページの高さが画面より小さい場合、ページの表示を画面いっぱいになるように拡大してくれんのはありがたいんだけど、拡大した分、今度は横が広がって画面からはみ出る。
そんな場合にJavaScriptでページの高さを調整する。

//jQuery使ってます。
//画面比率
var ratio = window.innerHeight / window.innerWidth;
//横幅に合わせた高さの設定
var winH = $('body').width() * ratio;
$('body').css('min-height', winH);

俺はiPhone5を使ってるので、以前のiPhoneがどうだったか確認しとりません。

[JavaScript] setTimeoutで配列の中身を1個ずつ処理していくやつ

何か間を置きながらループを処理したい時なんかに。
即時関数をsetTimeoutで間を置いて、arguments.calleeで実行中の関数をもっかい動かす。
配列は頭から1個ずつ取っていって、配列が空っぽになったら終わり

-- add [2102/9/13]
「JavaScript 「再」入門」によると、arguments.calleeは非推奨になったらしい。
なんで、名前を付けて「名前付き無名関数」として使うみたい。

//名前をつけてる
(function loopFunc(arg){
   //なんか処理して
    
    //ここ
    setTimeout(function(){
  loopFunc(arg);
 }, 200);
})(val);

参考：arguments.calleeとsetTimeoutを使ってJavaScriptのリトライ処理を簡単に書く方法