A Day in the Life

モテる Ruby! - Ruby会議 2007

先日の Ruby 会議、参加者・スピーカ・スタッフの皆さんお疲れ様でした。非常に楽しめたイベントで、企画運営などさまざまなことを行ってくださったスタッフの方々にはほんと感謝です。
また久しぶりに Rubyist な方々といろいろ話ができて楽しかったです。人見知りなので、話しかけてくださった方々、ありがとうございます:D
というわけで、以下発表資料。

モテる Ruby!

舘野祐一 ( id:secondlife )

自己紹介

  • 舘野祐一
  • 株式会社はてなエンジニア
  • Shibuya.js 企画・運営

自己紹介 好きなの

  • Ruby が好き
  • vim が好き
  • アイドr

Ruby はモテ?

  • Ruby は昨年から世間で大ブレイク
  • でも Ruby を使えてもモテる気配がしない…
  • Ruby の集まりはほぼ男性ばかり

マーティン・ファウラー曰く
「Rubyコミュニティでは、女性を一切見かけることがない。」
http://capsctrl.que.jp/kdmsnr/wiki/bliki/?RailsConf2007

モテRu?

モテそう?

  • エンジニアの周りで女性が多い職業といったらデザイナー?
  • Ruby でデザインに関係するといったら画像編集?

モテRuかも?

というわけで

  • Ruby で画像編集を身につけたらモテるかも?
    • 画像編集ライブラリの紹介
      • ライブラリを使うと、こんなの作れるよとか
    • RMagick についての Tips

様々な画像ライブラリ

  • Ruby/GD, GD2
  • PureImage
  • ImageScience
  • rcairo
  • RMagick

Ruby/GD, GD2

Ruby/GD, GD2 とは

  • Ruby/GD
    • 拡張ライブラリ
  • GD2
    • DL を使い libgd を読み込んで PureRuby で叩いてる
    • ちょっとOOぽいインターフェイス
  • 線や円、四角やフォントなどの描画が可能
  • ドットベース
    • ベクター画像は描けない

Ruby/GD, GD2 利点

  • 本当にシンプルな画像描画に
  • GD パッケージありのディストリビューションは多い
  • Perl/PHP などで GD を使った人なら API 名がほぼ同じ
    • GD2 はColor クラスなどが抽象化されてる

Ruby/GD, GD2 欠点

  • 複雑なことをするには自分で書かないと…
    • GD の API はできることはそんなに無い
  • ベクター画像扱えない
  • フォントのアンチエイリアスが微妙
  • OO ぽくないインターフェイス
    • GD2 ならわりと改善

俺歴史/RSSTIMES

俺歴史/BGMaker

PureImage

PureImage とは

  • PureRuby で書かれた画像ライブラリ
  • GD ができるレベルの描画ならだいたいできる

PureImage 利点

  • Ruby のみで描画したいときに
    • 拡張ライブラリいらずにすぐ試せる
  • シンプルな画像描画に

PureImage 欠点

  • 現時点ではファイルの読み書きが PNG のみ
  • フォントはビットマップフォントのみ
  • フォントファイルを TrueType から Java プログラムでコンバートが必要

ImageScience

ImageScience とは

  • 画像のリサイズにのみ特化したライブラリ
    • リサイズのみに RMagick つかうんなら you Image Science 使っちゃいな、YO

Hate RMagic? Get Science! ImageScience!

  • RubyInline で FreeImage の API を叩いて使ってる
  • ソースは200行ちょい

ImageScience 利点

  • リサイズにしか使わないならこれで!

rcairo

須藤さんがステキな説明を(このあとのあとすぐ!)

RMagick

RMagick とは

  • ImageMagick の RubyBinding
  • 画像処理に一通りの機能
    • 線・円・多角形・グラデーション
    • アルファチャンネル
    • エフェクト
    • 画像調整
    • ベクターも使える
    • アンチエイリアスフォントレンダリング

