マルチメディア基礎 Professor Nishi's Lectures

マルチメディア基礎

（第３回 )

4 _{月 26 日} 西 宏之

授業計画 ( シラバスより )

① オリエンテーションにより，メディアの種類と概念を学ぶ→【復習】プログラミング環境 (Visual Studio Comunity) を各自 インストール

② 色情報がコンピュータ上でどのように表現されているかを学び，色情報を加工するための基礎知識を身に付ける．光の三原 色，えのぐの三原色の関係を理解する．

③ 上記の理解度小テスト１を実施する． Visual Studio Community のインストール方と使い方を学ぶ．→【復習】講義中に作 成開始した簡単な画像表示プログラムを完成

④ Visual Basic の基本的文法を学ぶ．繰り返し処理，判断分岐，ピクセル情報の読み込み，書き出し方法を学ぶ．→【復習】 画像複写プログラムの完成

⑤ その知識をもとに，カラー画像をモノクロ化する手法を学ぶ．→【復習】講義中に作成開始したモノクロ化プログラムを完 成させること

⑥ ネガポジ反転処理を学ぶ．ネガポジ反転プログラムを作成する．→【復習】講義中に作成開始したネガポジ反転プログラム を完成

⑦ しきい値処理による，二値化画像作成処理を学ぶ．二値化プログラムを作成する．→【復習】二値化プログラムの完成．

⑧ 色画像情報を加工して，色合いや画像の雰囲気を変更・加工するアイデアを考案する．それに基づく，プログラムを企画す る．→【復習】これまでに学んだ知識を組合せ，さらにアイデアを盛り込んだ画像処理プログラムを考案し，プログラム作 成を開始する．

⑨ これまでに学んだ，画像処理および独自のアイデアを盛り込んだ画像処理プログラムを完成させる．→画像処理プログラム

「レポート１」提出

⑩ ゲームプログラミングの構成と考え方を学ぶ．→【復習】各自，自分が知っているゲームがどのような計算機能を行ってい るかを分析しておくこと．

⑪ ゲーム処理に必要なタイマー管理とそのプログラミング作法を学ぶ．→【復習】タイマー管理技法を応用して，「ストップ ウオッチ」プログラムを作成

⑫ ゲーム処理に必要な乱数発生とそのプログラミング作法を学ぶ．→【復習】乱数発生技法を応用して，「ビンゴ」プログラ ムを作成

⑬ ゲーム処理に必要なサウンド再生機能とそのプログラミング作法を学ぶ．→【復習】サウンド再生機能を応用して，音楽プ レーヤーアプリを作成

⑭ これまでに学んだ，技法を応用したモグラたたきゲームプログラムを作成する．→これまでの理解度小テスト２を行う

⑮ モグラたたきゲームに，ハイスコア表示など独自の機能を付け加える企画を行い，そのプログラム作成を開始する．→【復 習】独自機能を追加したモグラたたきゲームを作成する．

⑯ 企画した独自機能付きモグラたたきゲームプログラムを完成する．→【復習】継続して独自機能を追加したモグラたたき ゲームを作成し， 「レポート２」提出

理解度小テスト１

 隣の人と，一つ以上の席を空けること．

 携帯，スマホ，ノート PC は電源を切ってカ バンにしまうこと．

 （当然ですが）私語は厳禁

 時間は　 10:50 ～ 11:10 　（ 20 分間）

プログラミングツールの準備

 VisualStudio Community(2008Express 以後ならどのバージョンでも よい )

 をインストールしておくこと．

 インストール方法は．．．

 「 VisualStudio Community 」で検索�

 _{下の方にスクロール}

 VisualStudio Community _{ダウンロード　　�}

 ３つ並んでいるうちの一番左　 VisualStudio 2017 　 Community

 _{無償ダウンロード}

 保存をクリック　→　保存したファイルを実行する．

 インストールする項目選択で，一番上の３つに✔を入れる

 マイクロソフトのアカウントを持っていない人はここで登録すれば よい（無料）

まず， VB を立ち上げよう．

 ↑ ↑ ↑ 　このアイコン ( 色違いのアイコン もある ) をダブルクリック

 すると，こんな画面になる．

最初の起動時の初期画面

その他のプロジェクトテンプレートをク リック

テンプレートを「 Visual Basic 」に選択し，「 Windows フォームアプ リケーションを選択し，プロジェクトの名前を記入して「 OK 」

これが開発環境での初期画面

② これは，「ツールボックス」とい う部品集

③ 「プロパティ window _」

① これは，「 Form 」という名の設計 画面

これら３つは VB の 3 本柱

① フォーム (Form) ：　

 プログラム実行中にユーザに見せる画面。この画面上に ボタンやテキストボックスや画面を配置できる．絵を描 くためのキャンバスのようなもの

② _{ツールボックス}

 ボタン、テキストボックス、ピクチャーボックスなどの 部品 ( コントロールと呼ぶ ) を集めたもの

③ _{プロパティ}

 今選択状態にあるコントロールのさまざまな文字，色等 の属性を選択したり、修正するもの

習うより慣れろ！

 まず、簡単なアプリケーションを作ってみよ う。

 今日作るのは、こんなプログラム。

 写真を表示したり、消したりするプログラム

プログラムの動作の確認

 _{立ち上げると}

 「表示する」ボタンを押すと

 「消す」ボタンを押すと、

