Archive for the ‘楽しいコーディング’ category

Storage Cache Plugin for jQuery

12月 10th, 2011

jQuery

回線の細いスマフォサイトでは、極力サーバとのコネクション数を減らし、速やかにページを表示させたいものです。
そこで、HTML5でのローカルストレージを使った、画像キャッシュを行う jQuery Pluginを作りました。

サーバ側でキャッシュ有効期限を設定しても、画像1つづつにコネクションを張りトータルの接続時間がかかります。スマフォサイトだと、manifest書けばという話もあるが、これはこれで強力すぎるキャッシュ機構でもあり、サーバ側で反映した変更が即時サイトに反映されないと、運用要件として難しい事もあると思います。

下記スクリプトを使用すれば、manifestを使わなくても画像データを完全にオフライン化できます。

使い方

HTMLのHEAD部分で下記スクリプトを書く。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.storagecache.js" type="text/javascript"></script>

ストレージキャッシュしたい画像を下記のように書いて下さい。
但し、Ajaxのクロスドメイン制約から、他ドメインのイメージソースは使用できませんので、同サーバの画像を指定して下さい。

<img cache_src="./images/banner.gif" alt="this is banner!" width="90" height="45" />

HTMLの呼び出しが完了した時点で、下記スクリプトを実行。

$(function(){
  $('img[cache_src]').storagecache();
});
ダウンロード

こちらからダウンロードして下さい。

Zabbixをスマートフォン対応にしよう!(iPhone、Android対応)

2月 3rd, 2011

監視サービスとしてのZabbixを、スマートフォンで見れるようにするクライアントを見つけました。
いつでも、どこでも、監視状況をスマートフォンに最適化された画面で使用する事ができますよ。

iPhone、Androidのために、jQtouchを使い、ネイティブアプリっぽいUIがかっこいいです。

インストールメモ
sudo mkdir /etc/zabbix/mozbx
sudo chown nashiki:nashiki /etc/zabbix/mozbx
sudo chmod +x /etc/zabbix/mozbx
cd /etc/zabbix/mozbx
git clone git://github.com/mattiasgeniar/MoZBX.git .
cd /var/www/html/
ln -s /etc/zabbix/mozbx ./mozbx

その後に、Zabbixへ管理者ログインして、メニューの「管理」⇒ユーザ⇒API accessに、スマフォ対応させたいアカウントを追加して保存

インストール後お手元のスマフォから下記URLでアクセスして下さい。

http://yourhostname.jp/mozbx

参考

http://www.mozbx.net/index.html
https://github.com/mattiasgeniar/MoZBX

Rails + Sinatra ≒ Padrino で遊ぼう!

6月 13th, 2010

Rails3の登場が待ち遠しい中、社内プロジェクトをSinatraで進めていました。
しかし、Sinatraの軽量感はいいのですが、少し大きなプロジェクトになると、app.rbが煩雑になります。
そこで、Railsみたいなディレクトリ分けをして作っていきますが、その時やはりRailsみたいにコードの自動生成が欲しくなってきます。

Padrinoを使いましょう!

軽量フレームワークSinatraを使い、Railsみたいな自動コード生成が出来ます。
http://www.padrinorb.com/

他に、Padrinoには下記のような機能が付いています。
Padrino公式サイト

  1. 複数の有名なテストフレームワークとの連携
  2. 複数の有名なテンプレートエンジンとの連携
  3. データベースも複数対応
  4. コードジェネレータ(モデル・コントローラの自動生成)
  5. 複数のアプリケーションを簡単に統合させるマウント機能
  6. 強力なルーティング機能
  7. 各種ヘルパー機能(タグ、アセット、フォーム、テキスト)
  8. メーラー機能
  9. 管理画面自動生成
  10. ログ収集機能
  11. リローディング機能
  12. 国際化

Blog作成チュートリアル

下記スクリーンキャストは、作者本人による説明です。

下記内容は、公式チュートリアルに掲載していあるBlogの作成を行いました。

