Posted at

PythonでWebアプリケーション(1)

今回は,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サーバを作る