2012年7月26日木曜日

OS X Mountain Lionにアップデートした

早速OS X Mountain Lionにアップデートしたのでいくつか作業を記録します。

  1. App StoreからMountain Lionをダウンロード
  2. インストーラをコピーしておく
  3. インストールで暫し待つ(40分くらい)
  4. App StoreからXCodeをインストール
  5. iTerm2を立ちあげておもむろにgit --versionと打ってみた→消されてる!
  6. ググったらこんなの発見
  7. XCodeを立ち上げてPreferences経由でcommand line toolsをインストール
    • git --versionでインストールを確認
  8. Homebrewのアップデート
  9. imagemagickが再インストール必要みたいなので一旦brew remove imagemagick
  10. brew install imagemagick --use-gccとやるとXQuartzがないよと言われる
  11. 再度 brew install imagemagick --use-gcc を実行
    • gccがみつからないらしく失敗
    • めんどくさくなったので --use-gcc オプションを消してインストール
  12. で、何?感やばい
2012年7月19日木曜日

IE9でiframe内で遷移した場合window.parentのメソッドを呼べない

状況としては、ビデオ一覧ページから各ビデオをiframeを使ったレイヤーで立ち上げるページにて
ビデオはMediaElement.jsというのを使っていて、HTML5対応の判別して、ダメならFlashとかSilverlightとかに切り替えてくれるようになってます。(何も再生手段がなければmp4をDLさせます)

閉じるボタンを押してもビデオが再生されたまま

↓

iframeが非表示になっただけでページ内に生きているから

↓

レイヤーを表示させてるjsを調べる
なんだこれ誰かの自作じゃねえか!closeイベントとか取れねえよ!

↓

親ウィンドウから子iframeにアクセスするか、
子iframeから親ウィンドウに渡すか

↓

後者を選択して window.parent.videos.push(video)
親のレイヤーを非表示にするときの処理に

if (window.videos) {
  for (var i in window.videos) {
    if (!window.videos[i].paused) {
      window.videos[i].pause();
    }
  }
}

というのを挟むようにした。
IE、他ブラウザほぼ動く。

↓

IE9だけ動かない!
iframe内で次の動画へ遷移できるようにしてあったんだけど
ビデオのhtmlは一本につき1ファイルなのでこれは単純にリンクを押してるだけ
親から直接ではなくiframe内で遷移後にエラーする。
(でもIEのステータスバーにはエラー表示が出ないんだけどね)

↓

IE9のF12開発者ツールでブレークポイントつけてみる
「解放されたスクリプトからコードを実行できません」
ハァ(゚д゚)?

↓

ググってみた。あぁそういえばIEではJavaScriptじゃなくてJScriptだったな……
つまり信頼性の低いスクリプトから親ウィンドウにあるオブジェクトのメソッドを実行できないってことですかね!!
というわけでpushじゃなくて代入にした。
window.parent.videos[window.parent.videos.length] = video;

↓

動いた!
プロパティの参照と代入は問題ないみたいです。

2012年7月6日金曜日

CentOS 6 でRails + thin + nginxを動かした

thinってオワコンじゃないですよね?herokuで採用されているし別にいいですよね。
本当はunicorn使いたかったんですが難しい…… ><;
ぐぐると記事沢山出てきますが uninitialized constant errorで起動しない問題が解決できなくてやめちゃいました。いつかリベンジします。

CentOS 6

マシンはvagrant使ってcentos6を用意しました。
参考:http://www.ryuzee.com/contents/blog/4292
vagrantって便利ですね。元々Virtual Boxでwindows動かしてたのですんなりです。ホントに。するっと。

IPアドレスと

config.vm.network :hostonly, "192.168.33.10"

メモリとnameを設定しておきました

config.vm.customize do |vm|
  vm.memory_size = 1024
  vm.name = 'vagrant_centos6'
end

Ruby

