簡易イメージビューワー

jpegやbmpを表示できる簡易イメージビューワーです。

その1

image_viewer.rb

001  #!ruby
002  
003  # cf:
004  # Delphi4 プログラミングバイブル p.314
005  # 7.4.2. イメージビューア
006  
007  require 'phi'
008  require 'dialogs'
009  require 'jpeg'
010  
011  form = Phi::Form.new
012  form.caption = 'Image Viewer'
013  
014  i = Phi::Image.new form, :image
015  i.align = Phi::AL_CLIENT
016  
017  Phi.new_menu form, :menu, [
018    Phi.new_item('&File', '', :mi_file).add(
019      Phi.new_item('&Open', 'Ctrl+O', :mi_open),
020      Phi.new_item('E&xit', '', :mi_exit)
021    ),
022    Phi.new_item('&Options', '', :mi_opt).add(
023      Phi.new_item('&Stretch', '', :mi_stretch),
024      Phi.new_item('&Center', '', :mi_center)
025    ),
026    Phi.new_item('&Help', '', :mi_help)
027  ]
028  
029  form.mi_open.on_click = proc do
030    dlg = Phi::OpenDialog.new
031    dlg.filter = 'Bitmap(*.bmp)|*.bmp|Icon(*.ico)|*.ico|Metafile(*.wmf)|*.wmf|Jpeg(*.jpg)|*.jpg'
032    if dlg.execute
033      form.image.picture.load dlg.file_name
034      form.caption = 'Image Viewer - ' + dlg.file_name
035    end
036  end
037  
038  form.mi_stretch.on_click = proc do
039    form.mi_stretch.checked = form.image.stretch = ! form.image.stretch
040  end
041  
042  form.mi_center.on_click = proc do
043    form.mi_center.checked = form.image.center = ! form.image.center
044  end
045  
046  form.show
047  Phi.mainloop

このスクリプトを実行すると、このような ウィンドウがあらわれます。

解説

以下の説明は旧ピジョンにあった たけ(tk)さんの解説をベースにしています。旧ピジョンのたけ(tk)さんの解説ページ

1行目はRubyでしばしば使われるおまじないです。これはUNIXでスクリプトを実行するコマンドを指定するためのものですが、Rubyではスクリプトに直接書かれた日本語の文字コードの種類を指定する等の働きも持っています。Ruby のスクリプトは Windows だけで実行されるわけではないので、スクリプトで日本語を使用する場合には必ずこの行を入れて文字コードの種類を指定する必要があります。ただし、このイメージビューワの場合には日本語が入っていないので、あまり意味がありませんね。どうしても気になる人はruby-listのMLの過去ログを調べてみてください。

最初は7〜12行です。

require 'phi'
require 'dialogs'
require 'jpeg'

form = Phi::Form.new
form.caption = 'Image Viewer'

おきまりの require ですが、 'jpeg' という拡張ライブラリが使われていますね。これを require するだけでjpeg画像が扱えるようになります。おきまりの話については今までのチュートリアルを参照してください。

