タグ

JavaScriptとRailsに関するvaldaのブックマーク (3)

  • rails3 + html5 canvasでお絵かき投稿サイトを作ろう!

    はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って? ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見はこちら完成見の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ

    rails3 + html5 canvasでお絵かき投稿サイトを作ろう!
  • Ruby On Rails コンボボックスなどの動的な動き observe_field

    どもrick No.10です。 今回は、このプルダウンを選んだらこっちのプルダウンの値が変わる!! なんてことをしたいときにobserve_fieldを使用します。 observe_fieldは、railsのRJSテンプレートという機能を使っています。 RJSテンプレートは、javascriptを書かなくても簡単にかける機能って感じですかね。 view側(プルダウンを監視してプルダウンを更新する) <%= select("keyword", "category", Test.collect{i.title, i.id}) %> //監視されるプルダウン <%= observe_field("keyword_category" //この値を見る(上のソース) :update => "keyword_small_category", //この値の場所を更新する

  • jQuery を用いた in_place_editor_field - elm200 の日記(旧はてなダイアリー)

    趣旨 インプレース編集を可能とする in_place_editor_field。prototype.js 系はアレなので、jQuery 版を作ってみた。といっても、完全互換ではない。mouse hover がらみの処理は省略。みなさんなりの実装をするときの参考にしてもらえれば幸いです。 使い方 下のソースコードを見て config/environment.rb を修正し、public/javascripts/ajax_in_place_editor.js を新たに作る。 コントローラ・ビューを下のように設定する。 コントローラ (app/controllers/blog_controller.rb) class BlogController < ApplicationController in_place_edit_for :post, :title def update_in_place

    jQuery を用いた in_place_editor_field - elm200 の日記(旧はてなダイアリー)
  • 1