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

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

view plainprint?

1. <script>  
2. if(!window.jQuery) {  
3.  Zepto.browser = {webkit: true};  
4.  window.jQuery = Zepto;  
5. }  
6. </script>  

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

[compass]rgbaが使えない古いブラウザ向けにも対応できるcompassのプラグイン

バージョン8以前のIEはcssでrgbaが使えない。
いちいち画像作るのも面倒だったので、探してみたら、IE8以前向けに、自動で画像を作ってcssもつけてくれるプラグインを見つけた。

参考：https://github.com/aaronrussell/compass-rgbapng

■インストールが必要
gem install compass-rgbapng

■config.rbに下記を追加
require "rgbapng"

■cssファイルに下記を追加
@import "rgbapng";

■変数の設定
$rgbapng_path: 'my_pngs';　//自動で作ってくれる画像を格納するフォルダ名
$rgbapng_px_size: 8; //作成する画像のサイズ

■新しく追加されたMIXINを使うと動作する
rgba-background($color, [$path, $pixel]);

これが
@include rgba-background(rgba(0,0,0,0.75));

こうなる
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);


IE6には対応していないようで、もしIE6を使いたいなら‥
・DD_BelatePNGを使う
・自分でIE独自フィルターを使ったMIXINを作る
・Universal styesheetを使う
のどれかを選んだらと言ってくれてます。

firefoxでYouTubeの埋め込みプレーヤーが表示されない

YouTubeの埋め込みプレーヤーがfirefoxでだけ表示されない現象があった。
使ったのはiframeを使う埋め込みコード。
他のブラウザでは問題なく見れる。

HTMLではちゃんと存在するのだが、見た目は真っ黒。
最初はFLASHのバグかと思っていたのだが、実際はcssとの関係で起きた問題だった。

原因は埋め込みコードを書いた箇所の親要素に、transform:translate3dを適用させていたことだった。
これが適用されていると、YouTubeのプレイヤーが真っ黒になったままになる。

なぜそうなるのか、具体的な原因はまだわかっていないんだけど、とりあえずの原因。

どうしてもtransform:translate3dを使わないといけない場合はどうすればいいんだろう？
YouTubeのAPIで動画のデータを取得して、動画ファイルを直接videoタグで表示させるとかがいいのかな。

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

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

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

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

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

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

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

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

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

view plainprint?

1. do ->  
2.  # iframeがひとつしかない状態でしか確認してないので、複数ある場合は要注意  
3.  $iframes = $('iframe')  
4.  $ytFrames = $iframes.filter ->  
5.   # facebookのiframeなどもあるのでsrcをチェック  
6.   if this.src.indexOf 'youtube.com' != -1  
7.    srcParts = this.src.split '/'  
8.    id = srcParts.pop().split('?')[0]  
9.    # YoutubeのAPIで使用するので、動画IDを保存しておく  
10.    this.setAttribute 'data-movieid', id  
11.    # iframeを作り変えるので、その格納用divを作成＆挿入  
12.    $(this).after '<div id="ytframe-' + id + '"></div>'  
13.    return true  
14.  
15.  # youtubeのiframeがなければやめる  
16.  if $ytFrames.size() == 0  
17.   return  
18.  
19.  #　後々取得しやすいyにクラス名追加  
20.  $ytFrames.addClass 'js-yt-frame'  
21.  
22.  # ここはドキュメントに書いてあった。iframeのAPIを使用するために必要なscriptを読み込む  
23.  tag = d.createElement 'script'  
24.  tag.src = 'https://www.youtube.com/iframe_api'  
25.  $('head').append tag  
26.  
27. # scriptが読み込まれると、この名前の関数が呼ばれる  
28. @onYouTubeIframeAPIReady = ->  
29.  # 判別用につけたクラス名で取得  
30.  $ytFrames = $('.js-yt-frame')  
31.  $ytFrames.each ->  
32.   $this = $(this)  
33.   # 既存のiframeを新しく作るものと置き換えるので一旦非表示  
34.   $this.hide()  
35.   frame = this  
36.   movieId = frame.getAttribute 'data-movieid'  
37.   #　APIにあるオブジェクトをnew。これでiframeが作られる  
38.   player = new YT.Player 'ytframe-' + movieId,  
39.    # 幅・高さともに200px以上ないと再生できないので、最低値を設定  
40.    width: Math.max(frame.getAttribute('width'), 200)  
41.    height: Math.max(frame.getAttribute('height'), 200)  
42.    videoId: movieId  
43.    events:  
44.     onReady: (e)->  
45.      # もともとあったiframeを削除  
46.      $this.remove()  
47.     onStateChange: (e)->  
48.      # クリックイベント登録  
49.      if e.data == YT.PlayerState.PLAYING  
50.       # 動画が再生状態になった場合の処理  
51.       # 今回はここでsoundManagerを止めた。  
52.  
53.      # もちろん停止状態になったら…とかも可能  

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(英語)