· Web viewHTMLとはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつである。この言語で書かれたファイルをHTML

基礎演習Ⅱレポート

金曜日　4 限

旭　貴朗先生

2 年秋・Flash ゲームに関する報告

　　　　　　　　　　　　　　　　　　提出日　1 月 21 日（土）

　　　　　　　　　　　　　　　　　　経営学部経営学科 2 年　向日葵

1

　　

目次

１はじめに

1. はじめに

2. HTML とは

3. Web ページ作成の手順と準備

２　ホームページ作成

1 節

1. トップページ作成

2. 自己紹介ページ作成

3. 論文・報告書ページ作成

4. プログラミングページ作成

5. 用語解説

2 節　CSS について

1. CSS とは

2. CSS ファイル作成

3. 用語解説

3　Java script

4　Excel プログラミング

5　FLASH

6　インタラクション

1. 準備

2. インタラクション

2

7　 Flash ゲーム

1.　概要

2.　準備

3.　作成

8　おわりに

9　参考文献

3

１はじめに

本節では、HTML についての解説、Web ページ作成の手順と準備について記述する。

1　はじめに

本稿は、2 年春学期に筆者がゼミで学んだ、ホームページ作成のプロセスと Excel を

用いたプログラミングについて記述する。現在、インターネットは我々の生活の中に

溢れているが、どのようにして Web サイトなどが作成されているのかを触れられる

機会になると幸いだ。

２　HTML とは

　HTML とは Hyper Text Markup Language（ハイパーテキスト・マークアップ・

ランゲージ）の略で、Web ページを作るための最も基本的なマークアップ言語のひ

とつである。この言語で書かれたファイルを HTML ファイルという。ハイパーテキ

ストとは高機能なテキストである。文章中の指定箇所にリンクを張ることができ、ほ

かのページに移動することができる機能を、Hyper Text Link（ハイパーテキストリン

ク）という。マークアップ言語とは、文書の一部を「タグ」と呼ばれる特別な文字列

で囲うことにより、文章の構造（見出しやハイパーリンクなど）や、修飾情報（文字

の大きさや組版の状態など）を、文章中に記述していく記述言語である。HTML には

「HTML」「XHTML」「HTML5」など、いくつか種類があるが、本稿では

「HTML」を使用する。HTML ファイルは Windows ではメモ帳、Mac ではテキスト

エディットなどのテキストエディタを使用し作成される。本稿では、Windows のパ

ソコンを使用しているためメモ帳から作成する。尚、メモ帳はスタート＞すべてのア

プリ＞Windows アクセサリ＞メモ帳の順に見つけることができる。

　HTML はタグによって囲い書かれていると前述したが、具体的に説明する。タグと

は、HTML タグのことを指し「<>」で前後を囲い記述される。タグには、<h1>～

</h1>のように開始タグと終了タグがあり 2 つは対になっているため、終了タグを

表すには必ず「/（スラッシュ）」を入れて表記しなければならない。また、この際

4

気を付けなくてはいけない重要なことが一つあり、HTML タグは必ず半角英数字で記

述しなくてはいけないということである。仮に、全角英数字などで記述した場合、文

字化けなどプログラムが正常に稼働しないことが予想される。

　HTML ファイルの基本構造は、「<html>~</html>」と

「<head>~</head>」と「<body>~</body>」の３つの要素で構成されている。

「<html>~</html>」は、HTML 文書の開始と終了を示すタグであり、HTML タグ

と呼ばれる。「<head>~</head>」は、作成中の文書のタイトルや概要、著作権

に関する情報など、ページについての補足情報を記述し、head タグと呼ばれる。ま

た、HTML 文書をインターネットで公開する際に必要となる様々な情報を記述する。

「<body>~</body>」は、本文エリアであり Web ブラウザで表示される文章や画

像などを記述し、body タグと呼ばれる。文章は body タグの間に直接記述せず、何

らかのタグで囲んで記述する。HTML

ファイルの 3 つの要素は下記のように記述される。

<html>

<head>

</head>

<body>

</body>

</html>

以上が HTML についての概要である。

３　Web ページ作成の手順と準備

Web とは、インターネット上で標準的に用いられている、文書の公開・閲覧システ

ムである。文字や画像、動画などを一体化した文書をネット上で公開・配布、また、

それを入手・閲覧することができる。文書内に別の文書への参照を埋め込むことがで

きる「ハイパーテキスト」と呼ばれるシステムの一種。“web”とは蜘蛛の巣の意味で

5

あり、大規模なハイパーテキストの文書間の繋がりを図示すると複雑な蜘蛛の巣のよ

うに見えることからこのように呼ばれる。また、ｗｗｗ（ワールドワイドウェブ）

