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

はじめましてこんにちは。
KRAYアルバイトの浅海です。

html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。
初めてブログ記事を書くということで気合が入りました。
ちょっと長めですがお付き合い下さい。

機能

お絵かき投稿サイトの必要最低限な機能って？
ざっと下のような機能を入れてみます。

• 絵を描ける
• 絵を消せる
• 描画を一回分戻れる
• 線の太さを変えられる
• 線の色を変える
• 絵を投稿できる
• 投稿された画像の一覧を表示できる

→ 完成見本はこちら完成見本の公開は終了致しました。

絵を描ける

HTML5のcanvasにマウスの軌道に線を引いていくわけです。
canvasでのマウス軌道の描き方は、
・mousemoveイベント発生時に点をプロット
という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。

これではお話になりません。
なので、点ではなく線を引くことにします。
これは下のようになります。

この方法でもまだ、曲線の時に粗が目立ちます。

そこで、線と線の間に点をプロットする、今までの２つの方法を合わせて使います。
すると下のように、綺麗な線が描けます。

※canvasのプロパティに、lineJoinというものがありまして、これに’round’を入れておくとパスとパスの間を滑らかに連結してくれるようです。
しかし、考えるのが面倒だったため全ての線は個別に描画しました。

※11/21
.lineCapでいけそうです・・

controller

railsアプリを作成してからpictures controllerを作ります。

$ rails new canvas
$ cd canvas
$ rails generate controller

ルーティング

ルーティングを設定します。
pictures controllerのnew actionで絵を書くことにします。

# config/routes.rb
  root :to => 'pictures#new'

erb

何の変哲もないcanvasタグを書きます。
CSSだけでwidthとheightの設定をすると調子が悪いので、
必ずcanvasタグ内でサイズ指定して下さい。

# app/views/pictures/new.html.erb
<canvas id="draw-area" width="300" height="300"></canvas>

coffee script

canvasのcontextを取得して、点を描画する機能と線を描画する機能を追加します。

// app/assets/javascripts/pictures.js.coffee
  canvas = $('#draw-area')
  ctx = canvas[0].getContext('2d')
  ctx.lineWidth = 1

  ctx.putPoint = (x, y)-> # x,yに点を描画
    @.beginPath()
    @.arc(x, y, @.lineWidth / 2.0, 0, Math.PI*2, false)
    @.fill()
    @.closePath()
  ctx.drawLine = (sx, sy, ex, ey)-> # 始点(sx, sy) から 終点(ex, ey)に線を描画
    @.beginPath()
    @.moveTo(sx, sy)
    @.lineTo(ex, ey)
    @.stroke()
    @.closePath()

そして、canvasをクリックしたときに点を描画します。
mousedownというフラグ変数を用意して、マウスを押している状態か判定しています。

// app/assets/javascripts/pictures.js.coffee
  mousedown = false
  canvas.mousedown (e)->
    ctx.prevPos = getPointPosition(e)
    mousedown = true
    ctx.putPoint(ctx.prevPos.x, ctx.prevPos.y)

マウスが動いている間は点と点を線で繋ぎます。
始点は一つ前のイベント発生時の座標、
終点は現在のイベント発生時の座標です。

// app/assets/javascripts/pictures.js.coffee
  canvas.mousemove (e)->
    return unless mousedown
    nowPos = getPointPosition(e)
    ctx.drawLine(ctx.prevPos.x, ctx.prevPos.y, nowPos.x, nowPos.y)
    ctx.putPoint(nowPos.x, nowPos.y)
    ctx.prevPos = nowPos

マウスの押下をやめた時と、canvasからポインタが出た時に描画を終了します。

// app/assets/javascripts/pictures.js.coffee
  canvas.mouseup (e)->
    mousedown = false
  canvas.mouseout (e)->
    mousedown = false

絵を消せる

キャンバス上の絵を全消去できるようにします。

erb

消去のボタンを作成します。
CSSのデザイン設定等は省略します。

<span id="clear-button">消去</span>

coffee script

#clear-buttonが押された時、context.clearRectでcanvas全体を指定して消去します。

// app/assets/javascripts/pictures.js.coffee
  $("#clear-button").click ->
    ctx.clearRect(0, 0, canvas.width(), canvas.height())

描画を一回分戻れる

人間は失敗するものです。
描画を一回分戻れるようにしてあげます。

erb

戻すボタンを作成します。

<span id="return-button" class="controll-button">戻す</span>

coffee script

contextに現在の状態を保存する機能を追加します。
getImageDataを使えば指定領域の描画情報を取得することができます。

// app/assets/javascripts/pictures.js.coffee
  ctx.savePrevData = ->
    @.prevImageData = @.getImageData(0, 0, canvas.width(), canvas.height())

canvas.mousedownに描画前の状態を保存する以下の一行追加します。

// app/assets/javascripts/pictures.js.coffee
  canvas.mousedown (e)->
    ctx.savePrevData() # この一行を追加
    ctx.prevPos = getPointPosition(e)
    mousedown = true
    ctx.putPoint(ctx.prevPos.x, ctx.prevPos.y)

ボタンを押したとき、contextのputImageDataを使って、保存してあったprevImageDataをcanvasに上書きします。

// app/assets/javascripts/pictures.js.coffee
  $("#return-button").click ->
    ctx.putImageData(ctx.prevImageData, 0, 0)

