最近とあるプロジェクトで、JavaScriptを使い、お客さん先のホームページを読込、その内容に応じて広告をJavaScript内で生成する『レコメンドエンジン』の配信サービスを提供している。 その中で、JavaScriptが複雑化してきたので、JSのxUnitの書き方と、CIサーバJenkinsに載せるようにしました。

JavaScriptの単体テスト

QUnitとJasmineを調べたが、ピュアなxUnitが好きなので、今回QUnitを選択した。QUnitのテスト表記は下記のようにシンプルなequal関数でサクサクかけました。
書きながらソースコードのリファクタリングも進みました。やはりテストコード書くとコードの悪い所が顕著に見えるのが心地いいです。

１，QUnit
　元々は、jQueryのテストフレームワークとしてスタートした。現在はjQueryに依存していない
　公式サイト：http://docs.jquery.com/QUnit

　◯テスト表記

1
2
3
4
5

	test("a basic test example", function() {
	  ok( true, "this test is fine" );
	  var value = "hello";
	  equal( value, "hello", "We expect value to be hello" );
	});

２，Jasmine
　BDD for JavaScriptのテストフレームワーク
　公式サイト：http://pivotal.github.com/jasmine/

　◯テスト表記

1
2
3
4
5

	describe("Jasmine", function() {
		it("makes testing JavaScript awesome!", function() {
			expect(yourCode).toBeLotsBetter();
		});
	});

QUnitをCUIで実行する

通常QUnitのテスト実行は、ブラウザを使って試験実行と試験確認を行います。JenkinsにてCIを回す事を考えると、CUIベースで試験が実行される仕組みが必要です。

そこで、headless Webkitの『PhantomJS』を使います。headlessとは、頭の無いということですが、Webkitでの表示機能を内部に持っているけど、実際の表示は一切しないというブラウザです。

<

blockquote> 実際どんな事出来るのですが、PhantomJSのソース内のexamplesを見てみて下さい。
公式サイト：http://www.phantomjs.org
公式サンプル：<a href=”https://github.com/ariya/phantomjs/tree/master/examples>https://github.com/ariya/phantomjs/tree/master/examples

PhantomJSのインストール

下記ページを参考に、バイナリでCentOS5.5へインストールしたらエラーが出てうまく入りませんでした。
http://code.google.com/p/phantomjs/wiki/Installation

ソースからコンパイルしてインストールしました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# atrpmsリポジトリの追加
vi /etc/yum.repos.d/atrpms.repo
[atrpms]
name=ATrpms manual
baseurl=http://dl.atrpms.net/el5-$basearch/atrpms/testing/
gpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpms
gpgcheck=1
 
rpm --import http://packages.atrpms.net/RPM-GPG-KEY.atrpms
yum -y install qt47-webkit qt47-webkit-devel qt47-devel sqlite
 
# ソースからコンパイル
sudo su -
cd /usr/local/src
wget http://phantomjs.googlecode.com/files/phantomjs-1.5.0-source.tar.gz
tar zxfv phantomjs-1.5.0-source.tar.gz
rm -f phantomjs-1.5.0-source.tar.gz
cd phantomjs-1.5.0/
# 下記ビルドコマンドはデフォルトで4つのコンパイラが同時起動する
# さくらVPS512だとSwapが発生したので下記オプション付きで実行
# ./build.sh --jobs 1
./build.sh
 
# インストール用のパッケージ作成
# make distclean
# yum -y install chrpath
./deploy/package-linux-dynamic.sh 
 
# インストール
cd ..
tar zxfv ./phantomjs-1.5.0/phantomjs.tar.gz 
cp -f ./phantomjs/bin/phantomjs /usr/bin
cp -f ./phantomjs/lib/libQt* /usr/lib
 
# 掃除
rm -fr ./phantomjs
rm -fr ./phantomjs-1.5.0

下記コマンドでVerが確認出来れば無事にインストール終了

1
2

phantomjs -v
1.5.0

PhantomJS 内で QUnit を実行

PhantomJSのexamplesの中にある「run-qunit.js」を使うとCUIでQUnitを実行できます。

下記コマンドqunitのテストコードが実行できる。引数に相対パスでQUnitのテストコードを指定すると、テスト結果を標準出力と終了コードに返します。

1
2
3
4

phantomjs ./phantomjs-1.5.0/examples/run-qunit.js ./qunit/test/index.html 
'waitFor()' finished in 1952ms.
Tests completed in 1780 milliseconds.
586 tests of 586 passed, 0 failed.

これで、Jenkinsに組み込むための準備ができました！

参照：http://code.google.com/p/phantomjs/wiki/TestFrameworkIntegration