最初の一歩

 _{ボタンを配置しよう}

 ツールボックスのボタンコントロールをクリック して、フォーム上でドラッグするとボタンが現れ る

 _{計３つ配置しよう}

 ピクチャーボックスを配置しよう

 ツールボックスのピクチャーボックスコントロー ルをクリックして、フォーム上でドラッグすると ピクチャーボックスが現れる。

 大きめにしよう。写真の見栄えをよくするため。

① ここをクリック して

② ここで適当な大 きさにドラッグ

すると，こんなボ タンができます

同じ手順で，これ も

これも同様

① このピクチャーボッ

クスをクリックして _{② こっちでドラッ} グするとこうなる

次に各コントロールのプロパティを設定しよう

 コントロールによってプロパティは多少異な る

 しかし同じプロパティも多い。

 ボタンコントロールのプロパティ

 キー上の文字 (Text),

 文字の大きさ (Font)

 ピクチャーボックスのプロパティ

 表示する画像の画像ファイル (Image)

 画像の表示方法 (SizeMode)

 立ち上げ時の可視性 (Visible)

 枠の設定 (BorderStyle)

② ここを「表示す る」に書き換える

① これを選択状 態にしておいて

次のようにプロパティを書き換え

よう

 _Button1

 「 Text 」プロパティを「表示する」に

 _Button2

 「 Text 」プロパティを「表示する」に

 _Button3

 「 Text 」プロパティを「終了」に

 「 PictureBox1 」

 「 BorderStyle 」を「 Fixed3D 」に

 「 Visible 」を「 False 」に

 「 SizeMode 」を「 StretchImage 」に

 「 Image 」を Windows のおまけの写真ファイルに

こんな感じになります

最後がコーディング

 「このボタンを押したらどういう動作をする か」を記述する。そのボタンをダブルク

リックすればそのコーディング画面が開かれ る。

 「表示する」ボタンが押されたら、画像の可 視性 (visible) プロパティを「 true 」つまり

「肯定」に設定してやる

 「消す」ボタンが押されたら、画像の可視性 (visible) プロパティを「 false 」つまり「否 定」に設定してやる

「表示する」ボタンをダブルクリ

ックすると，コーディング画面に

なります

プロパティを設定・変更するコー

ディングの方法は？

 「コントロール名」．「プロパティ名」 = 「設定 内容」

 このドット「．」が実に重要なのだ。

 例えば、「 picturebox1.visible=true 」と書けばよ い

オブジェクト指向プログラミン

グの定石です．

 オブジェクト名 ( コントロール名 ) ．プロパ ティ名

 _例えば，

 _{西宏之．住所＝玉名市}

 西宏之．体重＝ 55kg

 西宏之．お小遣い＝ 3 万円

この 1 行を加え る

いよいよ、実行させてみよう

この▲ボタンをクリック

どうなったかな？

 「表示する」で写真が出てきたけど，「消す」ボ タンで消えませんでしたね．

 「消す」ボタンをダブルクリックして、コーディ ング画面を出し，「 picturebox1.visible=false 」と すれば、ＯＫです．これで消すボタンで写真が消 えてくれる。

 ついでに，「終了」ボタンをダブルクリックして

「 me.close 」と，記入しておこう．

 これで，「終了」ボタンがクリックされると，終

了してくれる． プロパティは，設計時に手動で設定すること もできるし．．．

プログラム中に記述し、ある動作時にプログ ラムから自動的に設定させることもできる。

実行形式のプログラムを作るに

は？

 レポートを提出するときは、この実行形式の プログラムを提出するのだ。

 「 DispPicture 」フォルダーの中の「 bin 」フォ ルダー中に「 DispPicture.exe 」という実行形式 プログラム ( アプリケーション ) ができている． これです．

 そうしないと、ひとつのレポートでたくさん のファイルを送らなくてはならず、わけがわ からなくなる。

 他にどんなファイルができているかな？

プログラミングの流れのまとめ

① _{フォームの作成}

 新規作成で自動的に作られる

② _{コントロールの配置}

 ぱっと見の体裁を整える。

③ _{プロパティの設定}

 各コントロールのプロパティを設定し初期状態の動作と 見栄えを決める

④ _{コーディング}

 ボタン押下時の動作を記述する

大事なこと

 なぜ、こうなっているか？に囚われすぎない こと

 プログラミングは「手段」です。

 「手段」は使えればよい、という割り切りが 必要。

 _{車の運転と同じ}

 車は生活を便利にする「手段」

 エンジンやトランスミッションの構造を知らなく てもよい

練習問題１

① 「表示する」ボタンを２つ、「ピクチャー ボックス」も２つにする。ただし，２つの ピクチャーボックスは重ねて配置するこ と．

② 「表示１」をクリックすると、ピクチャー １が表示され、 「表示２」をクリックする と、ピクチャー２が表示されるようにせ

よ。

③ 「消す」がクリックされると、どちらの画 像が表示されていても、それが消されるよ うにせよ。

練習問題２

① 「表示する」ボタンを３つ、「ピクチャー ボックス」も３つにする。ただし，３つの ピクチャーボックスは重ねて配置するこ と．

② 「表示１」をクリックすると、ピクチャー １が表示され、 「表示２」をクリックす ると、ピクチャー２が表示されるようにせ よ。「表示３」も同様

③ 「消す」がクリックされると、どの画像が 表示されていても、それが消されるように せよ。

④ ラベルコントロール (A というマークのつ いたコントロール ) を使い、画像のタイト ルを画像の下に表示させよ。タイトルは各 自自由に付けてよい．