特集：Small Basic開発入門 日本語化担当者が語るSmall Basic活用術 マイクロソフト　山田 昌良 2010/04/27
Page1 Page2 Page3 Page4 Page5

●画像を表示する基本的なプログラムのサンプル

　さて、次はJPEGなどの画像ファイルを表示させるプログラムを作ってみよう。Small Basicでは、PC上にローカルに格納されている画像ファイルを表示させられるのはもちろんのこと、画像ファイルが大量に格納されているwww.flickr.comと連携したプログラミングも簡単に作成できる。

　Small Basicでは、画像を扱う場合「イメージリスト」と呼ばれる領域をメモリ上に確保し、そこに画像を1枚以上保存して、それをグラフィック・ウインドウ画面に表示させるという手法を取っている。もっとも、実際には非常に簡単なプログラムで実現できるので、あまり難しそうだという印象を持っていただく必要はない。

　ここで使用するオペレーションおよびプロパティは以下のとおりだ。

オペレーション	TextWindow.WriteLine( 文字列1 )	テキスト画面上に文字や数値を表示する 文字列1：表示される文字列
オペレーション	TextWindow.Read()	テキスト画面上でユーザーの入力を読む 戻り値：ユーザーから入力された文字列
オペレーション	ImageList.LoadImage( 画像名 )	画像ファイルをイメージリストへとロードする 画像名：ローカル・マシンのファイル名またはインターネット上の画像ファイルのURL 戻り値：追加されたイメージのオブジェクト
オペレーション	GraphicsWindow.DrawImage( 名前1, 数値1 , 数値2 )	イメージリストに格納されている画像をグラフィック・ウインドウ画面に表示する 名前1：表示する画像オブジェクトが格納されている変数名 数値1：表示する場所のX座標 数値2：表示する場所のY座標
オペレーション	Flickr.GetRandomPicture( 文字列1 )	www.flickr.comから、指定されたタグ名を持つ画像ファイルをランダムに取得する 文字列1：タグ名 戻り値：取得した画像のURL
オペレーション	ImageList.GetHeightOfImage( 名前1 )	指定された画像の高さを取得する 名前1：指定する画像オブジェクトの名前。通常は変数で指定 戻り値：画像の高さを示す数値
オペレーション	ImageList.GetWidthOfImage( 名前1 )	指定された画像の横幅を取得する 名前1：指定する画像オブジェクトの名前。通常は変数で指定。 戻り値：画像の横幅を示す数値
オペレーション	GraphicsWindow.Clear()	グラフィック・ウインドウ画面をクリアする
オペレーション	Shapes.Addimage( 名前1 )	画像を図形（だ円や長方形など）と同等に扱えるように、図形として追加する 名前1：画像オブジェクトの名前。通常は変数で指定 戻り値：変換されて図形になったオブジェクト
オペレーション	Shapes.Rotate( 名前1, 角度1 )	指定された画像を回転させる 名前1：回転対象となる画像の名前。通常は変数で指定 角度1：回転させる角度
サンプル・プログラムで使用するオブジェクトのオペレーションやプロパティ

　それでは、画像ファイルを扱ったプログラムを作ってみよう。ここではあらかじめ、CドライブのTempフォルダに、それぞれmypic1.jpg、mypic2.jpg、mypic3.jpg、mypic4.jpgという名前の画像ファイルを配置した。もちろんこれらは違う名前でも違うフォルダでも問題ないが、実際に以下のプログラムを実行するためには、この例と同じようにファイル名の末尾を（mypic1.jpgのように）数値にする必要がある。

　以下に示す最初のプログラムは、C:\temp\mypic1.jpgをグラフィック・ウインドウ画面の左上端から表示させるものである。ImageList.LoadImage( 画像名 ) オペレーションを使って画像ファイル「mypic1.jpg」をイメージリストに追加し、そのオブジェクトを変数aに入れる。そしてそのaをグラフィック・ウインドウ画面の座標（0, 0）に表示するという流れになる。

a = ImageList.LoadImage("C:\temp\mypic1.jpg") GraphicsWindow.DrawImage( a, 0, 0 )

イメージリストに画像を保存してグラフィック・ウインドウ画面に表示するサンプル・コード

　このコードを実行すると、次の画面のようになる。

イメージリストに画像を保存してグラフィック・ウインドウ画面に表示するサンプルの実行画面

　なお、画像ファイルはインターネット上のURLでもよい。例えば、＠ITのロゴ・マークの画像のURLは、

http://www.atmarkit.co.jp/parts/images/atit/top_logo.jpg

なので、以下のようなプログラムを実行すれば＠ITのロゴ・マークを表示することができる。

a = ImageList.LoadImage("http://www.atmarkit.co.jp/parts/images/atit/top_logo.jpg") GraphicsWindow.DrawImage( a, 0, 0 )

＠ITのロゴ・マークの画像を保存してグラフィック・ウインドウ画面に表示するサンプル・コード

　このコードを実行すると、次の画面のようになる。

＠ITのロゴ・マークの画像を保存してグラフィック・ウインドウ画面に表示する例

●複数の画像を表示するプログラムのサンプル

