Webの基本的な仕組みを知る
本書では、Pythonを使ってWebアプリケーションを開発するための手法について解説します。具体的な手法について解説する前に、Webアプリケーションを作る上で知っておくべき基本的なことがらについて解説します。
HTMLの概要
本書を読んでいる皆さんは、HTMLについてある程度知っているか、少なくとも聞いたことがあると思います。HTMLは、Webブラウザなどで表示するWebページを作るために利用します。Webアプリケーションでは、処理の結果などを表示するためにHTMLを活用します。
Webページに表示する文字の大きさや配置、画像の種類や位置などを決めるための規則があり、規則を定めているのがHTMLです。ここでいう規則は文法と言い換えてもよいでしょう。後半の「ML」はマークアップ言語(Markup Language)の略です。HTMLはPythonと同じ言語の一種なのです。HTMLには文法があり、Pythonのインデントブロックのような構造があります。
HTMLの文法
タグを使って、文字や文書に目印を付ける、ということがHTMLの基本的な文法です。>と<で文字列を囲んだものがタグです。タグには「開始タグ」と「終了タグ」の2種類があります。たとえば、HTMLの中に以下のように書かれていたとします。
:::html
<title>Python</title>
この部分は、「Python」という文字列を文書の中で特別な性質を持つように目印を付けています。「<title>Python</title>」という部分は、囲まれた文字列を文書のタイトルとして扱うようにする、一種の命令と見ることができます。<title>というタグの他にも、いろいろな意味を持つタグが用意されています。
タグは命令の一種
もう少し複雑なHTMLの例を見てみましょう。
List01 htmlSample.html
:::html
<html>
<body>
<h1>Pythonのリンク</h1>
<a href="http://www.python.org/">python.org</a>
</body>
</html>
図04 Webブラウザでの表示
<h1>タグは、囲まれた文字列を「レベル1の見出し」として目印を付ける働きがあります。見出しは目立った方がよいので、囲まれた文字列は大きく表示されます。
<a>タグの中を見てください。タグの中には別の文字列が見えます。これはアトリビュートと呼ばれる部分です。hrefはアトリビュート名と呼ばれています。<a>タグはハイパーリンクを埋め込むために利用します。アトリビュートにはリンク先のURLを指定します。
<a>タグはリンクを埋め込むという命令、ととらえることができます。アトリビュートを使うと、この命令に意味を追加することができます。タグが命令だとすると、アトリビュートは引数のようなものだと言えます。
タグの構造
このHTMLでは、タグが入れ子になっています。<html>タグが全体を囲っていて、その下にさらに<body>タグがあります。ある要素が他の要素を囲むことによって、タグ同士が親子関係を持ちます。<h1>タグ、<a>タグは<body>タグの子供に当たります。
このように、タグで目印を付けて文書に意味を持たせるのがHTMLの書き方の基本です。タグをどのように書くべきかを定義した文法のことをHTMLと呼ぶのです。
Webでユーザインターフェースを作る
HTMLには基本的なUIを作るための命令(タグ)が用意されています。メニューやボタンなど、一般的なアプリケーションでよく見かけるUIはほとんど揃っています。アプリケーションにとってUIは重要な要素です。Webアプリケーションを作る場合は、HTMLを使ってUIを作ります。
WebアプリケーションのUI― フォーム
HTMLにはフォーム(form)と呼ばれる仕組みが備わっています。Webアプリケーションで利用するUIはフォームを活用して作ります。
簡単なフォームの例を見てみましょう。
List02 formSample.html
:::html
<html>
<body>
<form>
ニックネーム :
<input type="text" name="nickname" /> 好きな言語 :
<select name="faborite_language">
<option>Python</option>
<option>Ruby</option>
<option>Perl</option>
<option>PHP</option>
</select>
<input type="submit" value="送信" /> <input type="reset" value="取り消し" />
</form>
</body>
</html>
図05 Webブラウザでの表示
このHTMLの中には、<input>タグや<select>タグが見えます。このタグが、Webページ上にUIの部品を表示するための命令になっています。<input>タグには、typeというアトリビュートが見えます。このアトリビュートに指定する文字列によって、違った種類のUIが表示されています。また、ボタンのタイトルはvalueアトリビュートとして指定していることに注目してください。このように、タグごとに利用するアトリビュートが決まっているのです。
<select>タグはメニューを表示するための命令です。このタグは、子供として<option>タグを持っています。<option>タグで囲まれた文字列はメニューの項目となります。
UIの部品を表示しているタグには、nameというアトリビュートが付いています。このアトリビュートは、UIの部品を特定するために利用する重要なアトリビュートです。
<form>タグはUIの部品全体を囲む形で記述します。UI部品の親となるのが<form>タグです。 Webアプリケーションで実際に利用する<form>タグには、アトリビュートを何種類か記述します。アトリビュートの種類や意味についてはのちほど解説します。ここでは、HTMLを使ってUIを表示するための方法について、概要を理解できればOKです。
HTMLを使うことによってアプリケーションの2つの重要な要素を作ることができることを分かっていただけたでしょうか。フォームを使ってUIを作り、結果をHTMLとして表示することで、アプリケーションの基本的な機能を満たすことができるのです。