Padrinoフレームワークのインストール

いつもどおり、gemで一発終了です。

gem install padrino
sample_blogプロジェクトの初期化

Railsプロジェクトと同様ですが、プロジェクトで使用するディレクトリ構成、及び、設定ファイル等を自動的に作成をしてくれます。
下記内容では、テストにshoulda、ビューにhaml、sass、ORMにactiverecordを使用するという設定です。

padrino-gen project sample_blog -t shoulda -e haml -c sass -s jquery -d activerecord -b
cd sample_blog
Routeの初期設定

既に自動生成されている下記ファイルを書き換え、テストも兼ねて「Hello World!」を入れてみましょう。
# app/app.rb

class SampleBlog < Padrino::Application
  configure do
     # ...
  end
 
  # Add these routes below to the app file...
  get "/" do
    "Hello World!"
  end
 
  get :about, :map => '/about_us' do
    render :haml, "%p This is a sample blog created to demonstrate the power of Padrino!"
  end
end
動作確認

padrinoを起動させて、WEBアプリケーションが出来ているか確認しましょう。

padrino start
# ブラウザで下記URLをアクセス
# http://localhost:3000/
# http://localhost:3000/about_us
管理画面作成

次に管理画面を自動生成してみましょう!
これも、自動生成が付いているので手軽に管理画面が構築出来ます。

padrino-gen admin
padrino rake ar:create
padrino rake ar:migrate

下記コマンドで、管理画面へログインする初期アカウント作成を行います。

padrino rake seed
# 任意のEメールとパスワードを入力
動作確認
padrino start
# ブラウザで下記URLをアクセス
# http://localhost:3000/admin/
モデル作成

Rails同様に、モデルも自動生成出来ます。

padrino-gen model post title:string body:text

下記自動生成された、マイグレートファイルに「t.timestamps」を追加します。

# db/migrate/002_create_posts.rb

class CreatePosts &lt; ActiveRecord::Migration
  def self.up
    create_table :posts do |t|
      t.string :title
      t.text :body
      t.timestamps
    end
  end
 
  def self.down
    drop_table :posts
  end
end
マイグレート

アクティブレコードでのマイグレーションを実行します。
DBはデフォルトで、sqlite3なので、プロジェクト直下のdbディレクトリ内に「development.db」が生成されます。
※sqlite3のファイル内容を確かめるには、TkSQLiteがお勧めです!
http://reddog.s35.xrea.com/wiki/TkSQLite.html

padrino rake ar:migrate
コントローラ自動生成

下記コマンドでコントローラを自動生成します。
URIの規則は、Railsと同様になっています。

padrino-gen controller posts get:index get:show

自動生成されたpost.rbを下記のように書き換えます。
indexは、Postモデルからデータを取得して@postsに入れてViewに渡しています。
showは、URIからidを取得して、Postモデルから検索し、@postに入れてViewに渡しています。

# app/controllers/posts.rb

SampleBlog.controllers :posts do
  get :index do
    @posts = Post.all(:order =&gt; 'created_at desc')
    render 'posts/index'
  end
 
  get :show, :with =&gt; :id do
    @post = Post.find_by_id(params[:id])
    render 'posts/show'
  end
end
ビュー作成

Hamlでビューを書いています。

# app/views/posts/index.haml

- @title = "Welcome"
 
#posts= partial 'posts/post', :collection =&gt; @posts

# app/views/posts/_post.haml

.post
  .title= link_to post.title, url_for(:posts, :show, :id =&gt; post)
  .date= time_ago_in_words(post.created_at || Time.now) + ' ago'
  .body= simple_format(post.body)

# app/views/posts/show.haml

- @title = @post.title
#show
  .post
    .title= @post.title
    .date= time_ago_in_words(@post.created_at || Time.now) + ' ago'
    .body= simple_format(@post.body)
%p= link_to 'View all posts', url_for(:posts, :index)
管理画面にpostモデルを追加する

下記魔法のコマンドで、先程生成した管理画面にpostモデルを追加できます。

