Visual Basic 6.0 初級講座

Visual Basic 中学校 > VB6 初級講座 >

第１３回　スクロールバー

執筆：２０００年３月３日

スクロールバーは、その名前の通り　表示しきれない画像やテキストをスクロールさせるようとでよく使われますが別にその他の使い方をしてもかまいません。たとえば、スクロールバーを利用して数値を入力させるプログラムもしばしば見かけます。今回はスクロールバーを使った２つのサンプルを作ってどういった使い道があるか説明することにします。しかし、どのコントロールもそうですが使い方は自分次第です。みなさんも他の使い方を探ってみてください。

１．基礎固め

具多的なプログラムにはいる前にもう少しスクロールバーについて説明します。スクロールバーと言っても３種類ありますから気をつけてください。

まず、下の画像でスクロールバーのアイコンを確認してください。

すでに、２種類のスクロールバーが確認できたことと思います。「水平スクロールバー」と「垂直スクロールバー」の２種類です。この２つの違いは、横向きかたて向きかの違いだけです。私がスクロールバーと呼んでいるのはこの２つです。

もう１つのスクロールバーはコントロールではありません。たとえばテキストボックスを配置して、MultiLineプロパティをTrue 、ScrollBarsプロパティを　０以外の値にしてみて下さい。自動的にテキストボックスにスクロールバーが表示されます。このスクロールバーはテキストをスクロールさせることが専門で、自分でコードから制御することはできませんが、すべてを自動的にやってくれるので大変便利です。しかしながら今回はこちらのスクロールバーについては解説しません。

２．数値入力サンプル

それでは、スクロールバーを使った数値入力を実装してみましょう。まず、フォームに水平スクロールバーとラベルを配置してください。スクロールバーは長めに配置してください。スクロールバーで選択した値がラベルに表示されるようにしてみます。

まず、何もプログラムしないで実行してみてください。何もプログラムしなくてもスクロールバーは自動的に使用可能な状態になっています。スクロールバーをクリックし続けても何も起こらないと感じるでしょうがこれは初期設定ではスクロールバーの値が大きすぎてちょっとやそっとクリックしただけじゃ変化が分からないだけです。それでは終了させてこの「初期設定」と適切な値にしましょう。

スクロールバーには最小値、最大値を表す　Minプロパティ（ミン）　と　Maxプロパティ（マックス）があります。プロパティウィンドウからそれぞれの値を確認してみると　Min = 0 , Max = 32767 となっています。Maxが大きすぎるので、ここではMinはそのままで、Maxの値を　２５５　に変更してください。

これでもう１度実行してみると、今度はスクロールバーの変化が目で確認できるようになっていますね。

ところで、Windows（ウィンドウズ）でよく見かけるスクロールバーは　矢印のところをクリックすると少しずつ動き、矢印じゃないところをクリックすると大幅に動くようになっています。これもまねしてみましょう。

矢印のところをクリックしたときスクロールバーがどのくらい動くかは　SmallChangeプロパティ（スモールチェンジ）で設定します。初期設定では　１　になっていますから、２５５回右の矢印をクリックすると一番右に行くと言うことです。まぁこれはこのままでよいでしょう。

矢印じゃないところをクリックしたときにどのくらい動くかは　LargeChangeプロパティ（ラージチェンジ）で設定します。初期設定ではこれも　１　になっています。これでは、SmallChangeと一緒であまり意味がないのでここは、LargeChangeプロパティの値を　１０　にしましょう。

これで、ウィンドウズでよく見かけるスクロールバーと同様の操作が可能となります。

さて、ではいよいよスクロールバーが指している値をラベルに表示するプログラムを作成しましょう。

スクロールバーが指している値は　Valueプロパティ（バリュー）で分かります。（つまり、クリックするたびにValueプロパティは変化するのです）。このプロパティを使って下のようにプログラムするだけです。

まず、スクロールバーをダブルクリックしてからこの下のように打ち込んでください。

注：HScroll1とは水平スクロールバーに自動的につく名前です。

このたった３行でプログラムは完成です。Changeイベントはスクロールバーの値（Valueプロパティ）が変化するたびに発生しますからスクロールバーを使うときにはほとんどこのChangeイベントプロシージャにだけプログラムしていればよいことになります。（イベントって何？と言う人は　入門講座第４回　を見てください）。

実行してみると、期待通りにスクロールバーの値がラベルに表示されます。もっとかっこよく表示したい人はラベルのプロパティをいじってかっこよく見せかけてください。たとえば、Fontプロパティ、BackColorプロパティを変えるだけでだいぶかっこよくなります。それからプログラムをスタートさせた直後にLabel1と表示されているのが気になる人はラベルの　Captionプロパティを　0　にしておくと良いでしょう。

ところで、このサンプルプログラムはちょっとつまらないので、１行加えて次のようにしてみてください。

実行してみるとなかなかきれいでしょう？　あと２本スクロールバーを追加して赤と緑も変化するようにしてみるとRGBサンプルプログラムができあがります。（２５６色以下の環境ではあまりきれいじゃない）。

このサンプルはここまでですが最後にヒントをのせておきます。垂直スクロールバーを使っても同じことができますが垂直スクロールバーをとても短く配置してラベルのすぐ横にくっつけるとユーザーにはあたかもラベルとスクロールバーが１体となって１つのコントロールであるかのような印象を与えることができます。

