第三の修練

どれがクリックされたかを取得する。

JavaScript。ひとまずここでは動いてます。背景色の設定と選択状況の変更がいっしょくたになっていたり、一度もクリックされていないエレメントの場合は選択状況を取得しなかったり、とイマイチに思うところが幾つかありますがまあいいや。

var ElemManage = {
  list: {},

  add: function(id) {
    var list = this.list;
    var obj = document.getElementById(id);
    addEvent(obj, 'click', function(e) {
      if (list[id]) {
        list[id] = false;
        obj.style.backgroundColor = "#FFF";
      } else {
        list[id] = true;
        obj.style.backgroundColor = "7FFFD4";
      }
    });
  },

  get: function() {
    return this.list;
  },

  display: function() {
    var property = "";
    var list = this.get();
    for (var i in list) {
      property += i + ":" + list[i] + "\n";
    }
    alert(property);
  }
};

こんな感じ。

* JavaScript: アニメーションの基本

JavaScriptでのアニメーションを少しだけやったので、忘れないうちにエントリ。基本はsetTimeout or setIntervalを使って、少しづつ位置を変えていく。

var elem_id = "hogehoge"; // HTML要素のID
var flames  = 30;         // コマ数
var perSize = 10;         // 1コマでの移動距離
var perTime = 30;         // 1コマの時間

/* 30コマ分の処理をsetTimeoutで登録 */
for (var i=1; i<=flames; i++) {
  setTimeout("document.getElementById('"+elem_id+"').style.left = document.getElementById('"+elem_id+"').offsetLeft + perSize + \"px\";", perTime*i);
}

加速度的に移動スピードを上げていきたいとかはココに参考になるのがあります。

JavaScriptで使用する座標系のプロパティ

座標の取得方法とか使い方とか参照とかいろいろわからなかったので、少しだけ実験。

確認用のページ

Pstoreを利用したタスク管理

RubyのPstoreのお勉強。

PstoreはRubyのオブジェクトをバイナリ形式でファイルに保存することができる。オブジェクトのまま保存できるので、

• テキストみたいにファイルフォーマットとか考えないでいい。
• DB不要。
• 可変長のデータをさくっと扱える。

みたいなメリットがある。逆にデメリットは、

• バイナリなのでファイルを直接編集するのは厳しい。

まあとにかく、Pstoreを使ってタスク管理をするためのクラスを実装してみた。

#!/usr/local/bin/ruby

require 'pstore'
require 'date'

class MyTask
  def initialize(filepath)
    @db = PStore.new(filepath)

    @db.transaction do
      unless @db[:max_id]
        @db[:max_id] = 0
        @db[:tasks] = []
      end
    end
  end

  def list_all
    @db.transaction(true) do
      @db[:tasks]
    end
  end

  def list_done
    done_tasks = []
    @db.transaction(true) do
      @db[:tasks].each do |task|
        done_tasks << task if task[:status]
      end
      done_tasks
    end
  end

  def list_yet
    yet_tasks = []
    @db.transaction(true) do
      @db[:tasks].each do |task|
        yet_tasks << task unless task[:status]
      end
      yet_tasks
    end
  end

  def add(task_name)
    new_task = { :name => task_name, :date => Date.today, :status => false }
    @db.transaction do
      new_task[:id] = @db[:max_id] += 1
      @db[:tasks] << new_task
    end
  end

  def delete(id)
    @db.transaction do
      @db[:tasks].each_index do |index|
        if @db[:tasks][index][:id] == id
          @db[:tasks].delete_at(index)
          @db.commit
        end
      end
    end
  end

  def done(id)
    @db.transaction do
      @db[:tasks].each do |task|
        task[:status] = true if task[:id] == id
      end
    end
  end

  def yet(id)
    @db.transaction do
      @db[:tasks].each do |task|
        task[:status] = false if task[:id] == id
      end
    end
  end
end

# インスタンス作成
task = MyTask.new("./hoge")

# タスク追加
task.add('部屋の片付け')
task.add('パンツの受け取り')
task.add('クリーニング')

# タスク一覧
#task.list_all.each do |task|
  puts "#{task[:id]}: #{task[:name]} - #{task[:status]}"
end

冗長な気がする。もっといいデータの持ち方がありそう。でも寝る。おやすみ。

Arrayの拡張メソッド

forEachとかfilterとかmapとかって凄い便利そうなのがFirefox1.5から実装されてるんですね。livedoor ReaderのJavaScriptを見て知りました。