プログラマのオッサンの唄

2012年9月27日木曜日

テーブルに存在しないカラムをActiveRecordに追加するサンプル

「正しいMVCではModelが太る」と言われている。

俺が勝手に考える正しいMVCの実装。モデルはデータAPI！
http://kyoro353.hatenablog.com/entry/20111223/1324589389

Railsでは具体的にどうすれば良いだろうか？

apps/modelsフォルダ内の ActiveRecord を継承したクラスをカスタマイズすることだろうか。

初めの一歩として、テーブルに存在しないカラムを ActiveRecord に追加してみる。

▽現状のMigrationクラス

class CreateOnecolumnmodels < ActiveRecord::Migration
  def change
    create_table :onecolumnmodels do |t|
      t.string :name

      t.timestamps
    end
  end
end

▽現状のActiveRecordクラス

class Onecolumnmodel < ActiveRecord::Base
end

▽現状の表示結果

試しに、ActiveRecord クラスに attribute を追加してみるが、うまくいかない。

▽attributeを追加したActiveRecordクラス

class Onecolumnmodel < ActiveRecord::Base

  def initialize
    @secondname = "2nd name"
  end

  attr_accessor :secondname
end

▽追加したattributeを表示するshow.html.erb

<p id="notice"><%= notice %></p>

<p>
  <b>Name:</b>
  <%= @onecolumnmodel.name %>
</p>

<p>
  <b>Second Name:</b>
  <%= @onecolumnmodel.secondname %>
</p>


<%= link_to 'Edit', edit_onecolumnmodel_path(@onecolumnmodel) %> |
<%= link_to 'Back', onecolumnmodels_path %>

どうも ActiveRecord ではアクセサが機能しないようだ。
下記のように関数として実装したらうまくいった。

▽関数を追加したActiveRecordクラス

class Onecolumnmodel < ActiveRecord::Base

  def secondname
    return "2nd name"
  end
end

▽関数追加後の表示結果

2012年9月25日火曜日

Processing.js で作成した画像をJavaScriptから操作する最小サンプル

Processing.js で生成する画像は、Processing の文法で描画できる。
一度作成した画像を JavaScript で操作する最小サンプルを作ってみた。

▽作成したHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="processing-1.4.1.js" type="text/javascript"></script>
    <script type="text/processing" data-processing-target="mycanvas">
    void setup() {
      size(200, 200);
      noLoop();
    }
    void draw() {
      background(0);
      fill(255);
      rect(10, 10, 20, 20);
    }
    void moveRect() {
      background(0);
      fill(255);
      rect(random(180), random(180), 20, 20);
    }
    </script>
  </head>
  <body>
    <p>
    <canvas id="mycanvas"></canvas>
    </p>
    <button onClick="moveRect()">Move!</ button>

    <script id="script1" type="text/javascript">
    function moveRect() {
      var p = Processing.getInstanceById("mycanvas");
      p.moveRect();
    }
    </script>

  </body>
</html>

▽実行結果

Move! ボタンを押すと白い四角形がランダムに移動する。