３．画像スクロールサンプル

テキストボックスには自動的にスクロールする機能が備わっているのに、画像を表示するピクチャーボックスにはこの機能は備わっていません。そのため、ピクチャーボックスでは表示しきれない大きさの画像をスクロールして表示させるためには一工夫必要です。

これから説明する　スクロールできるピクチャーボックスのよくできたサンプルは　ＭＳＤＮでキーワード「スクロール可能なグラフィックス ビューポー」のところにのっていますのでＭＳＤＮを持っている人はそちらも参照してください。また、製本版の「プログラミングガイド」にももちろん載っています。場所は第２部、第７章、7.12.1です（ただし、本によっては違うのかも知れません）。

これから説明するプログラムとＭＳＤＮ等にのっているプログラムは同じ機能を持ちますが、プログラムは異なっていますから注意してください。ＭＳＤＮよりこちらの方が簡単でシンプルだと自負しております。

まず、フォームにピクチャーボックスと水平スクロールバー、垂直スクロールバーを１つずつ配置してください。場所や大きさは適当でいいですがスクロールバーの幅だけは太すぎたり細すぎたりしないように適切に設定してください。

まず、これら３つのコントロールを適切に配置するようにプログラムします。今まではコントロールの配置はマウスで行う方法のみを説明していましたが今回はコードで位置を設定します。フォームのResizeイベントプロシージャに次のようにプログラムしてください。

Rsizeイベントはフォームのサイズ（大きさ）が変更されると発生します。最大化・最小化もサイズの変更に当たります。ここに記述したコードはフォームのサイズが変更されたびにスクロールバーの位置も変更して２本のスクロールバーが常にフォームの右端と下側に表示されるようにしている物です。

１行目のIf WindowState = 1 Then Exit Subは最小化されたときは何もしないという意味です。これがないと最小化したときにエラーが発生します。

４行目と５行目は　Max　プロパティを変更する物です。フォームのサイズが変われば画像を表示できる範囲も変わるのでスクロールさせる幅も変更させる必要があるのです。

ここにかかれているいろいろな式の意味は説明しません。自分で解読してみてください。なお、ScaleWidthやScaleHeightとは、それぞれフォームの表示領域の幅（横の長さ）と高さ（縦の長さ）を表しています。

次に、Form_Load（フォームロード）イベントに次のように記述します。ここでは、C:\Windows\雲.bmpという画像ファイルがある物としています。この画像がない人はこの部分を適当な他の画像に変更してください。画像を選択する機能をつけたい人は特別講義を参考に自分で改造してみてください。

１行目は画像の読み込みです。２行目でピクチャーボックスの初期位置を設定します。０，０ですから、フォームの左上に表示されます。３行目と４行目はあまり見慣れない物ですが、２本のスクロールバーがピクチャーボックスの上に表示されるようにしている物です。これがないとスクロールバーがピクチャーボックスに隠れて見えなくなってしまうときがあります。

さて、ここまでのプログラムに加えてプロパティも変更してください。変更はプロパティウィンドウから行うと良いでしょう。まず、ピクチャーボックス(Picture1)のAutoSizeプロパティをTrueにします。これによりピクチャーボックスの横幅と高さは表示する画像に会わせて自動的に調節されるようになります。次にフォーム（Form）のScaleModeプロパティ（スケールモード）を、「３−ピクセル」にします。この意味はまたの機会に説明します。この設定をしなくてもとりあえずプログラムは動きます。

この他に２本のスクロールバーのSmallChangeプロパティを　１０にLargeChangeプロパティを　５０　にしてください。 この２つのプロパティはスクロールバーの１回のスクロール幅を表します。

以上で基本的な部分は完成です。実行してみてください。スクロール機能はまだ付けていないのでスクロールバーを動かしても何も起こりません。しかし、フォームのサイズをいろいろ変えてみてください。スクロールバーの位置がちゃんとフォームの右と下に変更されるのが分かります。

では、最後にスクロール機能を実装します。といっても下準備ができているのでこれは簡単です。２本のスクロールバーのChangeイベントに次のように記述してください。

以上で完成です。早速実行してスクロールする画像をお楽しみ下さい。完成した全コードを下に乗せておきます。

ここまでプログラムしたら次は拡大・縮小機能など付けたいところですね。この機能はイメージコントロールのStretchプロパティ（ストレッチ）を使うことによって案外簡単に実装できます。時間のある人は考えてみてください。

４．最後に

私は結構スクロールバーが好きです。ここで説明したほかにもいろいろな使い方をして、「スクロールバーにこういう使い方があるって知っているのは私だけだろう」と一人でほくそ笑んでいます。みなさんもいろいろ試してみてください。

なお、マイクロソフト社では数値入力や数値表示のためにスクロールを使う方法は推奨していないようです。この場合は　スライダーコントロール　を使えと言うことのようですがスクロールバーの使い方さえ分かっていればスライダーなどはじめてでもいきなり使えてしまいます。ご安心下さい。

しかし、スライダーって標準コントロールじゃないのでわざわざそれだけのために使いたくないんですよね。だから私はそんなときでもスクロールバーを使っています。（ただし、スライダーは目盛りを表示できるなどスクロールバーにはない機能もある）。