Hangul

놀라다 ノルラダ 驚く

달라지다 タルラジダ 変化する

묻다 ムクタ 泊まる

미워하다 ミウォハダ 憎む

믿다 ミッタ 信じる

느끼다 ヌッキダ 感じる

밀다 ミルダ 押す

다하다 ターハダ 尽くす

바라다 パラダ 望む・願う

바치다 パチダ 捧げる

FooSendアイディア

Travianというゲームからヒント

付箋のような実用ツールでもシミュレーションゲームのようなライブ感が必要

多く使っている人とそうでない人で何かが変わる

より多く使いたいという動機付けをする

たとえば

• 色のバラエティを使用頻度で変える
• 使用頻度に応じて使える機能や装飾を増やす
• 何かを出来るポイントを付与していく
• 貼り付け中の付箋をLIVE、剥がしたものをDEAD、トータルをTOTALとしてカウント表示する

Travian game

TravianというWebベースの村作りシミュレーションゲームを始めてみた

ゴールまでに300日掛かるらしい

資源をためて家を建てたり兵力を増強したりして

隣国との攻防を楽しむらしい

ランキングなんかがでる

なんか不思議といい

少しやってみる

FooSendローカルサーバ起動！

http://192.168.1.3:1234/

Users/keyes/Sites/foosend/ruby app.rb -p 1234

FooSend

追加した機能

• URLリンク、タイトル化
• Z-IndexbyClick
• Bookmarklet

FooSend

付箋アプリを作り直してる

(実装した機能)

• 付箋のドラッグでの移動
• 付箋の整列(inline, cascade, random)
• 付箋のドロップでの削除
• flashによる通知

(バグ)

• ドロップ削除時のflash通知
• ウィンドウサイズを超える付箋の貼り付け時のフッター移動

(実装予定の機能)

• 整列のデフォルト設定
• 付箋編集
• 付箋の拡大
• 最新付箋のバウンス
• URLリンク
• YouTubeリンク
• ブックマークレット
• タグ付けおよびその絞り込み

Sinatra::FooSend

付箋アプリ仕切り直し

新しい名前をFooSendにした

前回からの変更点

• partialを定義して新規作成をmainに挿入
• session-flashを使ってnoticeを通知
• 直近5件を付箋とは別に表示

HerokuにアップするもやっぱたまにErrorが出てしまう

javascriptとの相性が悪いのか

ランダムのレンダリングが問題なのか

一度ランダムやめてみるか

それでどうなるか

Heroku problem

付箋アプリでHerokuのサーバーでInternalErrorがちょくちょく起きる

原因ははっきりしないけどDatabaseのラッパー(Postクラス)サイドで

出力文字列をフォーマットすると良くないみたいだ

ちょっとその外でやってみよう

プログラミングの目的

抽象化

つまりモジュール分割が重要

そうするとプログラミング言語の能力として

モジュールの接続能力が極めて重要

つまり各モジュールはそれぞれのコンテキストを持っている

そのコンテキストの橋渡し能力が言語のパワーで決まる

Cではデータしか渡せない

Rubyはオブジェクト

関数型言語では関数

それから渡したものの評価をどこでするかも重要

通常渡したときつまりリアルタイム

評価を保留にする能力：遅延評価

Rubyではブロックが遅延評価を可能にする

ブロックに変えてオブジェクトを渡す例を考える

Hangul

가다 カダ 行く

오다 オダ 来る

달리다 タルリダ 走る・賭ける

다치다 タチダ 怪我をする

낫다 ナッタ 治る・癒える

고치다 コチダ 治す・直す

그리다 クリダ 描く・懐かしく思う

마치다 マチダ 終える・終わる

걱정하다 コクチョンハダ 心配する

모으다 モウダ 集める

넘기다 ノムギダ 渡す

Hangul

걷다 コーッタ 歩く

고르다 コルダ 選ぶ

기다리다 キダリダ 待つ

기뻐하다 キッポハダ 喜ぶ

듣다 トゥッタ 聴く

먹다 モクタ 食べる

마시다 マシダ 飲む

일어나다 イロナダ 起きる・生じる

타다 タダ 乗る・分ける・燃える・もらう・混ぜる・弾く・割る

날다 ナルダ 飛ぶ

내다 ネーダ (力を)出す

Sudoku