や W3 とも呼ばれる。以上を踏まえたうえで、ホームページ作成の準備について説明

する。まず、ホームページを作成する前に www サーバに自分のホームページを開設

する場所を確保する必要がある。今回本稿では、YAHOO!JAPAN が行っているサービ

スの一つである YAHOO!ジオシティーズ（http://geocities.yahoo.co.jp/）を利用し、

ホームページの開設を行った。尚、このサービスを受ける際、YAHOO!JAPAN に会員

登録を行う必要があり、登録が完了したのち会員メニューなどから開設先の URL を

確認することができる。次に、拡張子の設定をこなう。拡張子の変更の方法は、

「Windows」キーを押しながら「X」キーを押し、表示された一覧から「コントロー

ルパネル」をクリックする。次に、「フォルダーオプション」をクリックする。

「フォルダーオプション」が表示されるため「表示」タブをクリックする。「詳細設

定」ボックスから「登録されている拡張子は表示しない」のチェックを外し、

「OK」をクリックすることにより、拡張子が表示されるようになる。次に、メモ帳

を開き拡張子を利用し HTML ファイルを作成する。保存する際、ファイル名に拡張子

「.html」を記述し、文字コードを「UTF-8」に設定し保存する。拡張子「.html」を記

述したことにより、HTML ファイルとしてブラウザでの閲覧が可能になる。作成準備

が整ったため、作成についての説明を始める。

拡張子の表示（筆者作成）

6

出典:YAHOO!JAPAN ジオシティーズ（http://geocities.yahoo.co.jp/）2016 年 7 月 18 日 0

時 36分

２ホームページについて

本章では、各ページ作成のプロセスと、使用するタグについての解説について記述する。

1 節

１　トップページ作成

はじめにトップページのソースコード図 1 を記述し、その後解説する。

<!DOCTIPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="author" content="向日葵">

<meta name="description" content="向日葵のサイトです">

<meta name="keywords" content="東洋大学,経営学部,旭ゼミ,向日葵">

7

<title>向日葵</title>

<link rel="stylesheet" href="style.css" media="all">

</head>

<body>

<div id="container">

<div id="header">

<h1 align="center">向日葵</h1>

</div>

<div id="menu">

<ul>

<li>カウンター--><table border="0" cellspacing="0" cellpadding="0"><tr><td

align="center"><a href="http://www.rays-counter.com/"><img src="http://www.rays-

counter.com/d346_f6_022/5756d0cbe76c8/" alt="アクセスカウンター"

border="0"></a></td></tr><tr><td align="center"><img

src="http://www.rays-counter.com/images/counter_01.gif" border="0"><img



src="http://www.rays-counter.com/images/counter_04.gif" border="0" ><img

src="http://www.rays-counter.com/images/counter_05.gif"

border="0"></td></tr></table>

</li>

<li><a href="profile.html">自己紹介</a></li>

<li>近況</li>

<li><a href="report.html">論文・報告書</a></li>

<li><a href="program.html">プログラミング</li>

<li>伝言板</li>

<li>リンク</li>

</ul>

</div>

<div id="content">

<h2><img src="img/750.jpg" alt="向日葵です"><br>

<a href="http://colopl.co.jp/shironekoproject/">※著作権は大丈夫です。</a>

</h2>

<div id="footer">

<p>Copyright©</p>

8

</div>

</div>

</div>

</body>

</html>

図 1　index.html

出典：筆者作成

　本章から使用されたタグをソースコードに沿いながら説明する。使用されたタグは、

「<!DOCTIPE html>」「<meta>」「<link>」「<div>」「<h1>」「<ul>」「<a >」「<br>」

「<p>」「<img>」である。

<!DOCTIPE html>

「<DOCTIPE html>」は、DOCTIPE宣言と呼ばれ、HTML の 1行目に記述され、どのタイ

プの DOCTIPE を使用するかを宣言するタグである。





「<meta >」は、HTML 文の<head>～</head>間に挿入し、HEAD タグ要素ではサポー

トされない付加的情報の記載をし、内容を持たない要素であることから空要素と呼ばれる。

要素の大部分は、開始タグと終了タグを必要とするが、空要素の場合は終了タグを必要とし

ない。Meta 要素はプロパティとその値の指定の組み合わせで使用される。下記に例を挙げ

る。

<meta name=ページの作者>

<meta name=ページの概要分>

9

<meta name=ページに関連するキーワード>

<meta charset=使用する文字コード>


「<link>」は、はその文書ファイルと関連する別の文書ファイルを指定し、その関係

を定義するものであり、<HEAD>～</HEAD>間で使用する。

<head>

</head>

<body>

<div id="container">

<<div id="header">

</div>

<div id="menu">

</div>