これで描画をやり直せます。
思う存分間違って大丈夫です。

線の太さを変えられる

線の太さは現在1pxの固定になっています。
これではつまらない！
これをHTML5のスライダーを使って変更できるようにします。

erb

HTML5のスライダーは、Railsのrange_field_tagヘルパーがあるので使います。
初期値1、最小値1、最大値20で作成しました。
その下には、現在の太さを表示するための領域を用意しました。

    <%= range_field_tag 'pen-width-slider', 1, :min => 1, :max => 20 %>
    <span id="show-pen-width">1</span>px

coffee script

スライダーの操作はchangeイベントで捕捉できます。

// app/assets/javascripts/pictures.js.coffee
  $("#pen-width-slider").change ->
    ctx.lineWidth = $(@).val()
    $("#show-pen-width").text(ctx.lineWidth)

これで線の太さを変えられるようになりました。

色を変えられる

「黒一色じゃつまらないです。いろんな色で書きたいです。」
「やりましょう。」

erb

R,G,Bそれぞれのスライダーで実装します。
#preview-colorという、色をプレビューするボックスも用意しまいした。

    <%= range_field_tag 'pen-color-red-slider', 0, :min => 0, :max => 255 %>
    <span class="red">R</span> <span id="show-pen-red">0</span><br />
    <%= range_field_tag 'pen-color-green-slider', 0, :min => 0, :max => 255 %>
    <span class="green">G</span> <span id="show-pen-green">0</span><br />
    <%= range_field_tag 'pen-color-blue-slider', 0, :min => 0, :max => 255 %>
    <span class="blue">B</span> <span id="show-pen-blue">0</span><br />
    <div id="preview-color"></div>

scss

現在の色をプレビューするボックスのスタイルです。
ただの四角です。

/* app/assets/stylesheets/pictures.css.scss */
#preview-color{
  width: 30px;
  height: 30px;
  background-color: rgb(0, 0, 0);
  border: solid 1px black;
}

coffee script

contextに色変更の機能を加えます。
strokeStyleとfillStyleにスライダーの色を設定するだけです。

// app/assets/javascripts/pictures.js.coffee
  ctx.setColor = ->
    color = "rgb(#{red_slider.val()},#{green_slider.val()},#{blue_slider.val()})"
    @.strokeStyle = color
    @.fillStyle = color
    preview_color.css('background-color', color)

スライダーの操作を取得します。

// app/assets/javascripts/pictures.js.coffee
  red_slider = $("#pen-color-red-slider")
  green_slider = $("#pen-color-green-slider")
  blue_slider = $("#pen-color-blue-slider")
  preview_color = $("#preview-color")

  red_slider.change ->
    ctx.setColor()
    $("#show-pen-red").text($(@).val())
  green_slider.change ->
    ctx.setColor()
    $("#show-pen-green").text($(@).val())
  blue_slider.change ->
    ctx.setColor()
    $("#show-pen-blue").text($(@).val())

これで色を変えられるようになりました。

絵を投稿できる

さて、ついに絵をサーバ側に保存します。
仕様は適当に、
・public/imagesディレクトリに保存
・１００件まで。超えたら古いものから削除していく。
です。

erb

保存するボタンを作ります。

<span id="save-button" class="controll-button">保存</span>

coffee script

canvasでtoDataURLすると、base64エンコードされた画像文字列が取得できます。
これをpictures controllerのcreate actionにポストします。

// app/assets/javascripts/pictures.js.coffee
  $("#save-button").click ->
    url = canvas[0].toDataURL()
    $.post '/pictures', {data: url}

ruby

画像データ受信元のルーティングを追加します。

# config/routes.rb
  resources :pictures, only: [:create] # この一行を追加

ピクチャーモデルを作成します。
実際はmysqlの設定などしていますが、省略です。
今回、カラムはidしか使わないためマイグレーションはいじらずにさっさとdb:migrateしました。

$ rails generate model picture
$ rake db:migrate

コントローラの動作です。
ブラウザから送られてきた画像データから、
最初の文字列を削除してbase64デコードすると画像として保存できます。

# app/controllers/pictures_controller.rb
  def create
    path = 'public/images/'
    picture = Picture.create
    File.open("#{Rails.root}/#{path}/#{picture.id}.png", "wb") { |f|
      f.write Base64.decode64(params[:data].sub!(data:image/png;base64,', ''))
    }
    if Picture.count > 100
      picture = Picture.order(:id).first
      begin
        File.unlink("#{Rails.root}/#{path}/#{picture.id}.png", "wb")
      rescue
        # 適当な処理
      end
      picture.destroy
    end

    render :nothing => true
  end

これで画像を投稿できるようになりました。

投稿された画像の一覧を表示できる

画像は投稿できるようになったけれども、
投稿された画像を見ることができないので見れるようにします。

erb

ただの表示用div要素です。

<div id="pictures"></div>

ruby

pictures controllerにcreate actionのルーティングを追加します。

# coufig/routes.rb
  resources :pictures, only: [:index, :create]

rails側でrenderして、HTMLをクライアントに返しても良いですが、
今回はディレクトリの構造が安易なのでRailsはidだけ渡して、残りはブラウザで処理してもらいます。

# app/controllers/pictures_controller.rb
  def index
    @response = ''.tap do |me|
      Picture.all.reverse.each do |picture|
        me << "#{picture.id},"
      end
    end
  end