Storage Cache Plugin for jQuery

12月 10th, 2011 by nashiki No comments »

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 by nashiki No comments »

監視サービスとしての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 by nashiki 2 comments »

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 by nashiki No comments »

そろそろ、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

夏が楽しみ!地味渋Etnicaが超カッコいい!

2月 16th, 2010 by nashiki No comments »

Twitterポストだけでは物足りず、Blogへアーカイブ。
このVは、かっこえ~~。
思い起こせば2002年現地に居ました。。

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

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

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

エンジニア・ライフ イズ ビューティフル!

11月 14th, 2009 by nashiki No comments »

Blog投稿久しぶり!
最近は、めっきりツイットしてました!

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

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

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

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

梨木繁幸

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

9月 12th, 2009 by nashiki No comments »

久しぶりに興奮しました!
すげーすげー。
これはやばいと思ったのでポスト。
タイトルにある『マーカレス拡張現実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 by nashiki No comments »

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

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

http://twitter2mixi.cyberwave.jp/

twitter2mixi

これって常識?歯医者の料金メニュー発見。

8月 7th, 2009 by nashiki No comments »

最近、何かと歯医者ネタが多い。
今日も歯医者行ってきました。
ホットなうちにBlog書きます!^^v

皆さんは、歯医者や病院の料金を支払う時にその内訳って気にしてますか?

普通の居酒屋とかであれば、
「何を飲みましょう?何を食べましょう?」って聞かれて、
自分の好きな商品を注文しますよね。
これ常識!

けど、病院とか、歯医者は、料金メニュー自体が見えないのではないでしょうか・・。(@_@)
そういえば、歯医者とかお医者さんに、ラーメン屋みたいに料金メニュー貼ってあるとこないですよね。。
何気に、これって不思議ですよね。
私も歯医者の料金がいまいちハテナな所がありました!

そこで!ポジティブライフハッカーな私としては、
超身近なライフ(己の生命)を維持するための保険制度を『ハック』します。

早速、料金表を発見!

社会保険歯科診療報酬点数早見表
歯医者とか病院は診察した内容(サービス)毎に点数が決まって、
サービス毎に点数が加算され、
その点数かける10円がご請求金額となる。
更に、社会保険制度があるので30%が本人負担です。。

なになに、今日行ってもらった治療は、997点で、支払った金額は2990円ね。うん、正しい!v
けど、これじゃ、内訳がわからない。@_@

医療費の明細を出すのが義務化

ちょっと調べたら、
平成18年度に厚生労働省から「医療費の内容の分かる領収証」を発行するのが義務付けられています。
(平成 18 年度診療報酬改定に係る通知 保発第 0306005 号)
それまで一部の歯医者は適当に点数をつけて、
適当に患者がわからないように精算をして、
点数を国に申請して貴重な税金をガメってました。
大事な私たちの税金を無駄に使わせてはいけないと、
厚生労働省は上記のような義務付けを行いました。

これにより、会計時に「ビール3600円、つまみ2850円です」ってな感じで、
サービス項目単位の明細は出してくれるようになりました。

R0015847

今日行った歯医者の領収書

今、通っている歯医者もちゃんと出てますね!
初・再診料、40点、
医学管理等、190点、
修復・補綴で767点、
合計、997点。
997点×10円で9970円。
3割負担なので2990円(1円単位切捨て)

更に調べてみると、
平成20年度からは、電子化されている病院や歯医者では、
その点数の内訳まで出しなさいという事が義務図けられました!
あらら??今通っている歯医者出してもらってません。
「電子化」されたって、パソコン使って領収書だしてるからな~。

これが見れると、実際お医者さんがどんなサービスを提供していくらの請求をしているのか赤裸々です。
これと、前記の「歯科診療報酬点数早見表」があればどの治療にいくら使ったかわかりますね。

情報技術でフラットになる

情報技術はすべての人を、正直に、親切にさせる技術だ。
すべてがオープンになった時に隠し事や嘘は出来ない。
だから、みんな正直に親切になる技術なんだ。

また今の時代考えられないような情報を手軽に取得できる。
だから、僕は情報技術で得られた知恵を自分の知識にして生きていくことが大事だと思います。

自分の心の中では誰にも頼ることの無い強い精神力を持ち、
その上で自分の力の限界を知り、
自分の出来ないところを他人様に助けていただく。
その中でも、すべては自分が責任を取るよう自分で知ることが大事だと思う。
知らなければ、人生のハンドルをその人に渡したも同じ。
知ることによってハンドルをはずさないことが大事だと思う。

Rails ActiveRecordのテストコード

7月 26th, 2009 by nashiki 2 comments »

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