<div id="content">

<div id="footer">

</div>

</div>

</div>

</body>

「<div>」は、それ自身は特に意味を持っていないが、<DIV>～</DIV>で囲んだ範囲をひとか

たまりとして、 align属性で位置を指定、スタイルシートを適用するのに用いる。

10

<h1 align="center">向日葵</h1>

「<h1>」は、h 要素と呼ばれ見出しを表す。ｈ要素には 6段階のレベルがあり、h1 が

最も大きく、h6 が最も小さい見出しを表す。「align="center"」は、<h1>の向日葵とい

う見出しを中央に表示するために用いた。

<ul>

<li><a href="profile.html">自己紹介</a></li>

<li>近況</li>

<li><a href="report.html">論文・報告書</a></li>

<li><a href="program.html">プログラミング</li>

<li>伝言板</li>

<li>リンク</li>

</ul>

「<ul>（アンオーダーリストタグ）」は、ul 要素と呼ばれ「<li>（li タグ）」で囲んだ

範囲を ul タグで囲み箇条書きで表記されるものである。

<a href="profile.html">自己紹介</a>

<a href="report.html">論文・報告書</a>

<a href="program.html">プログラミング</a>

<a href="http://colopl.co.jp/shironekoproject/">※著作権は大丈夫です。</a>

「<a>（エータグ）」は、ハイパーリンクを設定するタグである。通常 HREF で指定する

URL には相対パスか絶対パスで指定する方法がある。相対パスとは同一サイト内でのリン

クの指定や、同じディスク内でのファイルの指定をする場合に利用される形式である。

絶対パスとは Web ブラウザ等で見れる「http://」から始まる形式で指定する方法である。

11

<img src="img/750.jpg" alt="向日葵です"><br>

「<br>（ブレイクタグ）」は、Web ブラウザを開いたときに強制的に改行して表示さ

せるタグである。改行させたい位置に<br>を記述することで実施される。

<p>Copyright©</p>

「<p>（ピータグ）」は、段落を表すタグである。一般的な文章のまとまりだけでな

く、著作権情報なども段落とみなされることがある。

<img src="img/750.jpg" alt="向日葵です">

「<img>（イメージタグ）」は、画像を埋め込むタグである。src 属性には、GIF形式(*.gif)、JPEG形式(.jpg)、PNG形式(*.png)などの画像ファイルを指定する。本稿では、

HTML ファイルと同じ階層にあるフォルダーの中の画像を使用したため「img/750.jpg」と記

述した。

ソースコードの記述が終了したら、上書き保存しトップページの作成を終了する。以

後、このような作業を繰り返すため省略する。

２　自己紹介ページ作成

はじめに、メモ帳を開き新たなファイルにトップページ作成の際に使用したソース

コードをコピー＆ペーストし使用する。この際、不要な部分は削除する。下記図２に

ソースコードを記述する。

<!DOCTIPE html>

<html>

<head>

12





<title> 自己紹介</title>

</head>

<body>

<h1 align="center">profile</h1>

<img src="chara03.png" >

<table border=1　align="center">

<tr><th>名前</th><th>向日葵</th></tr>

<tr><th>出身</th><th>地球</th></tr>

</table>

</body>

</html>

図２　profile.html

トップページと母体になる部分は大部分酷似しているため、前項に使用しなかったタ

グに沿い説明する。本項に使用されたタグは、「<table>」である。

<table border=1　align="center">

<tr><th>名前</th><th>向日葵</th></tr>

<tr><th>出身</th><th>地球</th></tr>

</table>

「<table>（テーブルタグ）」は、「<tr>、<th>、<td> 」と組み合わせてテー

ブル(表)を作成し、「table タグ」で囲まれた部分は、それが一つの表であることを

13

表す。「border=1」は、表を枠線で囲むことを表し、この属性を記述しないまたは

０を指定すると枠線は表示されない。

３　論文・報告書ページ作成

ソースコードを下記図３に記述する。本項では、新たなタグの使用は認められないが

word 文書のアップロードを行ったので記述する。

<!DOCTIPE html>

<html>

<head>





<title>論文・報告書</title>

</head>

<body>

<h1 align="center">論文・報告書</h1>

<h2>レポート</h2>

<ul>

<li><a href="report2haru.docx">2 年春「お試し版」</a></li>

<li>２年秋</li>

14

</ul>

<h3>論文</h3>

<ul>

<li>３年</li>

<li>４年</li>

<li>リンク</li>

</ul>

</body>

</html>

図３．report.html

講義の中で、レポートをアップロードする前にいわばお試し版のような形で、記述の

ない word 文書をアップロードした。Word 文書のアップロードの方法は、はじめに

