| Visual Basic 入門講座 |
|
|
Visual Basic 中学校 > 入門講座 >
第11回 卒業制作 (VB2005)
この記事はVB2005を対象としています。VB.NET2002, VB.NET2003をご使用の場合はこちらをご覧ください。
| 概要 ・いろいろなファイルを見ることができるアプリケーションを作る ・ファイルの一覧を保存・読み込みできるようにする |
入門講座の技術的な解説は前回で終了です。今回は実際に使えるアプリケーションを作っていく過程を紹介します。手順は１ステップごとに書いていきますので、是非、実際にVBを動かしながらアプリケーション作りを体感してください。
これから作るアプリケーションのプログラムではいままで解説しなかった知識やキーワードが登場します。そのため、多くの人はよく理解しないまま手順どおりに作っていくだけの作業になるでしょう。
しかし、今回の私の意図は、「細かい部分がよくわからなくても、とにかく実際のアプリケーションを作る手順を体感する」というものです。ですから、よくわからなくても順を 追ってアプリケーションを完成させることができた人は今回の目標を達成できたということになります。
私が目指しているのは、新しい発見や、知らなかった操作方法、まだ知らないテクニックにふれることの刺激を感じ取っていただくことです。
このような作業の経験は必ず身になります。
これから作るアプリケーションは次のようなものです。
■画像１：完成品が動作しているところ。私が街で目撃したどーもくんを激写した瞬間です。
主な機能
・画像・テキスト・Excel・Word・Html. pdfなどさまざまな種類のファイルを見ることができる。
・左側のファイル一覧をクリックすると、そのファイルが右側に表示される。
・ファイル一覧にファイルを追加するには、ファイルをドラッグ&ドロップする。
・ファイル一覧に登録されている内容を保存することができる。保存した内容はあとで呼び出すことができる。
※Excel, WordのファイルはExcel, Wordがインストールされている環境でのみ正常に表示できます。その他のファイルも環境により表示できる場合とできない場合があります。少なくとも txt や bmp, jpg, gif 等はほとんどの環境で表示できるものと思います。
それでは、いよいよ実際にプログラムを始めていきます。完成までの大まかな手順は次のようになります。
１．土台を作る。
フォームにコントロールを配置する。この時点では見かけだけ完成する。実際の機能はほとんどない。
２．左側のファイル一覧の機能をプログラムする。
この段階では、ファイル一覧にファイルを追加できるようになる。
３．ファイルを表示できるようにする。
４．ファイル一覧の保存・呼び出し機能をつける。
５．細部と整える。
新しいプロジェクトを作成してください。この手順は説明するまでもないでしょう。
今までどおり、Windows アプリケーションを選択してください。
プロジェクト名は「MultiFileViewer」にしてください。
→この手順がわからない場合はこちらをご覧下さい。
プロジェクトを作成したら一度保存しておくことをお勧めします。
次の手順に従ってフォームにコントロールを配置して、プロパティを設定してください。
▼手順１
SplitContainerコントロールをフォームに配置します。このSplitContainerコントロールの名前はSplitContainer1となります。
ツールボックス上ではSplitContainerは「コンテナ」というグループのところにありますので見つからない場合は、「コンテナ」グループをヒントにするとよいでしょう。下の画像も参考にしてください。
■画像２：ツールボックス上のSplitContainerコントロール
配置すると自動的にフォーム全体に広がって下の画像のような状態になります。
■画像３：SplitContainerコントロールをフォームに配置したところ
▼手順２
次に、 上の画像でPanel1と書いてある部分にSplitContainerコントロールをもう１つ配置します。このSplitContainerコントロールの名前はSplitContainer2となります。配置すると自動的にPanel1全体に広がります。
■画像４：２つ目のSplitContainerコントロールの分割方向を変更する
ここで上の画像で赤くしるしをつけてある小さな左向きの三角ボタンクリックしてSplitContainerのタスク一覧を開き、[上下分割の方向]をクリックして下さい。
三角ボタンはSplitContainer2が選択されているときに表示されます。SplitContainer2を選択するにはPanel1とPanel2の境目にある線の部分をクリックしてください。
[上下分割の方向]をクリックするとフォームは次のような状態になります。
■画像５：２つ目のSplitContainerコントロールの配置完了
メモ - プロパティウィンドウで設定する方法 タスク一覧を使用しなくてもプロパティウィンドウを使って同じ設定をすることもできます。プロパティウィンドウを使って設定するにはSplitContainer2を選択して、タスクウィンドウのOrientationプロパティ(読み方：Orientation = オリエンテーション)の値をHorizontal(読み方：Horizontal = ホリゾンタル)にして下さい。
▼手順３
ListBoxコントロール(読み方：ListBox = リストボックス)をSplitContainer2のPanel2に配置します。名前をlstFileNameにしてください。
■画像６：ツールボックス上のListBoxコントロールとWebBrowserコントロール
プログラム完成時にはこのListBoxコントロールにファイルの一覧が表示されます。
■画像７：ListBoxコントロールを配置したところ
配置したらlstFileNameのDockプロパティをFillにしてください。そうするとlstFileNameはPanel2全体に広がります。
また、AllowDropプロパティ(読み方：AllowDrop = アロゥドロップ)をTrueにしてください。これは後でこのListBoxコントロールにファイルをドロップをできるようにするための設定です。
▼手順４
WebBrowserコントロール(読み方：WebBrowser = ウェブブラウザー)をSplitContainer1のPanel2に配置してください。
配置すると自動的にいっぱいに広がります。
■画像８：WebBrowserコントロールを配置したところ
このWebBrowserコントロールについては何もプロパティを変更しないでおいてください。名前も初期状態のWebBrowser1のままで構いません。
この段階で実行してみてください。マウスを使ってフォームの大きさを変えたり、ファイル一覧の部分の広さを変更できることを試してみてください。
以上でこの作業は終了です。この作業の意味を簡単に説明します。
フォームに配置したSplitoContainerコントロールはフォーム上での配置を自動的に調節してくれるコントロールです。 このコントロールには次の２つの働きがあります。
SplitContainerコントロールの機能 実行時にマウスでフォームの大きさが変更されても、それに応じて自動的に広がる。 フォームを上下または左右の区画に分け、実行時には境界線をマウスでドラッグすることによりそれぞれの区画の広さを変更できるようにする。 このようにユーザーが自由にサイズを変更できるようにフォームを設計する場合はSplitContainerコントロールが大変役に立ちます。
この段階では、左側に配置したlstFileNameにファイルをドラッグ＆ドロップできるようにします。ドロップしたファイルのファイル名がlstFileNameに追加されていくようにします。ドロップしたファイルのフルパスは別の方法でプログラム内部に保存します。
まず、ドロップされたファイルのフルパスを記憶するための変数を宣言します(※１)。コード入力画面に切り替えて、次のコードを追加してください。
※１：変数の宣言については入門講座では説明していません。ここでは、指示通りにコードを書いていただければ結構です。変数の宣言については初級講座で扱います。
Public Class Form1
Dim FullPaths As New ArrayList
End Class■リスト１
lstFileNameのDragEnterイベントに次の リスト２のコードを追加します。
DragEnterイベントにコードを入力するには、クラス名ボックスに「lstFileName」が選択されている状態でメソッド名ボックスから「DragEnter」を選択します。
■画像９：DragEnterイベントの生成
ヒント：フォーム上で、lstFileNameをダブルクリックしてコード入力画面に切り替えるとはじめからクラス名ボックスに「lstFileName」が選択されているので楽です。
→この辺りの詳しい説明は入門講座第４回 「イベントを逃すな」をご覧下さい。
Private Sub lstFileName_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles lstFileName.DragEnter If e.Data.GetDataPresent(DataFormats.FileDrop) Then
End Sub
e.Effect = DragDropEffects.Copy
Else
e.Effect = DragDropEffects.None
End If■リスト２：DragEnterイベント
同様にlstFileNameのDragDropイベントに 次のリスト３のコードを追加します。
■画像１０：DragDropイベントの生成
Private Sub lstFileName_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles lstFileName.DragDrop Dim FileName As String
FileName = CType(e.Data.GetData(DataFormats.FileDrop), String())(0)
FullPaths.Add(FileName)
lstFileName.Items.Add(IO.Path.GetFileName(FileName))End Sub
■リスト３：DragDropイベント
ここまでの作業が完了しているか確認するために、プログラムを実行して、lstFileNameめがけてファイルをドラッグ＆ドロップしてみてください。ファイルはどのような種類のものでも構いません。たとえば、デスクトップ上の適当なファイルをドロップしてみてください。
ドロップしたファイルのファイル名が次々にlstFileNameに追加されていくようなら正常です。
エラーになる場合は、もう一度コードを見直してください。
エラーにはならないが、正常に動作しない場合はコードを見直すとともにlstFileNameのAllowDropプロパティがTrueになっているか確認してください。
ここでのプログラムは入門講座のレベルを超えるものでしたが簡単に説明しておきます。
DragEnterイベントは、ドラッグされてきた何かが自分の上に来たときに発生します。この場合はlstFileNameの上に来たときに発生します。今回は、ドラッグされてきたものがファイルであれば、コピーOKの意思表示をするように命令しています。
DragDropイベントは、ドラッグされてきた何かが自分にドロップされたときに発生します。今回は、ファイルがドロップされてくるはずなので、ファイル名を取得して表示するようにしています。
次の部分は、プログラム内部でフルパスを保存する仕組みです。
FullPaths.Add(FileName)
ただし表示はファイル名のみで、フルパスは表示されないようにしています。ファイル名のみを表示しているのは以下の部分です。
lstFileName.Items.Add(IO.Path.GetFileName(FileName))
念のために用語について確認しておきますと、たとえば、「C:\Windows\隅田川.bmp」をドロップした場合、フルパスは「C:\Windows\隅田川.bmp」、ファイル名は「隅田川.bmp」となります。
この段階では、ファイル一覧(=lstFileName)でクリックしたファイルが実際に右側のWebBrowser1に表示されるようにします。
本来ファイルを表示する機能をプログラムするのはとても大変です。ファイルの種類ごとに違った処理が必要となるからです。しかし今回はWebBrowserコントロールがすべてを自動的に処理してくれるので この作業はとても簡単になります。
lstFileNameのSelectedIndexChangedイベントに次のコードを追加してください。
Private Sub lstFileName_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles lstFileName.SelectedIndexChanged Dim
FullPath As StringFullPath = FullPaths(lstFileName.SelectedIndex)
WebBrowser1.Navigate(FullPath)
Me.Text = Application.ProductName & " - " & FullPath
End Sub
■リスト４
これだけで完成です。実行して確かめてみてください。
ファイル一覧(=lstFileName)に画像やhtmlファイルなどをドロップして、ファイル名をクリックするとちゃんとそれが表示されるのが確認できます。
SelectedIndexChangedイベントはlstFileNameの選択されている内容が変更されたときに発生します。今回は、このときにとっておいたフルパスを元にWebBrowser1のNavigateメソッドを呼び出します。
NavigateメソッドはそれがなんであれWebBrowserコントロールで自動的に処理してくれる便利なメソッドです。
この辺りも入門講座では説明していない事柄ですが、もう１つ説明します。フルパスはFullPathsという変数に保存されています。この変数にFullPaths(0), FullPaths(1)、…のように指定すると１番目のフルパス、２番目のフルパス、…を取り出すことができます。
ここでは、lstFileNameで選択されている番号のフルパスを取り出します。現在選択されている番号はSelectedIndexプロパティでわかります。
この段階では、ファイル一覧の内容を保存する機能、および保存したファイル一覧を呼び出す機能をプログラムします。また、保存・読み込みを実行するためのボタンを配置します。
これにより、一度作成したファイル一覧を２回目以降は簡単に呼び出せるようになります。
まずツールバーに見立てて保存ボタンと読み込みボタンを作成します。本当のツールバー機能を実現することも可能なのですが今回はツールバー風にボタンを並べておくだけにします。
次のようにボタンを配置してください。
■画像１１：配置後の画面
プロパティの設定はプロパティウィンドウで行うことをお勧めします。
コントロール名 プロパティ 値 btnSave
(Button ボタン)フォームの左上に配置してください。一番左に配置すると良いです。 Text 保 btnLoad
(Button ボタン)フォームの左上でbtnSaveの右横に配置すると良いです。 Text 読 ■表２
今回は、簡単に漢字で「保」や「読」などと表示するようにしました。かっこよくするためにはここに画像を表示するなどの工夫が必要でしょう。
博士のワンポイントレッスン - ボタンがちゃんと並ばない
V太：博士〜。どんなにやってもボタンが並んでくれませんよ〜。大きさも変な大きさになっちゃいます…。 博士： うーむ。VBの自動配置機能が働いておるのじゃな。VBではコントロールを配置する際に回りにあるコントロールと自動的に位置調節を行う機能があるのじゃ。 その機能って便利なときもあるんですけど今回はやめて欲しいんですけど。何とかなりませんか？ Ｂ子：とりあえずなんとかするにはプロパティウィンドウで直接コントロールの位置や大きさを数値で指定すると良いわ。これなら自動配置機能は働かないわ。
■画像１２：位置の微調整
根本的な解決策としてはこの機能をオフにするということもありえる。この機能をオフにするには[ツール]メニューの[オプション]画面から、「Windows フォーム デザイナ」を選択して、LayoutModeをSnapToGridに変更するのじゃ。
ファイル一覧を保存できるようにするために、btnSaveのClickイベントに次のコードを追加してください。
Private Sub btnSave_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSave.Click
Dim Dialog As New SaveFileDialog
If Dialog.ShowDialog(Me) = Windows.Forms.DialogResult.OK Then
Dim Writer As New IO.StreamWriter(Dialog.FileName)
For Index As Integer = 0 To FullPaths.Count - 1
Writer.WriteLine(FullPaths(Index))
Next
Writer.Close()
End If
End Sub■リスト５
この段階で、このコードがうまく動くかテストしてみてください。正常に動作する場合は、ファイル一覧にいくつかのファイルを追加して、「保」ボタンをクリックすると、ファイル名を選択する画面になります。そこで適当なファイル名を入力し、「保存」をクリックすると、そのファイルにファイル一覧のファイルのフルパスが書き込まれます。
■画像１３：ファイル選択画面
保存したファイルの内容を確認しやすくするために、保存するときにファイルの拡張子にtxtを指定しておくとよいでしょう。
今度は、３−４−３で作成したファイルを読み込めるようにします。btnLoadのClickイベントに次のコードを追加してください。
Private Sub btnLoad_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLoad.Click
Dim Dialog As New OpenFileDialog
If Dialog.ShowDialog(Me) = Windows.Forms.DialogResult.OK Then
Dim Value As String
Dim Reader As New IO.StreamReader(Dialog.FileName)
FullPaths.Clear()
lstFileName.Items.Clear()
Do
Value = Reader.ReadLine
If Value Is Nothing Then
Exit Do
Else
FullPaths.Add(Value)
lstFileName.Items.Add(IO.Path.GetFileName(Value))
End If
Loop
Reader.Close()
End If
End Sub■リスト６
プログラムができたら、実際に実行して確認してみてください。正常に動作する場合は、「読」ボタンをクリックするとファイルを選択する画面が表示され、そこで選択したファイルの内容を読み込んで、ファイル一覧に表示します。
なお、無関係なファイルを選択するとエラーになったら異常な動作をしますので、かならず「保」ボタンで作成したファイルを選択するようにしてください。
本来は無関係なファイルが指定された場合のチェックをプログラムで行う必要があるのですが、今回は割愛します。というのもこのソフトは仮に異常終了した場合でもユーザーにはほとんどダメージがないからです。
すでに基本的な機能はすべて完成しています。最後に少し手を加えて仕上げを行います。
このようにプログラムを作るときは、基本的な機能を完成させてから細かい点を仕上げていくというスタイルをお勧めします。はじめから細かいところを作りこんでいくとなかなかプログラムが進まないので退屈ですし、一通り出来上がってから見えてくる部分というものもあります。
ここでは、一番初めのタイトルバーの表示が Form1 となっているのが美しくないので直します。また、ファイル一覧にまったくファイルがない状態でも「保」ボタンが押せるのは妙だと思うのでこの場合は「保」ボタンをクリックできないようにします。
他にも目に付く点はあるのですが、それらは簡単に触れるに留め、今回はあまり欲張らないことにしましょう。
タイトルバーの表示に関しては、すでにlstFileNameのSelectedIndexChangedイベントで、アプリケーション名とフルパスが表示されるようにプログラムしてあります。
以下の部分がそのコードです。
Me
.Text = Application.ProductName & " - " & FullPathこれはこれでよいと思うのですが、一番初めにプログラムを開始した時点では「Form1」となっているのでこのときにアプリケーション名を表示するように改造します。
FormのLoadイベントに次のコードを追加してください。
※FormのLoadイベントはデザイン画面でフォームのタイトルバーをダブルクリックすると自動的に生成されるので楽です。
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Me.Text = Application.ProductName
End Sub
■リスト７
「保」ボタンはファイル一覧が空のときはクリックできないようにしてしまいましょう。
そのために、まずプロパティウィンドウでbtnSaveのEnabledプロパティをFalseにしてください。
そして、次の２箇所にコードを追加してください。
１つ目はlstFileNameのDragDropイベントです。
Private Sub lstFileName_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles lstFileName.DragDrop (中略)
btnSave.Enabled = True
End Sub■リスト８
２つ目はbtnLoadのClickイベントです。
Private Sub btnLoad_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLoad.Click (中略)
Reader.Close()
btnSave.Enabled = True
End
If End Sub■リスト９
最後に私が一番気になっているのは見かけです。コントロールをぺたぺた貼っていっただけなので仕方ないのですが、このソフトは見かけが素敵ではありません。
この点の改良は個人のセンスの問題もありますし、技術的な問題もあります。ここでは簡単にヒントだけを示します。
まず、SplitContainer1のBorderStyleプロパティを変更すると全体的な質感が変わります。Fixed3Dなどにすると各領域がはっきりと表示されるようになります。
次になんといって「保」ボタンと「読」ボタンがださいです。ここを何とかするにはそれなりに知識が必要となってきますがやはりVBのツールバー機能を利用するとよいでしょう。ツールバーを配置するにはToolStripコントロールを使用しますが始めての方は苦労するかもしれません。ちょっとチャレンジしてみてください。
お疲れ様です。以上でプログラムは完成しました。
多分、実際に作っていただいた方にはほとんどコードをコピー＆貼り付けするだけの作業になってしまったのではないかと思いますが、それで良いのです。この作業を通して必ず得るものがあったはずです。冒頭にも書いたように新しい発見や、知らなかった操作方法、まだ知らないテクニックにふれることの刺激、そんなものを感じ取っていただければ私の意図は達成できたことになります。
また、VBのプログラミングはコントロールを貼り付けて、それぞれのイベントにプログラムしていくイベントドリブンという形式になっていることも理解していただけたのではないでしょうか。
ふりかえって今回作成したアプリケーションについて反省してみます。
まず、WebBworserコントロールの力を使うことにより、さまざまな種類のファイルを簡単に表示することができました。これはたいへん良いことだと思います。
悪い点ではファイル一覧の扱い方です。このファイル一覧は扱いにくいです。たとえば、間違って登録してしまったファイルを削除することができません。また、ファイルの順番を入れ替えることもできません。
もう一つ、このアプリケーションではファイルを見るだけで編集することができません。画像ファイルならそれでも満足できるのですが、テキストファイルの場合は編集したくなります。
さらに、このアプリケーションの可能性を考えて見ましょう。どのような機能を追加することができるでしょうか？
私が考えているのは、スライドショー機能です、一定時間ごとにファイルが自動的に切り替わっていけばそのままスライドショーができますね。プレゼンテーションに使うということもできそうです。
入門レベルでは、これらの反省点を元に具体的なコードの形で改造していくことは困難だと思います。いつかあなたの考えていることをそのままコードにかけるようになる日が来たら、そのときこそあなたの欲しい機能をどんどんプログラムして行こうではありませんか。現段階ではあせらないで一歩ずつ進んで行きましょう。
