とにかくやってみよう

visual studioを準備する

Visual Studio 2012を使う場合

Microsoft Visual Studio を起動する

ファイル/新規作成/Webサイトを選ぶ

テンプレート=Visual Basic > ASP.NET 空のWebサイトを選ぶ

Webの場所を

ファイルシステム　D:\webp\WebSite1

とする。

Okボタン

ソリューションエクスプローラのWebSite1を右クリック

追加, Webフォーム

を選ぶ。

項目名: Default

ターゲットスキーマ

ターゲットスキーマは以下の〇印で指定する。

通常HTML5が指定されているが，指定されていなければHTML5を選ぶ．

以上の操作で新規の空のWebフォームが作成される。

次に、以下の ..... の部分にその後に示すコードを挿入する。
<body>
    <form id="form1" runat="server">
    <div>
........ ここに以下のコードを挿入する......
    </div>
</body>
          
	      
..... の部分には、以下のコードを挿入する。

canvasタグ、scriptタグ

<canvas id="canvas_id" width="400" height="400"></canvas> <script> onload = function() { draw_canvas(); }; function draw_canvas() { /* canvas要素のノードオブジェクト */ var canv1 = document.getElementById('canvas_id'); /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ if ( ! canv1 || ! canv1.getContext ) { return false; } var c1 = canv1.getContext('2d'); var g1 = c1.createLinearGradient(0,0, 400,400); g1.addColorStop(0,'rgb(128,255,255)'); // 水色 g1.addColorStop(1,'rgb(0,0,255)'); // 青 c1.fillStyle = g1; c1.rect(0,0,400,400); c1.fill(); } </script>

このプロうグラムは、通常通りにcanvas タグ、scriptタグを作ってから、scriptタグ内に記入する。canvasタグ、scriptタグの作り方は -> こちら

結果

以下のように表示される。

canvasタグ, scriptタグ

つぎに，このWebサイトの構造と仕組みを見ていく。

ここではcanvasタグとscriptタグを使用した。

canvas タグは以下のようなものである。
<canvas id="canvas_id" width="400" height="400"></canvas>

          
この canvas タグは400 × 400ピクセルの描画領域をWebページ中に確保する。

script タグは以下のようなものである。
<script>
onload = function() {
  draw_canvas();
};
function draw_canvas() {
  /* canvas要素のノードオブジェクト */
  var canv1 = document.getElementById('canvas_id');
  /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
  if ( ! canv1 || ! canv1.getContext ) {
    return false;
  }
  var c1 = canv1.getContext('2d');
  var g1  = c1.createLinearGradient(0,0, 400,400);
  g1.addColorStop(0,'rgb(128,255,255)');    // 赤
  g1.addColorStop(1,'rgb(0,0,255)');  // 紫
  c1.fillStyle = g1;
  c1.rect(0,0,400,400);
  c1.fill();
}
</script>
          
script タグには javascript のプログラムが含まれており，そのプログラムによって描画領域に今表示されたグラデーションのかかった色が描画される。

このプログラムはやや長いので，この後各ステートメントの説明を行う。

ターゲットスキーマの役割

このwebページでターゲットスキーマを「XHTML1.1」に切り替えてみよ。canvas, scriptの下に波線が表示され、マウスポインタをフォーカスすると以下のエラーになる。

「要素 canvas はサポートされていません」

「要素 script には必要な属性 type がありません」

これは HTML 1.1ではcanvasは規格に含まれておらず，scriptにはtype属性が必須であるからである。

さて、ターゲットスキーマの切り替えを知っておくことは必要だろうか? 現在, パソコンはもちろんタブレット端末からスマートホンに至るまでインターネットブラウザはすべてHTML5で標準化されている。現在でもいまだに6年前程度のパソコンではHTML5がサポートされていない場合があるが、まもなくこれも解消して、将来はターゲットスキーマの選択はまったく不要になるだろう。

しかし、これはここ数年でおきたことである。5年前には携帯電話もパソコンの多くもHTML5をサポートおらず、したがって、使用する機器に合わせてターゲットスキーマを切り替えてWebサイトを制作する必要があった。

こうした時代に作られたソフトウエアやWebフォームは数年以上残るのだから、諸君もターゲットスキーマの設定について理解しておくべきである。