| Visual Basic 中学校 HTML講座 |
|
|
この記事が対象とする仕様
| HTML5 HTML構文 | ◎ | 対象です。 | |
| HTML5 XHTML構文 | △ | 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。 | |
| XHTML 1.1 | △ | 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。 | |
| XHTML 1.0 | △ | 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。 | |
| HTML 4.01 | ○ | 対象ですが、HTML5に対する補足としてふれています。 |
| 概要 ・サーバーサイドスクリプトはWebサーバー側でHTMLを生成するプログラム ・VBによるサーバーサイドスクリプトの仕組みがASP.NET ・Visual Web Developer Express(Visual Studio)を使って無料でASP.NETを試す |
サーバーサイドスクリプトとは、HTML文書を作り出すプログラムのことです。HTMLの中に書くのではなく、HTML自体を作り出すプログラムであるためHTMLの仕様とは直接関係がありません(※１)が、Webの仕組みを理解するうえで参考になりますし、いろいろなことができる可能性を案内することにもなり有意義だと思いますのでHTML講座の一部として説明します。
※１：たとえば、英語を説明するのにタイプライターの仕組みを解説しようとするようなもの。
サーバーサイドスクリプトはユーザーからリクエストがあったときにWebサーバー上で動作します。
一般のユーザーはWebブラウザーにURLを入力してページを表示しようとしますが、このリクエストを受け取ったサーバーは次のどちらかの動作をとるように設定されています。
１．URLが示すHTMLファイルを読み込んでHTML文書をWebブラウザーに渡します。
静的にあらかじめ作っておいたHTML文書を表示すればよいだけのWebサイト・Webページはこの仕組みで動作します。学校や官公庁のサイトに多いです。
２．または、URLが示すHTMLファイルの名前やHTTPの情報をもとにサーバーサイドスクリプトを実行してその場でHTMLを作成してWebブラウザーに渡します。
代表的なところでは検索エンジンはこの方式で動作します。ユーザーがどのようなキーワードを入力するかは予測できませんし、Web上で公開されている情報は常に変化し続けるため、サーバーサイドスクリプトを使ってリクエストがあるたびに検索結果をHTML文書で表現して返すのです。
ショッピングサイトや商用サイトなど、Webサイトが機能的に動作するようになっているサイトのほとんどはサーバーサイドスクリプトを使っています。
サーバーサイドスクリプトはVB, C#, Java, PHPなどのプログラミング言語を使って専門の開発業者が作ります。サーバーサイドスクリプトを使って作られたWebサイトを「Webアプリケーション」と呼びます。小規模なサイトであれば個人が作ることもあります。
2009年に実施されたプロの開発者向けのアンケートで、36.2%がWebアプリケーションを開発していると回答しており、システム開発の分野ではメジャーな存在です。
参考(母集団が作為的であることに注意)：http://www.atmarkit.co.jp/fdotnet/chushin/chushinsurvey_01/chushinsurvey_01_01.html
サーバーサイドスクリプトはWebサーバーにインストールして動作させる必要があるため、自前で自由にできるWebサーバーを所有することが困難な個人よりも企業や組織が活用することがほとんどです。
個人向けのレンタルサーバーではサーバーサイドスクリプトを許可しているところとしていないところがあります。許可していないところが多数派のように思います。また、許可している場合でもVB, C#, Java, PHP, perlなどの種類の中でどれを許可しているかは異なります。自分でWebアプリケーションを作成して公開したい場合は事前によく確認してください。なお、VBを使ったWebアプリケーションはマイクロソフトが中心となって提供しているWindows Azure環境で公開することができます。 Visual Basic 中学校の掲示板はWindows Azureを利用して公開しているWebアプリケーションで、私がプログラムを書いています。 |
今回はVBを使って簡単なサーバーサイドスクリプトの作り方・動かし方を説明します。VBやC#を使ったサーバーサイドスクリプトの仕組みのことをASP.NETと呼びます。
ASP.NETのプログラムをするにはVisual Studioを使用しますが、個人レベルで使う場合は無償版のVisual Web Developer 2010 Expressを使うこともできます。
この２つはどちらもマイクロソフトが提供している製品で、機能に差があるものの画面や操作は同じです。ここからはVisual Web Developer 2010 Expressの画面を何枚か掲載しながら説明をしますが、Visual Studioを使っている場合でも少し表示が違うだけで同じ操作で同じことができます。
Visual Web Developerのダウンロード方法
http://rucio.cocolog-nifty.com/blog/2011/02/post-bf62.html
この記事の内容を試すにはVisual Studio 2005以上が必要です。 |
ASP.NETは2002年にマイクロソフトによってリリースされ、汎用のプログラミング言語であるVisual BasicやC#でサーバーサイドスクリプトが書けることや、後述するようにデザインとプログラミングを完全に分離できる点がメリットです。 2002年以前はやはりマイクロソフトによってリリースされた「ASP」(Active Server Pages)という仕組みが広く使われていました。この仕組みはプログラミング言語としてはVBScriptを使用します。VBScriptはVBの簡易版のような存在です。ASP.NETとASPは考え方や記述方法が似ています。 |
まず、プログラム前の準備をします。
手順１．Visual Web Developer 2010 Express (または、Visual Studio 2010)を起動してください。
手順２．[ファイル] - [新しいWebサイト]を選択してください。
手順３．左側の領域から「Visual Basic」を選択し、右側の領域では「ASP.NET 空のWebサイト」を選択し、[OK]をクリックします。
手順４．[ファイル] - [新しいファイル]を選択し、[テキストファイル]を選んで、名前を「test.aspx」にしてから[OK]をクリックしてください。
この拡張子がaspxのファイルがサーバーサイドスクリプトのプログラムを書くファイルです。
手順４．作成したtest.aspxに次の内容を書いてください。
| <%@ Page Language="VB" %> <!DOCTYPE html> <html> <head><title>VBのテスト</title></head> <body> <h1>こんにちは、Visual Basic!</h1> </body> </html> |
画面上では次のように表示されます。
なお、ここまでの手順で画面の全体像は次のようになっています。
test.aspxの編集画面が開かれていない場合は、画面右上のソリューションエクスプローラーでtest.aspxをダブルクリックしてください。
また、画面下部で「デザイン」ではなく、「ソース」が選択されていることも確認してください。 |
手順５．確認
F5を押してください。画面が切り替わってWebブラウザー上にWebページが表示されます。確認したら画面を閉じてください。
さて、これでかなり小さなVBによるASP.NETのプログラムを実際に動作させることができました。これをもとに改造していけば複雑なASP.NETのプログラムも実行して試していくことができます。
ASP.NETでは<% %>で囲まれた部分にサーバーサイドのプログラムを書き、その外側には通常のHTMLを書きます。
プログラムを使って 簡単な計算をさせてみましょう。
| <%@ Page Language="VB" %> <!DOCTYPE html> <html> <head><title>VBのテスト</title></head> <body> <h1>こんにちは、Visual Basic!</h1> <p><%=1+2%></p> </body> </html> |
途中に<%=1+2%>を追加しています。<% %>で囲まれているのでこれはプログラムであると解釈されます。また、先頭の=は式の結果をそのままHTML文書に出力することを示しています。F5で実行すると1+2の結果である3が表示されます。
実行した状態でWebブラウザーの「ソースを表示」機能でHTML文書を見てみると次のようになっています。
| <!DOCTYPE html> <html> <head><title>VBのテスト</title></head> <body> <h1>こんにちは、Visual Basic!</h1> <p>3</p> </body> </html> |
<% %>で囲まれた部分は一切含まれていません。これは<% %>の中はサーバー側でプログラムとして実行されるのでクライアントのWebブラウザーには渡されないからです。その代り、クライアント側にはプログラムの実行結果が渡され、この例では 3 となっているのがわかります。
Visual Basicを理解すれば、サーバーサイドスクリプトとしてさまざまなことを書けるようになります。この講座ではプログラミング言語としてのVisual Basicは正面から扱いませんが、例としてループ処理を考えてみます。
Visual Basicでは、次のように書くことで処理を10回繰り返すことができます。
| For i As Integer = 0 To 9 'ここに繰り返したい処理を書く Next |
たとえば、MsgBox関数はメッセージを表示する関数ですが、次のように書くと6回メッセージが表示されます。
| For i As Integer = 0 To 2 MsgBox("A") MsgBox("B") Next |
これをASP.NETで動かすには先ほどのtest.aspxを次のようにしてください。
| <%@ Page Language="VB" %> <% For i As Integer = 0 To 2 MsgBox("A") MsgBox("B") Next %> <!DOCTYPE html> <html> <head><title>VBのテスト</title></head> <body> <h1>こんにちは、Visual Basic!</h1> </body> </html> |
これで実際に実行してみるとメッセージがA, B, A, B, A, Bと繰り返し表示されるのがわかります。
これを使用して次のように書くとh1要素が３回生成されます。なお、このプログラムの中では変数iが使用されており、繰り返すごとにカウントアップしていきます。ですので、<%=i%>の部分は、１周目は <%=0%>と同じ意味、２周目は<%=1%>と同じ意味、３周目は<%=2%>と同じ意味になります。変数のことは別途Visual Basic言語を学習する際に理解して下さい。ここでは深入りしません。
| <%@ Page Language="VB" %> <!DOCTYPE html> <html> <head><title>VBのテスト</title></head> <body> <% For i As Integer = 0 To 2 %> <h1>こんにちは、Visual Basic! <%=i%></h1> <% Next %> </body> </html> |
最後に少しだけ複雑な例を紹介しましょう。次のようにすると掛け算の九九の表がHTMLとして作成されユーザーエージェントに返されます。
Visual Basicでは * がかけ算を表します。今回は登場しませんが割り算は / です。
| <%@ Page Language="VB" %> <!DOCTYPE html> <html> <head> <title>VBのテスト</title> <style> tr {height: 40px;} td {border:solid thin black; width: 40px; text-align:center;}</style> </head> <body> <h1>九九の表</h1> <table> <% For y As Integer = 1 To 9 %> <tr> <% For x As Integer = 1 To 9 %> <td><%=x*y%></td> <% Next %> </tr> <% Next %> </table> </body> </html> |
ここまでの例はHTML文書は<% %>の外側に書いていましたが、Response.Writeを使うことで<% %>の内側からHTML文書を書くことができます。
| <%@ Page Language="VB" %> <!DOCTYPE html> <html> <head><title>VBのテスト</title></head> <body> <% Response.Write("<p>見えますか？</p>") %> </body> </html> |
直接HTMLを書く方法とResponse.Writeを使う方法はどちらを使ってもよく、状況に応じて書きやすい方を選んでください。
次の例は、現在時刻の秒数の１桁目が7のときだけ、「ラッキーセブンです！」と表示します。
| <%@ Page Language="VB" %> <!DOCTYPE html> <html> <head><title>VBのテスト</title></head> <body> <% Dim thisTime As String = Now.ToString("yyyy\/MM\/dd HH\:mm\:ss") %> <p>現在時刻は<%= thisTime %>です。 <% If thisTime.EndsWith("7") Then %> <p>ラッキーセブンです！<p> <% End If %> </body> </html> |
このサンプルの中に登場するIf … Thenは、「もし … だったら」、を表し、ここからEnd Ifまでの間はその条件が成立しているときだけ出力されます。
これとまったく同じことを次のように書くことができます。
| <%@ Page Language="VB" %> <!DOCTYPE html> <html> <head><title>VBのテスト</title></head> <body> <% Dim thisTime As String = Now.ToString("yyyy\/MM\/dd HH\:mm\:ss") Response.Write("<p>現在時刻は" & thisTime & "です。</p>") If thisTime.EndsWith("7") Then Response.Write("<p>ラッキーセブンです！<p>") End If %> </body> </html> |
ここまではHTMLの中にサーバーサイドスクリプト(Visual Basicのプログラム)を埋め込んで実行する方法を説明しました。こうすることでシンプルな構成でWebアプリケーションを作れるのでサーバーサイドスクリプトがどういうものであるか初めて触れる人にはわかりやすいと思ったからです。
しかし、実際にサーバーサイドスクリプトを使ってシステム開発する際はHTMLとプログラムを分離する方法が主流です。そうすることでデザインとプログラムを分離でき、後でプログラムだけ直すということもやりやすいですし、分業制でデザイン部隊とプログラム部隊に分かれて作業することもできるようになります。
※似たような話でHTMLは意味を表し、CSSが表示を表すという分業になっていたことも思い出してください。
HTMLとプログラムを分離するためにはASP.NETでは「コードビハインド」という仕組みを使います。コードビハインドを使ったシステム開発まで踏み込むともはやHTML講座の範囲を飛び出してしまうと思うので、興味のある方は別途書籍やヘルプなどでASP.NETを調べてみてください。
