2009-12-13

HTML5勉強会@福岡-第2回に初参加！

HTML5 GWT Android

2009年12月11日(金)にAIPカフェで開催されたHTML5勉強会-第2回に参加させて頂きました！
いやーもー見るもの聞くもの全て初めての大興奮の２時間でした。
興奮しすぎてメモとるのも忘れていたのですが、覚えている範囲で以下ざっくりですが書かせていただきます。
内容に誤り等あるかもしれません。。。あったらすみません。。。

id:kimpoさん　GWTでGeolocationAPIとGoogleMapsAPI
GWTを使ってJava→JavaScriptに変換したよというお話。
GeolocationAPIで現在位置を取得して、GoogleMapsでその辺を表示するということをされていました。
GeolocationAPI,GoogleMapsAPIの実際の使い方や注意点等を分かりやすく説明してくれました。
しかも嬉しいデモつき！
さらにCSS3を用いてiPhone(サイズ)で表示された場合に背景色が変わるように工夫されていました。

id:re_shikajiroさん　HTML5とAndroid
jQTouchというjQuery プラグインを使えば簡単にWebアプリが作れるよというお話。
Webkitをつんでればよく、AndroidだけでなくiPhoneとかもいけます。
JavaScriptからWebkit(?)にオブジェクトを要求し、その受け取ったオブジェクトをJavaScriptで参照できるそうです。
Railsで作ったサンプルWebアプリケーションにAndroidからアクセスするというデモをされました。
個人的にAndroidに興味があり、HTML5勉強会でAndroidのお話が聞けるとは思ってなかったのですごく興奮しました。
スマートフォンの勢いを象徴する折れ線グラフを見せていただいたのですが、もう圧巻でした。
NTTdocomo等が滑らかな右肩上がりなのに対して、スマートフォンはもう右頭上がりといっても過言ではないくらいの異常な伸びでした。
（資料の出所を覚えておらず紹介できないのが残念です）

id:totty_jpさん　APIいろいろ
WebStrage,WebDatabase,WebWorkers等など各APIの説明でした。
最新の情報が丁寧にされており、かつ主要ブラウザで検証もされており、現在の対応状況も説明していただきました。
さらにスゴイのは、ほとんどのAPIに対してデモがありました！
デモを交えながらコードの説明もされ、大変分かりやすかったです。

私用で懇親会に参加できなかったのが残念でした。。。
また次回も参加させていただきたいなと思いました。
さらにその次の次くらいで自分も何か発表できるように精進しなければ・・・！

それから、Google-Groupにも勝手ながら参加させていただきました。
HTML5勉強会@福岡-wiki

2009-07-25

Railsで華麗に画像処理

Rails

（一応、Railsと華麗をかけています）

Railsのfile_columnというプラグインが秀逸です。

必要なもの

ImageMagick
RMagick
1. ImageMagickのRubyインタフェースでRubyからImageMagickが利用できるようになる。
2. 強い依存関係があるみたいで、両者のバージョンに注意。
3. こちらにImageMagickとRMagickがワンセットになっているものがあるのでそれをダウンロードすると便利です。（下の方にある『RMagick-2.10.0-ImageMagick-6.5.3-10-Q8.zip』とかです）
file_column
1. 下記コマンドでfile_columnプラグインのインストールする。
```
>ruby script/plugin install http://opensvn.csie.org/rails_file_column/plugins/file_column/trunk
```
2. {RAILS_ROOT}\vendor\plugins\trunk ができると思うので、{RAILS_ROOT}\vendor\plugins\file_column にリネームする。

使い方

テーブル
1. ファイル名を格納する列、もしくはテーブルを用意する。
```
t.string image
```

モデル

以下のように追加する。

file_column :image, :magick => {:versions => {:thumb => {:size => "100x100"},
                                              :medium => {:size => "150x150"}
                                             }
                               },
                    :web_root => "images/",
                    :root_path => File.join(RAILS_ROOT, "public","images") #この場所にファイルが作られる

versionsのハッシュのキー(上の例では:thumbと:medium)は任意で、好きなキー名が指定できます。
sizeは横×縦です。
sizeの指定は以下の３パターンがあります。
1. "100x150"：縦横比を維持して、このサイズに収まる大きさにします。
2. "100x150>"：これより小さい画像は小さいままで、拡大しません。
3. "100x150!"：縦横比を無視して、このサイズぴったりに合わせます。

ビュー(入力)

例として、複数画像をアップロードする場合です。

<%= file_column_field 'photo[0]', 'image' %>
<%= file_column_field 'photo[1]', 'image' %>
<%= file_column_field 'photo[2]', 'image' %>

file_column_fieldの第一引数はパラメータハッシュKeyで、第二引数はそのバリューの中のハッシュKey(？)です。

