tag:blogger.com,1999:blog-55287809362730801202024-03-06T11:58:59.456+09:00Into my webkozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.comBlogger46125tag:blogger.com,1999:blog-5528780936273080120.post-40709308614508106712013-06-15T15:37:00.000+09:002013-06-15T15:38:03.309+09:00[Rails3] サイドバーの実装には Cells が便利<p>RailsでViewを作りこんでいくと、ifやeach、さらに変数を代入するだけの行とか出てきてしまってあまり綺麗なViewではなくなっていくとこがよくある。<br />
ifとか文字列の連結を省略したいだけなら <a href="https://github.com/amatsuda/active_decorator">ActiveDecorator</a> とかが便利</p>
<p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6FL3lt1LbvMnz9J65i6cYwwfna9oY7XMtM3ub3XoSBePiTo-SEt-SJY-2975jMxOz4uclAimtzbhPaTrUrLUQixxzHcO35DERDvIISetjiLcfodqtXhZXncFn4MFrmMjBfAZyhF9bDsXg/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-06-15+14.41.11.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6FL3lt1LbvMnz9J65i6cYwwfna9oY7XMtM3ub3XoSBePiTo-SEt-SJY-2975jMxOz4uclAimtzbhPaTrUrLUQixxzHcO35DERDvIISetjiLcfodqtXhZXncFn4MFrmMjBfAZyhF9bDsXg/s1600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2013-06-15+14.41.11.png" /></a></p>
<p>↑こうゆうやつ</p>
<p>でもブログのサイドバーみたいにサイト全体で使うViewがあったりすると、</p>
<ul>
<li>データはControllerで用意するの? => before_filter使うとか</li>
<li>Viewから直接Modelは呼び出したくないよね。。</li>
<li>そもそもViewファイルはどこに置けばいいんだろ? => views/layouts/_sidebar.html.erbとか?</li>
<li>SidebarControllerを実装してサイドバーだけajaxでhtmlを取得するとか?</li>
</ul>
<p>いろいろモヤモヤするとこがあって、あんまり最適解じゃない気がする。</p>
<p>でも <strong>Cells</strong> というgemを使うとViewの部品を小さなコントローラのような形で実装できるようになるのでスッキリ綺麗に書けて凄くイイネ!</p>
<h4>インストール</h4>
<p>Gemfileに以下を書いてbundle installするだけ</p>
<p>Gemfile</p>
<pre>
+ gem 'cells'
</pre>
<pre>
$ bundle install
</pre>
<h4>ジェネレート</h4>
<p>インストールするとジェネレータが追加されているので、cellの名前とアクション名を渡して作成出来る</p>
<pre>
$ bundle exec rails g cell sidebar show
</pre>
<p>ERB以外のテンプレートを使う場合は <strong>-e</strong> オプションを指定すればOK</p>
<pre>
$ bundle exec rails g cell sidebar show -e haml
</pre>
<p>生成したCellは app/cells にある</p>
<pre>
app
├── cells
│ ├── sidebar
│ │ └── show.html.haml
│ └── sidebar_cell.rb
</pre>
<script src="https://gist.github.com/kozo002/5787104.js"></script>
<h4>使ってみる</h4>
<p>Cellを埋め込みたいViewの部分に <strong>render_cell</strong> を使うとレンダリングされる。引数は <strong>Cell名</strong>, <strong>アクション名</strong></p>
<script src="https://gist.github.com/kozo002/53692f2d35713dd8340b.js"></script>
<p>Cellの中では普通にModelが呼べるので</p>
<script src="https://gist.github.com/kozo002/5787115.js"></script>
<p>こんなかんじでModelからデータを受け取ってインスタンス変数に入れておけばCellのViewで使えるようになる</p>
<script src="https://gist.github.com/kozo002/5787119.js"></script>
<p>render_cellには3番目の引数があって、ここに渡したものはCellのアクションメソッドの引数に入るようになる</p>
<script src="https://gist.github.com/kozo002/5787171.js"></script>
<script src="https://gist.github.com/kozo002/5787165.js"></script>
<h4>もう少し便利に</h4>
<p>このままだと通常のViewで使えるヘルパーメソッドは一切呼べないので、<strong>ApplicationCell</strong> を作って継承するようにしてる。</p>
<script src="https://gist.github.com/kozo002/5787121.js"></script>
<p><strong>helper</strong>というメソッドに使いたいヘルパーのモジュールを渡すと使えるようになる</p>
<p>また <strong>helper_method</strong> というメソッドも用意されていて、個別にヘルパーを追加できるようにもなってる。<br />
自分はdeviseの <strong>current_user</strong> をCellのViewでも使いたかったので以下のようにしてみた</p>
<script src="https://gist.github.com/kozo002/5787127.js"></script>
<p>これで <strong>c.current_user</strong> とすれば呼び出せて、ログインしてたら編集ボタンを表示するようにできた</p>
<script src="https://gist.github.com/kozo002/5787132.js"></script>
<p>以前はSidebarControllerを実装してサイドバーのhtmlだけajaxで取得とかやってたこともあるけど、そもそもjsがオフってあると使えないし、Controllerはアプリケーションのリソースのためだけに使うようにしたいからこの方法がベストだと思う。<br />
railsに取り込まれてもいいんじゃないかなぁ</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-42758861391952333022013-06-14T12:41:00.000+09:002013-06-14T12:44:41.739+09:00[Rails3] has_many through で polymorphic な関連で相互に参照する<p>Rails3で has_many through でしかも polymorphic な関連を実装していて、polymorphicなモデル側からhas_manyを探せるけど、逆のやり方に苦戦したのでメモ</p>
<p>
<strong>User</strong> モデルは<strong>複数の Club</strong>に属すことができて、Clubもまた<strong>複数の User</strong>を受け入れられるという感じ。
</p>
<h4>最初にやってた方法</h4>
<script src="https://gist.github.com/kozo002/5779088.js"></script>
<script src="https://gist.github.com/kozo002/5779084.js"></script>
<script src="https://gist.github.com/kozo002/5779082.js"></script>
<p><strong>Membership</strong> はpolymorphicなモデルにしていて、例えばClub以外にもFamilyとか他のグループでも同じモデルを使いまわしたかった。</p>
<h4>データを作ってみる</h4>
<p>rails consoleでデータを作成</p>
<pre>
user = User.create({ name: 'kozo' })
=> #<User id: 1, name: "kozo", created_at: "2013-06-14 03:14:59", updated_at: "2013-06-14 03:14:59">
club = Club.create({ name: 'football' })
=> #<Club id: 1, name: "football", created_at: "2013-06-14 03:14:50", updated_at: "2013-06-14 03:14:50">
club.memberships.create({ user_id: user.id })
=> #<Membership id: 1, user_id: 1, membable_id: 1, membable_type: "Club", created_at: "2013-06-14 03:15:19", updated_at: "2013-06-14 03:15:19">
</pre>
<h4>Club -> Userの参照はうまくいく</h4>
<p>こんな感じにClub側からUserを参照するのは簡単にできちゃう</p>
<pre>
club = Club.find(1)
club.members
# =>[#<User id: 1, name: "kozo", created_at: "2013-06-14 03:14:59", updated_at: "2013-06-14 03:14:59">]
</pre>
<h4>User -> Clubの参照はできなかった・・・</h4>
<pre>
user = User.find(1)
user.membered_clubs
# => ActiveRecord::HasManyThroughSourceAssociationNotFoundError:
Could not find the source association(s) :membable in model Membership.
Try 'has_many :membered_clubs, :through => :memberships, :source => <name>'. Is it one of :user or :club?
</pre>
<h4>ドキュメントにはsourceとsource_typeを使えばOKって書いてあるっぽい</h4>
<p><a href="http://wiki.usagee.co.jp/ruby/rails/RailsGuides%E3%82%92%E3%82%86%E3%81%A3%E3%81%8F%E3%82%8A%E5%92%8C%E8%A8%B3%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E3%82%88/Active%20Record%20Associations" target="_blank">ruby/rails/RailsGuidesをゆっくり和訳してみたよ/Active Record Associations - 株式会社ウサギィwiki</a></p>
<blockquote>
4.3.2.18 :source<br />
<br />
:source オプションは has_many :through アソシエーションの元になるアソシエーション名を指定します。 元のアソシエーションの名前が自動的にアソシエーション名から推測できない場合にのみ、このオプションを使用する必要があります。<br />
<br />
4.3.2.19 :source_type<br />
<br />
:source_type オプションは polymorphic アソシエーションを通じて進める has_many :through アソシエーションの元になる型を指定します。
</blockquote>
<h4>でもググったらすぐ出てきた</h4>
<p><a href="http://blog.hasmanythrough.com/2006/4/3/polymorphic-through" target="_blank">has_many :through - The other side of polymorphic :through associations</a></p>
<p>MembershipとUserに細かく書いてあげるといいっぽい</p>
<script src="https://gist.github.com/kozo002/5779278.js"></script>
<script src="https://gist.github.com/kozo002/5779300.js"></script>
<pre>
club = Club.find(1)
=> #<Club id: 1, name: "football", created_at: "2013-06-14 03:14:50", updated_at: "2013-06-14 03:14:50">
club.members
=> [#<User id: 1, name: "kozo", created_at: "2013-06-14 03:14:59", updated_at: "2013-06-14 03:14:59">]
user = User.find(1)
=> #<User id: 1, name: "kozo", created_at: "2013-06-14 03:14:59", updated_at: "2013-06-14 03:14:59">
user.membered_clubs
=> [#<Club id: 1, name: "football", created_at: "2013-06-14 03:14:50", updated_at: "2013-06-14 03:14:50">]
</pre>
<p>できた!</p>
kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-37878231998498782702012-12-13T10:25:00.000+09:002012-12-13T10:25:30.797+09:00ヨドバシで予約したiPad miniの状況をMechanizeでチェックする<p>12/1にiPad mini買いに行ったら全モデル完売したので入荷するまで予約で待てと言われた。<br />
しょうがないので予約したら商品いつ手に入るかわからないし全額払わされるのにポイントが貯まらないし、入荷したかどうかは自分でWebページを見ろという散々な状況です。</p>
<p>気になるけど酷いUI使ってわざわざ見るのもかったるいのでMechanizeにやってもらうことにしました。<br />
herokuにデプロイしてschedulerで毎時0分に実行しています。</p>
<script src="https://gist.github.com/4273216.js"></script>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-592952390688257272012-10-31T00:52:00.000+09:002012-10-31T01:12:16.608+09:00PHPのスコープのお話についてのお話<p>こちらの記事をたまたま見て気になったので投稿。<br />
<a href="http://webcake.no003.info/webdesign/php-block-scope.html/trackback" target="_blank">PHPでforeachなどを使う時の注意点。ブロックスコープのお話。</a></p>
<p>確かにループで一時的に必要な変数にスコープが無いと都合が悪いのはその通りなんだけど、解決策にモヤモヤ…</p>
<p>スコープが欲しいところに無いなら作ればいいわけで</p>
<script src="https://gist.github.com/3981142.js?file=fruits.php"></script>
<p>関数に入れればスコープが作れる。</p>
<p>もっと言えばクラスにすればいいと思う。</p>
<script src="https://gist.github.com/3981149.js?file=fruits.php"></script>
kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com1tag:blogger.com,1999:blog-5528780936273080120.post-90648799263100349182012-10-23T22:10:00.002+09:002012-10-23T22:10:13.962+09:00Backboneを学ぶ #0 環境構築<p>転職して新しい職場ではBackboneを使いそうなのに、今までこれで何も作ったことが無いので勉強することにしました。<br />
ひと通り出来るようになるまで続けたいので連載にしてみます。まずは開発環境の構築など</p>
<ul>
<li>サーバサイド
<ul>
<li>Sinatra (マイクロフレームワーク)</li>
<li>haml (テンプレートエンジン)</li>
<li>scss (cssメタ言語)</li>
<li>CoffeeScript (javascriptメタ言語)</li>
<li>Shotgun (開発用rackサーバ)</li>
</ul>
</li>
<li>クライアントサイド
<ul>
<li>jquery.1.8.2.js</li>
<li>underscore.js</li>
<li>backbone.js</li>
</ul>
</li>
<li>リポジトリ
<ul>
<li><a href="https://github.com/kozo002/phoga" target="_blank">kozo002/phoga</a></li>
</ul>
</li>
<li>サーバ
<ul>
<li><a href="http://phoga.herokuapp.com" target="_blank">herokuにしました</a></li>
</ul>
</li>
</ul>
kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-85124033019421991712012-08-24T17:02:00.000+09:002012-11-03T16:19:37.869+09:00TextMate2の新しいタブを開くショートカットを変更したTextMate2のNew Tabが 「option + command + N」 で左手が辛いので
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi57twxroh5b78xWpgjwr2ArK_nOWu5ED9r1Oi_A_tOr6Xfxduo821o7c-_2yDNKSPXraLEKmZp2f_Ay8Vb3zVkNHEmEWesBwlRJC6tnpCaRKW65pmiI-vy_5RNp79-Ap5soT_JBvLqRRng/s1600/add-textmate-shortcut.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi57twxroh5b78xWpgjwr2ArK_nOWu5ED9r1Oi_A_tOr6Xfxduo821o7c-_2yDNKSPXraLEKmZp2f_Ay8Vb3zVkNHEmEWesBwlRJC6tnpCaRKW65pmiI-vy_5RNp79-Ap5soT_JBvLqRRng/s320/add-textmate-shortcut.jpg" /></a></div>
以上kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-18395859923578954632012-08-20T01:00:00.000+09:002012-11-03T16:21:26.596+09:00Rails3でクエリパラメータでルーティング(Advanced Constraints)<p>少し前に<a href="http://sendagayarb.github.com/">sendagaya.rb</a>で発表したRails3の<a href="http://edgeguides.rubyonrails.org/routing.html#advanced-constraints">Advanced Constraints</a>をここでも紹介。</p>
<p>routes.rbの中でURLを定義する時にsubdomainとかを条件に含めるときに使うのがconstraintsというオプションなんですが、これを使ってURLの「?」以降を条件にしたりもできます。</p>
<p>方法はrequestオブジェクトを受け付けるmatches?というメソッドを実装したクラスを定義してインスタンスをconstraintsに渡してあげるだけです。</p>
<script src="https://gist.github.com/3182589.js?file=routes.rb"></script>
<p>ここではpostというリソースの集合であるindex、つまり /posts というURLにGETで ?q=hoge 等のパラメータが付いている時に posts_controller#search というアクションに紐付けるということを行なっています。</p>
<p>ただしこのままだと q に対するvalueが空の状態 /posts?q でもsearchアクションに処理が渡るので、コントローラ側で何かしらの対応が必要です。</p>
<p>基本的にはrequestオブジェクトを使って判別できるならどんな条件でもいいので、Accept-languageで振り分けるとかIPアドレスでブラックリストを作るとかもできてしまいます。</p>
<p>今回はindexアクションの中でifで分岐させておくことでも十分対応可能ですが、render以外はほとんど共通処理がないよとかになると、アクションそのものを分けてしまったほうが綺麗なコードになりそうですよね。</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-40745094511158773912012-08-14T14:06:00.001+09:002012-08-14T14:06:45.303+09:00オープンソースになったTextMate2をbuildしてみた<p>すっかりVimに慣れてしまった今日この頃ですが、お世話になったTextMateの2がオープンソースになったのでbuildしてみました。ちなみに環境は OS X lion 10.7.4です。</p>
<ol>
<li>
<h4>Githubへ行ってみる</h4>
<p><a href="https://github.com/textmate/textmate.git">https://github.com/textmate/textmate.git</a></p>
<p>READMEにbuild方法は書かれていますね。</p>
</li>
<li>
<h4>必要なライブラリをインストール</h4>
<p>とりあえず brew install ragel boost multimarkdown hg ninja とやってみたのですが ninja なんてないよって怒られちゃいました</p>
<p>というわけで先に brew update してから再度実行したらちゃんと入りました</p>
</li>
<li>
<h4>リポジトリをclone</h4>
<p>git clone https://github.com/textmate/textmate.git でホームディレクトリにcloneしました</p>
<p>textmate というフォルダができているはずなのでそこに移動 cd textmate</p>
</li>
<li>
<h4>build実行</h4>
<p>の前に、READMEをみると git submodule update --init とやってねと書いてあるので実行</p>
<p>そして ./configure && ninja 実行!したら clang が古いと言われてしまいました</p>
<p>brew install --HEAD llvm --with-clang で入るはずなんですが、Error: can't convert nil into String とか言われる</p>
<p>brew update も brew doctor も問題ないんだよなぁ</p>
<p><a href="https://github.com/mxcl/homebrew/wiki/bug-fixing-checklist">Githubのbug-fixing-checklist</a>を見るとXCodeのupdateして見た方が良さそうだなと思ったので <a href="https://developer.apple.com/downloads/index.action#">Apple</a> からCommando line tools for XCodeの割と最近のやつをDLした</p>
<p>でやり直しても駄目だなぁ。とよく見てみたらXCode 4.4+と書いてある、手元のXCodeは4.3でした。App Storeから入れ直そう。</p>
</li>
<li>
<h4>XCodeをupdateしたので</h4>
<p>気を取り直して ./configure && ninja を再度実行してみた。そしたら今度は pgrep が無いよと言われた</p>
<p>brew install pgrep を実行。(そろそろめんどくさくなってきた)</p>
<p>./configure && ninja よし。こんどこそうまく行ってそう。(なにやらwarningとかdepricatedが出てきてますが)</p>
</li>
<li>
<h4>build成功した</h4>
<p>やっと成功した。</p>
<p>へー2からはPreferencesでbundleとかthemeを追加できるようになってるんですね。逆に言うと最初は何も入ってないからハイライトも何も無いのだけど。</p>
<p>めでたし</p>
</li>
</ol>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-88529359380663377262012-08-08T23:48:00.000+09:002012-08-08T23:49:59.990+09:00bashでgitの現在のbranch名を表示させる<p>git-completionというシェルスクリプトを使えばできるということを知ったのでやってみた。</p>
<ol>
<li>
<p>gitのバージョンを調べる</p>
<pre>
$ git --version
$ 1.7.7.5
</pre>
</li>
<li>
<p>github(<a href="http://github.com/gitster/git">http://github.com/gitster/git</a>)に行きcodeのtreeを同じバージョンに切り替える(ブランチの切り替え部分と同じところです)</p>
</li>
<li>
<p>git-completion.bashまでtreeをたどりraw表示に切り替えて保存<br />
自分はhttps://raw.github.com/gitster/git/v1.7.7.5/contrib/completion/git-completion.bashでした</p>
</li>
<li>
<p>DLしたファイルに使い方は大体書いてあるのでその通りにやれば動くと思います</p>
<pre>
$ cd ~
$ mv git-completion.bash .git-completion.sh
$ vim .bashrc (or .bash_profile)
$ PS1='[\u@\h \W$(__git_ps1 " (%s)")]\$ ' を追記
$ source .bashrc
</pre>
</li>
<li>
<p>こんなかんじで表示されました</p>
<pre>
[kozo@kozo-mp current_dir (master)]$
</pre>
</li>
</ol>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-59759088236948013502012-07-26T22:53:00.000+09:002012-08-08T23:49:32.861+09:00OS X Mountain Lionにアップデートした<p>早速OS X Mountain Lionにアップデートしたのでいくつか作業を記録します。</p>
<ol>
<li>App StoreからMountain Lionをダウンロード</li>
<li>
インストーラをコピーしておく
<ul>
<li>参考<a href="http://blog.livedoor.jp/dankogai/archives/51814209.html">備忘録 - Mountain Lion を最低限文化的にしつけるためにやったこと</a></li>
</ul>
</li>
<li>インストールで暫し待つ(40分くらい)</li>
<li>App StoreからXCodeをインストール</li>
<li>iTerm2を立ちあげておもむろに<code>git --version</code>と打ってみた→消されてる!</li>
<li>
ググったらこんなの発見
<ul>
<li>
<a href="https://gist.github.com/1860902">Get Mountain Lion and Homebrew to Be Happy</a>
</li>
</ul>
</li>
<li>
XCodeを立ち上げてPreferences経由でcommand line toolsをインストール
<ul>
<li>git --versionでインストールを確認</li>
</ul>
</li>
<li>Homebrewのアップデート</li>
<li>imagemagickが再インストール必要みたいなので一旦brew remove imagemagick</li>
<li>
brew install imagemagick --use-gccとやるとXQuartzがないよと言われる
<ul>
<li>
<a href="http://xquartz.macosforge.org/trac/wiki/X112.7.2">http://xquartz.macosforge.org/trac/wiki/X112.7.2</a>
からdmgをDLしてインストーラを実行
</li>
</ul>
</li>
<li>
再度 brew install imagemagick --use-gcc を実行
<ul>
<li>gccがみつからないらしく失敗</li>
<li>めんどくさくなったので --use-gcc オプションを消してインストール</li>
</ul>
</li>
<li>で、何?感やばい</li>
</ol>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-25051123621126639622012-07-19T13:31:00.000+09:002012-07-19T13:31:35.902+09:00IE9でiframe内で遷移した場合window.parentのメソッドを呼べない<p>状況としては、ビデオ一覧ページから各ビデオをiframeを使ったレイヤーで立ち上げるページにて<br />
ビデオは<a href="http://mediaelementjs.com/">MediaElement.js</a>というのを使っていて、HTML5対応の判別して、ダメならFlashとかSilverlightとかに切り替えてくれるようになってます。(何も再生手段がなければmp4をDLさせます)</p>
<p>閉じるボタンを押してもビデオが再生されたまま</p>
<p>↓</p>
<p>iframeが非表示になっただけでページ内に生きているから</p>
<p>↓</p>
<p>レイヤーを表示させてるjsを調べる<br />
なんだこれ誰かの自作じゃねえか!closeイベントとか取れねえよ!</p>
<p>↓</p>
<p>親ウィンドウから子iframeにアクセスするか、<br />
子iframeから親ウィンドウに渡すか</p>
↓
<p>後者を選択して window.parent.videos.push(video)<br />
親のレイヤーを非表示にするときの処理に</p>
<pre>
if (window.videos) {
for (var i in window.videos) {
if (!window.videos[i].paused) {
window.videos[i].pause();
}
}
}
</pre>
<p>
というのを挟むようにした。<br />
IE、他ブラウザほぼ動く。</p>
<p>↓</p>
<p>IE9だけ動かない!<br />
iframe内で次の動画へ遷移できるようにしてあったんだけど<br />
ビデオのhtmlは一本につき1ファイルなのでこれは単純にリンクを押してるだけ<br />
親から直接ではなくiframe内で遷移後にエラーする。<br />
(でもIEのステータスバーにはエラー表示が出ないんだけどね)</p>
<p>↓</p>
<p>IE9のF12開発者ツールでブレークポイントつけてみる<br />
「解放されたスクリプトからコードを実行できません」<br />
ハァ(゚д゚)?</p>
<p>↓</p>
<p>ググってみた。あぁそういえばIEではJavaScriptじゃなくてJScriptだったな……<br />
つまり信頼性の低いスクリプトから親ウィンドウにあるオブジェクトのメソッドを実行できないってことですかね!!<br />
というわけでpushじゃなくて代入にした。<br />
window.parent.videos[window.parent.videos.length] = video;</p>
<p>↓</p>
<p>動いた!<br />
プロパティの参照と代入は問題ないみたいです。</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-12624284366005515192012-07-06T15:37:00.000+09:002012-07-06T17:50:00.771+09:00CentOS 6 でRails + thin + nginxを動かした<p>thinってオワコンじゃないですよね?herokuで採用されているし別にいいですよね。<br />
本当はunicorn使いたかったんですが難しい…… ><;<br />
ぐぐると記事沢山出てきますが uninitialized constant errorで起動しない問題が解決できなくてやめちゃいました。いつかリベンジします。</p>
<h3>CentOS 6</h3>
<p>マシンはvagrant使ってcentos6を用意しました。<br />
参考:<a href="http://www.ryuzee.com/contents/blog/4292">http://www.ryuzee.com/contents/blog/4292</a><br />
vagrantって便利ですね。元々Virtual Boxでwindows動かしてたのですんなりです。ホントに。するっと。</p>
<p>IPアドレスと</p>
<p>
<pre class="code" name="ruby">
config.vm.network :hostonly, "192.168.33.10"
</pre>
</p>
<p>メモリとnameを設定しておきました</p>
<p>
<pre class="code" name="ruby">
config.vm.customize do |vm|
vm.memory_size = 1024
vm.name = 'vagrant_centos6'
end
</pre>
</p>
<h3>Ruby</h3>
<p>rbenv + ruby-buildで1.9.3-p194をインストール</p>
<h3>Thin</h3>
<p>Gemfileのgroup :productionにgem 'thin'を追加して普通にbundle install</p>
<p>config/thin.ymlは</p>
<p>
<pre class="code" name="ruby">
pid: tmp/pids/thin.pid
log: log/thin.log
servers: 1
port: 3000
daemonize: true
environment: production
user: vagrant
group: staff
</pre>
</p>
<p>
以下で起動、停止、再起動
<pre class="code" name="ruby">
$ be thin start|stop|restart -C config/thin.yml
</pre>
</p>
<h3>Nginx</h3>
<p>yumでnginxをインストール(参考:<a href="http://blog.livedoor.jp/sasata299/archives/51810645.html">http://blog.livedoor.jp/sasata299/archives/51810645.html</a>)</p>
<p>/etc/nginx/nginx.confは</p>
<p>
<pre class="code" name="ruby">
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;
}
}
}
</pre>
</p>
<h3>試す</h3>
<p>あとはmacのhostsに</p>
<p>
<pre class="code" name="ruby">
192.168.33.10 centos6.vag
192.168.33.10 2.centos6.vag
</pre>
</p>
<p>を設定してブラウザでアクセス!</p>
<h2>サクセス!</h2>
<p>でもnginx.confの書き方冗長だなぁもっといいのあるんだろうか。</p>
<h3>※追記</h3>
<p>上記の状態で試しに request.url を覗いてみたら http://backend2/ とかでちゃったよ!困るよ!</p>
<p>というわけでnginx.confを一部修正してみたら問題なく動いた</p>
<p><pre class="code" name="ruby">
...省略...
upstream 2.centos6.vag {
server localhost:3001;
}
server {
listen 80;
server_name 2.centos6.vag;
location / {
proxy_pass http://2.centos6.vag;
}
}
...省略...
</pre></p>
<p>request.url でhttp://2.centos6.vagが返ってきた!</p>
<h3>※追記2</h3>
<p>画像など静的ファイルが返らないことがわかったので以下のようにconfig修正</p>
<p><pre class="code" name="ruby">
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;
}
}
</pre></p>
<h3>※追記3 </h3>
<p>thinの再起動などダウンタイムにnginxのデフォルトエラーページが返されるのでconfig追加</p>
<p><pre class="code" name="ruby">
error_page 500 502 503 504 /500.html;↲
location = /500.html {↲
root /home/vagrant/sample2/public;↲
}
</pre></p>
<h3>※追記4</h3>
<p>マシンを再起動したときにthinも自動起動するようにした!</p>
<p>/etc/init.d/sampleを作成</p>
<p><pre class="code" name="ruby">
#!/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
</p></pre>
<p>登録する</p>
<p><pre class="code" name="ruby">
$ sudo /etc/init.d/sample start
$ sudo chkconfig sample on
</pre></p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-79560914441810726052012-06-20T15:06:00.000+09:002012-06-20T16:41:42.847+09:00jQuery.fn.loadのcallbackで受け取るjQuery.Event.targetはIEでDOM要素をとれない時がある<p>タイトルで大体言いきりました。</p>
<p>写真のスライドショーを作成していて、画像タグはJavaScript側で作成してDOMに追加するようにしていました。
何故こうしたかというと、環境によって画像の読み込みが終わらないうちにスライドショーの自動再生が始まってしまうのを防ぐためです。</p>
<p>具体的には以下のようなコードで画像の読み込み完了を待ってDOMに追加しています。</p>
<pre class="javascript" name="code">
$('<img />').attr(src: '/images/hoge.jpg?' + new Date().getTime()).load (e) =>
$img = $ e.target
$('#container').append $img
</pre>
<p>
'?' + new Date().getTime() の部分ですが、コレをしておかないとIEがonloadイベントをサボるんですよね。。<br />
必ずイベントを発火させるようにしています。</p>
<p>でIMG要素を $ e.target でjQuery化してappendという流れですが、実はこれだとIEでIMG要素がとれていないんです!<br />
気づかずにそのまま処理を進めると画面真っ白になってお馴染みのわかりづらいエラーメッセージにかなり困惑しました。</p>
<p>IE8で以下の様に検証してみました。</p>
<p>A) e.targetでIMG要素が取得できない</p>
<pre class="javascript" name="code">
$('<img />').attr(src: '/images/hoge.jpg?' + new Date().getTime()).load (e) =>
console.log e.target.nodeName # => #document
</pre>
<p>B) e.targetでIMG要素がとれる</p>
<pre class="javascript" name="code">
$img = $ 'img.sample'
$img.attr(src: $img.attr('src') + '?' + new Date().getTime()).load (e) =>
console.log e.target.nodeName # => IMG
</pre>
<p>違いはJSで要素を作成するか、htmlに記述されている要素を取得するかですね。</p>
<p>まぁぶっちゃけ loadのcallback内でthisが対象のIMG要素なのでコレ使えばいいんですよ。<br />
でもCoffeeScriptつかってclass化したオブジェクトの中だと @(this) は常にクラスそのものとして使いたいので、
関数のthisにバインドしてくれる => を使いたいんですよね。</p>
<p>というわけで jQuery.Event オブジェクトの出番なわけです。<br />
Aの方法だとIEで期待通りでないことがわかったので調べたところ、jQuery.Event.currentTarget というのがありました。<br />
console.log e.currentTarget.nodeName でちゃんとIMGが返ってきたよ〜!</p>
<p>今後調べたいこと</p>
<ul>
<li>$('<img />') と書いた時にブラウザ別に何が行われているのか</li>
<li>jQuery.Eventのコンストラクタを読む</li></ul>
<p>追記:</p>
<ul>
<li>jQuery APIの.load()を見たらDeprecatedのタグが付いてたのでbindでも試してみたけど、結果は一緒</li>
</ul>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-72154808085540607032012-06-13T16:16:00.001+09:002012-06-13T16:16:53.417+09:00ブログを書くネタがない<p>うーん。ない。</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-4211477219583338772012-06-04T10:41:00.001+09:002012-06-04T11:21:48.353+09:00herokuで(mbstring有効な)phpがすぐ動いた<p>herokuでphpが動くのは前々から知っていたのですが、mbstringが有効なphpがいとも簡単に動くという情報を見つけたので試してみました。</p>
<pre class="php" name="code">
$ 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
</pre>
<p>こんだけ!?全然難しくないですね。<br />heroku openしてみたらちゃんとphpinfoが表示されました。</p>
<p>でも気になったのがindex.phpの設置場所。<br />基本phpはindexに相当するものを設置しなければいけないと思うのですが、これってpublicディレクトリにしても動くのだろうか…?</p>
<pre class="php" name="code">
$ 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
</pre>
<p>ガーン!…そもそもアプリのルートにindex.phpが無いと受け付けてくれないのか。<br />ということは環境変数DOCUMENT_ROOTとか使えないのかな?</p>
<pre class="php" name="code">
$ heroku config:add DOCUMENT_ROOT=/app/www/public
Adding config vars and restarting app... done, v5
DOCUMENT_ROOT => /app/www/public
</pre>
<p>まぁ無理でした。環境変数はセットできても何の意味も無いですね。ググっても情報みつからないので多分このオプションは存在しないのでしょう。<br />アプリそのものが公開ディレクトリなのはそれはそれでphpらしいですよね。</p>
<p>しかしphp速い感じする。ただのphpinfoというのもあるだろうけど、アプリの更新しても再起動が無いからか。</p>
<p>参考:<a href="http://d.hatena.ne.jp/hnw/20120603">HerokuのBuildpackを利用してmbstringが有効なPHPサーバを立ててみた - hnwの日記</a></p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-55844326751475742192012-06-01T12:40:00.000+09:002012-06-01T12:40:29.757+09:00CoffeeScriptでJavaScriptもクラス化しよう。テストを書きやすくメンテしやすく<p>CoffeeScriptを知ったのはRailsに組み込まれたからですが、Rails3.1で採用されてすぐに飛びついたわけではなく、しばらく敬遠してた時期もありました。しかし使い始めてからはもう手放せなくなりました。<br />
そして次第にCoffeeScriptのclass構文を使えばよりよいJavaScriptの開発ができるのではないかと思うようになりました。<br />
今回は最近CoffeeScriptを使ってどのように開発しているかを紹介したいと思います。</p>
<p>CoffeeScriptでのclass定義はこうやります</p>
<pre class="javascript" name="code">
class Person
constructor: (@my_name) ->
greeting: ->
alert "Hello! my name is #{@my_name}."
window.Person = window.Person || Person
</pre>
<p>コンパイルすると以下のようなJavaScriptになります</p>
<pre class="javascript" name="code">
(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);
</pre>
<p>※nameプロパティを使うと上書きしてしまうのでmynameとしました</p>
<p>例えばこのようなコードを person というファイル名で保存し、インスタンス生成は main という別ファイルで実行します。</p>
<span>main.coffee</span>
<pre class="javascript" name="code">
$ ->
kozo = new window.Person 'kozo'
kozo.greeting()
</pre>
<span>main.js</span>
<pre class="javascript" name="code">
(function() {
$(function() {
var kozo;
kozo = new window.Person('kozo');
return kozo.greeting();
});
}).call(this);
</pre>
<p>こうすることでまず管理がしやすくなりますし、テストも気持ちよく書けると思います。</p>
<p></p>
<p>テストフレームワークはよく jasmine をつかっています。その前は QUnit だったんですが jasmine の方がドキュメントが探しやすいのとツールが整っている印象ですし、なによりコードが書きやすく後からでも見やすいですね。人によるかも知れませんが。<br />僕の場合CoffeeScript を使うときはほぼ Rails か sinatra 上ですので jasmine-headless-webkit というgemをつかってます。これを使うとCUIで実行結果が得られます。(jasmine-railsはこれに依存しています)</p>
<p>jasmineの諸々の設定は省略しますがテストコードはこんな感じにしています。</p>
<span>person_spec.coffee</span>
<pre class="javascript" name="code">
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."
</pre>
<p>DOMが絡むテストは <a href="https://github.com/searls/jasmine-fixture" target="_blank">jasmine-fixture</a> というのをhelperとして読み込んで使っています。jqueryに依存しているのですが、むしろ使わない事のほうが少ないので気にしないです。affix という便利メソッドが使えるようになって、jqueryオブジェクトのprototypeにも追加されるので気に入ってます。</p>
<p>以上のような形で開発を進めてるのですが、クラスファイルと実行ファイルを分けてなるべくDOMの情報とかは実行ファイルに書き込むようにするといいと思います。<br />サイトのトップページにスライドショー的なものを設置するなら例えば以下の様な感じです。</p>
<span>main.coffee</span>
<pre class="javascript" name="code">
$ ->
slideshow = new window.Slideshow {
container_id: '#hoge-slideshow'
controller_id: '#hoge-controller'
duration: 800
wait: 3000
}
slideshow.start()
</pre>
<p>要はリテラル値をまとめて書いておくということです。</p>
<p>ただこのように実行ファイルに分けていてもファイル名が script とかにする人がいたりして…それはそれでわからなくはないのですが、mainの方が無難じゃないですかねぇ。</p>
<p>あぁマシン持ち寄ってこうゆう話ししながら酒を呑む仲間がほしいなぁ…</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-33381929794746438032012-05-30T14:11:00.001+09:002012-06-01T12:40:49.640+09:00jQueryのプラグイン limp と airy を書いた<p>ひょんなことからjQueryの視覚系プラグインを2つ書きました。</p>
<h3>jquery.limp.js</h3>
<p>ソースというかデモサイトまるごとgithubにあります。<br />
<a href="https://github.com/kozo002/jquery.limp.js">jquery.limp.js</a>
</p>
<p>要素をfixed配置に変えて縦スクロールに対して少し遅れてついてくるというものです。<br />
いわゆるパララックス効果的に使えるんじゃないかと思います。</p>
<p><a href="http://jquery-limp.heroku.com/" target="_blank">DEMO</a></p>
<p>limpという名前はlimpbizkitからとりました。僕の青春です。</p>
<h3>jquery.airy.js</h3>
<p>こちらもデモサイトまるごとgithubにあります。<br />
<a href="https://github.com/kozo002/jquery.limp.js">jquery.airy.js</a>
</p>
<p>要素をabsoluteで配置しておくとフワフワとその場を浮遊するというものです。<br />
こちらは使い道が難しいですね。</p>
<p><a href="http://jquery-airy.herokuapp.com/" target="_blank">DEMO</a></p>
<p>両者ともcoffeescriptで書いてsinatraでサーブしてるのですが、素のjavascript書くのしんどいですね最近……</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-45722674606126155112012-05-25T13:18:00.000+09:002012-05-25T13:20:53.444+09:00OS X LionにbrewでAPCをインストールした<p>まずはFormulaを検索</p>
<pre class="php" name="code">
$ brew search apc
josegonzalez/php/php53-apc josegonzalez/php/php54-apc
</pre>
<p>
2つありました。
phpはv5.3.10なのでphp53-apcをインストールします。
</p>
<p>
リポジトリを追加
</p>
<pre class="php" name="code">
$ 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
</pre>
<p>
インストール実行
</p>
<pre class="php" name="code">
$ 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.
......
</pre>
<p>
指示通りphp.iniに設定を追加して、php-fpmを再起動
(これがいまいちまだよくわかってない…)
</p>
<pre class="php" name="code">
$ 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
</pre>
<p>
↑とりあえずkillしてから実行してみてる
phpinfo()で確認OK!
</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com1tag:blogger.com,1999:blog-5528780936273080120.post-30834694285590460192012-05-18T18:48:00.001+09:002012-05-23T10:50:07.057+09:00WebGLに感動したのでThree.jsを触ってみた<p>このギャラリーの作品はどれもレベル高くてすごい</p>
<p>
<a href="http://www.chromeexperiments.com/webgl/">Chrome Experiments - WebGL Experiments</a>
</p>
<p>見てたらWebGLをかじってみたくなったのでThree.jsというのを試してみた。</p>
<p>
<a href="https://github.com/mrdoob/three.js/">mrdoob/three.js</a>
</p>
<p>
リポジトリを落としてきてsinatraに乗っけてherokuにアップしときました。<br />
<a href="http://threejs-learning.heroku.com/">Three.js Learning</a><br />
トップページはexamplesの一覧です。
</p>
<p>とりあえず本家の<a href="http://www.aerotwist.com/tutorials/getting-started-with-three-js/">Get Startting</a>で<a href="http://threejs-learning.heroku.com/get_start">試して</a>みたけど、動かないとつまらないのでマウスの動きに反応するようにした。</p>
<p>うーん道のり長そうだなぁ</p>
<p>iPhoneだと動かないのかな?</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-83874009045036680212012-05-02T11:50:00.002+09:002012-05-02T11:50:45.485+09:00railsのform_forに渡すモデルオブジェクトでurl生成する場合の話<p>railsのform_forヘルパーは以下のように使いますよね</p>
<pre class="ruby" name="code">
= form_for(@post) do |f|
= f.label :title
= f.text_field :title
</pre>
<p>こう書いておけば出力されるhtmlは</p>
<pre class="html" name="code">
<form action="/posts" method="post">
<label for="post_title">Title</label>
<input id="post_title" name="post[title]" />
</form>
</pre>
<p>大体こんな感じになるかと。<br />
でrailsの便利なところはform_forに渡してるモデルオブジェクトが、空なのかDBのレコードから生成されたのかを判別して、actionの属性値をよしなに変更してくれるところですよね。</p>
<p>つまりroutesに</p>
<pre class="ruby" name="code">
resouces :posts do
end
</pre>
<p>と書いてあれば 新規作成時は <code>action="/posts"</code> だし編集画面では <code>action="/posts/1"</code> になると。
でもこれが namespace 付きのroutesだとうまく行かなくて困りました。<br />
管理画面を作る場合とかだと /admin/posts にしたくて</p>
<pre class="ruby" name="code">
namespace :admin do
resources :posts do
end
end
</pre>
<p>と定義しておいて、form_for で生成したフォームを上記のままにしておくと、undefined method `posts_path' と怒られてしまう。
一瞬下記のやり方?とか思ったんですがrailsに限ってそんなことないよね…</p>
<pre class="ruby" name="code">
= form_for params[:action] == 'new' ? admin_posts_path : edit_admin_post_path(@post) do |f|
= f.label :title
= f.text_field :title
</pre>
<p>ぐぐったら出てきた。</p>
<a href="http://stackoverflow.com/questions/3853531/rails-routes-namespaces-and-form-for">Rails Routes Namespaces and form_for - Stack Overflow</a>
<pre class="ruby" name="code">
= form_for [:admin, @post] do |f|...
</pre>
<p>だってさ!<br />
配列で指定するんですか。なるほどこれで admin_posts_path と edit_admin_post_path を切り替えてくれるんですね。</p>
<p>ということは…やってみた。</p>
<pre class="ruby" name="code">
namespace :hoge do
namespace :fuga do
namespace :foo do
namespace :bar do
resources :hellos do
end
end
end
end
end
</pre>
<pre class="ruby" name="code">
= form_for [:hoge, :fuga, :foo, :bar, @hello], do |f|
= f.label :name
= f.text_field :name
</pre>
<p>成功\(^o^)/</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-66844453196396776282012-04-27T00:14:00.002+09:002012-04-27T11:21:08.242+09:00[ruby]最初に知っておけば良かったbundlerの使い方 sinatra編<p><a href="http://kozo002.blogspot.com/2012/01/rubybundler.html">rails編</a>は以前書いたのでsinatraでやってみる<br />
用途としてはDBとかいらないスタティックなサイトの構築で、でもhtml、css、jsを生で書くのとか耐えられない。phpはマジ勘弁みたいなときにこうしてますよって感じのことを書きます。</p>
<p>(bundlerの使い方ってゆうかrubyでのweb制作全般って感じですね…)</p>
<p>まず適当な場所にプロジェクトのディレクトリを作ります。<br />
hogeとかもアレなんでポートフォリオにしときます。</p>
<pre class="ruby" name="code">
$ cd ~/Web
$ mkdir portfolio
$ cd portfolio
</pre>
<p>でプロジェクトのルートでGemfileをつくる</p>
<pre class="ruby" name="code">
$ bundle init
Writing new Gemfile to /Users/kozo/Web/portfolio/Gemfile
</pre>
<p>中身はこんな感じだから...</pre>
<pre class="ruby" name="code">
$ vim Gemfile
# A sample Gemfile
source "https://rubygems.org"
# gem "rails"
</pre>
<p>以下に書き換えます</p>
<pre class="ruby" name="code">
source "https://rubygems.org"
gem "sinatra"
gem "sass"
gem "haml"
gem "coffee-script"
gem "shotgun"
</pre>
<p>自分はnode.jsを入れてるんでアレですが、環境によってはjavascript実行環境が無いと怒られるかもしれないんで、そんときは以下のgemを足してみてください。</p>
<pre class="ruby" name="code">
gem 'therubyracer'
</pre>
<p>でgemをインストールします。</p>
<pre class="ruby" name="code">
bundle install --path vendor/bundle --without production
Fetching gem metadata from https://rubygems.org/.....
Installing coffee-script-source (1.3.1)
Installing multi_json (1.3.2)
Installing execjs (1.3.0)
Installing coffee-script (2.2.0)
Installing haml (3.1.4)
Installing rack (1.4.1)
Installing rack-protection (1.2.0)
Installing sass (3.1.16)
Installing tilt (1.3.3)
Installing sinatra (1.3.2)
....
</pre>
<p>よしこれでgemが揃いました。<br />
さらに作業環境を整えます。</p>
<p>sinatraを動かすアプリが必要なので app.rb と config.ru<br />
sassやhamlを入れておくviewsディレクトリ、<br />
ドキュメントルートになるpublicディレクトリをつくります。</p>
<pre class="ruby" name="code">
$ touch app.rb
$ touch config.ru
$ mkdir views
$ mkdir public
</pre>
<p>アプリケーションのコードはこんな感じです</p>
<pre class="ruby" name="code">
$ vim app.rb
require "sinatra/base"
require "sass"
require "haml"
require "coffee-script"
module Portfolio
class App < Sinatra::Base
get '/' do
'hello'
end
end
end
</pre>
<pre class="ruby" name="code">
$ vim config.ru
require "./app"
run Portfolio::App
</pre>
<p>でアプリがちゃんと動くかどうか確認してみる<br />
shotgunを入れておいたので</p>
<pre class="ruby" name="code">
$ bundle exec shotgun
== Shotgun/WEBrick on http://127.0.0.1:9393/
[2012-04-26 23:49:20] INFO WEBrick 1.3.1
[2012-04-26 23:49:20] INFO ruby 1.9.2 (2011-07-09) [x86_64-darwin11.2.0]
[2012-04-26 23:49:20] INFO WEBrick::HTTPServer#start: pid=457 port=9393
</pre>
<p>localhost:9393にアクセスして hello が表示されればOKです<br />
そしたらこっからガシガシコード書いていくんですが、shotgun使ってるのでapp.rbを編集してもサーバの再起動が必要ありません。<br />
home、about、galleryの3ページと仮定して以下のように書き換えました</p>
<pre class="ruby" name="code">
$ vim app.rb
module Portfolio
class App < Sinatra::Base
before do
@site_name = 'My Portfolio'
@nav = ['home', 'about', 'gallery']
end
get '/' do
haml :index
end
get '/about/?' do
haml :about
end
get '/gallery' do
haml :gallery
end
end
end
</pre>
<p>before do ... end の中で共通の処理を記述できます。<br />
site_nameとnavを用意しておきました。変数に@をつけておくとインスタンス変数と言ってviewに渡せるようになります。<br />
htmlはhamlで書くので以下のようにします。</p>
<pre class="ruby" name="code">
$ vim views/index.haml
%h1= @site_name
%nav
%ul
- @nav.each do |n|
%li
%a{href:"/#{n}"}= n
%p welcome to my portfolio site
</pre>
<p>でもこれだとheadとかないので layout を作成します</p>
<pre class="ruby" name="code">
$ vim views/layout.haml
!!! 5
%html
%head
%meta{charset:'utf-8'}
%title= @site_name
%body
= yield
</pre>
<p>yieldの部分に各ページの内容が入ります。<br />
次はsassというかscssを使ってみます。<br />
まずはapp.rbを編集して、</p>
<pre class="ruby" name="code">
$ vim app.rb
get '/stylesheets/base.css' do
scss :base
end
</pre>
<p>
galleryの下に追記しておきました。<br />
ここまで出来たら後はviews内にscssファイルを作って作業していくだけです。<br />
簡単ですね!<p>
<p>ちなみにrubyのシンボル(:で始まる文字列)は " で囲めば / とかも使えるので<br />
views内でファイルが平置きになってるのが嫌な人は views/haml や views/scss を作っておいて<br />
app.rbで</p>
<pre class="ruby" name="code">
haml :"haml/index"
</pre>
<p>と指定すればちゃんと呼び出せますよ!</p>
<p>sinatraとかhamlとかscssとかcoffeescriptの詳しい使い方はドキュメントを読もー</p>
<ul>
<li><a href="http://www.sinatrarb.com/intro-jp.html">http://www.sinatrarb.com/intro-jp.html</a></li>
<li><a href="http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html">http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html</a></li>
<li><a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html">http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html</a></li>
<li><a href="http://coffeescript.org/">http://coffeescript.org/</a></li>
</ul>
kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-37799112095988302142012-04-19T12:31:00.001+09:002012-04-19T12:33:57.867+09:00トマト栽培<p>今朝は芽が3つになってました!</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcsDdRRydzm1H-i5o2nTfrvTcb_eEUfPYU57jf8OSvq-fstrcL0Y09Cb1QSswY4PQHKlxcJiqfmVXPyL9fXFiAhEL0DxjRFNDY4NbL_f3Z8AEiaGUGplTbKAkEB_U0Ago8VlwuXy7Pcxw_/s1600/IMG_3405.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="240" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcsDdRRydzm1H-i5o2nTfrvTcb_eEUfPYU57jf8OSvq-fstrcL0Y09Cb1QSswY4PQHKlxcJiqfmVXPyL9fXFiAhEL0DxjRFNDY4NbL_f3Z8AEiaGUGplTbKAkEB_U0Ago8VlwuXy7Pcxw_/s320/IMG_3405.jpg" /></a></div>
<br style="clear:both;" />
<p>しかも結構な成長速度。昨日よりかなり成長してる気がするなぁ。</p>
<dl>
<dt>日付</dt>
<dd>2012.04.19</dd>
<dt>気温</dt>
<dd>17℃</dd>
<dt>天気</dt>
<dd>曇り</dd>
</dl>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-17327200357914375102012-04-18T12:17:00.000+09:002012-04-19T12:27:43.039+09:00トマト栽培<p>やっと芽が出ました!</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwWMsT-UnReaYOX8sMvQi8T9-zHgM79dF77nmd0LGnIlNMW_uQS3gB1UrwqSfJS_4B3KvY6XYFZag1mTmv8u3fAczXc3iDgdk1KHgu_lIWEbDY6LExi9sFb1-fscHEgLjar_3ZQ5bF-YJn/s1600/IMG_2294.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="240" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwWMsT-UnReaYOX8sMvQi8T9-zHgM79dF77nmd0LGnIlNMW_uQS3gB1UrwqSfJS_4B3KvY6XYFZag1mTmv8u3fAczXc3iDgdk1KHgu_lIWEbDY6LExi9sFb1-fscHEgLjar_3ZQ5bF-YJn/s320/IMG_2294.jpg" /></a></div>
<br style="clear:both;">
<p>なんの変化もないプランターを写真撮り続けるのは、マジで精神的にきついなと思ってたんでしばらくお休みしてましたが、やってくれましたよ〜。<br />植物を育てるってこんなに嬉しいんですね。芽が出た後の育て方も調べよう。</p>
<dl>
<dt>日付</dt>
<dd>2012.04.18</dd>
<dt>気温</dt>
<dd>19.9℃</dd>
<dt>天気</dt>
<dd>晴れ</dd>
</dl>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTlEvQI-Bnc6MrCF6yLz24MURVkXnnbcdrGpkwe5WV5kwqicfJ-a-8zGRRTTcX87B7SxGwfMDT0c5lIAivqNsMulp-ceb6YmQVB_nXpBALNyB8kSymDrc77ONKY7t5TzLnjBiaVPffheqs/s1600/IMG_1146.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="240" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTlEvQI-Bnc6MrCF6yLz24MURVkXnnbcdrGpkwe5WV5kwqicfJ-a-8zGRRTTcX87B7SxGwfMDT0c5lIAivqNsMulp-ceb6YmQVB_nXpBALNyB8kSymDrc77ONKY7t5TzLnjBiaVPffheqs/s320/IMG_1146.jpg" /></a></div>
<br style="clear:both;">
<p>分かりづらいけど、左右二ヶ所に芽がでた…!</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-34734901956746779492012-04-16T18:01:00.001+09:002012-05-22T18:28:05.136+09:00OS X lion にhomebrewでnginxとphpをインストールした<p>まずはnginxのインストール。</p>
<pre class="php" name="code">
$ brew options nginx
nginx
--with-passenger
Compile with support for Phusion Passenger module
--with-webdav
Compile with support for WebDAV module
</pre>
<p>今回はどちらもいらないので普通に brew install nginx
で設定をいじる。</p>
<pre class="php" name="code">
$ cd /usr/local/etc/nginx
$ vim nginx.conf
</pre>
<pre class="php" name="code">
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include 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 logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
include /usr/local/etc/nginx/sites-enabled/*;
}
</pre>
こうしておいた
<pre class="php" name="code">
$ mkdir sites-enable
$ mkdir sites-available
</pre>
<p>このディレクトリ必要なの?って思ったけど、シンボリックリンクの作成/削除で複数ファイルの管理ができるよってことなんですね。なんかかっこいいですね。</p>
<p>で、availableの方に…</p>
<pre class="php" name="code">
$ vim sites-available/localhost
server {
listen 8080;
server_name localhost;
root /Users/kozo/Web/nginx/localhost/public;
access_log /Users/kozo/Web/nginx/localhost/logs/access.log;
error_log /Users/kozo/Web/nginx/localhost/logs/error.log warn;
location / {
index index.html index.htm index.php;
}
location ~ \.php$ {
include fastcgi_params;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
}
</pre>
<p>とした。</p>
<p>続いてphpのインストール。</p>
<pre class="php" name="code">
$ brew options https://raw.github.com/ampt/homebrew/php/Library/Formula/php.rb
php
--with-mysql
Include MySQL support
--with-pgsql
Include PostgreSQL support
--with-mssql
Include MSSQL-DB support
--with-fpm
Enable building of the fpm SAPI executable
--with-apache
Build shared Apache 2.0 Handler module
--with-intl
Include intl extension
--with-readline
Include readline extension
</pre>
<p>適当にオプション付けて</p>
<pre class="php" name="code">
$ brew install https://raw.github.com/ampt/homebrew/php/Library/Formula/php.rb --with-mysql --with-pgsql --with-fpm --with-intl --with-readline
</pre>
<p>
そしたらエラー!<br />
ココでも見てなんとかしろや的なこと言われたので見てみる</br>
<a href="https://github.com/mxcl/homebrew/wiki/checklist-before-filing-a-new-issue">https://github.com/mxcl/homebrew/wiki/checklist-before-filing-a-new-issue</a>
</p>
<p>brew updateか。</p>
<pre class="php" name="code">
$ brew update
</pre>
<p>またエラー。というかgitのリポジトリでconflict的なことが起きてるのかな?</p>
<pre class="php" name="code">
$ cd /usr/local/
$ git fetch origin/master
$ git reset --hard origin/master
$ brew update
Already up-to-date.
</pre>
<p>
OK!
phpのインストール出来ました。
このままだとcliがMacにプリインストールされてる方を見ちゃうので
</p>
<pre class="php" name="code">
$ vim ~/.bash_profile
$ export PATH="$(brew --prefix)/bin:$PATH"
</pre>
<p>
上記を追加しました。</p>
<pre class="php" name="code">
$ php -v
PHP 5.3.10 (cli) (built: Apr 16 2012 17:15:01)
Copyright (c) 1997-2012 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2012 Zend Technologies
with Xdebug v2.1.2, Copyright (c) 2002-2011, by Derick Rethans
</pre>
<p>よし。で、fpmの起動用plist作成</p>
<pre class="php" name="code">
$ vim ~/Library/LaunchAgents/php-fpm.plist
</pre>
<pre class="xml" name="code">
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd" >
<plist version='1'>
<dict>
<key>Label</key><string>org.php.php-fpm</string>
<key>ProgramArguments</key>
<array>
<string>/usr/local/sbin/php-fpm</string>
<string>--fpm-config</string>
<string>/usr/local/Cellar/php/5.3.10/etc/php-fpm.conf</string>
</array>
<key>Debug</key><false/>
<key>RunAtLoad</key><true/>
<key>KeepAlive</key><false/>
<key>UserName</key><string>kozo</string>
</dict>
</plist>
</pre>
<p>※.plistの拡張子付けないと後のlaunchctl loadで怒られました</p>
<p>php-fpm起動!</p>
<pre class="php" name="code">
$ launchctl load -w ~/Library/LaunchAgents/php-fpm.plist
</pre>
<p>最終確認</p>
<pre class="php" name="code">
$ cd ~/Web/nginx/localhost/public/
$ vim index.php
<?php echo 'Hello' ?>
</pre>
<p>
と書いて http://localhost:8080/ を開いて Hello でました!
思ってたより簡単だったけどちょっと戸惑った。</p>
<p>参考にしたサイト</p>
<ul>
<li>http://aoyagikouhei.blog8.fc2.com/blog-entry-195.html</li>
<li>http://d.hatena.ne.jp/YuhoYo/20110528/1306547056</li>
<li>http://labs.uechoco.com/blog/2011/12/php-homebrew-how-to-compile-intl-enabled-php.html</li>
<li>http://www26.atwiki.jp/nginx/pages/13.html</li>
<li>http://www.1x1.jp/blog/2011/05/yum_install_nginx_php-fpm.html</li>
</ul>
<p>※追記 2012/04/17</p>
<p>再起動はこうすればいいらしい:</p>
<pre class="php" name="code">
$ sudo nginx -s stop && sudo nginx
</pre>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0tag:blogger.com,1999:blog-5528780936273080120.post-38841208995052980032012-04-13T14:04:00.001+09:002012-04-13T14:04:44.848+09:00トマト栽培<dl>
<dt>日付</dt>
<dd>2012.04.13</dd>
<dt>気温</dt>
<dd>21℃</dd>
<dt>天気</dt>
<dd>晴後曇</dd>
</dl>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcr0DO5pQ0wBpp0WGHKqUZUnYDYpuXsUfCikLOPS035-SlZg16X21JvGHdAfTj7dsDZKo34CyTleiTdfTuyPzPTABHf7EY2wBQnc4Qg-ZvUBcMwfidNofMb3vPZ7k8v40mzUm59P0wM3KJ/s1600/IMG_2369.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="240" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcr0DO5pQ0wBpp0WGHKqUZUnYDYpuXsUfCikLOPS035-SlZg16X21JvGHdAfTj7dsDZKo34CyTleiTdfTuyPzPTABHf7EY2wBQnc4Qg-ZvUBcMwfidNofMb3vPZ7k8v40mzUm59P0wM3KJ/s320/IMG_2369.jpg" /></a></div>
<p>変化なし</p>kozo002http://www.blogger.com/profile/06785025914777257806noreply@blogger.com0