padrino-gen admin_page post
動作確認
padrino start
# ブラウザで下記URLをアクセス
# http://localhost:3000/admin/
モデルへ新カラム追加

下記コマンドで、postモデルに、acount_idカラムを追加しています。

padrino-gen migration AddAccountToPost account_id:integer

postモデルにバリデーションルールとacountとの関連ルールを追加
# app/models/post.rb

class Post &lt; ActiveRecord::Base
  belongs_to :account
  validates_presence_of :title
  validates_presence_of :body
end

管理画面でのpostモデル新規作成時に、accountが管理画面へログインしているユーザになるようにする
(「@post.account = current_account」の一行)

# admin/controllers/posts.rb

Admin.controllers :posts do
# ...
  post :create do
    @post = Post.new(params[:post])
    @post.account = current_account
    if @post.save
      flash[:notice] = 'Post was successfully created.'
      redirect url(:posts, :edit, :id =&gt; @post.id)
    else
      render 'posts/new'
    end
  end
# ...
end
ビューに「Posted by」を追加

アクティブレコードのお陰で、コントローラをいじらずすんなり追加できます。

# app/views/posts/show.haml

- @title = @post.title
#show
  .post
    .title= @post.title
    .date= time_ago_in_words(@post.created_at || Time.now) + ' ago'
    .body= simple_format(@post.body)
    .details
      .author Posted by #{@post.account.email}
%p= link_to 'View all posts', url_for(:posts, :index)

# app/views/posts/_post.haml

.post
  .title= link_to post.title, url_for(:posts, :show, :id =&gt; post)
  .date= time_ago_in_words(post.created_at || Time.now) + ' ago'
  .body= simple_format(post.body)
  .details
    .author Posted by #{post.account.email}
CSSの配置

下記パスより、CSSを2つ取得する。
http://github.com/padrino/sample_blog/tree/master/public/stylesheets/
配置場所:\sample_blog\public\stylesheets

動作確認
padrino start
# ブラウザで下記URLをアクセス
# http://localhost:3000/posts
感想

sinatraの手軽さを残しつつ、Railsライクなディレクトリ構成とコード自動生成が出来ます。
また、テストフレームワーク、ビュー、モデルなどが疎結合になっており、自由に選択できるところも魅力だと感じました。

pikで簡単、複数のRuby環境構築!

5月 29th, 2010

そろそろ、Ruby1.9も試したいが、環境をスグには変えられないと思いませんか?
pikは、Windows内で複数のRuby環境を管理できるツールです。
いつも通りGemでインストール出来て、Ruby環境の追加、一覧、変更が出来ます。

pikのインストール

gem install pik
mkdir "C:\Program Files\pik"
# PATHに"C:\Program Files\pik"を追加
pik_install "C:\Program Files\pik"

初期設定

# 既存環境の追加
pik add
This version has already been added.
# 新しい環境の追加
pik add C:\ruby-1.9.1-p376-i386-mswin32\bin
** Adding:  191: ruby 1.9.1p376 (2009-12-07 revision 26041) [i386-mswin32]
 Located at:  C:\ruby-1.9.1-p376-i386-mswin32\bin

環境一覧

pik list
187: ruby 1.8.7 (2009-06-12 patchlevel 174) [i386-mswin32] *
191: ruby 1.9.1p376 (2009-12-07 revision 26041) [i386-mswin32]
191: ruby 1.9.1p378 (2010-01-10 revision 26273) [i386-mingw32]

環境チャンジ

pik sw 191      # Verのみ指定
pik sw 191 p378 # Verとpまで指定

使ってみた感想

まずインストールと初期設定がすごく簡単でした。
環境周りだからちょっと面倒かなと思いましたが、すごく簡単。
手軽に、Rubyの実行環境をチェンジ出来る感覚は新鮮です!
Gem環境も完全に分離されているので、影響が無いです。
ぜひ、皆さんも試してみて下さい。

