nginxで静的ファイルをs3にプロキシしつつ、backupをunicornで受ける話

こちら参考にさせていただきました。
社内Gyazoの画像をAmazon S3に逃がしてスケーラブルに運用する - 酒日記 はてな支店

【前略】

upstream static_files {
  server jk-daisuki.com.s3-website-ap-northeast-1.amazonaws.com;
  server unix:/var/www/apps/production/current/tmp/sockets/unicorn.sock backup;
}

server {

【中略】

  location ~ ^/.+\.(ico|css|js|gif|jpe?g|png|swf|mp3|pdf|html)$ {
    expires max;
    add_header Cache-Control public;
    log_not_found off;
    proxy_pass http://static_files;
  }

【後略】

}

あれ、書き起こすと中身すっからかんだな
ほんとはrailsのassetsはunicornに渡すとこも書いてたけどそこは別にいらんか
ちゃんとわからず書いてるとこあるけどそこは今後の課題ですね

おわり

capistrano2系でnet-ssh v2.8辺りを使うとsshがコケる

3は大丈夫だったんだけど、capistrano2系だとだめだった。
しかもエラーが「(Net::SSH::AuthenticationFailed: Authentication failed for user app@XXX.XXX.XXX.XXX)」的なざっくりした感じだし、-dしてもクリティカルな情報が出るわけでもなくて大変だった。

偶然2.0.x系を入れてた人が近くでcapistrano2のデプロイを通してたおかげで気付けた。
2.0.xより上でもいいのかも知れないんですが、そこは未検証です。

active_adminのregister_pageでdatepickerを使う書き方

Modelに紐付いたページだと

f.input :date_from, :as => :datepicker

とか書けばいいんですが、custom_pageだとできない。
ただ、あれはjquery-uiが勝手にやってるだけなので、jquery-uiが勝手にdatepickerに
してくれるようにclassをつけてあげるだけでいい。

f.input :type => "text", :class => "datepicker", :name => "date_from",

でおｋ

google chromeとAndroid Browserの最小フォントサイズ制限について

このブログでも何度か紹介している、佐藤ねじさんからのご依頼で

世界で最も小さなサイト

これ作ってました。見ての通りミニマムなので、作業量もミニマムだろと思ってたら少しハマったので記しておく。

タイトルの通り、google chromeとAndroid Browserには最小フォントサイズ制限という設定があります。
chromeは10px、Android Browserは8pxです。
chromeはchrome://settings/fontsここで確認できます。

こんな感じで。
Androidは手元にないので試してないです。

今回作ったサイト、cssのfont-sizeに4pxという値を当てているんですが、この制限のせいでchromeは10px、Android Browserは8pxに表示が強制されてしまいます。
仕様の意図としてはきっとそんなに難しくなくて、web制作者の意図しないミスへの対応とか、ゆーざーいんたーふぇいすとかいう話なんでしょうね。

ちなみにこの設定、chromeもAndroid Browserも設定から変更できるんですが、webページのjsからは変更できません。できたら面白いんですがね。

(余談ですが、chromeのwindowオブジェクトに生えてるchromeってオブジェクト、使ってなんか面白いことできないんですかね)

と、いうわけで世界一小さいサイトを作る上では、この2者をUserAgentで判定し、transform: scaleで無理やり小さくしています。フォントがガビガビになっちゃわないかなと思ったんですが、意外と上手くいきました。

きっと今後一生使わないであろうTipsですが、まぁ今回僕が使ったので、誰かしら使うんでしょう。

今日もぼっちですが、uupaa氏のuniteplayer(UnitePlayer.js 作ったよ - latest log)がiOS7 safariで動かないみたいな話を聞いたので、オレオレオーディオスプライトライブラリでも作ろうと思います。でもなんとなく詰みそうな気がしてるので、Soundcloud APIでなんとかできないかなとか思ってます。

なんかいつも、暇があると音かセンサー系で何か書いてる気がする