rbenv + ruby-buildで1.9.3-p194をインストール

Thin

Gemfileのgroup :productionにgem 'thin'を追加して普通にbundle install

config/thin.ymlは

pid: tmp/pids/thin.pid
log: log/thin.log
servers: 1
port: 3000
daemonize: true
environment: production
user: vagrant
group: staff

以下で起動、停止、再起動

$ be thin start|stop|restart -C config/thin.yml

Nginx

yumでnginxをインストール(参考:http://blog.livedoor.jp/sasata299/archives/51810645.html)

/etc/nginx/nginx.confは

worker_processes  1; 

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;

    # include /etc/nginx/conf.d/*.conf;

    upstream backend {
        server localhost:3000;
    }
    upstream backend2 {
        server localhost:3001;
    }
    server {
        listen 80;
        server_name centos6.vag;
        location / {
            proxy_pass http://backend;
        }
    } 
    server {
        listen 80;
        server_name 2.centos6.vag;
        location / {
            proxy_pass http://backend2;
        }
    } 
}

試す

あとはmacのhostsに

192.168.33.10 centos6.vag
192.168.33.10 2.centos6.vag

を設定してブラウザでアクセス!

サクセス!

でもnginx.confの書き方冗長だなぁもっといいのあるんだろうか。

※追記

上記の状態で試しに request.url を覗いてみたら http://backend2/ とかでちゃったよ!困るよ!

というわけでnginx.confを一部修正してみたら問題なく動いた

    ...省略...
    upstream 2.centos6.vag {
        server localhost:3001;
    }
    server {
        listen 80;
        server_name 2.centos6.vag;
        location / {
            proxy_pass http://2.centos6.vag;
        }
    }
    ...省略...

request.url でhttp://2.centos6.vagが返ってきた!

※追記2

画像など静的ファイルが返らないことがわかったので以下のようにconfig修正

    server {
        listen 80;
        server_name 2.centos6.vag;

        proxy_set_header    X-Real-IP       $remote_addr;
        proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header    Host            $http_host;
        proxy_redirect      off;
        proxy_max_temp_file_size    0;

        location ~ .*\.(jpg|JPG|gif|GIF|png|PNG|swf|SWF|css|CSS|js|JS|inc|INC|ico|ICO) {
            root /home/vagrant/sample2/public;
            ssi  on;
            break;
        }

        location / {
            proxy_pass http://2.centos6.vag;
        }
    }

※追記3

thinの再起動などダウンタイムにnginxのデフォルトエラーページが返されるのでconfig追加

     error_page   500 502 503 504  /500.html;↲
        location = /500.html {↲
        root   /home/vagrant/sample2/public;↲
     }

※追記4

マシンを再起動したときにthinも自動起動するようにした!

/etc/init.d/sampleを作成

#!/bin/sh
# chkconfig: 2345 86 25
# description: Sample
#

PATH=/home/vagrant/.rbenv/shims:/home/vagrant/.rbenv/bin:$PATH
eval "$(rbenv init -)"

APP_DIR=/home/vagrant/sample
THIN_CONFIG=$APP_DIR/config/thin.yml

case $1 in
  start)
  cd $APP_DIR
  bundle exec thin start -C $THIN_CONFIG
  ;;
  stop)
  cd $APP_DIR
  bundle exec thin stop -C $THIN_CONFIG
  ;;
  restart)
  cd $APP_DIR
  bundle exec thin restart -C $THIN_CONFIG
  ;;
esac

exit 0

登録する

$ sudo /etc/init.d/sample start
$ sudo chkconfig sample on

2012年6月20日水曜日

jQuery.fn.loadのcallbackで受け取るjQuery.Event.targetはIEでDOM要素をとれない時がある

タイトルで大体言いきりました。

写真のスライドショーを作成していて、画像タグはJavaScript側で作成してDOMに追加するようにしていました。 何故こうしたかというと、環境によって画像の読み込みが終わらないうちにスライドショーの自動再生が始まってしまうのを防ぐためです。