# Ruby環境一覧を確認
C:\WINDOWS&gt;pik list
187: ruby 1.8.7 (2009-06-12 patchlevel 174) [i386-mswin32] *
191: ruby 1.9.1p376 (2009-12-07 revision 26041) [i386-mswin32]
191: ruby 1.9.1p378 (2010-01-10 revision 26273) [i386-mingw32]
 
# 現状のRubyVerを確認
C:\WINDOWS&gt;ruby -v
ruby 1.8.7 (2009-06-12 patchlevel 174) [i386-mswin32]
 
# Ver1.9.1に変更
C:\WINDOWS&gt;pik sw 191 p376
 
C:\WINDOWS&gt;ruby -v
ruby 1.9.1p376 (2009-12-07 revision 26041) [i386-mswin32]
# ↑無事に変更されています。
 
# 再度Ver1.8.7に戻す
C:\WINDOWS&gt;pik sw 187
 
C:\WINDOWS&gt;ruby -v
ruby 1.8.7 (2009-06-12 patchlevel 174) [i386-mswin32]
# ↑こちらも無事に変更されています。

参照

http://github.com/vertiginous/pik

マーカレス拡張現実PTAMってすごい!!

9月 12th, 2009

久しぶりに興奮しました!
すげーすげー。
これはやばいと思ったのでポスト。
タイトルにある『マーカレス拡張現実PTAM!』

なんて表現したらいいのかわからないので動画を載せます。

今までの拡張現実。

ワシントン大学HIT研究室が作ったARToolKitとしてライブラリがありこのライブラリからいろんなアプリを作って遊んでいます。
PCのカメラが読み込んだ画像の中からマーカーを認識し、そのマーカーから空間(X,Y,Z,VX,VY,VZ)を認識し、その空間に何かオブジェクトを簡単に配置できるライブラリです。

このARToolKitは、空間をソフトが識別するための白黒の記号(マーカー)が必要です。

マーカレス拡張現実PTAM

しかし、マーカレス拡張現実はこれがいらない!
オックスフォード大学のアクティブビジョングループのジョージクレインさんがマーカレス拡張現実作ってます!
これがすごい。

このビデオ下記秒数をチェックしてください!

  • 16秒目:電車外に見える野球グラウンドに巨大キャラクター!
  • 1分目:京都日本庭園にダースベーダーが現れ敵と戦う!
  • 2分目:京都の鹿と遊んだあと、鳥居を見たら空間認識し、ドットが現れる!
  • 2分50秒目:京都の池が歪む!

ヤバ過ぎます。
これって、文字通り『現実が拡張』されてる感じ。
フィーチャーしすぎだし、 他の人が見てる現実から離脱してる感じもありますよね。
スカラ株式会社のT4-Nなんかのデバイスと組み合わせたいです。

美術館入り口にいきなり恐竜2頭がお出迎え!

しかも画像の特徴点から場所の認識が可能で他の動画サンプルでは美術館に入ってiPhoneをかざすといろんなものがARで飛び出るようなものも作っています。

これは基礎技術なのでこの技術から応用して生活に活かさないといけないですよね。

この技術自体は画像のみを使って空間を認識しているので、これにGPSや地磁気センサーを加えると更に精度を高めた現時点の認識が可能です。
ソースコードも公開されているので何か作りたいですね!!

TwitterからMixiエコーへ自動転送サービスα版開始しました!

9月 3rd, 2009

先週から正式に『Twitter2Mixi』のWEBサービスを開始しました。以前作ったスクリプトを、ご要望の多かったWEBサービス版にしました。
少しでもTwitterの楽しさが広がればと思いTwitterのつぶやきを自動でMixiエコーに転送します。

まだ、Mixiエコーの利用者が少ないですがこのサービスを気に増えてもらえればうれしいかなと思ってます!

http://twitter2mixi.cyberwave.jp/

twitter2mixi

Rails ActiveRecordのテストコード

7月 26th, 2009

ActiveRecordって

WEBアプリケーションを高速開発するのに貢献した、Ruby On Railsを書いた人がどのようなコードを書いたのか勉強したいと思った。