　次のプログラムでは、複数の画像ファイルを扱ってみよう。画像ファイル「mypic0.jpg〜mypic4.jpg」を連続してイメージリストに追加し、それらのオブジェクトを配列「a[0]〜a[4]」に入れる。そして同時にそれらを110ピクセルおきに横に並べて表示する。

For i = 0 To 4   a[i] = ImageList.LoadImage("C:\temp\mypic" + i + ".jpg")   GraphicsWindow.DrawImage( a[i], i*110, 10 ) EndFor

複数の画像ファイルを扱うサンプル・コード

　このコードを実行すると、次の画面のようになる。

複数の画像ファイルを扱うサンプルの実行画面

　ただ、上記のプログラムでは画像ファイルの大きさがすべて横幅を100ピクセルに固定されていたので、出力時に110ピクセルおきに並べて表示するという固定幅表示でも問題なかったが、実際には画像ファイルの横幅は不定である場合が多い。従って、以下のコードのように、「それぞれの画像ファイルの横幅＋10ピクセル」の間隔となるようにした方が現実的だろう。画像の横幅は、ImageList.GetWidthOfImage( 名前1 ) オペレーションで取得できる。

yoko = 0 For i = 0 To 4   a[i] = ImageList.LoadImage("C:\temp\mypic" + i + ".jpg")   GraphicsWindow.DrawImage( a[i], yoko, 10 )   yoko = yoko +  ImageList.GetWidthOfImage(a[i]) + 10 EndFor

「それぞれの画像ファイルの横幅＋10ピクセル」の間隔を取るサンプル・コード

　実行結果は先のものと同じである。

●Flickrの画像を表示するプログラムのサンプル

　さて、次はいよいよFlickr（www.flickr.com）を活用したプログラムである。なお、この先のプログラム作成に際して、www.flickr.comのアカウントを取ったり、自分であらかじめwww.flickr.comに画像をアップロードしたりといった準備は必要ない。Small Basicが提供している機能は、基本的にwww.flickr.comからランダムに画像を取ってくる機能である。タグ指定をすることで、画像の種類などをある程度は絞ることもできる。

　まずは、www.flickr.comから「犬」に関係のある画像をランダムに1枚取得して表示してみよう。犬ということで、タグ名は「dog」として取得する。なお、日本語でタグ名を指定することも可能なので、例えば日本人がアップロードしたと思われる犬の画像を取得したいならば、タグ名は「犬」にした方が適切な画像を取得できるかもしれない。

　下記のコードは、そのサンプル・プログラム。Flickr.GetRandomPicture( 文字列1 ) オペレーションにより、www.flickr.comからから画像のURLを取得できる。

url = Flickr.GetRandomPicture("dog") myimage = ImageList.LoadImage(url) GraphicsWindow.DrawImage( myimage , 0, 0 )

「犬」に関するFlickrの画像をランダムに取得するサンプル・コード

　このコードを実行すると、次の画面のようになる。

「犬」に関するFlickrの画像をランダムに取得するサンプルの実行画面

　どんな画像が表示されるかは時の運、ということになるのだが、サンプル画像をたくさん必要とするようなプログラムでは役に立つだろう。

●画像をランダム表示する：ユーザー入力の取得

　ここではもう一歩進歩させて、自分の好きな系統の画像をランダムに数秒おきにパラパラと表示していくプログラムを作ってみよう。せっかくなので、画像ファイルの大きさに合わせてグラフィック・ウインドウ画面の大きさも調整するようにして見栄えを良くしよう。

　最初に、ユーザーが好きなタグを入力できるように、TextWindow（＝いわゆるコマンド・プロンプト画面）を使用する。以下のプログラムでは、TextWindowに文字列を表示する方法と、TextWindow上でユーザーの入力を受け付ける方法を示している。

TextWindow.WriteLine("あなたの名前は？") name = TextWindow.Read() TextWindow.WriteLine( name + "さんですね")

TextWindow上でユーザーの入力を受け付けるサンプル・コード

　このコードを実行すると、次の画面のようになる。

サンプルの実行画面

　始めにTextWindow.WriteLine( 文字列1 ) オペレーションを使用して「あなたの名前は？」という文字列を表示し、次にTextWindow.Read() オペレーションを使ってユーザーに文字を入力してもらい、その入力された文字列を変数nameに格納する。そしてその変数nameに格納されている文字に「さんですね」という文字列を連結して出力している。

●画像をランダム表示する：グラフィック・ウインドウ画面のサイズ変更

　次に画像ファイルの大きさに合わせてグラフィック・ウインドウ画面のサイズを変更する方法だが、これもそれほど難しくはない。

　ImageList.GetHeightOfImage( 名前1 ) オペレーションで画像の高さ、ImageList.GetWidthOfImage(名前1) オペレーションで画像の横幅を取得できるので、それぞれの値をいったん2つの変数（ここでは「height」と「width」）に格納する。そして、グラフィック・ウインドウ画面のサイズは、

GraphicsWindow.Height = （高さの値） GraphicsWindow.Width = （横幅の値）

で設定できるので、変数「height」と「width」に入っている値をそれらに代入すればいい。