word 文書を作成し名前を記述し保存する。次に、「report.html」文書に<a>を使用し

て引用する。下記図４に記述する。

<a href="report2haru.docx">2 年春「お試し版」</a>

図４．Word 文書「お試し版」

この際の注意点として、word 文書の拡張子は「.docx」であるので、「.htnl」と混在

しないことである。

また、現在このページは「お試し版」と本稿を含めた 2 つのみのアップロードとなっ

ているが、今後さらにアップロードをしていく予定である。

４　プログラミングページ作成

今学期の講義では、excel を利用した回転する３ Dオブジェクトの作成を行ったが、

回転する３ Dオブジェクトの作成に関しては後述し、本項ではアップロードの方法に

15

関して説明する。前項同様、<a>を使用して引用するところまでは同じだが、拡張子

のコードが異なる。下記図５に記述する。

<a href="kaitenn.xlsm">

図５．回転する３ Dオブジェクト

Excel 文書の場合、拡張子が「.xlsm」であり、引用する際重ねて注意が必要である。

この時点で、各ページの大部分は完成している。完成させるために、用語解説をはさ

み CSS ファイルについて説明する。

５　用語解説

「Img タグ」に関する用語

GIF （拡張子 .gif） 256色（8bit）まで使用可能。イラスト向きの形式で、色数の少ない単

調な画像に適している。

JPEG （拡張子 .jpg）

約 1677万色（24bit）まで使用可能。写真向きの形式で、色数の多い複

雑な画像に適している。

PNG （拡張子 .png）

約 1677万色（24bit）まで使用可能。イラスト向きの形式で、色数の少

ない単調な画像に適している。写真などで使用する場合は、データ量が

大きくなってしまうので注意が必要である（しかし、画質の劣化がない

ので JPEG より綺麗に表示される）。

2 節　CSS について

16

本節では、CSS についての解説、作成のプロセスについて記述する。

１　css とは

CSS とは、「Cascading Style Sheetsカスケーディング・スタイル・シート」の略であ

り、ウェブページのスタイルを指定するための言語である。ワープロソフトなどで

作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートとい

う。HTML や XHTML などで作成されるウェブページにスタイルを適用する場合には、

スタイルシート言語の 1 つである CSS が一般的に利用されている。ワープロソフトな

どで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシート

という。HTML や XHTML などで作成されるウェブページにスタイルを適用する場合に

は、スタイルシート言語の 1 つである CSS が一般的に利用されている。CSS は、HTML

と組み合わせて使用する言語である。 HTML がウェブページ内の各要素の意味や情報

構造を定義するのに対して、CSS ではそれらをどのように装飾するかを指定する。現

在、ウェブページを制作する言語として広く利用されている HTML4.01 や XHTML1.0 に

は、< center>や<font>などの装飾目的の要素（タグ）や属性が存在しており、、

<table>タグでレイアウトをまとめるなどの方法を駆使すれば、 HTML だけでウェブ

ページの見栄えを制御することもできなくはない。しかし、先に述べたように HTML

は情報構造を定義するための言語であり、見栄えの制御のために本来の役割とは違っ

た使い方をすると、文書の情報構造がでたらめになってしまう恐れなどがあるため

ウェブページのスタイリングに HTML を用いるべきではなく、CSS ファイルを利用す

るのである。また、HTML ファイルに記述する場合、すべての HTML ファイルに書き

込む必要があり、CSS ファイルファイルを使わないことによるデメリットは大きいと

推測できる。

　CSS ファイルは HTML ファイルと同様にメモ帳を使い作成し、保存する際拡張子

「.css」を記述することによって CSS ファイルとして扱われるようになる。

２　CSS ファイル作成

はじめに、図３．１を下記に記述する

17

body{

background-color:#ffff00;

font-size:26px;

color:#ff00ff;

text-decoration:none;

}

#container{

}

#header{

background-image:url("img/bc_header.png.jpg")

}

#menu{

width:265px;

float:left;

}

#content{

width:635px;

float:right;

}

図３．１　style.css

「CSS」の骨組みは、主に４つに分かれている。図３．１に沿って説明する。

body{　

18

background-color:#ffff00;

font-size:26px;

color:#ff00ff;

text-decoration:none;

}

図 3.2

１つ目は、セレクタと呼ばれ、スタイルを適用する要素を指定する。図３．２では

「body」の部分が該当する。１つのセレクタに対して、テキストの大きさや色、背景

色、配置など様々なスタイルを指定できる。スタイルはセレクタの後ろに記述した

「｛と｝」の間に記述する。２つ目は、プロパティと呼ばれ、どのようなスタイルを

使用するかを指定する。あらかじめ用意されたプロパティから選択し記述する。上記