分かりにくいと思いますが、こんな感じでパラメータが送られます。

{"photo"=>{"0"=>{"image_temp"=>"", "image"=>#},
           "1"=>{"image_temp"=>"", "image"=>#},
           "2"=>{"image_temp"=>""}
          },
 "commit"=>"更新",
 "authenticity_token"=>"xxx"}

コントローラ
1. 上のパラメータを受け取ったアクションでは、こんな感じで処理します。
```
    params[:photo].each { |key, photo|
      Photo.create(photo) unless photo[:image].nil?
    }
```
ビュー(表示)
1. 画像を任意のサイズで表示するときもこんな感じで簡単にできます。
```
<%=  image_tag(url_for_image_column('photo', 'image', :thumb)) %>
```
2. url_for_image_columnの第一引数はインスタンス変数名、第二引数はメソッド名(カラム名)、第三引数はサイズ(上のモデルで記述したversionsのキー)です。

2009-07-14

Rails2.3での単数形⇔複数形、変換ルールの追加方法

Rails

単数形⇔複数形の変換ルールにイレギュラーパターンを追加したくて、
Webで調べてると、大体どこも次のコードをenvironment.rbに追加すればよいと書かれていました。

Inflector.inflections do |inflect|
  inflect.irregular 'person', 'people'
end

が、試してみるもうまくいかず・・・
試行錯誤の結果、次のように書くのが正しいっぽいです。

ActiveSupport::Inflector.inflections do |inflect|
  inflect.irregular 'reserve', 'reserves'
end

これはRails2.3だからかな？？

ちなみに書く場所も/config/environment.rb より
/config/initializers/inflections.rb の方が推奨されているようです。
（environment.rbに書いても動きます。）

2009-07-09

RailsでSlickMapCSSに感動泣き

Rails CSS

リスト形式でサイトマップを書くとグラフィカルに表現してくれるCSS『SlickMap CSS』をRailsで使ってみました。
SlickMap CSSについては下記参照
http://astuteo.com/slickmap/

上記サイトよりダウンロードしたslickmap.cssをpublic/stylesheetsに配置。
slickmap.cssを開き、『url('images/〜.png')』となっている箇所を『url('../images/〜.png')』に変更。
同様にダウンロードしたimagesフォルダ配下のPNGファイルをpublic/imagesに配置。
sitemap.rhtmlを作成。以下のように記述。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>サイトマップsample</title>
  <%= stylesheet_link_tag '/stylesheets/slickmap.css' %>
</head>
<body>
  <div class="sitemap">

      <h1>サイトマップ</h1>

      <ul id="utilityNav">
          <li><a href="/register">ホームページ</a></li>
      </ul>

      <ul id="primaryNav">
          <li id="home"><a href="">Home</a></li>
          <li><a href="">ほげほげ</a>
              <ul>
                  <li><%= link_to 'ほげ', :action => :hoge %></li>
                  <li><%= link_to 'ふが', :action => :fuga %></li>
              </ul>
          </li>
          <li><a href="">ふーばー長官</a>
              <ul>
                  <li><%= link_to 'ふー', :action => :foo %></li>
                  <li><%= link_to 'ばー', :action => :bar %></li>
              </ul>
          </li>
      </ul>

  </div>

</body>
</html>

ポイント

stylesheet_link_tagでslickmap.cssをリンクする。
サイトマップはclass="sitemap"のdivタグの中に記述する。（そうしないと、floatのせいでサイトマップ以外のレイアウトが崩れます）
id="primaryNav"のulタグに書いたリストが階層構造になる。（もちろん入れ子OKです）
liタグにid="home"をつけると、その要素がルートになる。
aタグの要素がボックスで表示される。（つまり、liタグで階層構造を作って、aタグでノードを作っている感じ）
id="utilityNav"のulタグに書いたリストは階層構造にならずに独立したノードになる。ページ右上に表示される。

補足

画像ファイルを使っていますが、それらは階層構造の線のために使っています。よって画像ファイルを配置しなくても、ノードの表示や階層構造の配置は問題ありません。

最初にCSSの中身を見て、「こんなにゴリゴリやってたら表示に結構時間がかかるのでは…」と思ったのですが、実際に使ってみるとほとんど時間はかかりませんでした。
それにしてもCSSでここまでできるんですね！
ちなみに、感動した弾みで今書いています。

今回はダウンロードしたCSSをそのまま使っただけですが、次はCSSをいじって色々試してみたいです。

2009-07-01

POIを使うときの注意点

Java

セルへのアクセスが微妙。

セルアドレス(行，列)を指定して、直接セルにアクセスできません。
シート→行→セルという構造なので、まず行を取得して、その行からセルを取得する。
というちょっと面倒くさいやり方をしなければいけません。
まぁこのへんは、ヘルパを作るなりすればいいだけですね。

行の挿入，削除が不自由

Excelで行の挿入や削除するのとは、ちょっと感覚が違います。

行の挿入

HSSFSheet#shiftRowsで、挿入位置以降の行を全て後ろにずらします。
それから、HSSFSheet#createRowで行オブジェクトを作成し、
さらにHSSFRow#createCellでセルオブジェクトを作成する必要があります。

行の削除

HSSFSheet#removeRowで、行オブジェクトを削除したあとに、
HSSFSheet#shiftRowsで、削除位置以降の行を全て前にずらします。
（removeRowで行オブジェクトを削除しただけだと空行になっているので、
その状態で構わないのであれば行の移動は必要ありません。）

スタイルの設定が厄介

一つ一つのセルに対してスタイルを設定しなければいけません。
Excelでするように、範囲を選択して外側は太線で、内側は細線、
ということができません。
また、「スタイルオブジェクトを生成して、それをセルオブジェクトに設定する」
といったことをしないといけません。
さらにスタイルオブジェクトのインスタンスは１ブックに4000個までしか生成できません。
しかし、4000個を超えても例外が投げられるわけではなく、
スタイルが崩れるという分かりにくい事象が起こります。
ちなみにこの制限は、POIではなくExcelの制限です。

行のコピーが凶

行の完全コピー(値や書式を含めたコピー)を行いたい場合は結構メンドイです。
上記の注意点を踏まえて、さらに文字設定(文字サイズ,色etc)、罫線、
セルの結合状態などを自前でコピーしてやらなければいけません。

2009-05-13

無料のスクリーンレコーダ

Tool

FlashBack Expressというスクリーンキャスト録画ツールを使ってみた。
フリーソフトですが、使いやすく、出力もFlashやAVIが選択できてよかったです。

ダウンロードはここから↓
http://www.bbsoftware.co.uk/BBFlashBack_FreePlayer.aspx

ちなみに有償版もありますが、無償版でも十分だと思います。
機会があればゼヒお試しください。

2009-05-13

■

Teeda Seasar

S2Javelinとは、SeasarのAOP機構を利用し、Seasar上のアプリケーションの動作ログを出力するツールです。出力した動作ログは、そのままArrowVisionというビューワを用いてシーケンス図を表示させることが可能です。

詳細や入手等はこちらから↓
http://s2javelin.sandbox.seasar.org/s2javelin.html

それで、ReadMeをほむほむと読みながら設定していたのですが、
diconの設定でつまりました。
S2JSFの場合のサンプルはあったのですが、Teedaの場合のサンプルが無かったのです（TT TT）
そんな訳で、Teedaの場合のdiconの設定方法をメモしておきます。

前提として、Page,Serviceクラスに対してログ出力するとします。

S2JSFの場合はallaop.diconに設定するらしいのですが、
Teedaの場合はcustomizer.diconに以下の様に設定します。
（ここが最適かは自信ありませんが、意図通りには動いてくれます）

customizer.dicon

<components>
  <include path="default-customizer.dicon"/>
  <include path="javelin.dicon"/>

  <component name="pageCustomizer" class="org.seasar.framework.container.customizer.CustomizerChain">
    <!-- S2Javelin -->
    <initMethod name="addCustomizer">
      <arg>
        <component class="org.seasar.framework.container.customizer.AspectCustomizer">
          <initMethod name="addInterceptorName">
            <arg>"s2JavelinInterceptor"</arg>
          </initMethod>
          <property name="pointcut">"do.*, initialize, prerender"</property>
        </component>
      </arg>
    </initMethod>
  </component>
  〜
  <component name="serviceCustomizer" class="org.seasar.framework.container.customizer.CustomizerChain">
    <!-- S2Javelin -->
    <initMethod name="addCustomizer">
      <arg>
        <component class="org.seasar.framework.container.customizer.AspectCustomizer">
          <initMethod name="addInterceptorName">
            <arg>"s2JavelinInterceptor"</arg>
          </initMethod>
        </component>
      </arg>
    </initMethod>
  </component>
  〜
</components>

こんな感じで対象のカスタマイザーに追加すればＯＫです。
例ではPageクラスのdo〜メソッド,initializeメソッド,prerenderメソッドを監視対象にしています。
必要に応じて自由にpointcutを設定できます。設定しない場合は全メソッドが対象となります。
なお、javelin.diconをincludeするのにも注意です。

Page,Serviceクラス以外も対象にしたい場合には、
その対象にしたいクラスに対応するカスタマイザーに同様に追加すればＯＫです。

#id:kimpoさん、いつもありがとうございます。