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

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

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

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

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

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

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

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

preprosでJavaScriptを連結させる

最近preprosを使ってます。
windows版codekitなんて呼ばれてるらしいす。
自分はmacなんですが、無料なんでcodekitじゃなくてこっちを使ってます。
いろいろ便利なツールを世界中の人々が開発してくれていて、とてもありがたや

複数のJavaScriptファイルを連結させて1つのファイルにしたかった。
日本語で紹介してるブログなんかを読むと、「JSの連結・圧縮もできます（やったね！）」みたいなこと書いてるんですが、実際のやり方書いてるとこは見つからんかったです

公式サイト見たらもちろん書いてました。

view plainprint?

1. //jsファイルに↓こう書くと…  
2. //@prepros-append first.js  
3. //first.jsの中身がここに書かれる。頭のスラッシュ2つも必要です。  
4.   
5. //↓prependもある。↑上のappendよりも先に記述される  
6. //@prepros-prepend second.js  

//jsファイルに↓こう書くと…
//@prepros-append first.js
//first.jsの中身がここに書かれる。頭のスラッシュ2つも必要です。

//↓prependもある。↑上のappendよりも先に記述される
//@prepros-prepend second.js

指定した箇所に、ファイルの中身が圧縮された状態で追加されるので、他の箇所には普通に処理を書いたりもできます。

view plainprint?

1. $(function(){  
2.  console.log('uoooooooOOOOOOUU!!!!!!');  
3.  //@prepros-append second.js  
4.  console.log('GYAAAAAAAaaaaaaaaa…….');  
5. })  

$(function(){
 console.log('uoooooooOOOOOOUU!!!!!!');
 //@prepros-append second.js
 console.log('GYAAAAAAAaaaaaaaaa…….');
})

codekitのも使えるよ、とのこと。
//@codekit-prepend ***.js
//@codekit-append ***.js


デフォルトではjs/min/にファイルを書き出すようです。 参考：公式サイトJS連結に関するページ

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

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

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

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

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

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

で、ファイル名をシンプルに「sprite.png」とかにする方法
config.rbに下記を追加する

view plainprint?

1. on_sprite_saved do |filename|  
2.   if File.exists?(filename)  
3.     FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')  
4.   end  
5. end  
6.   
7. on_stylesheet_saved do |filename|  
8.   if File.exists?(filename)  
9.     css = File.read filename  
10.     File.open(filename, 'w+') do |f|  
11.       f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')  
12.     end  
13.   end  
14. end  

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?

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メインで確認したほうが良さそう。

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

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

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

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

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

view plainprint?

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

//複数のアニメーションを連結する場合は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イベントを発動させるという処理を追加して対応した

view plainprint?

1. $('img').load ->  
2.  //画像読み込み時の処理  
3.  //ここにたどり着くまでに画像が読み込み終わっていたら発動しない  
4.  if this.complete //読み込み完了しているかどうか判定するプロパティ  
5.   $(this).load() //自分で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

Android2.3 でページ読み込み時に拡大されて表示されてしまう…

Andriod2.3でページを表示すると、最初ページが拡大されて表示されてしまう。
画像の読み込み時くらいから拡大表示になって、全ファイル読み込み後もそのまま。
ページをスクロールすると表示が修正されるので、再描画する際に計算しなおすのかも。

すべてのページでそうなってるわけではないので、おそらくこちらのやっていること(htmlかcssかjs)が関係しているんだろうと思うが、なかなか見つからない。

知ってる人いたら教えてほしい。
今さら2.3に苦しむとは…

[Android] 欧文フォントを指定したら、日本語が表示されなくなっていた。

cssでfont-familyを指定したら、日本語部分が表示されないAndroid端末があった。

cssの記述はこう↓↓
font-family: nunito, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;

nunitoってのはgoogle web fontで使える丸っこいゴシック体
http://www.google.com/fonts/specimen/Nunito

もちろん欧文フォントなんで、そのフォントには日本語は入っていない。

けど、その場合はフォントの指定を1つずつ下がっていって、対応したフォントで表示される…と思ってたんだが…

うーむ、調べてみよう。

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

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

view plainprint?

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

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

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

view plainprint?

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

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

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

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

view plainprint?

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

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

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

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

lessでcssアニメーションを簡単に書く方法

lessを使ってる時にキーフレームアニメーションを簡単に書く方法がないか調べていたら教えてくれているページがあったのでメモ
 参考：LESS CSS でキーフレームアニメーションを楽に書く

view plainprint?