Jenkinsに組み込む

Jenkinsへはプロジェクトの「設定」の「ビルド」にシェルの実行を加え下記コマンドを追加します。

1
2

# 下記パスは適当に書き換えて下さい
phantomjs ./public/javascripts/run-qunit.js ./public/test/test_common_service.html

メニューから「ビルド実行」を実行して無事にQUnitが動作しているか確認して下さい。

これで無事にJSをCI出来ます！

PHP Markdown

http://michelf.com/projects/php-markdown/

インストール手順

プラグインの配置

下記手順はサンプルです。実際のホスト名やパスに修正をして下さい。

ssh -lcyberwave cyberwave.sakura.ne.jp
cd ~/www/wordpress/wp-content/plugins
wget http://michelf.com/docs/projets/php-markdown-extra-1.2.5.zip
unzip php-markdown*.zip
rm php-markdown*.zip

WordPressでプラグイン有効化

1. WordPress管理画面のメニューの「プラグイン」の「インストール済み」をクリック
2. その中から「Markdown Extra」を探して「使用する」をクリック
3. 画面上部に「プラグインを使用開始しました。」が表示されることを確認

ビジュアルエディタを無効化

1. WordPress管理画面のメニューの「ユーザー」の「あなたのプロフィール」をクリック
2. 「ビジュアルリッチエディターを使用しない」のチェックボックスをONにする
3. 「プロフィール更新」をクリック

コメント欄でのMarkDown記法

markdown.phpの4行目を下記のように変更するとコメント欄はMarkDown記法は無効になる
vi PHP\ Markdown\ Extra\ 1.2.5/markdown.php

-@define( 'MARKDOWN_WP_COMMENTS',   true );
+@define( 'MARKDOWN_WP_COMMENTS',   false );

参照

• WP: PHP Markdown 記法早見表（的なもの）
  http://bono.s206.xrea.com/2007/01/312-markdown_syntax/
• WP plugin[up]: 簡易記法で記事を書く – PHP Markdown Extra をアップグレード
  http://bono.s206.xrea.com/2007/01/311-php_markdown111/

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

サーバ側でキャッシュ有効期限を設定しても、画像１つづつにコネクションを張りトータルの接続時間がかかります。スマフォサイトだと、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();
});

ダウンロード

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

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

Padrinoを使いましょう！

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

他に、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 < 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 => 'created_at desc')
    render 'posts/index'
  end
 
  get :show, :with => :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 => @posts

app/views/posts/_post.haml

.post
  .title= link_to post.title, url_for(:posts, :show, :id => 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 < 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 => @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 => 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のインストール

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>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>ruby -v
ruby 1.8.7 (2009-06-12 patchlevel 174) [i386-mswin32]
 
# Ver1.9.1に変更
C:\WINDOWS>pik sw 191 p376
 
C:\WINDOWS>ruby -v
ruby 1.9.1p376 (2009-12-07 revision 26041) [i386-mswin32]
# ↑無事に変更されています。
 
# 再度Ver1.8.7に戻す
C:\WINDOWS>pik sw 187
 
C:\WINDOWS>ruby -v
ruby 1.8.7 (2009-06-12 patchlevel 174) [i386-mswin32]
# ↑こちらも無事に変更されています。

参照

http://github.com/vertiginous/pik

Etnicaは、とにかくクール。 渋くて重いベースラインが、ゆっくりとテンションを上げてくれる。 上がった後の渋いブレイク。。 下記Vの、5分01秒のところがカッコいいです。 ^^ とにかく地味渋！！

これからシーズンですね。 野外が楽しみです！ おもいッきり踊りたいですね。

いっぱい遊びましょ！ Enjoy your life!

今日は、ドリーセさん＠渋谷の事務所会議室をお借りして、LTを行っておりました！！ 僕の発表は、『エンジニアの人生』について、梨木が思っている事を話しました。

資料をslideshareに(初)アップしましたので、皆さん、ご覧頂けたらと思います。。。 一部、Twitterで「今は、ユーストリームで流せ」的なご意見をいただきました！ 次回、トライするぜい。

ではでは、スライドは以下の通りです！！ （本当は、PPTでアニメが付いているのですが。。ま、slideshareなのでご勘弁。。）

沢山のエンジニアさんにお会いできてハッピーでした。。。 このポストを読んでいただいたエンジニアの皆様が、少しでも「エンジニア・ライフ イズ ビューティフル」を感じて頂いたら幸いです。

梨木繁幸

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

今までの拡張現実。

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

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

マーカレス拡張現実PTAM

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

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

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

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

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

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

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

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

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

http://twitter2mixi.cyberwave.jp/