Inquisitor

http://www.unfindable.net/~yabuki/blog/

このサイトに刺激されてRubyでSUDOKUに挑戦

いい線まで行くのだけれど行き詰まる

どうやら非決定性計算というのが必要のようだ

つまり仮の答えを選んで進んでダメだったら戻る

SICPに乗ってるアパートの住人問題も

非決定性計算で解けるようだ

Rubyで非決定性計算 - 趣味的にっき

http://d.hatena.ne.jp/ha-tan/20071022/1193059364

ここを参考にリファクタしてみた

class Range

  def each_combination

    ary = self.to_a

    ary.product(*[ary]*(ary.length-1)).each { |i| yield i }

  end

end

solve = []

floor = (1..5)

floor.each_combination do |baker, cooper, fletcher, miller, smith|

  next if [baker, cooper, fletcher, miller, smith].uniq!

  next if baker.eql? 5

  next if cooper.eql? 1

  next if fletcher.eql? 1 or fletcher.eql? 5

  next if  miller < cooper

  next if (smith - fletcher).abs.eql? 1

  next if (fletcher - cooper).abs.eql? 1

  solve << [baker, cooper, fletcher, miller, smith]

end

p solve

いい感じだけどこれって非決定性計算とやらを使ってないぞ?

each_combinationがチョンボか

英辞郎mini

日本語も半角英字で入力できたらと思い

ちょっと調べるもよくわからない

英和と和英辞書が分かれていて日本語入力時は和英辞書を引くみたいだ

その過程で検索がちゃんとされず取りこぼしてることがわかった

grepしてる分けじゃなくてヒット語の位置に移動するだけのようだ

だから辞書内で関連単語が離れていると

後の方にあるものが表示されない

これは問題だな

wma to mp3

use ffmpge

postme

ビデオを貼れるようにした

でも見られない

クリックすると付箋が小さくなってしまう

ビデオのエリアだけToggleをオフにできないか

jQuery子要素の指定の仕方

1. $('.child_class', this)
   
2. $(this).children('.child_class')
   
3. $(this).find('.child_class')
   

1、2はその要素の直後にある場合

3は孫要素も対象になる

Sinatra User認証で悩む

• beforeフィルタは各リクエストの前に実行されるので、ここで毎回ユーザ認証を行う
• つまりユーザのクッキーの値とユーザDBの認証IDを比較する
• メイン画面において、ユーザ認証前は入力・修正・削除ボックスが隠れており、認証により出現する
• 新規付箋作成時にはユーザ認証IDが各付箋に付けられる
• クッキーのユーザ認証IDと各付箋に付されたIDが比較され、一致するもののみが表示される

Hangul

색 セク 色

검정색 コムジョンセク 黒・黒色

흰색 ヒンセク 白・白色

희다 ヒダ 白い

하얗다 ハヤタ 白い

검다 コムタ 黒い

까맣다 ッカマタ 黒い

붉다 プクタ 赤い

빨갛다 ッパルガタ 赤い

파랗다 パラタ 青い

부르다 プルダ 青い

Hangul

마지막 マジマク 最後・終わり

시작 シジャク 始め・始まり

오전 オジョン 午前

오후 オーフ 午後

전후 チョンフ 前後

앞뒤 アプトゥイ 前後

이상 イーサン 以上

이하 イーハ 以下

이내 イーネ 以内

이외 イーウェ 以外

상급 サングプ 上級

중급 チュングプ 中級

초급 チョグプ 初級

Mighty Mouse電池交換

Askul*2

postmeその後

現在ユーザーログイン関連をやっている

まだ使用がまとまってないけど

概ね以下のように

1. Userクラスでユーザの名前とパスワードを管理
   
2. PostクラスとUserクラスは多対多の関係
   
3. つまり1ユーザに複数の付箋が結びつけられると同時に１つの付箋に複数のユーザが結びつけられるようにする
   
4. これによって付箋の共有を可能にする
   
5. 付箋が貼られる頁は全ユーザ共通の１つの頁とし、各ユーザには自分の付箋しか表示できないようにする
   

ちょっと意欲的だ特に５

いきなりこれを実現せずにまずは一対多をつくるかどうするか

それにしてもHTML+CSSはよくわからん

なんでこんなこんがらがった規約になってんのか

本腰入れるか