1. // 今回作ったのは、ピコピコ動くアニメーション  
2. // まずはmix-inでアニメーションを指定  
3. .pikopiko() {  
4.  @_r: 10deg;  
5.  from { .rotate(0); }  
6.  5% { .rotate(@_r); }  
7.  10% { .rotate(@_r * -1); }  
8.  15% { .rotate(@_r); }  
9.  20% { .rotate(@_r * -1); }  
10.  23% { .rotate(0deg); }  
11.  to { .rotate(0deg); }  
12. }  
13.   
14. //作ったアニメーションを各ブラウザ用にプレフィックスをつけて指定  
15. //現在、キーフレームアニメーションでプレフィックスが必要なのはwebkitだけらしい  
16. @keyframes pikopiko { .pikopiko(); }  
17. @-webkit-keyframes pikopiko { .pikopiko(); }  
18.   
19. // アニメーションを簡単に指定するmix-inも作成  
20. .animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {  
21.  -webkit-animation: @name @duration @delay @ease;  
22.  -moz-animation: @name @duration @delay @ease;  
23.  -ms-animation: @name @duration @delay @ease;  
24.  -o-animation: @name @duration @delay @ease;  
25.  animation: @name @duration @delay @ease;  
26. }  
27.   
28. .animation-count(@count) {  
29.  animation-iteration-count: @count;  
30.  -webkit-animation-iteration-count: @count;  
31.  -moz-animation-iteration-count: @count;  
32.  -o-animation-iteration-count: @count;  
33.  -ms-animation-iteration-count: @count;  
34. }  
35.   
36. //アニメーションを設定する  
37. .element {  
38.  .animation(pikopiko, 4s);  
39.  .animation-count(infinite);  
40. }  

// 今回作ったのは、ピコピコ動くアニメーション
// まずはmix-inでアニメーションを指定
.pikopiko() {
 @_r: 10deg;
 from { .rotate(0); }
 5% { .rotate(@_r); }
 10% { .rotate(@_r * -1); }
 15% { .rotate(@_r); }
 20% { .rotate(@_r * -1); }
 23% { .rotate(0deg); }
 to { .rotate(0deg); }
}

//作ったアニメーションを各ブラウザ用にプレフィックスをつけて指定
//現在、キーフレームアニメーションでプレフィックスが必要なのはwebkitだけらしい
@keyframes pikopiko { .pikopiko(); }
@-webkit-keyframes pikopiko { .pikopiko(); }

// アニメーションを簡単に指定するmix-inも作成
.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {
 -webkit-animation: @name @duration @delay @ease;
 -moz-animation: @name @duration @delay @ease;
 -ms-animation: @name @duration @delay @ease;
 -o-animation: @name @duration @delay @ease;
 animation: @name @duration @delay @ease;
}

.animation-count(@count) {
 animation-iteration-count: @count;
 -webkit-animation-iteration-count: @count;
 -moz-animation-iteration-count: @count;
 -o-animation-iteration-count: @count;
 -ms-animation-iteration-count: @count;
}

//アニメーションを設定する
.element {
 .animation(pikopiko, 4s);
 .animation-count(infinite);
}

すげー記述量減った！ ありがたし。 自分1人で作業するならcompassを使うんだけど、黒い画面が苦手な人もいる場合はguiのあるlessで作業してる。

retina用画像のサイズ指定はwidth="50%"でいけそうだ。…と思ったら状況によるな

スマートフォンサイトを作ってるんだけど、もうretina用画像のみで作ってって話になった。

いちいち一個ずつ画像サイズを調べて、その半分のサイズを指定ってやるのが面倒だったので、
 <img src="file.png" width="50%">
って書いたら、うまく表示された。

 height="50%"もいれとくか。

 --add 2013.05.21 height="50%"を入れたら、表示がおかしくなった
さらにwidth="50%"でもおかしくなる画像もあった。

要は…状況による。
imgタグを囲ってる要素にサイズ指定があったりすると、その要素のサイズの50％ってなってしまうのかも。
 半分のサイズを指定するのが安全そうだ

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

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

view plainprint?

1. var MyView = Backbone.View.extend({  
2.     initialize: function(){  
3.         this.model.on('change', this.render, this);  
4.     },  
5.     render: function(){  
6.         //render処理  
7.     }  
8. });  

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

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

view plainprint?

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

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側で独自イベント登録

view plainprint?

1. var MyList = Backbone.Collection.extend({  
2.  initialize: function(){  
3.   //自分独自のイベントフックを登録  
4.   this.on('nothingNext', this.myEvent)  
5.  },  
6.  load: function(){  
7.   //何かを読み込む処理  
8.   if(次のページがなかったら){  
9.    //自分で作ったイベントを起動  
10.    this.trigger('nothingNext');  
11.   }  
12.  },  
13.  myEvent: function(){  
14.   console.log('俺独自のイベントだ');  
15.  }  
16. });  
17. var mylist = new MyList();  

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も独自イベントに連動させる

view plainprint?

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

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

CollectionをModelに変えてもできる

MySQLでエラー [Incorrect string value]

ブログシステムのメール投稿機能でエラー。
MySQLエラー [Incorrect string value]
文字コードの問題って話が多いけど、今回は違った。

本文に絵文字が入っていたため。

ガラケー時代はほとんど起きなかった問題。
スマートフォンになって多様になったなー。

PHPの場合、変換不能な文字は削除する関数があったはず。
文字コードを一度変換してから、最初の文字コードに戻すって処理をすればエラーになるような文字は削除される。

前に対処したはずだったんだけど…
新しい問題かも。


