2013/09/30

[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
0 コメント
ラベル:

[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を使う
のどれかを選んだらと言ってくれてます。
0 コメント
ラベル: ,

2013/09/18

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

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

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

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

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

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

0 コメント

2013/09/11

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

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

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

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

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

レイアウト変更後のサイズ取得をsetTimeoutで少し遅らせることで対応した。
0 コメント
ラベル:

2013/09/09

[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(英語)
0 コメント
ラベル: ,

2013/08/22

[compass] cssスプライト画像のファイル名をシンプルにする

compassでcssスプライト画像を作ると、ファイル名が「sprite-918734128374.png」って感じになる。
しかもsass内のこのスプライト箇所が更新されると、ファイル名も変わる。
これは名前を変えないと各ブラウザにキャッシュされている古い状態の画像が出てしまうことへの対策だと思うんだけど、運営していく上ではちょっと面倒…。

・cssファイルだけでなく画像ファイルもアップしないといけない
・サーバ上の古い画像を削除しないといけない

…書いてみると、それくらい面倒臭がらずにやれやって感じもするが…面倒くさがりなのは、ある種の美徳らしいのでいいことなはず。

他には
・compass以外で画像もcssも変更しづらくなる
ってのもあるけど、これはできればcompass以外で作業しないといけない状況になること自体を避けた方が良さそう。

で、ファイル名をシンプルに「sprite.png」とかにする方法
config.rbに下記を追加する 
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end
参考：How to turn off COMPASS SASS cache busting?
0 コメント
ラベル:

2013/08/09

PC版safariでcssアニメーションするとちらつく

Macのsafariでcssアニメーションさせると、そのアニメーションする要素とは別の部分がちらつくという症状がでた。
iPhoneではなくPC。
具体的な原因ははっきりわからなかったんだけど、transfrom:rotateをアニメーションさせているのをやめたらちらつきは解消された。

チラツキが起きるのはアニメーションの始まる瞬間と終わる瞬間。
アニメーションの途中は問題なし。
検索しても同じような症状の人は見つからず…

--追記
原因はまだ良くわかってないんですが、対処法は見つかった。簡単。
-webkit-backface-visibility: hidden; ↑これを追加するだけ。場合によっては、子要素にも適応させないとだめかも。
参考：CSS3 Animations: the Hiccups and Bugs You’ll Want to Avoid（英語）
-- ココマデ

以下、勝手な推測…
rotateをアニメーションさせようとするとアクセラレータが効いてGPUを使うようになる。
アニメーション終わるとGPUの使用も終了。
CPUとGPUの切り替えの瞬間にちらつく。

同じ動きをしているのにページによってチラツキが起きないページもあったので、ちらついていたのは画面全体ではなく、何かしら条件が揃った要素のみっぽい。

結果的にrotateやめたら、そっちの方が好きな動きだったんで結果オーライ

--add
他にもskewをcssアニメーションしたらちらついたとか…いろいろ。
ずっとChromeでしか確認しないまま作業進めて、そろそろ大詰めってころからsafariでの確認を開始したのが仇になった。
チラツキの原因を探るのに手間がかかってしまう。
cssアニメーションさせるならsafariメインで確認したほうが良さそう。
0 コメント
ラベル:
登録: 投稿 (Atom)