mov to aac

Application - Movie tools内の convert to AACというのを使う

mov to ipod

• movの拡張子を付ける
• ffmpegの変換先はiphoneを選択し保存拡張しはmp4とする

postのコピーができた postme

何らかのキーが押されている間はポストのコピーをできるようにした

jQueryのキーイベントの使い方がわからなかったので(elementを指定しない関数の呼び出し方)

javascriptでやった。ちょっとスマートな感じがしないけど

  document.onkeydown = function(e){

$(".post").draggable("disable");

  };

  document.onkeyup = function(e){

$(".post").draggable("enable");

  };

編集成功！postme

朝布団の中で編集のことを考えていたら別の方法を思いついた

つまりドロップしたときに既にあるフォームのデータを差し替えるのではなく

そこではじめてフォームを作るようにする

早々実装したらなんとうまくいったよ！

ここにはいろいろと教訓があるな

時間を置けとか別の方向から攻めろとか

 

  $("#edit_area").droppable({

over: function(){

size_effect(this, area_W, area_H*2);

},

    drop: function(event, ui){

 $(ui.draggable).fadeOut("slow");

 var id = ui.draggable.attr("id").split('_')[1];

 $.get('/'+id, function(data){

var data = $(data).find("#ed_area").text();

   $("#edit_form").append("<form id='ed_form' action='/"+id+"' method='POST'><input type='hidden' name='_method' value='PUT'></input><textarea class='rounded {5px}' id='ed_area' name='edit_body' rows='6' cols='25' >"+data+"</textarea><br/><input id='edit_btn' type='submit', value='Edit'></input></form>");

 });

 $("#post_form").css("display", "none");

 size_effect(this, area_W, area_H)

    },

out: function(){

 size_effect(this, area_W, area_H);

}

  });

postme

大分改良が進んだけど

付箋の編集のところで詰まっている

• 対象の付箋を編集エリアにドラッグ・ドロップする
• 編集エリアが編集フォームに切り替わって、そのテキストエリアには元の内容が入っている
• エディットボタンで編集完了

第1案

  $.cookie("post_id", id);

  location.href="/";

  $("#edit_form").css("display", "inline");

最初にフォームを非表示として

付箋がドラッグされると 

cookieで値を渡してテキストエリアにセットする

しかしhrefによる画面遷移によりフォームが非表示となってうまくいかない

第2案

var te = ui.draggable.find('.pbody').text()または.html()

$("#edit_area").text(te)

これだと内容がプレーンテキストの場合は問題ないが

内容にリンクがあるとうまくいかない

第3案

$.get('/'+id, ..)で非同期でデータを取ってくる案

しかし表示結果データではなく

データベースの生データを直接取得する方法がわからない

(追記)

できちゃったよ、第3案で

  $("#edit_area").droppable({

    drop: function(event, ui){

 $(ui.draggable).fadeOut("fast");

 var id = ui.draggable.attr("id").split('_')[1];

 $.get('/'+id, function(data){

$("#ed_area").text($(data).find("#ed_area").text());

 });

 $("#edit_form").css("display", "inline");

    }

  });

(追記)と思ったらだめだった。エディット対象が違うじゃんか

Hangul

불 プル 火・火事

화채 フヮジェ 火災

방화 パンフヮ 放火

푹발 ポクパル 爆発

위험 ウィホム 危険

복력 ポンニョク 暴力

종교 チョンギョ 宗教

점 チョム 占い

교회 キョーフェ 教会

천국 チョングク 天国

지옥 チォク 地獄

単語帳アプリ

Postmeを進化させて単語帳アプリというのもありだな

• 各付箋のテキストに単語とその訳を行を変えて入力
• 各行をリストとして扱い一方を表示他方を非表示
• クリックにより非表示の訳が現れる
• ドラッグ・ドロップで付箋自体を非表示
• 条件によって色分けとかソートとか

Javascript in Haml

use filter

  %p

    :javascript

       document.write(window.innerWidth+":#{@posts.length}");

Hangul

석방 ソクパン 釈放

피해자 ピーヘジャ 被害者

가해자 カヘジャ 加害者

자수 チャス 自首

규칙 キュチク 規則

속도위반 ソクトウィバン 速度違反

도망 トマン 逃亡

침입 チミプ 侵入

피난 ピーナン 避難