--add 2013.4.24
iPhoneの「メッセージ」（吹き出しアイコンの方）で写真とタイトルのみで送信すると、メールのbodyが画像のデータだけになっていた。
そういう状況を想定していなかったので、画像のbase64データをテキストとして処理しようとしてしまっていたらしい。

今までの機種だと、メールの本文なくても空っぽのプレーンテキスト枠があったんだけど、iphoneだとそれもなくなってた。

compass使ってたらsingle-transitionでエラーになった

Undefined mixin single-transitionとかなんとか、そんなエラー。
結論だけかくと、バージョンアップしたら治った。

調べてたら、「2つ同時にcompass watchしてたせいだったっぽいよ」って言ってた人もいたので、そういう場合もあるのかも。

[WordPress] functions.phpに入れていたら少し楽になる関数

WordPressでimgタグを書くのが面倒

view plainprint?

1. <img alt="sample" height="100" src="<?php echo 'TEMPLATE_DIR' . '/sample.jpg' ?>" width="100" />  

<img alt="sample" height="100" src="<?php echo 'TEMPLATE_DIR' . '/sample.jpg' ?>" width="100" />

functions.phpに下を追加

view plainprint?

1. define('DIR', get_bloginfo( 'template_directory' ));  
2. /* imgタグを返す */  
3. function img_tag($file, $alt = '', $opt = array()){  
4.   //ディレクトリ名は自分の環境に合わせて  
5.         $path = DIR . '/images/' . $file;  
6.         if(!emptyempty($alt)){  
7.                 $opt['alt'] = $alt;  
8.         }  
9.         $etc = '';  
10.         foreach($opt as $key => $value){  
11.     //引数のデータをそのまま属性に追加している。  
12.     //必要だったら値のチェックをしましょう  
13.                 $etc .= ' ' . $key . '="' . $value . '" ';  
14.         }  
15.   
16.         $path = sprintf('<img s="" src="%s">',  
17.                 $path,  
18.                 $etc  
19.         );  
20.   
21.         echo $path;  
22. }  

define('DIR', get_bloginfo( 'template_directory' ));
/* imgタグを返す */
function img_tag($file, $alt = '', $opt = array()){
  //ディレクトリ名は自分の環境に合わせて
        $path = DIR . '/images/' . $file;
        if(!empty($alt)){
                $opt['alt'] = $alt;
        }
        $etc = '';
        foreach($opt as $key => $value){
    //引数のデータをそのまま属性に追加している。
    //必要だったら値のチェックをしましょう
                $etc .= ' ' . $key . '="' . $value . '" ';
        }

        $path = sprintf('',
                $path,
                $etc
        );

        echo $path;
}

使い方

view plainprint?

1. <?php  
2. img_tag ('sample.jpg', 'alt属性', array('width' =>100, 'height' => 100)) ?>  
3. //省略も可  
4. //<img class="php" code="" src="テンプレまでのパス/images/sample.jpg'>  

<?php
img_tag ('sample.jpg', 'alt属性', array('width' =>100, 'height' => 100)) ?>
//省略も可
//<img class="php" code="" src="テンプレまでのパス/images/sample.jpg'>

少しだけimgタグを書くのが楽になると思うんだけどどうだろう？ cssを追加するのも少しだけ楽になる↓ 配列で渡せるようにしてもいいかも

view plainprint?

1. function css_tag($file){  
2.     echo sprintf('<link href="%s" rel="stylesheet">',  
3.             DIR . '/stylesheets/' . $file  
4.     );  
5. }  

function css_tag($file){
    echo sprintf('',
            DIR . '/stylesheets/' . $file
    );
}

まあ、他のフレームワークのパクリなんだけどね

[Rails] Windowsでgem install libv8がエラーになる

Railsを使ってサイトをつくった。
メインはMacで開発してるんだけど、場合によってWindowsで開発する時もあった。
管理はgitでやっていて、Windowsでgit pullして最新版を表示！と思ったらエラー。
libv8が入んないからbundel installしろとのこと

やってみた。
がインストール時にエラー
gem install libv8しろとのこと

やってみた
がやっぱりインストール時にエラー

情報を求めては苦手な英語サイトをさまよい、解決法を色々試したがダメ…

数時間まよった挙句…
「なんかWindowsにはlibv8入れる必要ないらしいよ！」
とのこと。
ハハハ。

Gemfileもgitで管理してたから、Windowsでもそれに合わせようとしてたみたい…
こういう場合どうするんだろ？
.gitignoreで除外するのも困るしな
と思いながらよく見たらあった…

gem 'therubyracer', :platforms => :ruby
↑これがコメントアウトされてた。
自分で
gem 'therubyracer'
部分だけ追加してた…


参考サイト
http://www.ruby-forum.com/topic/4398451(英語)
http://stackoverflow.com/questions/6356450/therubyracer-gem-on-windows(英語)

[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
やっぱりスクロール時のアニメーションしなーい。

git gcでエラー。unknown option...

git gcしようとしたらエラーが出た。
unknown option: ***(詳細は忘れた)

gitをアップデートしたら実行できた。
ネットで検索しても全然情報がなかったので、一応書いとく。

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

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

view plainprint?

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

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

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