12行目のform.caption( Phi::Form#caption )は初めて出ましたが、これはフォームのタイトルを設定します。

14と15行です。

i = Phi::Image.new form, :image
i.align = Phi::AL_CLIENT

Phi::Image というのはビジュアルなコントロール(フォームの上に表示されるコントロール)です。メモ窓( Phi::Memo )だと文字を表示しますが、イメージ窓( Phi::Image )は文字の変わりに絵を表示できるもの、という感じですね。

今まではメソッド呼び出しの時に常に括弧を付けていましたが、このスクリプトでは括弧を省略しています。括弧を省略しても Ruby のパーサーがどのように括弧が省略されているか自動的に認識してくれるので、括弧を付けるのが面倒な時は省略しても構いません(もちろん限界はあるので、注意してください)。

17〜27行はメニューを生成しています。メニューに関してはチュートリアルに説明があるので、分かると思います。

29〜36行はメニューの「Open」を押した時のアクションを定義しています。

form.mi_open.on_click = proc do
  dlg = Phi::OpenDialog.new
  dlg.filter = 'Bitmap(*.bmp)|*.bmp|Icon(*.ico)|*.ico|Metafile(*.wmf)|*.wmf|Jpeg(*.jpg)|*.jpg' 
  if dlg.execute
    form.image.picture.load dlg.file_name
    form.caption = 'Image Viewer - ' + dlg.file_name
  end
end

29〜32行はオープンダイアログを表示させて、表示する画像ファイルのファイル名を得ようとしています。詳しくはチュートリアルのダイアログの章を参照してください。ここではサンプルスクリプトで使用されていない Phi::OpenDialog のメソッドの幾つかを紹介します。

Phi::OpenDialog#filter_index

フィルターで複数のマスクを指定した場合に最初に表示されるのは、デフォルトでは一番上の項目です。しかし、 Phi::OpenDialog#filter_index で番号を指定すれば ２番目以降のフィルターを最初に表示することが出来ます。

Phi::OpenDialog#file_name

オープンダイアログの設定で Phi::Dialog#filter の他で一般的なのは Phi::OpenDialog#file_name です。

dlg = Phi::OpenDialog.new
dlg.file_name = 'd:\Apollo\sample\icon1.ico'

これはダイアログの結果を取得する属性ですが、設定で上記のようにしておくと、ダイアログを開いたときに最初に表示する場所とファイル名の指定になります。「ファイルの場所：Sample」、「ファイル名：icon1.ico」という表示から始まります。

前回扱ったファイルを記録して置いて、 Phi::OpenDialog#file_name にセットしてから呼び出せば親切でしょう。INIファイルに保存しておいたものを表示すればもっと親切です。

Phi::OpenDialog#initial_dir

具体的なファイルではなくディレクトリだけを指定したい場合には Phi::OpenDialog#initial_dir を使って次のように指定します。

dlg.initial_dir = 'c:\windows'

この他にもヒストリ機能とかいろいろオプションがあります。

33行目についてです。

ファイルオープンダイアログで選択されたファイル名(dlg.file_name)のファイルをイメージ窓に読み込みます。

form.image.picture.load dlg.file_name

ここではメソッドチェーンが使われていて、その過程で下の4つが出てきています。

• Phi::Image
• Phi::Image#picture
• Phi::Picture
• Phi::Picture#load
  

form.image は14行で生成した Phi::Image を参照しています。そして、Phi::Image というのは表示する場所。ビジュアルコントロールです。

form.image.picture( Phi::Image#picture )は Phi::Image コントロールに表示するグラフィックオブジェクト( Phi::Picture )を保管するコンテナ(入れ物)です。コンテナに入るオブジェクトの種類はいろいろです。 Phi::Icon だったり Phi::Bitmap だったりします。グラフィックオブジェクトはその種類が違えば、表示の仕方も、ファイルとのやりとりの方法も異なりますが、Phi::Picture を使えばその違いを吸収してくれます。よって、単純に picture.load ( Phi::Picture#load )とすれば良くなるというものです。

Phi::Image#canvas というものもありますが、これは Phi::Bitmap 専用のキャンバスなんですね。

最後は38〜44行です。

form.mi_stretch.on_click = proc do
  form.mi_stretch.checked = form.image.stretch = ! form.image.stretch
end

form.mi_center.on_click = proc do
  form.mi_center.checked = form.image.center = ! form.image.center
end

ややこしい構文を使っているなぁ。(Pascal 派から見ると、C言語流はややこしいと言うことです)。

39行は form.image.strech( Phi::Image#stretch )というイメージの引き延ばしをするかどうかを示す属性の値を取り出して、それを反転させて 元の属性( form.image.strech )に代入します。さらに代入した値を form.mi_strech.checked( Phi::MenuItem#checked )というメニューのチェックマークをつけるかどうかを示す属性に代入し、表示を反映させています。

40行もほとんど同じで、39行との違いは form.image.strech の代わりに form.image.center( 中央に表示するかどうかを示す属性 Phi::Image#center )を、 form.mi_strech.checked の代わりに form.mi_center.checked を、使用しているという点だけです。

クラスやメソッド

Phi::Form

Phi::Form#caption

Phi::Image

Phi::Image.new

Phi::Image#picture

Phi::Image#strech

Phi::Image#center

Phi::Picture

Phi::Picture#load

Phi::OpenDialog

Phi::OpenDialog#filter_index

Phi::OpenDialog#initiali_dir

補足

イメージビューワーのスクリーンショットには「GIMP」と書かれたロゴが表示されていますが、これは GIMP(GNU Image Manipulation Program) を使って自動生成したロゴです。このチュートリアルのPNG画像のほとんどはGIMPを使って作られています。もし、GIMPに興味がある方は下のリンク先をたどってみてください。

• GIMP本家
• GIMP for Windows