2012年5月30日水曜日

jQueryのプラグイン limp と airy を書いた

ひょんなことからjQueryの視覚系プラグインを2つ書きました。

jquery.limp.js

ソースというかデモサイトまるごとgithubにあります。
jquery.limp.js

要素をfixed配置に変えて縦スクロールに対して少し遅れてついてくるというものです。
いわゆるパララックス効果的に使えるんじゃないかと思います。

DEMO

limpという名前はlimpbizkitからとりました。僕の青春です。

jquery.airy.js

こちらもデモサイトまるごとgithubにあります。
jquery.airy.js

要素をabsoluteで配置しておくとフワフワとその場を浮遊するというものです。
こちらは使い道が難しいですね。

DEMO

両者ともcoffeescriptで書いてsinatraでサーブしてるのですが、素のjavascript書くのしんどいですね最近……

2012年5月25日金曜日

OS X LionにbrewでAPCをインストールした

まずはFormulaを検索

$ brew search apc
josegonzalez/php/php53-apc  josegonzalez/php/php54-apc

2つありました。 phpはv5.3.10なのでphp53-apcをインストールします。

リポジトリを追加

$ brew tap josegonzalez/php
Cloning into '/usr/local/Library/Taps/josegonzalez-php'...
remote: Counting objects: 1011, done.
remote: Compressing objects: 100% (491/491), done.
remote: Total 1011 (delta 480), reused 929 (delta 416)
Receiving objects: 100% (1011/1011), 140.43 KiB | 109 KiB/s, done.
Resolving deltas: 100% (480/480), done.
Tapped 48 formula

インストール実行

$ brew install php53-apc
......
To finish installing php53-apc:
  * Add the following lines to /usr/local/etc/php.ini:
    [apc]
    extension="/usr/local/Cellar/php53-apc/3.1.10/apc.so"
    apc.enabled=1
    apc.shm_segments=1
    apc.shm_size=64M
    apc.ttl=7200
    apc.user_ttl=7200
    apc.num_files_hint=1024
    apc.mmap_file_mask=/tmp/apc.XXXXXX
    apc.enable_cli=1
  * Restart your webserver.
  * Write a PHP page that calls "phpinfo();"
  * Load it in a browser and look for the info on the apc module.
  * If you see it, you have been successful!
  * You can copy "/usr/local/Cellar/php53-apc/3.1.10/apc.php" to any site to see APC's usage.
......

指示通りphp.iniに設定を追加して、php-fpmを再起動 (これがいまいちまだよくわかってない…)

$ ps ax | grep php
  493   ??  Ss     0:00.17 /usr/local/Cellar/php/5.3.10/sbin/php-fpm
  494   ??  S      0:01.15 /usr/local/Cellar/php/5.3.10/sbin/php-fpm
  495   ??  S      0:01.37 /usr/local/Cellar/php/5.3.10/sbin/php-fpm
$ kill -TERM 493
$ php-fpm

↑とりあえずkillしてから実行してみてる phpinfo()で確認OK!

2012年5月18日金曜日

WebGLに感動したのでThree.jsを触ってみた

このギャラリーの作品はどれもレベル高くてすごい

Chrome Experiments - WebGL Experiments

見てたらWebGLをかじってみたくなったのでThree.jsというのを試してみた。

mrdoob/three.js

リポジトリを落としてきてsinatraに乗っけてherokuにアップしときました。
Three.js Learning
トップページはexamplesの一覧です。

とりあえず本家のGet Startting試してみたけど、動かないとつまらないのでマウスの動きに反応するようにした。

うーん道のり長そうだなぁ

iPhoneだと動かないのかな?

2012年5月2日水曜日

railsのform_forに渡すモデルオブジェクトでurl生成する場合の話

railsのform_forヘルパーは以下のように使いますよね

= form_for(@post) do |f|
  = f.label :title
  = f.text_field :title

こう書いておけば出力されるhtmlは

大体こんな感じになるかと。
でrailsの便利なところはform_forに渡してるモデルオブジェクトが、空なのかDBのレコードから生成されたのかを判別して、actionの属性値をよしなに変更してくれるところですよね。

つまりroutesに

resouces :posts do
end

と書いてあれば 新規作成時は action="/posts" だし編集画面では action="/posts/1" になると。 でもこれが namespace 付きのroutesだとうまく行かなくて困りました。
管理画面を作る場合とかだと /admin/posts にしたくて

namespace :admin do
  resources :posts do
  end
end

と定義しておいて、form_for で生成したフォームを上記のままにしておくと、undefined method `posts_path' と怒られてしまう。 一瞬下記のやり方?とか思ったんですがrailsに限ってそんなことないよね…

= form_for params[:action] == 'new' ? admin_posts_path : edit_admin_post_path(@post) do |f|
  = f.label :title
  = f.text_field :title

ぐぐったら出てきた。

Rails Routes Namespaces and form_for - Stack Overflow
= form_for [:admin, @post] do |f|...

だってさ!
配列で指定するんですか。なるほどこれで admin_posts_path と edit_admin_post_path を切り替えてくれるんですね。

ということは…やってみた。

namespace :hoge do
  namespace :fuga do
    namespace :foo do
      namespace :bar do
        resources :hellos do
        end
      end
    end
  end
end
= form_for [:hoge, :fuga, :foo, :bar, @hello], do |f|
  = f.label :name
  = f.text_field :name

成功\(^o^)/