보호 ポーホ 保護

痔

社会保険中央総合病院大腸肛門病センター http://www.coloproctologycenter.com/

Dr.OKの巣鴨大腸肛門クリニック　文京区　豊島区 http://www.dr-ok.jp/index.html

八木病院 http://www10.ocn.ne.jp/~yagihp/index.html

平田肛門科医院 Dr.Hipsのホームページへようこそ http://www.dr-hips.com/

痔の切らない外来治療、輪ゴム法、痔、内痔核、切れ痔、痔ろう、肛門科の総合サイト http://daichou.com/mac.htm

ららぽーと横浜クリニック ｜ 【横浜市都筑区・緑区・港北区・神奈川区】大腸内視鏡、経鼻胃内視鏡、カプセル内視鏡、胃カメラ、大腸カメラ、痔、肛門科、日帰り手術 http://lala-clinic.jp/index.html

*** 恵仁会　松島病院 *** http://www.matsushima-hp.or.jp/main.html

多摩大腸肛門科病院 http://www2u.biglobe.ne.jp/~tamakoh/index.htm

内山肛門科胃腸科クリニック http://www.d7.dion.ne.jp/~uchi.cl/

自分ひとりで痔を治す方法 http://www.ji2.jp/

ジオン注射療法の詳細解説 http://jitonakayoku.web.fc2.com/Zione.html

杉並 肛門科・胃腸科　井の頭通り肛門科胃腸科 杉並区・練馬区・世田谷区 http://www.ino8550.jp/

Hangul

행방불명 ヘンバンブルミョン 行方不明

도난 トナン 盗難

유괴 ユグェ 誘拐

살인 サリン 殺人

자살 チャサル 自殺

범인 ポーミン 犯人

도둑 トドゥク 盗み・泥棒

소매치기 ソメチギ スリ

사기 サギ 詐欺

체포 チェポ 逮捕

Postme

基本機能ができたので少しファイル構成を整える

• inline templateをviews以下のファイルに分ける
• haml+Sassを使う
• inline jQueryをファイルにする

概ねうまくいったが問題もあり

• redirect時に表示が崩れる
• jQueryファイル内でRubyオブジェクトにアクセスできない(Shakeで)
• 代替手段(javascript)がわからない(任意のDOMの選択方法)

Hangul

유쾌하다 ユクェハダ 愉快だ

불쾌하다 プルクェハダ　 不快だ

편리하다 ピョンリハダ 便利だ

풀편하다 プルピョンハダ 不便だ・体の具合が悪い

특별하다 トゥクピョルハダ 特別だ

평범하다 ピョンボムハダ 平凡だ

튼튼하다 トゥントゥンハダ 丈夫だ・頑丈だ

피곤하다 ピゴンハダ 疲れている

한심하다 ハンシムハダ 情けない

헛되다 ホットェダ 空しい

Hangul

범죄 ポームジュェ 犯罪

사건 サーゴン 事件

사고 サーゴ 事故

죄 チュェ 罪

뇌물 ヌェムル 賄賂

의심 ウェシム 疑い(疑心)

수사 スサ 捜査

경찰서 キョンチャルソ 警察署

파출소 パチュルソ 派出所(交番)

순경 スンギョン お巡りさん(巡警)

入力データのXSS対策

入力データをそのままデータベースに格納して表示するのは危険らしい

クロスサイトスクリプティング(XSS)といってサーバに悪意のあるスクリプトを埋め込んだりする

対策として一般的なのはデータベースにはそのまま入力を保存するが

表示するときにhtml escapeするようだ

でもこれだとmarkdownとかで表示のユーザビリティを上げる点でよくないけどどうしてるんだろうか

Sinatraでは以下のようにする

helpers do

  include Rack::Utils

  alias_method :h, :escape_html

end

で

<%=h somedata %>

 

submit onclick javascript

returnでsubmitする前にhookできる

 

    <p><input type="submit" value="Post" onclick="return confirm('post?')" ></p>

 

jQueryで非同期通信

jQueryを使ってHTTPの非同期通信が簡単にできる

• $.ajax, $.get, $.postが使える
  