●画像をランダム表示するサンプルのプログラム

　以上の内容を踏まえて、ユーザーが入力したタグに基づきランダムに画像を表示するプログラムを記述したのが、次のコードになる。

TextWindow.WriteLine("好きな写真のタグを入力してください") tag = TextWindow.Read() Loop:   url = Flickr.GetRandomPicture(tag)   myimage = ImageList.LoadImage(url)   height = ImageList.GetHeightOfImage(myimage)   width = ImageList.GetWidthOfImage(myimage)   GraphicsWindow.Clear()   GraphicsWindow.Height = height   GraphicsWindow.Width = width   GraphicsWindow.DrawImage(myimage, 0, 0)   Program.Delay(300) Goto Loop

ユーザーが入力したタグに基づきランダムに画像を表示するサンプル・コード

　このコードを実行すると、次の画面のようになる。タグとしては「seattle」を入力している。

ユーザーが入力したタグに基づきランダムに画像を表示するサンプルの実行画面

　なお、このプログラムはGoto文を使って無限ループを作っているので、適当なところで強制的に終了する必要がある。

●単純な図形をランダムに回転させて傾けるプログラムのサンプル

　ではもうひと工夫して、写真を机の上に適当に置いているような感じの画面になるように、画像をランダムに回転させて傾け、グラフィック・ウインドウ画面上の自由な位置に配置するようなプログラムにしてみよう。

　図形の回転は、（画像ではなく）だ円や長方形などの単純な図形ならば、すぐに実現できる。例えば横幅100ピクセル、高さ50ピクセルの長方形を、右に45度傾けて表示させるには以下のようにすればいい。

a = Shapes.AddRectangle(100,50) Shapes.Rotate(a, 45)

単純な図形を右に45度回転させて傾けるサンプル・コード

　このコードを実行すると、次の画面のようになる。

単純な図形を右に45度回転させて傾けるサンプルの実行画面

●画像をランダムに回転させて傾けるプログラムのサンプル

　しかし単純な図形ではなく、画像を回転させるためには、まずその画像を図形に変換する必要がある。画像を図形に変換するには、Shapes.AddImage( 名前1 ) オペレーションを使用する。次の例は、＠ITのロゴの画像を取得し、それをいったん図形にして変数aに入れて、そして先の例と同様に右に45度傾けて表示している。

myimage = ImageList.LoadImage("http://www.atmarkit.co.jp/parts/images/atit/top_logo.jpg") a = Shapes.AddImage(myimage) Shapes.Rotate( a, 45 )

画像を図形に変換して右に45度回転させて傾けるサンプル・コード

　このコードを実行すると、次の画面のようになる。

画像を図形に変換して右に45度回転させて傾けるサンプルの実行画面

●Flickrの画像をランダムに回転させて傾けて自由な位置に表示するプログラムのサンプル

　それでは上記のテクニックを基に、Flickrから画像をランダムに10枚取得し、それらをランダムな角度でランダムなグラフィック・ウインドウ画面の位置に配置するプログラムを完成させよう。

　ここでは、グラフィック・ウインドウ画面の大きさを1000ピクセル×700ピクセルに固定し、それぞれの画像を表示させる位置はX座標がrnd_x、Y座標がrnd_yを使って表現する。また、rnd_xは1〜600の乱数を、rnd_yは1〜400の乱数を設定している。画面の大きさが1000ピクセル×700ピクセルでありながら、表示させる画像のX座標の最大値は600、Y座標の最大値は400と、やや小さめに設定しているが、これは画像が画面からはみ出してまったく見えなくなるのを避けるためである。角度は変数rnd_dを使い、その範囲は1〜180まで、つまり最大で180度回転することになる。

　この内容を記述したのが、以下のコードである。

TextWindow.WriteLine("好きな写真のタグを入力してください") tag = TextWindow.Read() TextWindow.WriteLine("Flickerから画像をロードしています。お待ちください...") For i=1 To 10   url = Flickr.GetRandomPicture(tag)   myimage[i] = ImageList.LoadImage(url) EndFor GraphicsWindow.Width = 1000 GraphicsWindow.Height = 700 For i = 1 To 10   a[i] = Shapes.AddImage(myimage[i])   rnd_d = Math.GetRandomNumber(180)   rnd_x = Math.GetRandomNumber(600)   rnd_y = Math.GetRandomNumber(400)   Shapes.Move(a[i], rnd_x, rnd_y)   Shapes.Rotate(a[i], rnd_d) EndFor

Flickrの画像をランダムに回転させて傾けて自由な位置に表示するサンプル・コード

　このコードを実行すると、次の画面のようになる。

Flickrの画像をランダムに回転させて傾けて自由な位置に表示するサンプルの実行画面

INDEX
	[特集]Small Basic開発入門
	日本語化担当者が語るSmall Basic活用術
	1．Small Basicの位置付け／用途／準備・導入
	2．面白いSmall Basic開発事例（1）
	3．面白いSmall Basic開発事例（2）
	4．ここまでできるSmall Basic（1）：SilverlightやEXE出力
	5．ここまでできるSmall Basic（2）：Visual Basic移行

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）