· web...
TRANSCRIPT
基礎演習Ⅱレポート
木曜日第 4 時限
旭 貴朗先生
ホームページとゲーム作成
締切日 2013 年 1 月 16 日
提出日 2013 年 1 月 16 日
所 属 経営学部
会計ファイナンス学科 2 年
氏 名 ASIMO
1 / 25
目次
はじめに
1 HTML について
2 ホームページの作成
1） ホームページを作成するにあたって
2） 各タグの説明
① index.html ② syoukai.html ③ diary.html 3） 画像について
① 画像の種類
② 相対パスと絶対パス
③ その他
3 CSS について
1） CSS の基本
2） セレクタ
3） CSS を使ったレイアウト
4） 使用例
4 JavaScript 1） 概要
2） プログラム例
5 マクロについて
1） マクロとは
2） 回転する 3D オブジェクト
① 作成方法
② VBA スクリプトの解説
3）アルバイト賃金計算
4) ジャンプするボタン
① 作成方法
② VBA スクリプトの解説
6 Flash 作成
1) 流れ
2) 小手調べ
3）歩く人
4）Key 操作
5）ゲーム
2 / 25
おわりに
3 / 25
はじめに
このレポートは筆者が作成したホームページおよび Flash プログラミングについて紹
介することを目的とする。筆者が所有しているパソコンの OS が Windows であるため、
Windows から作成することを前提としている。ホームページについては夏休みの間に復
習を行った結果、春学期と異なる点がいくつか生じたため、各タグの説明では更新され
た状態のホームページの解説を行う。
第 1 節では HTML について解説する。第 2 節ではホームページの作成方法についての注
意事項と筆者が使用したタグ、画像について解説を行う。第 3 節では CSS について使用
例を交えて説明する。第 4 節では Javascript の概要とプログラム例を解説する。第 5 節
では筆者のホームページにアップロードされているマクロを作成方法と VBA スクリプト
の解説に分けて解説する。第 6 節では春学期でできなかったホームページの改良点につ
いて解説する。第 7 節では Flash 作成についてアップロードしたものの解説を行う。
そしておわりにではレポートの執筆内容についてまとめを行う。
1 HTML について
Web ページの基本となるファイルが HTML である。HTML ファイルは見出しや段落と
いった文章の構造や、表やリストなどを「HTML タグ」と呼ばれる文字列を使用して定義
する。HTML ファイルでは、Web ページの内容となる文字情報を構造化するほか、Webページ内に表示する画像や動画などの素材ファイルの参照元を指定したり、ジャンプ先
となるリンク先を指定したりする。
HTML タグは、HTML ファイルにおいて文章の構造を定義するための文字列で、前後を
「＜」と「＞」で囲んで記述する。また、HTML タグは開始タグと終了タグが対になって
おり、終了タグの前には「/」をつける。
HTML ファイルは、その文書が HTML 文章であることを宣言する<html></html>、
その文書のタイトルやスタイルシートの情報、検索エンジン向けのキーワードなど文書
の基本情報を記述する<head></head>部分、文書をブラウザで開いたときに、実際に
画面に表示される内容を記述する<body></body>部分という 3 つの構成要素から成り
立つ。
2 ホームページの作成
1) ホームページを作成するにあたって
今回私はメモ帳を起動し HTML 文書を作成した。HTML 文書として保存するにはファイ
ル名に拡張子「.html」を指定する。Windows では通常、ファイル名に拡張子は表示さ
れない。そのため Web ページを作成する場合には、「スタート」ボタンから「コント
ロールパネル」を左クリックし、表示される画面で「デスクトップのカスタマイズ」か
ら「フォルダオプション」の順に左クリックをする。「表示」タブを左クリックし、
「登録されている拡張子は表示しない」を左クリックしてチェックをオフにする。そし
て「OK」ボタンを左クリックすると、拡張子が表示されるようになる。フォルダ名を
4 / 25
「ホームページ作成」とし、作成したファイルをすべてフォルダに保存した。
ファイル名はそれぞれトップページを index、自己紹介を syoukai、近況報告を
diary、論文報告書を report、プログラミングを program、伝言板を dengon、リンク
を link とした。ここからは筆者の実際のホームページを用いて説明を行う。
また、ホームページのアップロードは Yahoo!ID をあらかじめ取得したうえで Yahoo!ジオシティーズからホームページの作成・更新、ホームページを修正する、ファイルの
作成・編集をする、EZ アップロードを選択しアップロードするという形をとった。
2） 各タグの説明
① index.html 1 行目の「ASIMO のホームページ」はホームページを閲覧しているブラウザのタイト
ルバーに表示される文書タイトルである。この文字列はホームページをお気に入りに登
録したときや、検索エンジンでの検索結果のタイトルとしても表示される。Title タグは
<head></head>内に必ず 1 つ記述しなければならない。図 1 内で<h1><h2>で囲ま
れているタグは見出しタグといい、ワープロで作成する文章にも見出しや本文といった
構成があるように、Web ページで定義する見出しには、大見出しである<h1>から、最
下位の見出し<h6>がある。見出しタグで囲まれた文字列は、見出しのレベルにより文字
の大きさが変化する。また、太字の設定がされ、段落の前後に改行が入るなど段落全体に
見出し用のスタイルが適用される。
6 から 8 行目には Yahoo!ジオシティーズのカウンタを設定した。
13 行目から 18 行目の<h2>以降のタグはリンクタグで、リンク先のページを指定す
ることで指定したページにジャンプすることができる。
5 / 25
<html><head><title>ASIMO のホームページ</title></head><body><h1 align="center">ASIMO のホームページ</h1><div align="center"><img src="img/photo1.jpg" alt="トップ画像" /><h2>あなたは<IMG SRC="http://counter.geocities.jp/ncounter.cgi?id=m0sim0siasimosi" ALT="Counter">人目のお客様</h2>このページの最終更新日は<SCRIPT TYPE="text/javascript"><!-- document.write(document.lastModified);// --></SCRIPT>です。<h2 align="center"><a href="syoukai.html">自己紹介</a></h2><h2 align="center"><a href="diary.html">近況報告</a></h2><h2 align="center"><a href="report.html">論文報告書</a></h2><h2 align="center"><a href="program.html">プログラミング</a></h2><h2 align="center"><a href="dengon.html">伝言板</a></h2><h2 align="center"><a href="link.html">リンク</a></h2></body></html>
図 1 index.html出典：筆者作成
② syoukai.html 6 行目から 12 行目まではテーブルを構成するタグとなっている。<table></table>が
テーブルのタグとなっている。その間に行を定義する<tr>タグと、列を定義する<td>タグを入力して作成する。見出しとなる列を定義するタグは<th>である。
11 行目にある<br />は強制改行を指定するタグである。
図 2 syoukai.html（実際のアップロード画像）
出典：筆者作成
図 3 syoukai.html出典：筆者作成
③ diary.html 背景画像は文字が見にくくなるという理由から設定しなかった。その代わり、近況
6 / 25
<html><head><title>ASIMO のホームページ</title><link rel="stylesheet" type="text/css" href="basic.css" /></head><body><h1 align="center">自己紹介</h1><span onMouseOver="javascript:window.alert('するなって言いましたよね？')">ここをクリックしないでください</span><table border=1 align="center" id="profiles"><tr><th>名前</th><td>ASIMO</td></tr><tr><th>性別</th><td>女</td></tr><tr><th>職業</th><td>ロボットかと思いきや学生です。</td></tr><tr><th>ひとこと</th><td>人見知りなので話しかけていただけると喜びます。<br />ASIMO の理由は・・・。</td></tr></table></body></html>
報告のページでは目立つ色であるオレンジを用いた。
6 行目からはリストを表している。<ul>タグでリストの範囲を定義し、<li>タグでリ
ストの文字列を表す。Ul タグは順番のないリストを定義するタグで、このタグに囲まれ
た文字列は、「・」マークがついて表示される。また、<hr />は区切り線を挿入するタ
グである。
3 行目と最後の行ではページの下からページの上へジャンプするリンクを設定している。
7 / 25
図 4 diary.html（実際のアップロード画像）
出典：筆者作成
8 / 25
<html><head><title>ASIMO のホームページ</title><link rel="stylesheet" type="text/css" href="basic.css" /></head><body><a id="pagetop"></a><h1 align="center">近況報告</h1><div id="contents"><h2 class="desc">4 月</h2><ul class="desc" id="menu"><li>Top ページの編集をしました。</li></ul><hr /></div><div id="contents"><h2 class="desc">5 月</h2><ul class="desc" id="menu"><li>自己紹介を up しました。</li><br /><li>ダウンロードテストを up しました。</li><br /><li>論文 報告書 を up し ま し た 。 </li><br /><li>近況報告を up し ま し た 。
図 5 Diary.html図 5 diary.html出典：筆者作成
3） 画像について
① 画像の種類
Webサイトで扱う画像の種類には GIF（ジフ）・JPEG（ジェイペグ）・PNG（ピン
グ）の３つがあり、それぞれの特長を述べると、まずGIF は 256色まで再現できる。色
数が少ないためイラストの保存に向き、特定の 1色を透明にする「透過」や、複数のイ
ラストをつなげて動画を作成する「GIF アニメーション」の保存もできる。
JPEG は 1677万色（フルカラー）を再現でき、色数が多いので写真の保存に向く。また
データを圧縮して保存するためデータサイズを小さくできる。しかし画像情報を間引き
して圧縮するという特徴から、保存を繰り返すと画質が悪化する。
9 / 25
<html><head><title>ASIMO のホームページ</title><link rel="stylesheet" type="text/css" href="basic.css" /></head><body><a id="pagetop"></a><h1 align="center">近況報告</h1><div id="contents"><h2 class="desc">4 月</h2><ul class="desc" id="menu"><li>Top ページの編集をしました。</li></ul><hr /></div><div id="contents"><h2 class="desc">5 月</h2><ul class="desc" id="menu"><li>自己紹介を up しました。</li><br /><li>ダウンロードテストを up しました。</li><br /><li>論文 報告書 を up し ま し た 。 </li><br /><li>近況報告を up し ま し た 。
PNG は 256色、1677万色のどちらも再現できるため、イラスト・写真の保存に向く。
圧縮時に画像情報を間引きしないため画像が劣化しない。Internet Explorer 7.0 からは
透過 PNG がサポートされるようになり、PNG 画像を透明にして表示することも可能に
なった。
② 相対パスと絶対パス
Web ページに画像を配置するまたはリンク先を指定する場合、ファイルの位置を指定
する方法に「相対パス」と「絶対パス」がある。
相対パスとは作成中の HTML ファイルを基準にしてリンク先ファイルの位置を指定する
方法で、作成中の HTML ファイルと同じフォルダ内であればファイル名のみを指定する。
また、作成中の HTML ファイルと同じフォルダ内にあるフォルダの中にファイルがある
場合には「フォルダ名/ファイル名」のように指定する。さらに、作成中の HTML ファイ
ルの上の階層のファイルは「../ファイル名」のように指定する。
絶対パスとは「http://」からリンク先ファイルの位置を指定する方法で、index.htmlと同じ階層にあるファイルは URL に続けて「/ファイル名」と指定する。Index.html と
同じ階層のフォルダ内にあるファイルは URL に続けて「/フォルダ名/ファイル名」と指
定する。
③ その他
画像用のフォルダ「img」をホームページ作成フォルダの中に作成した。
図 1 の 5 行目は画像を配置するタグで、「” ”」で囲まれた部分が表示したい画像の場所
を示している。photo1.jpg はファイル名で、フォルダ名とファイル名の間は「/」で区切
る。Alt 属性は「代替テキスト」とも呼ばれ、ブラウザの制限によって画像を表示できな
い場合に画像に代わって表示する文字列を指定する。ここで指定するテキストは、音声
読み上げブラウザで画像を説明する文章としても使われる。
HTML ファイルで画像ファイルを指定する場合には、HTML ファイルと同じ階層にあ
る画像の場合と HTML ファイルと同じ階層にあるフォルダに保存された画像の場合で
ルールが異なる。前者の場合は「img src=」に続けて「”画像ファイル名”」を記述する。
後者の場合「img src=」に続けて「”フォルダ名/画像ファイル名”」と記述する。
3 CSS について
1) CSS の基本
CSS ファイルは「スタイルシート」とも呼ばれ、Web ページ内の文字の大きさや色、
背景、画像の位置などの見栄えを定義するためのファイルである。文書構造を定義する
HTML ファイルに関連付けて使用することで、ホームページを見やすくデザインする。
見出しなどのスタイルをまとめて記述する場所は 2通りある。１つは HTML ファイル
の head タグ内に直接 CSS を記述する方法である。もう 1 つは HTML ファイルとは別に
外部スタイルシートファイルを作成し、そこにスタイルを記述する方法である。外部ス
タイルシートはファイル名に拡張子「.css」をつけて保存する。今回筆者は後者の方法で
10 / 25
作成した。
外部スタイルシートである basic.css ファイルを HTML ファイルとリンクさせるには、
図 5 の 4 行目のように HTML ファイルの head タグ内に、外部スタイルシートのファイ
ル名を記述する。
2） セレクタ
セレクタとは、スタイルを設定する対象のことを差し、ひとつのセレクタにはフォン
トサイズ、文字の色、文字の背景色など、一度に複数のスタイルを設定できる。プロパ
ティとは、設定する項目のことである。値とは具体的な設定値のことをいう。ひとつの
セレクタに対して複数のスタイルを設定するには、「プロパティ：値」のセットを
「；」で区切って記述し、判読しやすいように改行する。
セレクタには、主に要素、クラス、ID の 3 種類があり、要素セレクタとは HTML 要素
を対象にスタイルを設定する。設定したスタイルは、同一の HTML 要素すべてに適用さ
れる。
クラスセレクタとは特定の HTML 要素にクラス属性を設定し、それに対してスタイル
を設定するもので、クラス属性は「.クラス名」と表記する。クラス属性を指定すること
により、そのグループに所属する要素の特徴がわかりやすくなる、ページ内で何度も使
用できるというメリットがある。
ID セレクタとは特定の HTML 要素に ID 属性を設定し、それに対してスタイルを設定す
る。ID 属性は「#ID 名」と表記する。要素が特定のものであることを意味づける属性で、
ページ内で重複することはありえない。ハイパーリンクを設定するアンカーなど、外部
プログラムと連携する要素によく使われる。
3） CSS を使ったレイアウト
まず、CSS を使わない Web ページのレイアウトデザインの方法を見ると、例えばテー
ブルタグを使って文字や画像をセル内に納めていたが、この方法では文書構造を定義す
るという HTML 本来の役割からは逸脱している。なぜなら、<table>は表を作るもので
あってレイアウトを行うためのものではないからである。
CSS を使って Web ページを作成するには HTML タグによって意味づけを行う。続いて、
見栄えを整えるために CSS を使って各要素のレイアウトを指定する。 CSS ではタグ
<span>、タグ<div>を用いて要素をグループ化することで、一つのグループ内に同一
のスタイルを適用することができる。そのグループに対して CSS でサイズや余白の大き
さ、配置、文字サイズ、文字色などの書式を指定する。このグループ化した要素は「ボッ
クス」と呼ぶことが多い。
タグ<span>は 1 行の中に文字と並べて配置できるグループを指定するタグで、「イ
ンライン要素」に分類され、タグ<div>は複数の要素をひとまとまりにするタグで「ブ
ロックレベル要素」に分類される。「ブロックレベル要素」はブロックレベル要素同士
を同じ行に並べて配置することはできないが、ボックス内にボックスを入れることが可
11 / 25
能である。この状態を「入れ子」という。
HTML タグのみで作成した Web ページは、HTML タグで構造を定義しながら Webページの内容である文字列を書き出し、そのタグ内に文字の大きさなどを指定するデザ
イン部分を合わせて記述していた。これでは重要なキーワードとなる文字列が多くの文
字の中に埋もれてしまう。
それに対し、見た目であるデザイン部分を定義した CSS ファイルをリンクさせ作成し
た Web ページはデザインを指定する不要なタグがないため、Web ページの内容である
文字列が探しやすい構造になっている。このことは HTML ファイル内の文字列を「キー
ワード」として探し出す検索エンジンへの対策としても効果的である。
4） 使用例
図 2 の 4 行目には HTML ファイルに CSS ファイルをリンク付けするためのスタイル
シートの定義が記載されている。link rel="stylesheet"は「この HTML ファイルに外部
スタイルシートをリンクする」、type="text/css"は「スタイルシートはテキスト形式の
データである」、href="basic.css"は「リンクするスタイルシートの名前は basic.cssである」という意味である。このほかに「スタイルシートのレイアウトはパソコン画面
とプリンタに表示する」という意味でパソコン画面、プリンタ、プロジェクタなど、メ
ディアを特定してスタイルを適用できる media=”screen,print”があるが、今回は定義
していない。
図 6 basic.css出典：筆者作成
1 行目は body タグに適用される CSS で、「font-size:16px;」は body 要素全体の文
字サイズが 16px に指定される。「Line-height1.5」は行間隔を指定している。1.5 は
150%にも表記できるが、一部のブラウザでは line-height に単位を付けると line-height の表示が変わるバグが発生するため、筆者は単位を付けなかった。2 行目は要素
h2 に適用される CSS で、「color:#ffffff」は文字色を白に設定している。また、
「background-color:orange;」は文字の背景色をオレンジに指定している。3 行目は段
落の特定箇所（今回は diary.html）に適用するテキストを左揃えにするクラスセレクタ
である。図 5 の 5 行目にある<h2 class="desc">はクラス属性を HTML ファイルで指定
している。
5 行 目 は 行頭文 字 を四角に す る ス タ イ ル で あ る 。図 5 の 5 行 目 に あ る <ul
12 / 25
body{font-size:16px; line-height1.5;}h2{color:#ffffff; background-color:orange;}.desc{text-align:left;}#menu{list-style-type:square;} #contents{width:750px;}#profiles{border:1px solid #999999; border-collapse:collapse; width:700;}#profiles th{border:1px solid #999999; width:100; background-color:#ADFF2F;}#profiles td{border:1px solid #999999; padding:10 10 10 30px;}
class="desc" id="menu">の id=”menu”で ID 属性を HTML ファイルに指定している。
HTML では文字列を箇条書きにするためのリストタグがあり、リストタグには文字列の
先頭にマークを表示する「箇条書きリスト」と連続番号を表示する「番号つきリスト」が
ある。主なリストのスタイルには黒丸の他に白丸、四角、なしがあり、それぞれ変更さ
せるには白丸ならば circle、四角ならば square、なしならば none を list-style-type:の後に記述する。
7 行目はコンテンツ全体の横幅を 750px に指定している。図 5 の<div id="contents">で HTML ファイルに ID を指定している。
図 6 の 5 行目の border:1px solid #999999;は枠線スタイルを指定しており、6 行目
ではテーブルの見出しに、7 行目ではテーブルの列に枠線を設定している。5 行目の
border-collapse:collapse;は枠線を重ね合わせて表示するスタイルである。これがない
と各セルの枠線が二重線になってしまう。
枠線には一重線を表す solid のほか、二重線を表す double、点線を表す dotted、ダッ
シュ線を表す dashed、へこんだように見える線を表す groove、盛り上がったように見
せる線を表す ridge、枠内がへこんだように見せる線を表す inset、枠内が盛り上がった
ように見せる線を表す outset、表示しないときに用いる none があり、枠線の表示位置
を指定することも可能である。上下左右に表示する場合は border、上のみ表示する場合
は border-top、下のみ表示する場合は border-bottom、左のみ表示する場合は border-left、右のみ表示する場合は border-right を用いる。
5 行目ではテーブル全体の横幅を 700px に指定している。また、6 行目ではテーブル
の見出し列の幅を 100px に、テーブルのセルに黄緑色を指定している。6 行目はセル内
に余白を指定している。
CSS では主に 16進数で色を指定している。16進数とは、0 から 9 までの数字と a か
ら f までのアルファベットの計 16 種類を組み合わせて数を表現するものである。16進数で色を指定するには、先頭に#を付けて R、G、B の順に 2桁ずつ数字を並べる。白はカ
ラーネーム white で、16進数で表すと#FFFFFF、黒はカラーネーム black で、16進数で表すと#000000、紫はカラーネーム purple で、16進数で表すと#800080、青はカ
ラーネーム blue で、16進数で表すと#0000FF、緑はカラーネーム green で、16進数で表すと#008000、黄緑はカラーネーム greenyellow で、16進数で表すと
#ADFF2F、黄色はカラーネーム yellow で、16進数で表すと#FFFF00、オレンジはカ
ラーネーム orange で、16進数で表すと#FFA500、赤はカラーネーム red で、16進数で表すと#FF0000、ピンクはカラーネーム pink で、16進数で表すと#FFC0CB となる。
4 JavaScript 1） 概要
HTML ファイルの中にプログラム（スクリプトという）を書いておく。そのファイルが
読み込まれたとき、スクリプトはブラウザによって解釈され、クライアントマシン上で
13 / 25
実行される。Netscape社が提案したもので、Sun Microsystem社が提案した Java とは
異なる。
JavaScript により Web ページに動きを与えることができる。例えば背景の色を徐々に
変化させたり、現在時刻を時計のように表示させたりできる。また、リンク（ホットテ
キスト）の上をカーソルが通過したときに、解説表示や別ウィンドウ表示をさせること
ができる。詳細にプログラミングすれば、将棋の差し手の自動再生までできる。
2） プログラム例
HTML ファイルに SCRIPT タグで囲み、プログラミングする、Body 部分で必要な場所
に直接記入する、Head 部分であらかじめ名前をつけて定義し、Body 部分でそれを引用
する、拡張子を.js にした別ファイルで、あらかじめ名前をつけて定義し、Body 部分で
それを引用する方法がある。ホームページ内ではページ更新日の表示と onMouseOverイベント処理を行った。
図 1 の 9 から 11 行目の記述はページ更新日の表示を表す JavaScript である。スクリ
プト内の命令行の行末には必ずセミコロンを書くことが必要になる。TYPE=”text/javascript”は省略することができる。スクリプト言語は JavaScript以外にも VBScriptがあり、切り替えて使いたいときに TYPE 属性を用いる。しかし VBScript は、クライア
ントが windowsOS の場合のみ実行可能である。
図 3 の 4・5 行目は onMouseOver イベント処理の記述である。マウスカーソルを「こ
こをクリックしないでください」に合わせると警告文が現れる仕組みになっている。
図 7 onMouseOver イベント処理
出典：筆者作成
5 マクロについて
1） マクロとは
エクセルのようなアプリケーションを動かすプログラムをマクロという。エクセルの
マクロは、VBA という言語の構文にしたがって記述する必要がある。今回私は「回転す
る 3D オブジェクト」、「アルバイト賃金計算」、「ジャンプするボタン」を作成したた
14 / 25
め、以下ではそれぞれの作成手順を述べる。あらかじめ Excel の Office メニューから
Excel オプションを選択し、[開発]タブをリボンに表示するにチェックを入れる必要があ
る。
2） 回転する 3D オブジェクト
これはスタートボタンをクリックすると、時間の経過につれてパイと五角形の 2 つの
3D オブジェクトが 5度の回転を 500 回繰り返すものである。
① 作成方法
Excel を起動し挿入タブから図形を選択する。今回私はパイと五角形を選択した。選択
すると Excel のシート上に図形が表示される。それを右クリックし、図形の書式を選択
する。今回はパイを黄色に塗りつぶし、線も黄色に設定し、透過性を 50％、ぼかしを
5％、角度を 315°、奥行きを 100pt、3D 回転の回転を Y軸 320°、Z軸 188.3°、底面か
らの距離を 100pt に設定した。五角形を肌色に塗りつぶし、線も肌色に設定し、透過性
を 51％、サイズを 100％、ぼかしを 4pt、角度を 90°、3D 書式の面取りの上の高さを
100pt、3D 回転の回転を X軸 40°、Y軸 10．4°、Z軸 356．4°、投資投影を 45°に設定
した。開発タブから挿入をクリックしてフォームボタンを選択し、Excel シートの上をド
ラッグするとボタンができあがる。「新規作成」を選択すると同時に VB エディタが起動
する。そこにはすでに Sub ボタン 3_Click()、End Sub という記述があるので、図 8 の
ような VBA スクリプトを記述する。
図 8 kaiten.xls出典：筆者作成
記述が終了したら、それをコンパイルする。コンパイルとは機械が理解できる形式に
変換することである。デバッグメニューからコンパイルを選択すれば構文が正しい限り
コンパイルできる。VB エディタを終了してファイルメニューから Excel に戻る。
② VBA スクリプトの解説
2 行目は繰り返し構文である。今回の場合は変数 n に 1 から 500 が順番に代入される。
3 行目は 1 行 2 列目のセルに変数 n の値を書き込むという意味である。繰り返しの回数
が増加すれば、書き込まれる数字も刻々と変化する。本当は Cells(1,2).Value=n と書く
15 / 25
Sub ボタン 3_Click()For n = 1 To 500Cells(1, 2) = n ‘図形を 5度回転させる Sheet1.Shapes("パイ 1").IncrementRotation (5) Sheet1.Shapes("五角形 2").IncrementRotation (-5) DoEvents Next nEnd Sub
べきであるが省略している。これは Cells(1,2)というオブジェクトの Value というプロ
パティーに n の値を代入せよという命令である。
5 行目・6 行目はパイ 1、五角形 2 という名前のオブジェクトを 5度回転させている。-5 で逆向きに回転する。本当は第 1 のシート（sheet1）にある”パイ 1”あるいは”五角形
2”という名前の Shape オブジェクトがもっているメソッド IncrementRotation(5)ある
いは（-5）を実行せよという意味である。
7 行目は「このボタンの仕事をやめて、他の仕事ができるようにしろ」という命令であ
る。回転のなめらかな動きを出すために今回記述した。
言葉で表現できる何らかの「まとまった」対象物または概念を「オブジェクト」とい
う。ボタンやパイや五角形、エクセルシート上のセルの他にもエクセルのシートも
sheet という名前のオブジェクトであり、また、エクセルのプログラムも applicationという名前のオブジェクトである。各オブジェクトは設定できる項目（プロパティー）
や自身で実行できるプログラム（メソッド）を持っている。
3） アルバイト賃金計算
あらかじめ氏名、時間給、交通費単価、勤務日数、勤務時間を記入しておく。そして、
各ボタンをクリックすると、上の枠で囲まれた左のセルのデータを処理して、右のセル
に処理結果（ここでいう交通費と支給額）が書き込まれる。本来はボタンの必要がない
ものである。交通費は交通費単価に勤務日数をかけたもので、支給額は時間給に勤務時間
をかけ、交通費を加えたものである。
Excel を起動し、初期データ（ここでは氏名、時間給、交通費単価、勤務日数、勤務時
間）を各セルに入力する。開発タブから挿入をクリックしてフォームボタンを選択する。
Excel シートの上をドラッグするとボタンができあがる。「新規作成」を選択して起動し
た VB エディタに図 3 のような VBA スクリプトを記入する。記述が終了したら、それを
コンパイルし、VB エディタを終了してファイルメニューから Excel に戻る。
本来ボタンの総数は 4 つあり、記述の方法も異なっていた。しかしボタン 3 にあたる
部分はボタン 2 に統合することが可能であり、わざわざ kotsuHi=Cells(4,3)*Cells(4,4)という式を記述しなくても右辺を直接書けばよいという考えから今回はボタン 2 として
作成し、図 3 のように記述した。
また、全般としてかけ算は*、足し算は＋、割り算は/を用いる。
ボタン 1 は第 4 行目だけを計算する。ボタン 2 はもし勤務時間が 0以上であればすべ
ての行を計算するというものである。For 文で変数 i を用いた繰り返し計算を行っている。
今回では変数 i に 4 から 8 まで代入しながら、For命令と Next命令に挟まれた処理部を
繰り返して実行する。ボタン 3 は空白を挿入する。
16 / 25
図 9 albeit.xls出典：筆者作成
17 / 25
Sub ボタン 1_Click() Cells (4, 7) = Cells (4, 3) * Cells (4, 4) Cells (4, 8) = Cells (4, 2) * Cells (4, 5) + Cells (4, 7)End SubSub ボタン 2_Click() For i = 4 To 8 If Cells(i, 4) > 0 Then Cells(i, 7) = Cells(i, 3) * Cells(i, 4) Cells(i, 8) = Cells(i, 2) * Cells(i, 5) + Cells(i, 7) End If Next iEnd Sub
Sub ボタン 3_Click() For i = 4 To 8
Cells(i, 7) = "" Cells(i, 8) = "" Next iEnd Sub
図 10 本来の VBA スクリプト
出典：筆者作成
18 / 25
Sub ボタン 1_Click()kotsuHi=Cells(4,3)*Cells(4,4)Cells(4,7)=kotsuHiCells(4,8)=Cells(4,2)*Cells(4,5)+kotsuHi
End SubSub ボタン 2_Click() For i = 4 To 8
kotsuHi=Cells(4,3)*Cells(4,4)Cells(i, 7) = kotsuHi
Cells(i, 8) = Cells(i, 2) * Cells(i, 5) + kotsuHi Next iEnd SubSub ボタン 3_Click()
For i = 4 To 8If Cells(i, 5) > 0 Then
kotsuHi = Cells(i, 3) * Cells(i, 4) Cells(i, 8) = Cells(i, 2) * Cells(i, 5) + kotsuHi
End IfNext i
End Sub
Sub ボタン 4_Click()For i = 4 To 8
Cells(i, 7) = "" Cells(i, 8) = "" Next iEnd Sub
4) ジャンプするボタン
あらかじめ初期化、スタート、ジャンプ、残り時間、現在位置、現在速度、発射強さを
記入しておく。ボタン 3 をクリックすると、全体の処理が始まる。時間の経過につれて、
ボタン 1 が落ちてくる。高度を維持するには、ボタン 4 をクリックすればよい。
作成方法としては、Excel を起動し、初期データ（ここでは初期化、スタート、ジャン
プ、残り時間、現在位置、現在速度、発射強さ）を各セルに入力する。開発タブから挿入
をクリックしてフォームボタンを選択する。Excel シートの上をドラッグするとボタン
ができあがる。「新規作成」を選択して起動した VB エディタに図 9 のような VBA スク
リプトを記入する。記述が終了したら、それをコンパイルし、VB エディタを終了して
ファイルメニューから Excel に戻る。
今回ボタン 1 はボタンとして機能していないため何も記述しない。よって図上では省
略している。このボタンは図でも代用できる。
ボタン 2 の 5 行目の 5 は 5ピクセルという意味で、6 行目はマイナスがついている。
これは Y座標の値が下に行くにつれて増加するからである。
ボタン 3 の 8 行目から後ろから 2 行目までは Do While x > 0 と Loop で囲まれたとこ
ろが繰り返される。Do While x > 0 は変数 x が正である限り繰り返すという意味である。
変数 x は残り時間を表し繰り返すたびに x の値は１ずつ減ってゆく。
10 行目で sokudo に足されている数字は加速度である。また位置 ichi と速度 sokudoを計算し、その位置にボタン 1 を移動させることになる。移動は、Sheet1.Shapes("ボ
タン 1”).Top = ichi で行なう。Top とはボタンの上辺の Y座標のことで、これを計算値
ichi にセットすると、ボタンをその位置に移動させることができる。何度も繰り返して
少しずつ移動させることで、なめらかな動きを表現することができるというのが、この
プログラムのポイントである。位置と速度の計算結果は、毎回セルに記入するようにし
た。
14 行目の<=は≦を VBA で表したものである。ふつう、ひとつのボタンをクリックし
て処理を継続しているとき、別のボタンは押すことができない。さらなるクリックとい
う別のイベントが発生しないようにできている。しかし、DoEvents で他のイベントの
発生を感知できるようにすることができる。したがって、ボタン 3 の処理を継続してい
るときボタン 4 の処理を割り込ませることができる。
sokudo という変数がふたつのボタンのなかで共通に用いられているため、図 9 の１行
目にグローバル変数であることを宣言している。VBA の右上から Declarations を選択す
ると最前に新しい行が追加される。
19 / 25
20 / 25
Global sokudoSub ボタン 2_Click() '初期化する n = 2000 ichi = 0 sokudo = 5 tsuyosa = -15 Cells(8, 2) = n Cells(9, 2) = ichi Cells(10, 2) = sokudo Cells(11, 2) = tsuyosa Sheet1.Shapes("ボタン 1").Top = ichiEnd Sub
Sub ボタン 3_Click() '読み込み n = Cells(8, 2) ichi = Cells(9, 2) sokudo = Cells(10, 2) tsuyosa = Cells(11, 2) '計算 Do While n > 0 n = n - 1 sokudo = sokudo + 0.5 ichi = ichi + sokudo If ichi > 300 Then ichi = 300 If ichi = 300 Then sokudo = 0 If ichi <= 0 Then sokudo = 5 Sheet1.Shapes("ボタン 1").Top = ichi '書き込み Cells(8, 2) = n Cells(9, 2) = ichi Cells(10, 2) = sokudo Cells(11, 2) = tsuyosa DoEvents LoopEnd SubSub ボタン 4_Click() 'ジャンプさせる sokudo = sokudo + Cells(11, 2)End Sub
図 11 jump.xls出典：筆者作成
6 Flash 作成
1) 流れ
今回筆者は NetJapan社が提供している KoolMoves という Flash 作成ソフトの体
験版を用いた。このソフトは体験版であるため、「作成途中の全体保存」ができな
いが、ActionScript や部分的な保存（オブジェクト保存）が使用可能である。
作成したらまずはオブジェクト保存をする。オブジェクト保存は全オブジェクト
をコピーして編集メニューからファイルにペーストを選択することが必要である。
全オブジェクトを選択する方法にはドラッグして囲う方法、シフトキーを押しなが
らクリックする方法、コントロールキーを押しながら A を押す方法があるが、筆者
は 3 つ目の方法を用いた。
また、完成したらムービー書き出しを行う。ファイルメニューからムービーのエ
クスポートを選び、SWF（Flash ムービー）および HTML ページとしてを選択し、
保存先とファイル名を作成する。一工程ずつ完成したらそのつど動作確認をするこ
とを怠ってはならない。完成してから見てからでは修正が大変だからである。
以下、アップロードしたものの解説を行うが、interaction についてはアップロー
ドしたレポートがあるため割愛する。
2) 小手調べ
作成したキーフレームは全部で 3 つである。図形を変形させており、第 3 キーフ
レームでは回転させている。図形を変形させる際は上端メニューから変形を選び、
変形した後にツールボックスの選択矢印をクリックして変形を終了させることを忘
れてはならない。
21 / 25
Global sokudoSub ボタン 2_Click() '初期化する n = 2000 ichi = 0 sokudo = 5 tsuyosa = -15 Cells(8, 2) = n Cells(9, 2) = ichi Cells(10, 2) = sokudo Cells(11, 2) = tsuyosa Sheet1.Shapes("ボタン 1").Top = ichiEnd Sub
Sub ボタン 3_Click() '読み込み n = Cells(8, 2) ichi = Cells(9, 2) sokudo = Cells(10, 2) tsuyosa = Cells(11, 2) '計算 Do While n > 0 n = n - 1 sokudo = sokudo + 0.5 ichi = ichi + sokudo If ichi > 300 Then ichi = 300 If ichi = 300 Then sokudo = 0 If ichi <= 0 Then sokudo = 5 Sheet1.Shapes("ボタン 1").Top = ichi '書き込み Cells(8, 2) = n Cells(9, 2) = ichi Cells(10, 2) = sokudo Cells(11, 2) = tsuyosa DoEvents LoopEnd SubSub ボタン 4_Click() 'ジャンプさせる sokudo = sokudo + Cells(11, 2)End Sub
図 12 小手調べ
出典：筆者作成
3) 歩く人
図 13 にあるように全部で 5 つのキーフレームを作成した。筆者のあだ名が ASIMO で
あることから ASIMO を歩かせてみた。初めは背景を黒にして月と流れ星を作成する予定
であったが、背景をつける方法が分からず、また流れ星がはじめの位置に戻ってしまう
ことがあり、断念した。
用いた図形は四角と楕円と線だけである。第 2 キーフレームと第 4 キーフレームでは
図形をつぶし、よりリアルに歩いているようにした。図形を回転させる際、誤った方向
に図形を動かすと人間の体ではできない動きとなってしまうため、図形を動かした後は
そのつど再生し確認をすることを再度勧める。
図 13 歩く人
出典：筆者作成
22 / 25
4）Key 操作
図形自体をムービーにすることができ、かつ一度クリックしてからであるが図形を操
作することができる例の一つである。ダイナミックテキストを二つ作る。ダイナミック
テキストはツールボックスから選択する。図形を描き、形状メニューからムービーク
リップに変換を選択する。図形のプロパティーウィンドウにあるフレームタブをクリッ
クし、フレーム作成画面にする。トゥイーンは 12 にし、複数のキーフレームを追加する。
メインムービーに戻らないと動作確認ができないため、メインムービーに戻りながら作
成する。筆者は 5 フレーム作成し、偶数のキーフレームで図形を潰した。
また、図形に図 14 のような ActionScript を追加する。
図 14 ActionScript出典：筆者作成
On(enterFrame)｛｝は 1 回のフレーム表示ごとに｛｝内の仕事をせよという命令であ
る。This._以下はこのオブジェクトの座標プロパティーで、2 行目の{ this._y = 250; }のように数字を代入すれば、オブジェクトはその位置に移動する。パソコンの
ウィンドウでは Y軸は下を向いている。したがって、Y座標に 1 を加えることは下方に
1ピクセル下がることと同義である。
3 行目の(key.isdown(key.up))は上矢印キーが押されたときの命令である。
23 / 25
onClipEvent (enterframe) { this._y = this._y + 1; if (250 < this._y) { this._y = 250; } if (key.isdown(key.up)) { this._y = this._y + (0 - 5);} if (key.isdown(key.down)) { this._y = this._y + 1; } if (key.isdown(key.right)) { this._x = this._x + 5; } if (key.isdown(key.left)) { this._x = this._x + (0 - 5); } _parent.txt1.text = this._x; _parent.txt2.text = this._y;}
図 15 Key 操作
出典：筆者作成
5）ゲーム
図はアップロードしたレポートと同じである。また、完成できなかったため、作成
予定を記す。第 1 キーフレームはタイトル画面で、ムービー停止を行い、「play」ボ
タンを押すと、操作方法・ルール説明を記した第 2 キーフレームに移動してムービー
停止をする。
第 3・第 4 キーフレームはメイン画面となっており、音楽が鳴り始め、ゲームが始
まる。上矢印で図形が減速、左右の矢印で左右に動き、下矢印で回転する。また、ス
ペースキーで急降下する。一列に図形が並べば図形が消え、スコアに得点が入る。一
定スコアに到達すればレベルアップ画面が現れ、「はい」ボタンを押すと次のレベル
へ、「いいえ」ボタンを押すと終了画面へ移動する。
第 5・第 6 キーフレームは終了画面で、第 6 キーフレームで著作権表示をする。おわり
の文字の後に著作権情報が表示され、「replay?」ボタンがつく。おわりにはジグソーの
モーションスクリプトを設定した。「replay?」ボタンを押せば、タイトル画面に移動し
て停止する。おわりに
第 1 節では HTML について解説を行った。第 2 節ではホームページの作成方法につい
ての注意事項と筆者が使用したタグ、画像について解説を行い、第 3 節では CSS につい
て使用例を交えて説明した。第 4 節では Javascript の概要とプログラム例を解説した。
第 5 節では筆者のホームページにアップロードされているマクロを作成方法と VBA スク
24 / 25
リプトの解説に分けて解説した。第 6 節ではホームページの改良点について解説を行っ
た。第 7 節ではアップロードした Flash について解説を行った。
CSS を復習した結果春よりもカラフルなホームページに仕上がり、満足している。
後期はゲーム作成が中心だったにもかかわらず、ゲームが完成しなかったのが悔やま
れる。KoolMovesだからできる動きを取り入れたゲームを計画し作成すべきであった。
テトリスは個人的に作成し、ホームページにアップロードしたい。
参考文献
中邨登美枝 [2008] 『これからはじめる HTML&スタイルシートの本』 技術評論社。
旭貴朗 「アルバイト賃金計算」 2013.7.18http://www2.toyo.ac.jp/~asahi/education/soron/shiryo/programing/language/excel/albeit/index.html
旭貴朗 「回転する 3D オブジェクト」 2013.7.18http://www2.toyo.ac.jp/~asahi/education/soron/shiryo/programing/language/excel/star3D/index.html
旭貴朗 「ジャンプするボタン」 2013.7.18http://www2.toyo.ac.jp/~asahi/education/soron/shiryo/programing/language/excel/btnJump/index.html
旭貴朗 「Flash プログラミング」 2014 年 1 月 16 日
http://www2.toyo.ac.jp/~asahi/education/soron/shiryo/application/picture/flash/index.html
旭貴朗 「Javascript」2013.7.18http://www2.toyo.ac.jp/~asahi/education/soron/shiryo/webDesign/JavaScript/index.html
25 / 25