の例では、「background-color（背景色）」、「font-size（テキストの大きさ）」、

「color（テキストの色）」、「text-decoration（テキストの下線・上線・打ち消し

線・点滅を指定）」を使用した。３つ目は、値と呼ばれ、実際のスタイルを指定する。

上記では、「background-color」に対して「:#ffff00;（黄色）」を記述、「font-size」に

対し「26px;」を記述、「color」に対し「:#ff00ff;（マゼンダ）」を記述、「text-

decoration」に対し「:none;」を記述している。この際、プロパティと値の間の区切り

として、値の前に半角の:(コロン)を記述し、続けて別のプロパティを記述する場合に

は、値の後ろに半角の;(セミコロン)を記述することを忘れてはいけない。ソースを読

みやすくするために;の後に改行を入れることは可能である。またプロパティや値に

関しては次節説明する。４つ目は、コメントと呼ばれ、自分用のめもである。図３．

１では使用されていないため下記に図 3.3 を記述する。

/*body　要素のテキストの色を黒くするためのスタイル*/

図 3.3

コメントを入れる場合は、メモの直前に「/（スラッシュ）*（アスタリスク）」、メ

モの直後に「＊/」を入力する必要がある。コメントは Web ブラウザ上の表示に影響

は与えず、ソースコードを見ない限り表示されない。

　HTML についての節で、div タグについて説明したが図３．１で引用されている。

div タグは、グル－プ分けするために使用したが、id属性または class属性で名前を付

19

けた部分が使用されている。id セレクタには、「#logo{color:orange;}」などがあり、

class セレクタには「.note{color:green;}」などがある。本稿では、container(コンテイナ、

コンテナー)、header（ヘッダー）、menu（メニュー）、contents(コンテンツ)、

footer(フッター)に分け作成した。「container」は、和訳すると容器であり、ページ全

体を一つのまとまりとしてみるものである。「header」は、ページのタイトルなど

ページの上のほうの空間にあたる部分である。「menu」は、ページの左側、もしく

は両脇などにあるコンテンツのリストにあたる部分である。「contents」は、本文と

「footer」を含む部分である。これらの id名を利用しさらに細かく装飾を行う。下記

図３．４はグループ分け関係図である。

図３．４　グループ分け関係図（筆者作成、講義参照）

では、実際に筆者である向日葵のホームページを例に説明する。

20

cont

aine

r

header

menu

contents本文

footer

図３．５　向日葵ホームページ container 出典　

（http://www.geocities.jp/himawarishyn/）

以下、図３．９まで出典元は省略する。

図３．６向日葵ホームページ header

#header{

background-image:url("img/bc_header.png.jpg")

21

}

「background-image」を使用し、ページタイトル部分に背景を設定している。

図３．７向日葵ホームページ menu

#menu{

width:265px;

float:left;

}

「float」を使用し、menu をページの左側へ移動させている。「float」プロパティは、

それ自体を左または右によおせて、後に続く要素を反対側に回り込ませるためのプロ

パティである。画像（img 要素）など横幅があらかじめ決まっているもの以外は、

22

「width」プロパティで幅を明記したうえで「float」プロパティを使用すると思い通

りのレイアウトが可能である。

図３．８向日葵ホームページ contents

#content{

width:635px;

float:right;

}

「float」プロパティを使用し、右にずらしている。

23

図３．９　向日葵ホームページ footer

「Copyright©」を記述し、著作権を表記している。

CSS ファイルの作成が終了したので、HTML ファイルとリンクする。HTML の節でもや

や触れたが、「<link>」を使用する。ソースコードを下記に記述するため、詳しくは

html の「<link>」を参照。


以上でホームページは完成する。

３用語解説

ｐｘ（ピクセル）・・・ピクセルとは「デジタル画像の 1粒」のことである。縦

ピクセル　×　横ピクセル　＝　画素数

Color・・・光の 3原色である R(赤)G(緑)B(青)からなる。すべての色はこの 3原色であ

らわせる。色は、色名での指定と色指定があるが、色指定で表す

のが一般的である。数値で色を指定する場合 3桁もしくは６桁の