10分でできるTwitter Bot@Rubyに6時間かかった話

jsやめます！！！！

お久しぶりです。あ、待ってない。あそう。
↑は嘘です。正確には「js(に頼るのは)やめます！！！！」です。
最近めっきりjsを書かなくなりました。自分の頭の悪さ故に頭打ちが見えたからですかね。
あ、艦これやってます艦これ。艦これウィジェットの
お寿司だいすき (otiai10) on Twitter氏が意識高くてすげーなとか最近思ってます。艦これ自体は3-2で止まってます。
無駄話かつ愚痴になってしまったので本題に入ります。

武器を増やしたいなーと思って。正直jsってjQueryとかcreateJSのお陰である程度のレベルまでは簡単に行ける分野だと思います。あくまで個人的な意見としては。
武器を増やすためにこないだまでobj-Cやってました。DICE+ Digital board game controller | Smart electronic diceで遊んでました。でも僕にはobj-Cは難し過ぎたので一旦手を離しました。
弊社のイケメンエンジニアに「カジュアルにwebアプリケーション作るのに手っ取り早く何始めたらいいですかね」って聞いたら「そりゃおめぇRailsよ」って言われたので始めました。

で、表題ですよ。ちなみに僕はrubyド素人です。どのくらいド素人かというと

• まともに触ったのが今日
• bigin
• defってなんやねんCの#defineみたいなもんか

という感じです。なんかruby素人以前に頭がおかしい感じしますがお気になさらず。
で、とりあえずtwitter botでも作るかーと思って以下の記事にたどり着きました。
10分でできるTwitter bot @ Ruby - 酒と泪とRubyとRailsと
先に言っておきますと、6時間かかったのはこの記事様に責任は一切ございません。悪しからず。

詳しい説明は省いてこの記事の通りにコードを書いて実行したところ動かない。
エラー再現させるのめんどくさいのでエラーメッセージは割愛しますが、ざっくり言うと

Twitter.configure do |config|

この行について、「configureとか知らんわpgr」って感じでした。
さぁこっからが長かった。ここも長くなるので割愛しますが、ググって試してコケてを数回繰り返し、駆逐艦隊を遠征に出して3-2-1で主力艦隊をレベリングしてググって試してコケてを繰り返して5時間が経過しました。なんか変なの入ってますね。

で、「なーんかjsのTwitter関連で前にもこんな困った覚えあるなー」と思って思い出したのが、TwitterAPIの1.0->1.1のアップデートでした。
どうやら上記記事が書かれた時点から現在までにTwitter gemにそれに係る大きな変更があったらしく。
というわけでTwitter gemのドキュメント読んで上記問題部分を

client = Twitter::REST::Client.new do |config|

にして

client.update(tweet)

したら一撃でした。何はなくともドキュメントを読めって話ですね。
というわけで、obj-Cのときはブログ書かなかったんですが、長続きさせる決意表明としてブログ書きました。obj-Cを途中で投げてしまったコンプレックスがあるので、なんとしても頭打ちのところまでは続けたいです、Rails。でもなんかこう、ちゃんとツイートが飛んだとき、初めてjQueryでDOMいじっておもろかったときの気持ちを思い出してほっこりしました。頑張ります。
次はこれを改造して、自分の一時間当たりのツイート数を監視して、一定数を超えてたら「親が泣いてるぞ」ってメンション飛ばすようなの作ってherokuに乗っけるとこまでやろうと思います。
ちょー頑張る。
ところで俺、あたかも誰かが読むことを想定しているような口調でブログ書くけど、誰か読んでくれてるんかしらね。でも別に自分の備忘録でブログ書いてるわけでもないし、これでいいのかきっと

P.S.
先日、学部時代にお世話になった電気通信大学の西野順二先生の研究室ページのリニューアルをお手伝いしました。
このへんファジィ 電気通信大学・西野研究室

絶対にクリックしてはいけないサイト

というのがありましてね

絶対にクリックしてはいけないサイト