具体的には以下のようなコードで画像の読み込み完了を待ってDOMに追加しています。

$('').attr(src: '/images/hoge.jpg?' + new Date().getTime()).load (e) =>
  $img = $ e.target
  $('#container').append $img

'?' + new Date().getTime() の部分ですが、コレをしておかないとIEがonloadイベントをサボるんですよね。。
必ずイベントを発火させるようにしています。

でIMG要素を $ e.target でjQuery化してappendという流れですが、実はこれだとIEでIMG要素がとれていないんです!
気づかずにそのまま処理を進めると画面真っ白になってお馴染みのわかりづらいエラーメッセージにかなり困惑しました。

IE8で以下の様に検証してみました。

A) e.targetでIMG要素が取得できない

$('').attr(src: '/images/hoge.jpg?' + new Date().getTime()).load (e) =>
  console.log e.target.nodeName # => #document

B) e.targetでIMG要素がとれる

$img = $ 'img.sample'
$img.attr(src: $img.attr('src') + '?' + new Date().getTime()).load (e) =>
  console.log e.target.nodeName # => IMG

違いはJSで要素を作成するか、htmlに記述されている要素を取得するかですね。

まぁぶっちゃけ loadのcallback内でthisが対象のIMG要素なのでコレ使えばいいんですよ。
でもCoffeeScriptつかってclass化したオブジェクトの中だと @(this) は常にクラスそのものとして使いたいので、 関数のthisにバインドしてくれる => を使いたいんですよね。

というわけで jQuery.Event オブジェクトの出番なわけです。
Aの方法だとIEで期待通りでないことがわかったので調べたところ、jQuery.Event.currentTarget というのがありました。
console.log e.currentTarget.nodeName でちゃんとIMGが返ってきたよ〜!

今後調べたいこと

  • $('<img />') と書いた時にブラウザ別に何が行われているのか
  • jQuery.Eventのコンストラクタを読む

追記:

  • jQuery APIの.load()を見たらDeprecatedのタグが付いてたのでbindでも試してみたけど、結果は一緒
2012年6月4日月曜日

herokuで(mbstring有効な)phpがすぐ動いた

herokuでphpが動くのは前々から知っていたのですが、mbstringが有効なphpがいとも簡単に動くという情報を見つけたので試してみました。

$ mkdir heroku-php
$ git init
$ vim index.php
<?php
phpinfo();

$ git add .
$ git commit -m "initial commit"
$ heroku create --buildpack https://github.com/winglian/heroku-buildpack-php -s cedar
$ git push heroku master

こんだけ!?全然難しくないですね。
heroku openしてみたらちゃんとphpinfoが表示されました。

でも気になったのがindex.phpの設置場所。
基本phpはindexに相当するものを設置しなければいけないと思うのですが、これってpublicディレクトリにしても動くのだろうか…?

$ mkdir public
$ git mv index.php public/
$ git commit -am "moved index.php"
$ git push heroku master

-----> Heroku receiving push
-----> Fetching custom buildpack... done
 !     Heroku push rejected, no Cedar-supported app detected

ガーン!…そもそもアプリのルートにindex.phpが無いと受け付けてくれないのか。
ということは環境変数DOCUMENT_ROOTとか使えないのかな?

$ heroku config:add DOCUMENT_ROOT=/app/www/public
Adding config vars and restarting app... done, v5
  DOCUMENT_ROOT => /app/www/public

まぁ無理でした。環境変数はセットできても何の意味も無いですね。ググっても情報みつからないので多分このオプションは存在しないのでしょう。
アプリそのものが公開ディレクトリなのはそれはそれでphpらしいですよね。

しかしphp速い感じする。ただのphpinfoというのもあるだろうけど、アプリの更新しても再起動が無いからか。

