WebGPUを使うための「HTML5＋CSS＋JavaScript」の文法を学ぼう
はじめに
WebGPUを使うためにはWebページを作らなければなりません。そして、それをプログラミングするためには「HTML5＋CSS＋JavaScript」の文法の理解が必須です。Think ITをお読みの皆さんならおそらく熟知していらっしゃるかもしれませんが、今回は念のためにそれらの文法について解説します。また、実際に動くサンプルコードも合わせて解説します。
まず、画像やボタンなどのWebパーツを配置するためのマークアップ言語「HTML5」について解説します。次にHTML5のWebパーツを装飾するためのスタイルシート「CSS」について、最後にHTML5やCSSを制御するためのプログラミング言語「JavaScript」について解説します。
HTML5の文法
WebページはHTML5文書で<h1>タグや<a>タグなどのWebパーツのタグをコーディングして、WebパーツをWebページに配置します。タグには設定を書く<head>タグや本文を書く<body>タグ、本文の中には画像を表示する<img>タグ、レイアウトを施す<div>タグ、動画を表示する<video>タグ、音声を再生する<audio>タグなどがあります。
HTML5文書は.htmlファイルにコーディングしますが、他にもスタイルシートの.cssファイルやJavaScriptプログラミングする.jsファイルもあります。.htmlファイルの中にスタイルシートのCSSやプログラミングのJavaScriptを内包することも、外部の.cssファイルや.jsファイルに分けることもできます。
HTML5文書の書き方
Webパーツのタグは「<」と「>」で囲んで始まり、「</」と「>」で囲んで終了します。または「<」と「/>」だけ囲んで始まって終わることもできます。具体的には、次のタグの書式とサンプルコード「index.html」の解説を読んでください。
・タグの書式<タグ名>○○</タグ名> <タグ名 属性="△△" >○○</タグ名> <タグ名 属性="△△" />
HTML5を使った例
次のサンプルコードをコーディングすると、図1のようなWebページが表示されます。タイトルとメニューだけのシンプルなWebページです。まだCSSで何も装飾していないため、デフォルトのままです。つまり、HTML5の役割はタグを使ってWebパーツを配置することだけです。また、まだJavaScriptファイルも作っていないので、コンソールにjsファイルを読み込めないと警告が出ます。
・サンプルコード「index.html」<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>UltraMotion3D</title>
<link href="css/main.css" rel="stylesheet" />
<script src="lib/main.js"></script>
</head>
<body>
<header>
<h1>UltraMotion3D</h1>
<nav>
<a id="light">LIGHT</a>
<a id="gray">GRAY</a>
<a id="dark">DARK</a>
</nav>
</header>
</body>
</html>
図1：装飾なしの素のHTML5サンプル
【サンプルコードの解説】
<!DOCTYPE html>タグでこのhtmlファイルがHTMLのバージョン5であることを宣言します。
<html>～</html>タグの中に<head>タグと<body>タグを挿入します。
<head>～</head>タグの中に<meta>タグをコーディングして「charset」属性で文字コードをUTF-8にセットします。<title>タグをコーディングしてタイトルをセットします。<link>タグをコーディングして「href」属性で次のページで作るスタイルシート「css/main.css」ファイルを読み込みます。<script>タグをコーディングして「src」属性でJavaScript「lib/main.js」ファイルを読み込みます。
<body>～</body>タグの中に実際にWebページ配置するタグをコーディングします。<header>～</header>タグがヘッダーです。<h1>～</h1>タグが1番のハイライトです。<nav>～</nav>タグがナビゲーションです。<a>～</a>タグがアンカーで「id」属性でユニークな(一意の)タグを指定でき、例えばid属性「light」がクリックされたかJavaScriptで調べることもできます。
面白いコンテンツを考えるには何か定石やコツがあると思いますか? 故スティーブ・ジョブズは「イノベーションを起こす仕組みは、そんな仕組みなんて持たないことだ」みたいに言っていました。と言いつつ、筆者は3D世界で同じシーンを別のカメラアングルから見た2枚の絵で間違い探しするクイズ(図2)を思いついてコンテストで入賞し、TVで使われ、本を書き、それ以来よく間違い探しシリーズばかり作ってきました(汗)。間違い探しシリーズという仕組みを持ってしまったからか、新しいアイデアがなかなか思い浮かばないのかもしれません…。
「3Dクイズコム」のWebサイトのURL
https://3d-quiz.com
図2：「3Dクイズコム」のWebサイトル