あ、デザイナーの佐藤ねじさんと一緒に作りましたシリーズ第5弾です。
技術的なTipsはそんなにないんですが、ねじさんは本当にネタに尽きない人だなぁとつくづく思います。
こういう、人の無意識的な行動を誘発する仕組みは大好きです
絶対にクリックしてはいけないサイト、クリックするとあるギミックが発動するんですが
知らずにやると結構びっくりするんですね
作ってる側はもう慣れちゃってびっくりしなくなってました

ねじさん提案でサイトを作らせていただくのも5つ目になったのですが、僕からも何か提案してみたいなぁと思いつつも、ねじさんが喜んでくれそうなアイデアはなかなか出ないなぁと思いながら日々過ごしてます。

是非見てみてください。では～

Drag and Drop APIのモダンブラウザ間の差異に関する考察

お久しぶりです、わたしです。
今日はHTML5(死語)のDrag and Drop APIのモダンブラウザ間にある(と予想される)実装差異についてです。
Drag and Drop API自体につきましてはググってください。
要はDOMを掴んで投げて落として、データの受け渡しとかイベント処理をよしなにできるAPIです、多分。
まぁざっくりとこの記事の要旨を書きますと

・webkit系ブラウザは、img要素を入れ子した親要素をdragしようとした際に、dragstartイベントのdataTransfer.setDragImageメソッドが正しく機能しない？
・mozilla(Firefox)は、img要素ないしimg要素を内包した親要素でない場合、dragStartイベントのdataTransfer.setDataをしない限りはdragすることができない？

今回、この検証のために書いたコードが以下になります

onload = function(){
    var $elmDrag = $('.drag');
    var $elmDrop = $('.drop');
    var feedbackImg = new Image();
    
    feedbackImg.src = 'http://cdn1.www.st-hatena.com/users/c6/c67n9v6l9/profile.gif';
    
    $elmDrag.on('dragstart',function(e){
        e.originalEvent.dataTransfer.setData('text/plain','hoge');
        e.originalEvent.dataTransfer.setDragImage(feedbackImg,32,32);
    });
    
    $elmDrop.on('dragover',function(e){e.preventDefault()});
    
    $elmDrop.on('drop',function(e){
        e.preventDefault();
        alert('drop');
    });
};

3種類のDOM(imgを内包したdiv、img、div)をdraggableにし、dragstartイベントのリスナー内で、ドラッグ時のフィードバック画像を設定できるdataTransfer.setDragImageで別の画像を設定しています。
右下に設置したdivにdropイベントリスナを貼り、alertを出すという、至極シンプルなものになっています。

で、これをchrome、safari、Firefoxの3ブラウザでテストしてみました。

あ、先に申しますと、僕みたいな適当な人間によるコードとテストなので、「違うよなんか、それは違うよかるね君！」って人は後ろから殴ってください。

結果なんですが、

chrome,safari -> imgを内包したdivをdragする際、dataTransfer.setDragImageが機能しない
firefox -> divをdragできない

となりました。

と、ここで疑問が１つ

ネイティブ HTML5 ドラッグ＆ドロップ - HTML5 Rocks

このページのサンプル、divにも関わらずFirefoxで動作しているんです
はて、僕が書いたコードと何が違うんだろうと根掘り葉掘り調べてみたところ、dragstartイベント時にdataTransfer.setDataを実行しているか否かでした。

細かい実装上の仕様については調べて追記しますが、そういうことのようです。
現に、上記コードでdataTransfer.setDataの行をコメントアウトすると、Firefoxで動作しなくなります。

まとめると

・webkit系ブラウザは、img要素を内包する親要素をdragしようとすると、dragstartイベントのdataTransfer.setDragImageが動作しない
・firefoxは、img要素でない、若しくはimg要素を内包しない要素をdragする際、dragstartイベントのハンドラでdataTransfer.setDataを実行しないとdragができない

ということになります。
もし違うという指摘がある場合はそっと声をかけてください(弱気)。