RMagick 利点

RMagick 欠点

  • 多すぎるAPI
  • やりたいことが見つからないドキュメント
  • ImageMagick や周辺ライブラリが入ってないディストリ
    • 入れるのが大変な場合が
    • libpng, libjpg, lib* ...
    • windows 版は gem で win 用バイナリがあるけど
  • メモリーリークや微妙にバギー
  • ベクターでの(SVGなど)出力が不可

最近自分で RMagick 使うように

俺歴史 はてなセリフ

俺歴史 favicon2dots

俺歴史 Polarize

俺黒歴史 StarMaker

RMagick 主なクラス

  • Image
  • ImageList
  • Draw
  • RVG

Image

  • メインとなるクラス
  • 多くのAPI
    • image.public_methods(false).length #=> 282
  • 画像の保存
  • エフェクト
  • リサイズ
  • 合成
  • テクスチャ貼り付け

ImageList

  • 複数枚の画像を扱う
  • レイヤー
  • GIF アニメにして保存

Draw

  • 線や円, 四角の描画
  • フォントの描画
    • 簡単な線やフォントの描画に

RVG

  • SVG like な API を持つクラス
  • 実体は Magick::Draw のラッパ
  • ベクター画像を作りたいときには

Image 必須 API

このメソッドはテストに出るよ

  • to_blob { self.format = 'png' }
    • バイナリに
  • from_blob
    • バイナリから Image オブジェクトに
  • resize/resize_to_fit
    • サイズ変更
  • composite
    • 別の Image オブジェクトと合成
  • rows/columns
    • 高さ/幅 height/width じゃないよ

Image エフェクト

  • メソッド一つでエフェクト
    • photoshop デフォルトぽいのはだいたい組み込みで
  • ベクターな RVG/Draw クラスでエフェクト
    • 一度 Image に変換してから

例 motion_blur

  • img.monitor_blur 0, 10, 0

例 spread

  • img.spread 10

例 sepiatone

  • img.sepiatone

ImageList

GIF アニメ作るのに便利

image = Magick::Image.read('hatenalogo.png').first
image_list = Magick::ImageList.new
image_list << image.copy
[2,4,6,8,6,4,2].each {|i| 
  image_list << image.oil_paint(i) 
}
image_list.delay = 10
image_list.write 'image.gif'

ImageList

いまさらGIFアニメ?

  • Flash の代替広告に
  • Ajax の Loading 画像に
    • エフェクト
    • Image#rotate で回転とか
    • 一枚の画像から簡単に

はまりがちな FAQ

  • Image.read で Array が返る
    • GIF/TIFF などの複数画像を含むフォーマットがあるため
    • Image.read(file).first
  • 特定フォーマットで開く/保存したい
    • { self.format = 'ico'} 明示的に

はまりがちなFAQ/文字列

文字列レンダリングの時はエスケープを

  • Debian の ImageMagick 6.2.4 12/13/06 Q16
    • Draw#text だと必要なし
    • Draw#annotate では % を %% に
  • FC4 パッケージの ImageMagick 6.2.2
    • Draw#text では % を %% に
    • Draw#annotate では % を %%%% に

ver によって挙動が!

まとめ

  • シンプルに
    • GD/GD2
    • PureImage
  • サムネイル
    • ImageScience
  • エフェクト・ベクター・その他すべて
    • RMagick

まとめ・画像編集モテる?

  • 弊社デザイナは全員男
    • 前提からして間違い
  • デザイナに関係するプログラミング言語といったら JavaScript!?
    • Shibuya.js 開いてもほとんど男性ばっかりだったよ!
  • デザイナ(略)といったら ActionScript!?
    • Shibuya.es 開いてもほとんど男性ばっかりだったよ!
  • 安易な考えはモテない

終わりに

  • 画像編集を覚えてモテるかは解りません
  • が、Ruby で画像編集の手助けになれば幸い
記事の一覧 >