参考:HerokuのBuildpackを利用してmbstringが有効なPHPサーバを立ててみた - hnwの日記

2012年6月1日金曜日

CoffeeScriptでJavaScriptもクラス化しよう。テストを書きやすくメンテしやすく

CoffeeScriptを知ったのはRailsに組み込まれたからですが、Rails3.1で採用されてすぐに飛びついたわけではなく、しばらく敬遠してた時期もありました。しかし使い始めてからはもう手放せなくなりました。
そして次第にCoffeeScriptのclass構文を使えばよりよいJavaScriptの開発ができるのではないかと思うようになりました。
今回は最近CoffeeScriptを使ってどのように開発しているかを紹介したいと思います。

CoffeeScriptでのclass定義はこうやります

class Person
  constructor: (@my_name) ->

  greeting: ->
    alert "Hello! my name is #{@my_name}."

window.Person = window.Person || Person

コンパイルすると以下のようなJavaScriptになります

(function() {
  var Person;

  Person = (function() {

    Person.name = 'Person';

    function Person(my_name) {
      this.myname = my_name;
    }

    Person.prototype.greeting = function() {
      return alert("Hello! my name is " + this.my_name);
    };

    return Person;

  })();

  window.Person = window.Person || Person;
}).call(this);

※nameプロパティを使うと上書きしてしまうのでmynameとしました

例えばこのようなコードを person というファイル名で保存し、インスタンス生成は main という別ファイルで実行します。

main.coffee
$ ->
  kozo = new window.Person 'kozo'
  kozo.greeting()
main.js
(function() {
  $(function() {
    var kozo;
    kozo = new window.Person('kozo');
    return kozo.greeting();
  });
}).call(this);

こうすることでまず管理がしやすくなりますし、テストも気持ちよく書けると思います。

テストフレームワークはよく jasmine をつかっています。その前は QUnit だったんですが jasmine の方がドキュメントが探しやすいのとツールが整っている印象ですし、なによりコードが書きやすく後からでも見やすいですね。人によるかも知れませんが。
僕の場合CoffeeScript を使うときはほぼ Rails か sinatra 上ですので jasmine-headless-webkit というgemをつかってます。これを使うとCUIで実行結果が得られます。(jasmine-railsはこれに依存しています)

jasmineの諸々の設定は省略しますがテストコードはこんな感じにしています。

person_spec.coffee
describe "Person", ->

  beforeEach ->
    @person = new window.Person 'sample'

  afterEach ->
    delete @person

  describe "propaties", ->
    it "have 'my_name' string", ->
      expect(typeof @person.my_name).toBe "string"

  describe "greeting method", ->
    beforeEach ->
      spyOn window, "alert"
      @person.greeting()

    it "alert greeting text", ->
      expect(window.alert).toHaveBeenCalledWith "Hello! my name is sample."

DOMが絡むテストは jasmine-fixture というのをhelperとして読み込んで使っています。jqueryに依存しているのですが、むしろ使わない事のほうが少ないので気にしないです。affix という便利メソッドが使えるようになって、jqueryオブジェクトのprototypeにも追加されるので気に入ってます。

以上のような形で開発を進めてるのですが、クラスファイルと実行ファイルを分けてなるべくDOMの情報とかは実行ファイルに書き込むようにするといいと思います。
サイトのトップページにスライドショー的なものを設置するなら例えば以下の様な感じです。

main.coffee
$ ->
  slideshow = new window.Slideshow {
    container_id: '#hoge-slideshow'
    controller_id: '#hoge-controller'
    duration: 800
    wait: 3000
  }
  slideshow.start()

要はリテラル値をまとめて書いておくということです。

ただこのように実行ファイルに分けていてもファイル名が script とかにする人がいたりして…それはそれでわからなくはないのですが、mainの方が無難じゃないですかねぇ。

あぁマシン持ち寄ってこうゆう話ししながら酒を呑む仲間がほしいなぁ…