１６進数で指定する。数値が低い(#000000)と表示される色は黒に

なり、数値が高い(#ffffff)と白になる。

24

3　 Java scriptJavaScript とは、WEB上でインタラクティブな表現をする為に開発されたオブジェク

ト指向のスクリプト言語（簡易プログラミング言語）である。HTML内にプログラム

を埋め込むことで、Web ページに様々な機能を付加できる（Web ブラウザの動作を

定義できる）為、HTML や CSS では表現できないユーザーの動きに応じたものを作る

ことが可能である。HTML ファイルの中にプログラム（スクリプトという）を記述し、

ファイルが読み込まれたときスクリプトがブラウザによって解釈され、クライアン

トマシン上で実行される。例として、背景の色を徐々に変化させたり、現在時刻を時

計のように表示させたりすることができる。また、リンク（ホットテキスト）の上

をカーソルが通過したときに、「ポップアップを表示する」設定にすれば、解説を

別ウインドウ表示することも可能である。Netscape社が提案したものであり、Sun

Microsystems社が提案した Java とは異なるものである。Javascript には、JavaScript に

対応したブラウザソフトがあれば、サーバーに負担をかけることなくスクリプトが

実行でき、特別な開発環境は要さず、HTML ファイルに書き込むだけで簡単に行え、

スクリプト言語であるので、コンパイルを必要としない特徴がある。作成する際は、

「<script>(スクリプトタグ)」で囲み、Body 部分で、必要な場所に直接記述し、Head

部分で、あらかじめ名前をつけて定義し、Body 部分でそれを引用する。保存する際

は、拡張子「.js」を記述し保存する。講義内では、将棋の指して自動再生とポップ

アップの表示、加算機について触れた。しかし、本稿ではプログラミングを行ってい

ない。

4　　Excel プログラミング

Excel とは、マイクロソフト（Microsoft）社の表計算ソフト。最も普及している表

計算ソフトの一つで縦横に並んだマス目（セル）の広がる表を用い、各セルにデータ

や計算ルールなどを入力・設定すると、自動的に計算や処理を実行し、所定の位置に

計算結果を代入する。利用者の操作手順を記録して再生するマクロ機能があり、定型

25

的な作業や繰り返し作業などを自動化することが可能である。また、VBA（Visual Basic for Applications）と呼ばれる簡易なプログラミング言語の開発・実行環境を

備えており、複雑なデータ処理などを自動化するプログラムを利用者自身が記述して

ワークシートに適用することが可能である。マクロや VBA プログラムはワークシー

トとともにファイルに保存することができ、別のコンピュータでも同じように実行

することが可能である。本稿では、VBA スクリプトを使用し、回転する３ Dオブ

ジェクトを作成した。作成する前の準備として、開発タグの表示を行った。Excel を

開き、ファイルメニュー＞オプション＞リボンのユーザー設定＞開発タグ表示の順に

行い開発タグが表示されているかを確認する。

図 5.1　開発タグの表示

準備ができたら作成に入る。まず、挿入タブ＞図形から図形を二つ選び作成する。

筆者はスマイルとハートを使用した。次に、図形を右クリックし図形の書式設定＞３

D 書式＞奥行きを設定し、３ D回転＞スタイルから回転を選ぶ。筆者は、不等角投影

１を使用した。これにより、２ D図形が３ D 化した。次に、開発タグ＞挿入＞ボタン

（フォームボタン）からボタン　１を作成し新規作成を選択する。そこには、すでに、

　　Sub ボタン 1_Click()

　　End Sub

という記述があるので、以下のような VBA スクリプトを記述する。

Sub ボタン 1_Click()

For n = 1 To 500

Cells(1, 2) = n

'図形を 5度回転させる

Sheet1.Shapes("Autoshape 1").IncrementRotation (5)

26

Sheet1.Shapes("Autoshape 2").IncrementRotation (-5)

DoEvents

Next n

End Sub

記述が終了したら、コンバイルを行うため、デバッグ＞コンバイルを選択する。コン

バイルとは、機械が理解できるように変換することである。仮に間違っている場合、

間違いの表記が出て失敗する。この場合、スクリプトを見直し編集しなおす必要があ

る。また、上手くコンバイルができた場合 VB エディタを終了し、Excel に戻る。その

後、ボタンが選択されてない状態であることを確認し、ボタンを選択する。動作を確

認できたらうまく作成できているということである。しかし、コンバイルできたと

してもプログラムが間違っている場合があり、片方のオブジェクトは動くがもう片

方のオブジェクトが動かないまたは両方とも動かないこと、「そのオブジェクトは

ありません」や間違いの指摘などがある。これらの場合、プログラムを見直し修正す

るために VB エディタに戻り、スクリプトを修正する。この際、修正後必ずプロセス

をリセットすることが重要である。その後、再びコンバイルし Excel に戻り、ボタン

を押す（正常に起動しない場合以下ループ）。筆者の場合、5～6回ほどプログラムを

修正・打ち直ししたが「sheet １」の部分にエラーが生じ、作業が進まなくなった

（図 5.2）。原因は、オブジェクト名の不一致だったが少しでも正確さにかけるとプ

ログラムは起動しない。

　プログラムについての解説として 2点あげる。１つめは、

For n = 1 To 500

Cells(1, 2) = n

'図形を 5度回転させる

Sheet1.Shapes("Autoshape 1").IncrementRotation (5)

Sheet1.Shapes("Autoshape 2").IncrementRotation (-5)

DoEvents

Next n

27

の部分である。「For n=1 to 500~next n」で囲まれた部分は 500回繰り返し、変数ｎに

1～500 が順番に代入され、このような構文を繰り返し構文という。2 つ目は、「Do

Events」命令は「このボタンの仕事を辞めて,ほかの仕事をしろ」といった命令である。

やや危険さを含むが、３ D オブジェクトの回転の滑らかさを得るために使用している。

図 5.2　スクリプトエラー表示、（筆者作成）

5　FLASH

　FLASH（フラッシュ）とは、Flash とは、Adobe Systems社による、音声や動画、ベ

クターグラフィックスのアニメーションを組み合わせて Web コンテンツを作成するソフ

ト、または、それによって作成されたコンテンツである。Flash で作成されたアニメー

ションはただ再生するだけでなくマウスやキーボードによる操作や入力フォームによる

文字入力も可能で、Flash が一種のアプリケーション実行環境となっている。Flash に

よって作られたファイルを閲覧するには、Web ブラウザに専用のプラグイン「Flash Player」をインストールしておく必要がある。Flash 自体は有料だが、Flash Player は

無料で配布されている。最近では Flash アプリケーションを OS上で直接実行できる

「Adobe AIR」という実行環境も公開されている。今回筆者は、「PowerX KoolMoves Demo」を利用して開発・作成を行った。本来、有料のソフトであるが、デモ版であるた

28

め無料で使用することができた。しかし、デモ版ということもあり機能に多少制限がか

かり、不便を感じることもあったが、作業上重大な支障はなかった。

6　インタラクション

本節では、インタラクションに入る際の準備と、インタラクションで行ったことを記

述する。

１　準備

　インタラクションでは、下記のものを使用するためあらかじめ用意する必要がある。

PowerX KoolMoves Demo フリーの音楽素材

　Koolmoves は、http://koolmoves.en.softonic.com/でダウンロードすることがで

きる。また、今回フリーの音楽素材は、http://kurage-kosho.info/のものを使用した。

　準備ができたら、作成の手順に入る。作成は、大まかに３つあり、オープニング、

メインムービー、エンディングを作成することになる。講義では５フレームで作成した。

２　インタラクション

　はじめに、メインフレームを作成する。３つの図形とダイナミックテキストを作成

し、色を設定、ボタンプロパティーを yes に変更する。次に、ダイナミックテキストの

「スクリプト」を Japanese に設定し、初期文字、文字サイズを決定する。次に、３つの

ボタンに Action Script のスクリプト

on(release)｛text1.text=”文字列”;｝を書き込み、「オーバーサウンド」と「ダウンサウンド」にあらかじめ用意していた

音楽素材を組み込む。この時点で、ムービーを作動させ動作の確認を行う。

動作に異常がなければ、各ボタンに状態の変化を設定する。「up」、「over」、

「down」の３つを作成し、終了後「メインムービー」ボタンを押しメイン画面に戻る。

以上の作業でメインフレームの作成は終了である。筆者は、ここまでの作業で一旦作業

を切り上げたのでオブジェクト保存を行った。

　次に、オープニングフレームを作成する。前段落で作成したフレームの Tween を１

２に設定し、フレームが３つになるように複製する。次に、第１、２フレームの三角形

を削除し、第１フレームの円形を外に出す。その後動作を確認し、正常に動くか確認する。

29

　最後に終了画面を作成する。第３フレームの右下にテキストエフェクトを使用し

「next」を作成しボタンにする。

　次に、第４フレームを作成する。左上にテキストエディタを使用し「おわり」、左下

に「著作権表示」、右下には「restart」を作成する。この際、「restart」のみボタンに

する。作成後、フレームを複製し、それぞれの文字サイズや色、エフェクトなどを設定

する。

　次に、「restart」ボタンに動作第１フレームへ移動、「next」ボタンに第４フレーム

へ移動を設定し、タイムラインから第３フレームに停止のコマンドを追加する。

　作業終了後、動作の確認を行い正常な動作が行われれば、保存しファイルをアップする。

図 1．流れるフレームの順番（筆者作成）

保存する際、デモ版では通常の保存はできないため、ほかの方法で保存する。作成途中

である場合、書き出し保存を使用する。「control」キー+「A」キーを押しすべてのオブ

ジェクトを選択し、コピーを行い、上部にあるバーの編集からファイルにペーストを選

択し完了する。その後「.fan」ファイルで保存されているかを確認し、作業を終了する。

　また、全工程が終了した際に保存を行うには、上部バーのファイルからムービーの

エクスポートを選択し下記図３で選択してあるものを選択する。その後、下記図 4 のよ

うな画面が出るため、ファイル名を記述し、保存する。尚、アップロードする際、2 つの

ファイル両方をアップしなくては、正常に作動しないため、2 つのファイルをアップ

ロードすることに気を付けなくてはならない。

30

オープニング

オープニング

メインフレーム

エンディング

ラストフレーム

図 3．保存する際の工程（筆者作成）

図 4．ＳＷＦ及びＨＴＭＬとしてエクスポート画面（筆者作成）

筆者が完成後動作を確認してみるとダイナミックテキスト内に出る文字が

「_level0.txt1」と表示され、もう一つ新しいものを作り直しても直すことはできなかっ

た。また、図形をクリックしもう一度ほかの図形をクリックしても、新しい文字が出て

こないといった問題もあったが、上記同様治ることはなく、失敗してしまった。しかし、

これら２か所以外は、問題なく作動した。

31

7　Flash ゲーム

　本節では、筆者の自作ゲームの概要と、開発・作成のプロセスなどについて記述する。

１　概要

　筆者が今回作成した自作ゲームについて説明していく。まず、本作の遊び方として

は、画面上から落下してくるピースを画面中央にある絵の空白の部分に埋めていくパズ

ルゲームである。操作方法は、矢印キー←（左）→（右）の 2 つのボタンでありシンプ

ルに作成した。また、作中の絵は白猫プロジェクトに関連したものだけを使用し、多く

の種類を使用することによりマンネリを防ぐことを試みた。

２　準備

　はじめに、作中で使う画像を準備する。筆者は、白猫プロジェクトのホームページ

（http://colopl.co.jp/shironekoproject/）からダウンロードし使用した。

次に、ダウンロードした画像を Windows アクセサリー「ペイント」を使用しトリミ

ングし、パズルのピースの形を作成する（図２）。

図 2.パズルの本体とピース（筆者作成）

　

　次に、Kool Moves を立ち上げ、トリミングしたパズルの本体とピースをインポートし、

ムービークリップに変換する。その後、図形を１つ適当に作成する。次に、作成につい

て記述する。

３　作成

32

　本来であれば、本項でスクリプトを使用し詳細に解説をおこないたかったが、制作中

にスクリプトを保存し忘れる失態を起こしたため、解説は割愛させていただく。

図 3　作成時画面（筆者作成）

8　おわりに

　2 年では、春学期には自作ホームページの作成と Excel のプログラミングについて学び、

秋学期では自作ゲームを作成・開発するにあたって FLASH について学習した。春学期提

出のレポートでは結びに、秋学期のゲーム作りも頑張りたいと述べたが、気持ちの面は

ともかく作品としては物足りないものとなってしまった。3 年からは、自由研究という

ことで興味のあるものを学習・研究できるのではないかと思うので、より一層気を引き

締めて臨みたいと思う。

9　参考文献・著作権参照

＜1 章～3 章＞

千貫りこ[2012]『これからはじめる HTML＆CSS の本』株式会社技術評論社

とほほの WWW 入門　 http://tohoho-web.com/

・旭貴朗「JavaScript」

33

http://www2.toyo.ac.jp/~asahi/education/soron/shiryo/webDesign/JavaScript/index.html

・旭貴朗「回転する３ Dオブジェクト」

http://www2.mng.toyo.ac.jp/~asahi/education/soron/shiryo/programing/language/excel/star3D/index.html

http://techacademy.jp/magazine/4843　参照　2016 年 7 月 10 日 19時 46分http://e-words.jp/w/Web.html　2016 年 7 月 25 日 13時 59分http://www5.plala.or.jp/vaio0630/hp/metatag.htm2016 年 7 月 16 日 17時 46分http://htmq.com/html/link.shtml2016 年 7 月 16 日 18時 15分http://www.qooin.com/html/post/A%E3%82%BF%E3%82%B02016 年 7 月 16 日 19時 39分http://www.tagindex.com/html_tag/img/img.html2016 年 7 月 17 日 1時 7分http://www.size-info.com/pixel/2016 年 7 月 17 日 21時 40分http://www.cyber-concierge.co.jp/pc_tama/js/js.html2016 年 7 月 17 日 23時 59分http://e-words.jp/w/Microsoft_Excel.html2016 年 7 月 18 日 1時 8分

＜4 章～7 章＞

IT 用語辞典　e-Words http://e-words.jp/w/Flash.html　2017 年 1 月 19 日 21時 15分白猫プロジェクトトップページ http://colopl.co.jp/shironekoproject/　2017 年 1 月 19日 22時 03分

34

Documents

· Web viewHTMLとはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつである。この言語で書かれたファイルをHTML