Silverlight をインストールするには、ここをクリックします*
Japan変更|すべてのMicrosoft のサイト
Microsoft Japan Home
|購入検討中なら Microsoft Users Mall|Microsoft At Home (総合サイト)
Microsoft At Home Magazine  


プログラミング☆簡単レシピ

レシピ 9 : VB で紙芝居風エディタを作ろう / テンプレートの作成


近藤くん


近藤くん
30 歳、都内在住、某メーカー営業職、最近子供が生まれてますますヤル気満々!
PC 歴 5 年。趣味で Visual Basic を少し使えるので、休日は簡単なソフトを自作することも。


謎のおじいさん


謎のおじいさん
レシピのガイド役。
時々現れてはいろんな解説をしてくれる。
おじいさんが現れたら、とりあえずチェック!


【 紙芝居風エディタを作るために使うツール 】

Microsoft Visual Basic .NET Standard Version2003 日本語版

※ Visual Basic .NET を使うには、お使いの PC に以下のうちのどれかがインストールされている必要があります。

  • Microsoft Windows 2000 Professional または Server (サービスパック 2 推奨)
  • Microsoft Windows XP Home Edition または Professional
  • Microsoft Windows Server 2003
  • Microsoft Internet Explorer 5.5 またはそれ以降

プログラミング☆簡単レシピ

テンプレートの作成

奥さんと赤ちゃん

前回で紙芝居エディタのひとつの山場を越えた近藤くん、ちょっとひと安心。プログラムの勉強もちょっと遅れ気味。でも、そんな近藤くんを奥さんが放っておくわけがありません。

奥さん「この前は、本の虫になったかとおもったけど、最近は余裕しゃくしゃくのようじゃない」

近藤 「そ、そ、そんなことはないよ。テンプレート作成にあたって、いろいろ準備していたんだけどな」

テンプレート? 最初の設計にあったかしら?

もちろん、あるよ。ほら、下の図をみてごらん。

あら、本当ね。で、このボタンを押すとどうなるのかしら。

スケッチ図

エッ? 最初に説明しなかったかな。まあ、いいやもう一度説明しようか。
[テンプレート]ボタンを押すと、画像領域と文書領域のサイズ、それに書体をあらかじめ指定した9種類のレイアウトが表示されるんだ。ここで、使いたいものを選ぶとそのレイアウトでページを作成できるというわけ。
レシピの7回目では、手動でレイアウトを変更できるようにしたけど、テンプレートがあれば、より便利だろう。

スケッチ図

そうだったわね。ボタンは 1 個だけだから。またまた、楽勝パターンじゃない。

そんなことはないよ。ボタンは 1 個でも、9 種類のテンプレート用のコードが必要なんだよ。

近藤くんも言うように、テンプレート作成で肝心なのはボタンよりも設定。近藤くんは、まず、テンプレート用の配置をするために新たなフォームを作るようです。

ご注意:コードの中の行末(次行に続く)を表す「_」は便宜上の位置で区切っています。

Point

では、例によって、テンプレート編で近藤くんが考えている作業手順とポイントを説明しようかの。

作業1:テンプレート用に新しいフォームを追加する/作業2:[閉じる]ボタンを配置し、クリックしたときのコードを記述する

作業3:テンプレート用のレイアウトに画像情報を表示したり、選択されたテンプレートの設定をメインフォームに反映させるためのコードを記述する。

作業4:pictureStoryFormに[テンプレート]ボタンを追加、コードを記述する。/作業 5:pictureStoryFormにテンプレート用のフォームを呼び出すためのコードを記述する。

作業6:テンプレートが選択されたとき、pictureStoryForm に各レイアウトのサイズや書体などを反映させるためのファイルを作成する。



Back
1/7
Next


右マージン 10px
「VB で紙芝居風
エディタを作ろう」
レイアウト
変更の手順

イントロ

テンプレートの作成

ステップ 1

新しいフォームを作る

ステップ 2

TemplateForm にコードを記述する (1)

ステップ 3

TemplateForm にコードを記述する (2)

ステップ 4

PictureStoryForm の設定

ステップ 5

CSV 形式の「template.csv」ファイルを作成する

ステップ 6

テンプレートの情報をデザインに反映させる(setTemplate())

完成!
右マージン 10px