ActiveRecordのコードを全体像を見てみました。
ActiveRecord自体の説明は下記参照

ActiveRecord (以下 AR) は RLR 第 4 回 に取り上げられたように、Ruby での O/R マッピングライブラリのひとつです。 AR を使えば、簡単かつ効率的にリレーショナルデータベース上の情報を Ruby オブジェクトとして扱うことができます。その理論的なところは P of EAA: Active Record を見てください。
参照:RubyOnRails を使ってみる 【第 3 回】 ActiveRecord

コードステップを計る

まずは、コードステップ数。
Project AmaterasのNetBeans対応ステップカウンターに感謝します!
私は、NetBeansを使っていますが、Eclipseにも対応してますよ。

CAP000012

Netbeans内で、実装コード、空行、コメント行がフォルダ単位で調べられます。

activerecord-2.3.2
実装コード

  • 57ファイル、実効コード9.9KStep、コメント7.2KStep
  • 1ファイルあたり、実効コード173Step、コメント126Step

テストコード

  • 188ファイル、実効コード19.7KStep、コメント0.5KStep
  • 1ファイルあたり、実効コード104Step、コメント3Step

驚いたことに、実装コードとほぼ同じぐらいコメントを書いている。
コード1行に対してコメント1行ってすごいね。
これは、Rdoc 使ってドキュメントも作っているからこれぐらいの行数になるんですね。

更に、びっくりしたのは、テストコード!。
これ、実装コードに対してテストコードを2倍書いています。
しかも、テストコードのファイル数は3倍以上で作っています。
少ない行数で沢山のテストコードを細かく実装しているんですね。
テストコードにコメントは作っていませんね。
テストコード自体を文章で説明しなければいけないテストコードは書くなということでしょう。
簡潔に誰が見てもどのようなテストを実施しているのかわかるテストコードを書いています。
また、書く必要があるときは、実装コードの中に集約しているのでしょう。そうすれば、RDocの中に仕様を集約できるからね。

定量的に品質を考える重要性

最近僕もあるプロジェクトをTDDで開発しています。
上記、ActiveRecordのテストコード作成と実装コードの比率は参考になりました。
テストファーストの考え方とか、実装するコードのステップ数とか、何を何のために作っているかを意識しながらプロジェクトを進めていくことは大事だと思います。
改めて、品質を考える上でも定量的にコーディングをとらえることは重要だと思いました。

CentOS 5に、ZabbixAgentをインストールする!

7月 12th, 2009

サービスを止めないために

一度作ったサービスを止めないためにはサーバ監視が大事です。
複数のサーバーを使っているサービスもあります。
その上、運営していくサービスが多くなると人的な監視にも限界があります。
そんな時に、『Zabbix監視サーバ』を使います。
これが完全無料の監視サーバです。
アプリの監視、インフラの監視、サーバ監視実績などサービスが問題なく稼動していくための監視体制を作るのに寄与します。
大規模のインフラも監視できるソリューションを持ち、分散監視や、10000を超えるサーバ監視も可能です。
監視サーバで有名なNagiosと比べグラフィカルで見た目がグッドです。

今回は、さくらインターネット専用サーバCentOS 5に、ZabbixAgentを入れてみました。

これにより、Zabbixサーバに複数のサーバ監視情報を集約できます。

ZabbixAgentインストールメモ

wget http://www.zabbix.jp/rpms/rhel5/i386/zabbix-agent-1.4.5-1.el5.i386.rpm
rpm -ivh zabbix-agent-1.4.5-1.el5.i386.rpm

/etc/zabbix/zabbix_agentd.confの下記1行のコメントされていることを確認する。

#ListenIP=127.0.0.1

また、下記Serverの設定に、ZabbixサーバのインストールされているグローバルIPを設定

Sever=127.0.0.1,your.zabbixserver.com

zabbix-agentサービスを起動します。

service zabbix-agent start
chkconfig zabbix-agent on

