せっかく今読んでいる本を今読ミにこまめに登録しているのだし、ブログのサイドバーにも表示させたいなと以前から思っていた。いわゆるブログパーツというやつ。
やはりブログパーツはフラッシュだよなぁと思っていたので、なかなか手を付けなかったが簡単なものならJavaScriptだけでもいけそうなのでちょっとやってみた。
きっかけとしては【PHP TIPS】 81. ブログパーツを作ってみようを読んだから。いや、こういう風にやるというのは知っていたが、Railsでの具体的な例は見たことがなかったので、よしやってみるかと。
仕様はめっちゃシンプルに、自分の最新のn件の書影、書名、著者を表示するというもの。
これはちょっと前に外出先で手帳に描いていたイメージ。
まずURLをエイヤと http://imayomi.jp/ext/recent/iwazer?n=3 に決めます。パラメータnは表示する件数です。上記イメージだと3件なのでn=3。Railsだとデフォルトのルーティング設定を使うとすれば、 こんな感じで生成されるURLです。すなわちextというコントローラを生成。 次は、ext_controller.rbにidとnをパラメータとして受け取るrecentというメソッドを書くと。 Ownerモデルは（最初、ちょっと名前を付けそこなって気に入ってないのだけど…）本とメンバーの関連テーブルownersのモデル。なのでownersテーブルからメンバーがiwazerで、更新日(updated_at)の逆順にn件とって来ると上記みたいな実装になります。
＃サンプルのコードはエラーチェックなどかなり端折ってますよ。
そして、ここからがRailsらしくRJSを使ってJavaScriptをページに埋め込むレスポンスを返すところ。
render :update を使います。 divのidを'd04786a8e9ac3405955a99d479b581b2'などという意味不明な値にしたのは、idがぶつかると危ないだろうなと思い、悩んだ挙句、何かのmd5値です。そしてその何かはもう忘れたが（笑）
ExtController#recent()がリクエストされたら、結果をJavaScriptで返すのですが、まず'd04786a8e9ac3405955a99d479b581b2'をidとしてもつdivタグをdocument.write()でその場に埋め込みます。
そしてその埋め込んだdivの内容を render :partial => 'recent' でレンダリングされるHTMLで置き換えます。すなわち views/ext/_recent.rhtml が必要です。 これはいささか汚いですね。最初はCSS指定を別別ファイルにしてたんですが、どうもブラウザによって効いたり、効かなかったりと制御が大変だったので、とりあえずちゃんと動けということで、全て直接タグへstyle属性として書きました。（テヘ）
実はこれで、もう完成です。
あとはブログの表示したい場所に とjsを読み込むscriptタグを書けば、右のサイドバーに出ている様に表示されました。
最後に、上記の様にRailsのAjax自動生成機能を使って楽をしているので、prototype.js の読み込みが必要ですが、他で使っているかも知れませんし<head>～</head>の記述を確認して、なければそちらに移したほうがよいと思います。
このエントリーのタイトルは「・・・JavaScriptでやってみる」なのですが、実は自分でJavaScriptのコードをを一切書いていない甘やかされよう。
この手のものを作るのは意外と初めてだったりするので、気になる所を見つけた方がいらっしゃれば、突っ込みお願いします。
やはりブログパーツはフラッシュだよなぁと思っていたので、なかなか手を付けなかったが簡単なものならJavaScriptだけでもいけそうなのでちょっとやってみた。
きっかけとしては【PHP TIPS】 81. ブログパーツを作ってみようを読んだから。いや、こういう風にやるというのは知っていたが、Railsでの具体的な例は見たことがなかったので、よしやってみるかと。
仕様はめっちゃシンプルに、自分の最新のn件の書影、書名、著者を表示するというもの。
これはちょっと前に外出先で手帳に描いていたイメージ。
まずURLをエイヤと http://imayomi.jp/ext/recent/iwazer?n=3 に決めます。パラメータnは表示する件数です。上記イメージだと3件なのでn=3。Railsだとデフォルトのルーティング設定を使うとすれば、 こんな感じで生成されるURLです。すなわちextというコントローラを生成。 次は、ext_controller.rbにidとnをパラメータとして受け取るrecentというメソッドを書くと。 Ownerモデルは（最初、ちょっと名前を付けそこなって気に入ってないのだけど…）本とメンバーの関連テーブルownersのモデル。なのでownersテーブルからメンバーがiwazerで、更新日(updated_at)の逆順にn件とって来ると上記みたいな実装になります。
＃サンプルのコードはエラーチェックなどかなり端折ってますよ。
そして、ここからがRailsらしくRJSを使ってJavaScriptをページに埋め込むレスポンスを返すところ。
render :update を使います。 divのidを'd04786a8e9ac3405955a99d479b581b2'などという意味不明な値にしたのは、idがぶつかると危ないだろうなと思い、悩んだ挙句、何かのmd5値です。そしてその何かはもう忘れたが（笑）
ExtController#recent()がリクエストされたら、結果をJavaScriptで返すのですが、まず'd04786a8e9ac3405955a99d479b581b2'をidとしてもつdivタグをdocument.write()でその場に埋め込みます。
そしてその埋め込んだdivの内容を render :partial => 'recent' でレンダリングされるHTMLで置き換えます。すなわち views/ext/_recent.rhtml が必要です。 これはいささか汚いですね。最初はCSS指定を別別ファイルにしてたんですが、どうもブラウザによって効いたり、効かなかったりと制御が大変だったので、とりあえずちゃんと動けということで、全て直接タグへstyle属性として書きました。（テヘ）
実はこれで、もう完成です。
あとはブログの表示したい場所に とjsを読み込むscriptタグを書けば、右のサイドバーに出ている様に表示されました。
最後に、上記の様にRailsのAjax自動生成機能を使って楽をしているので、prototype.js の読み込みが必要ですが、他で使っているかも知れませんし<head>～</head>の記述を確認して、なければそちらに移したほうがよいと思います。
このエントリーのタイトルは「・・・JavaScriptでやってみる」なのですが、実は自分でJavaScriptのコードをを一切書いていない甘やかされよう。
この手のものを作るのは意外と初めてだったりするので、気になる所を見つけた方がいらっしゃれば、突っ込みお願いします。
コメントする