今回は，Pythonを使ってWebアプリケーションを作るためにあたって，基礎内容について話したいと思います．

実行環境

OS：MasOS High Sierra
MacBook Pro (13-inch, 2017, Four Thunderbolt 3 Ports)
プロセッサ：3.5 GHz Intel Core i7
メモリ：16 GB 2133 MHz LPDDR3

Python 3.6.4
Chromeバージョン: 71.0.3578.98（Official Build）（64 ビット）

アプリケーションとは

アプリケーションは色々な種類があります．
例えば，ワープロや表計算ソフトの様な高性能なアプリケーションとメモリアプリケーションや計算機の様なシンプルなアプリケーションがあります．

また，アプリケーションは必ず入力と出力があります．
入力：人間が指示を与えるための仕組み
出力：指示に従ってソフトウェアが処理し，結果を繰り返す

次は，簡単なWebアプリケーションの構造について話したいと思います．
Webアプリケーションの言語は色々な種類（フロントエンド，バックエンド，データベース）があります．

フロントエンドとは，ユーザーと直接データのやり取りを行う要素のことで，Web制作ではWebブラウザ側（クライアント側）を指しています．
バックエンドとは，フロントエンドから送られてきた情報をもとに，データベースやAPIなどの情報と連携して，フロントエンドに情報を返す部分を指しています．（ユーザから見えない後ろの部分からバックエンド，もしくはサーバーエンドとも呼ばる．）

フロントエンド：HTML，CSS，JavaScript ..
バックエンド：Python，Ruby，JavaScript，PHP ..
データベース：MySQL，Postgresql ..

アプリケーションとユーザインターフェース(UI)

アプリケーションが共通して持つ特徴として人間が指示を与えるための仕組みがあると書きました．
この仕組みのことをユーザインターフェース(User Interfase)と呼びます．または，英単語の頭文字を取ってUI(ユーアイ)とも呼ばれます．
アプリケーションに表示されるボタンやメニューなどはUIの一種です．
ワープロのウインドウには，文字を打ち込む領域，文字の大きさや割り付けを変えるボタンなど，多くのUIが配置されています．

UIや，UIによる操作結果をどのように表示するかによってアプリケーションを分類することがあります．
コンピュータの画面(グラフィックス画面)を直接操作して表示するUIをグラフィカル・ユーザインターフェース(GUI)と呼びます．
GUIを使ったネイティブアプリケーションは，一般的にOSに密接なつながりを持っています．特にグラフィックス機能を活用してUIを表示するための手法は，OSによって異なります．このため，Windows用に作ったネイティブアプリケーションをMacやLinuxで動かすことはできません．多くの場合，アプリケーションを複数のOSで動かそうとすると，それぞれのOSで動く別のアプリケーションを作らなければならないのです．←個人的には面倒いと感じる！

しかし，Webアプリケーションの特徴はどこでも動くということです．Webブラウザとインターネットさえあれば，WindowsやMac，Linux，または携帯電話などいたることろで利用できます！

また，Webアプリケーションで実現できる機能は，ネイティブアプリケーションに比べて制限があると言われてきました．しかし近年，Ajaxのような技術によってWebアプリケーションの自由度はとても高まっています．どこでも動き，高機能なアプリケーションを作ることができるWebアプリケーションに，多くの開発者が注目しています．

HTML（HyperText Markup Language）

HTMLは，Webブラウザなどで表示するWebページを作るためで使われています．Webページに表示する文字の大きさや配置，画像の種類や位置などを決めるための規則です．

文法について簡単に紹介します．
タグを使って，文字や文書に目印をつけます．
<と>を使って文字列を囲んだものがタグと呼ばれます．
また，タグには「開始タグ」と「終了タグ」の2種類があります．
例えば，<title>Python</title>があります．囲まれた文字列を文書のタイトルとして扱います．<title>は開始タグ，</title>は終了タグ．

タグの構造

htmlSample.html

<html>
  <body>
  <h1>Pythonのリンク</h1>
      <a href="http://www.python.org/">python.org</a>
  </body>
</html>

htmlSmaple.htmlでは，タグが入れ子になっています．<html>タグが全体を囲っていて，その下にさらに<body>タグがあります．
ある要素が他の要素を囲むことによって，タグ同士が親子関係を持つこととなります．<h1>タグ，<a>タグは<body>タグの子供に当たります．

Webでユーザインターフェースを作る

HTMLには基本的なUIを作るための命令(タグ)が用意されています．メニューやボタンなど，一般的なアプリケーションでよく見かけるUIはほとんど揃っています．
アプリケーションにとってUIは重要な要素です．Webアプリケーションを作る場合は，HTMLを使ってUIを作ります．

HTMLにはフォーム(form)と呼ばれる仕組みが備わっています．Webアプリケーションで利用するUIはフォームを活用して作ります．簡単なフォームの例を見てみましょう．

formSample.html

<html>
<body>
  <form>
    <input type="text" name="name" /> 好きな言語 :
    <select name="language">
      <option>Python</option>
      <option>MySQL</option>
      <option>JavaScript</option>
    </select>
    <input type="submit" value="送信" /> <input type="reset" value="リセット" />
  </form>
</body>
</html>

このHTMLの中には，<input>タグや<select>タグが見えます．このタグが，Webページ上にUIの部品を表示するための命令になっています．
<select>タグはメニューを表示するための命令です．このタグは，子供として<option>タグを持っています．<option>タグで囲まれた文字列はメニューの項目となります．

UIの部品を表示しているタグには，nameというアトリビュートが付いています．このアトリビュートは．UIの部品を特定するために利用する重要なアトリビュートです．

<form>タグはUIの部品全体を囲む形で記述します．UI部品の親となるのが<form>タグです．Webアプリケーションで実際に利用する<form>タグには，アトリビュートを何種類か記述します．アトリビュートの種類や意味についてはのちほど解説します．ここでは，HTMLを使ってUIを表示するための方法について，概要を理解できれば大丈夫です．

今回の「PythonでWebアプリケーション（1）」は以上で終わります．
読んでいただいてありがとうございます．

次回予告：HTTPの概要，PythonでWebサーバを作る