Agentを入れたサーバ内で下記を実行すると無事に接続できる

telnet localhost 10050

外部のサーバからもアクセス出来ることを確認

telnet your.zabbixagent.com 10050

無事に接続完了!

手軽に複数サーバーを監視できます

手軽に複数サーバーを監視できます

参考

Zabbix監視サーバ
http://www.miraclelinux.com/support/?q=node/313

NetBeans IDE 6.7のRubyでコードカバレッジが気持ちイイ!

7月 9th, 2009

フラクタルな品質

最近ソースの『品質』が気になる!
20代だったら気合で作っていたな。気合でデバッグして。
だけど、やはり足場あためないとね。コードレベルでも。
すべてはフラクタル構造なのでコードレベルから固めていかないとね。

コードカバレッジ

RubyでコードカバレッジをRcovを使ったが、もっと簡単に出来ないかと調べていた。

やはり、NetBeans IDE 6.7のリリースに含まれていそうとのこと、早速インストール。

すげ~、簡単にRubyのカバレッジが取得できます!^^v
しかも、ソース行単位で実行されたかされてないか緑と赤の背景色で一目でわかります。
エンジニアは左脳に寄りがちだから、
このような感覚的なツールは使っていて気持ちいいです!

NetBeans IDE のダウンロードはこちらから。

Restful_authenticationとforgot_passwordで楽々ユーザ認証!

7月 3rd, 2009

Railsのプラグイン『restful_authentication』と『forgot_password』で楽々にユーザ認証部分が作れます。
restful_authenticationは、ユーザ登録やEメールを送ってEメール上のリンクをクリックしないと本登録にならないようなフローなども設定できます。
ログイン処理と、ログインされていないと表示出来ない設定もページ単位で簡単に出来ます。
ここらへん、まじめに作ると結構骨が折れますね。。。

こんな時に、『restful_authentication』と『forgot_password』を使うと汎用性の高いユーザ認証部分が手軽に作れて便利ですよ!

下記、インストールメモです。

ローカル環境上でgitコマンドの準備

私はWindows環境だったので下記URLからGitをダウンロードしてインストール
http://code.google.com/p/msysgit/downloads/list

RailsプロジェクトへPluginの導入

Railsプロジェクトのルートで、下記コマンドを実行
script/plugin install git://github.com/technoweenie/restful-authentication.git
script/plugin install git://github.com/greenisus/forgot_password.git

上記Netbeansからでは入らなかったのでコマンドで実行

ユーザ認証コードをGenerate

script/generate authenticated user sessions --include-activation
script/generate forgot_password forgot_password user

出力されるコードが一部間違っているので下記修正
# 50行目をコメントアウト

#PasswordMailer.deliver_reset_password(@user)
ForgotPasswordMailer.deliver_reset_password(@user)

routeも勝手に追加してくれます。
しかし、下記Routeは追加が必要です。

map.activate '/activate/:activation_code', :controller => 'users', :action => 'activate', :activation_code => nil

ApplicationControllerに下記1行を追加

include AuthenticatedSystem

DB作成

rake db:migrate

ログイン画面を開く

http://localhost:3000/loginをアクセスしたらRouteエラーが出た
ActionController::RoutingError in Sessions#new
Showing app/views/sessions/new.html.erb where line #3 raised:
session_url failed to generate from {:controller=>"session", :action=>"show"} - you may have ambiguous routes, or you may need to supply additional parameters for this route.  content_url has the following required parameters: ["session", :id] - are they all satisfied?
Extracted source (around line #3):

rake routesを実行してRoutesの設定確認を行った。
ログイン画面の、下記パスを認識してくれないので、書き換えました。

<% form_tag session_path do -%>を <% form_tag :controller => 'sessions', :action => 'create' do -%>に書き換えた
無事に会員登録(仮登録、本登録)、ログイン認証、パスワード再発行まで自動で出来ました!

これは、会員系のサービス作るのであればすごく手軽に作れます。

皆様もお試しください。

参照:http://www.func09.com/wordpress/archives/348