• $.post('/delete/'+id, null, finction(){ location.reload() });などとする
• <a href=javascript:void(0) onclick="jQuery.post('/delete/<%= entry.id %>', null, function(){location.reload()})">delete</a>か
• <span onclick="jQuery.post('/delete/<%= entry.id %>', null, function(){location.reload()})">delete</span>などとする
  
• href=java..は何もしない印し

これをつかって付箋をドロップして削除することができるようになった！

Post.rb

付箋アプリで行き詰まってる

• RESTのDelete methodを発行するHTMLのdomがよくわからない。input type='hidden' name='_method'とかするようだけど、Sinatraではそんなこと必要ないって書いてある。
• Sinatraでlink_toとかどうすればいいのか

要するにやりたいことは付箋をドロップしてDBから削除したいだけ

現行では頁を遷移させて削除してる

これをAJAX+Dropのアクションとして書くにはどうすれば？

   1  require "rubygems"

   2  require "sinatra"

   3  require "dm-core"

   4  require "dm-validations"

   5  require "dm-timestamps"

   6  

   7  DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://#{Dir.pwd}/post.sqlite3")

   8  

   9  class Post

  10    include DataMapper::Resource

  11    property :id, Integer, :serial => true

  12    property :body, String, :length => 1..200

  13    property :created_at, DateTime

  14  end

  15  

  16  DataMapper.auto_upgrade!

  17  

  18  get '/' do

  19    @posts = Post.all

  20    erb :index

  21  end

  22  

  23  post '/' do

  24    @post = Post.new(:body => params[:post_body])

  25    if @post.save

  26      redirect "/"

  27    else

  28      redirect '/'

  29    end

  30  end

  31  

  32  get '/:id' do |id|

  33    @post = Post.get(id)

  34    if @post

  35      erb :show, :layout => false

  36    else

  37      redirect '/'

  38    end

  39  end

  40  

  41  delete '/:id' do |id|

  42    @post = Post.get(id)

  43    if @post.destroy

  44      redirect '/'

  45    else

  46      redirect '/#{id}'

  47    end

  48  end

  49  

  50  __END__

  51  @@layout

  52  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  53    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  54  <html>

  55    <head>

  56      <meta http-equiv="Content-type" content="text/html; charset=utf-8">

  57      <title>Post Me</title>

  58      <style type="text/css" media="screen">

  59        body { background:#eed;}

  60        #input { float:left;}

  61        .draggable { width:150px; height:80px; position:absolute; padding:3px 3px 3px 3px; color:#fff;}

  62        #droppable { float:right; width:200px; height:120px; background:#999;}

  63        #drop_text { color:#fff; padding:35px 83px;}

  64        a#link_to_each { text-decoration:none;}

  65      </style>

  66      <script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>

  67  <script type="text/javascript" src="javascripts/jquery-ui-1.7.1.custom.min.js"></script>

  68  <script type="text/javascript" charset="utf-8">

  69  $(function() {

  70  $(".draggable").draggable({ });

  71  $("#droppable").droppable({

  72      drop: function(event, ui) { $(ui.draggable).remove(); }

  73  });

  74          $("#p_<%= @posts.last.id %>").effect("shake", { times: 4 }, 100)

  75  });

  76  </script>

  77      

  78    </head>

  79    <body>

  80      <%= yield %>

  81    </body>

  82  </html>

  83  

  84  @@index

  85  <div id="input">

  86    <form action="/" method="POST" accept-charset="utf-8">

  87      <textarea name="post_body" rows="6" cols="25"></textarea><br/>

  88      <p><input type="submit" value="Save"></p>

  89    </form>

  90  </div>

  91  <div id="droppable">

  92    <p id='drop_text'>Trash</p>

  93  </div>

  94  

  95  <div id="area">

  96    <% @posts.each do |entry| %>

  97    <div id="p_<%= entry.id %>" class='draggable' style="top:<%= 150+rand(20)*25 %>px; left:<%= 50+rand(40)*20 %>px; background:#<%= 500+rand(299) %>;">

  98      <a id='link_to_each' href="/<%= entry.id %>">â– </a><%= entry.body.gsub(/\n/, "<br/>") %>

  99    </div>

 100    <% end %>

 101  </div>

 102  

 103  @@show

 104  <div id="show">

 105    <p id='id'><%= @post.id %></p>

 106    <p id='body'><%= @post.body %></p>

 107    <p id='time'><%= @post.created_at %></p>

 108  </div>

 109  <div id="delete">

 110    <form action="/<%= @post.id %>" method="post" accept-charset="utf-8">

 111      <input type="hidden" name="_method" value="delete">

 112  

 113      <p><input type="submit" value="Delete"></p>

 114    </form>

 115  </div>

Hangul

크다 クダ 大きい、ノッポ

작다 チャクタ 小さい、チビ

많다 マーンタ 多い

적다 チョクタ 少ない

길다 キールダ 長い

짧다 ッチャルタ 短い

높다 ノプタ 高い

낮다 ナッタ 低い

넓다 ノルタ 広い

좁다 チョプタ 狭い

post_meがもう一歩

Sinatra+DataMapper+JQueryを使った実験として付箋アプリを作っている

かなりいい線なんだけど以下がうまくいかない

• JQueryのDroppableを使ってドロップした付箋をremoveで非表示にできるが
• データベースから削除する方法がわからない
• 付箋のidの取得方法はわかったけど

   1  require "rubygems"

   2  require "sinatra"

   3  require "dm-core"

   4  require "dm-timestamps"

   5  require "dm-validations"

   6  

   7  DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://#{Dir.pwd}/post_me.sqlite3")

   8  

   9  class PostMe

  10    include DataMapper::Resource

  11    

  12    property  :id, Integer, :serial => true

  13    property  :body, Text, :nullable => false

  14    property  :created_at, DateTime

  15    

  16    validates_present :body

  17    validates_length :body, :max => 200

  18  end

  19  

  20  DataMapper.auto_upgrade!

  21  

  22  get '/' do

  23    @posts = PostMe.all

  24    erb :index

  25  end

  26  

  27  post '/' do

  28    @post = PostMe.new(:body => params[:post_body])

  29    if @post.save

  30      redirect '/'

  31    else

  32      redirect '/'

  33    end

  34  end

  35  

  36  __END__

  37  @@layout

  38 

  39    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  40  <html>

  41    <head>

  42      <meta http-equiv="Content-type" content="text/html; charset=utf-8">

  43      <title>Post Metitle>

  44      <style type="text/css" media="screen">

  45        body { background:#eed;}

  46        #new_post { float:left;}

  47        .draggable { width:150px; height:80px; position:absolute; padding:3px 3px 3px 3px; color:#fff;}

  48        #droppable { float:right; width:200px; height:120px; background:#999;}

  49        #drop_text { color:#fff; padding-left:10px;}

  50        #highlight { background:#b55;}

  51      style>

  52      <script type="text/javascript" src="javascripts/jquery-1.3.2.min.js">script>

  53  <script type="text/javascript" src="javascripts/jquery-ui-1.7.1.custom.min.js">script>

  54  <script type="text/javascript" charset="utf-8">

  55  $(function() {

  56  $(".draggable").draggable({ });

  57  $("#droppable").droppable({

  58      drop: function(event, ui) {

  59            $(ui.draggable).hide();

  60                  var id = ui.draggable.attr("id").split('_')[1]

  61          var ok = confirm("Item " + id + " delete?")

  62          if (ok) { $(ui.draggable).remove(); }

  63          else { $(ui.draggable).show(); }

  64  

  65                  // <% p response.ok? %>

  66      }

  67  });

  68  $("#p_<%= @posts.last.id %>").effect("shake", { times: 4 }, 100)

  69  });

  70  script>

  71    head>

  72    <body>

  73      <%= yield %>

  74    body>

  75  html>

  76  

  77  @@index

  78  <div id="new_post">

  79    <form action="/" method="POST" accept-charset="utf-8">

  80      <textarea name="post_body" rows="6" cols="25">textarea>

  81      <p><input type="submit" value="Save">p>

  82    form>

  83  div>

  84  <div id="droppable">

  85    <p id='drop_text'>Trashp>

  86  div>

  87  <div id="posts">

  88    <% @posts.each do |entry| %>

  89      <div class="draggable" id="p_<%= entry.id %>" style="top:<%= 150+rand(20)*25 %>px; left:<%= 50+rand(40)*20 %>px; background:#<%= 500+rand(299) %>;"><%= entry.body.gsub(/\n/, "
") %>div>

  90    <% end %>

  91  div>

  92  <p><%= @posts.length %>p>

  93  <%= @posts.last.id   %>