webアプリとは？

まず、webサイトとwebアプリの違いについて認識するところからスタートしました。
webサイトはサーバにあるコンテンツを要求して解釈して表示するだけの静的な挙動をする反面、webアプリはクライアントからの入力に対し、その都度レスポンスを返すことでインタラクティブな挙動を示したり、アクセスするたびに表示が異なるといった動的な要素を含んだものです。最近主流の動的なwebサイトはwebアプリと同じような意味を持っています。

フレームワークとは？

「pythonで動的サイト」とかでググっていたら、どうやら動的なwebサイトはwebアプリであり、webアプリ開発にはフレームワークという便利なツールを使用するのが一般的らしいということまで分かりました。そして、フレームワークというものが、
搭載したい機能を個人が一からつくるとそれはそれは大変な手間がかかり、かつ間違うリスクも、セキュリティが十分じゃないという危険もあり、世界中の天才たちが知恵を出し合った結果が『フレームワーク』である。
ということも理解しました。

現在、pythonの主流なフレームワークとして3つ+1つあり、用途によって使い分ける必要あり。
・Django：フルカバーでがっつりwebアプリ開発したい人向け。
・Flask：使用頻度の高いセット。bottleでは物足りんけど、Djangoでは重すぎる人向け。
・bottle：最もシンプル。お弁当箱と間仕切りだけ用意しておくから、必要な機能は自分で揃えてねっていう感じ。
・Tornade：リアルタイム通信に強いフレームワーク。「WebSocket」がサポートされ、利用シーンによっては非常に高速に動作する。

bottle

公式サイトはこちら→ https://bottlepy.org/docs/dev/
あまり凝っていないデザインだけど、シンプルで決して見にくいわけではない。
今回、初のwebアプリ作成ということで必要最低限軽量のbottleで開発に取り組みました。
感想 (結論)：『1ファイルで完結するのでとても作りやすかったー!(^^)!』

#pip install bottle

ですぐ入ります。公式にサンプルプログラムがあるので、試しにHTMLに出力までやってみましょう。以下を「hello.py」で新規作成し、実行。

hello1.py

from bottle import route, run, template

@route('/hello/<name>')
def index(name):
    return template('<b>Hello {{name}}</b>!', name=name)

run(host='localhost', port=8080)

その後、ブラウザで [http://localhost:8080/hello/world] と打ち込むとHTMLでWebサイト上に "Hello world!" の文字が確認できる。

Mission>> 標準入力結果をhtmlでブラウザ上に出力したい！

まずは簡単なものから開発、ということで以下3つを作成してみた。
・標準入力した値(文字列/数値/変数)の計算結果をブラウザに出力
・パスワードとIDによるログイン画面
・お問い合わせフォーム

文字列/数値/変数計算の出力

文字列Aと文字列Bを入力後、画面遷移して結果を出力するアプリ
実装する際は、HTMLファイルを別で作って呼び出したりすることが多い (後述します)と思いますが、今回はソースコード内に直書きver.です。bottle使うとめっちゃ簡単。

test.py

from bottle import get, post, request, run, error

@get('/test')
def input_area():
    return'''
        <form action='/result' method="post">
            Input string A = <input name="a" type="text" />
            <br><br/>
            Input string B = <input name="b" type="text" />
            <input value="joint" type="submit" />
        <form>
    '''

@post('/result')
def input_area():
    a=request.forms.get('a')
    b=request.forms.get('b')
    return '<font size=5><center> Result </center></font><br><br/>'
           '<font size=5><center><p>{0}{1}</p></font></center>'.format(a,b)

@error(404)
def error404(error):
    return 'Oops, you may have the wrong URL...<br><br/>
           try again>>  <a href= "http://localhost:8080/test">\　　
           localhost:8080/test</a>'.format(error=error)

run(host='localhost',port=8080,debug=True)   #debug=Trueでデバッグ出力機能有効

ブラウザからのURL入力時ミスで、正しいURLに飛ぶようなリンク案内する親切設計にしてみました。
「 \ (バックスラッシュ)」：複数行にまたがるときにコードを一行だとみなさせるために必要

<説明>
@：「デコレ―タ」と呼ばれ、pythonのシンタックスシュガーの一つ。関数の上に @デコレータ名 を書くと、その関数に対して色んなことをしてくれる機能。内部では関数の上書き処理を行っている。詳しくはこちらで説明してくれている方がいますので→ https://techblog.recochoku.jp/2407

HTTPプロトコルのリクエストメソッド
GETメソッド：閲覧したいページを要求するときに用いる
・クエリ文字列は大きめデータ送信不可
・クエリ文字列はブラウザのURL欄に表示される
POSTメソッド：フォーム等の入力を受けるときに用いる
・大きめのデータ送信可能
・入力内容はbodyにありGETのようにブラウザのURLには表示されないが、解析すれば確認できるのでセキュリティ的に安全ではない
ERRORメソッド：エラー時に表示するときに用いる
他にもPUT,DELETEなどありますが、後述するプログラムでまたお話します。

ログイン画面作成

上述したプログラムの機能 + アカウント削除 + パスワード再設定　ができるようにしたプログラム
→まだ未完成！

from bottle import get,post,request,run,error

@get('/input')
def input_area():
    return'''
        <form action='/login' method='post'>
             ID = <input name ="id" type ="text" />
             <br><br/>
             Password = <input name ="pass" type ="text" />
             <input value ="Login" type ="submit" />
        <form>
    '''

@post('/login')
def login():
    i =request.forms.get('id')
    p =request.forms.get('pass')
    if check(p):
        return template('view/index', i = name)
    else:
        return "<p>Login failed.</p>"

    if check_login(id,password):     
        return '<font size=5><center> LOGIN SUCCESS </center></font><br><br/>\
        <font size=5><center> Welcome to my page!! </center></font>'
    else:
         return 'Oops, you have the wrong ID or Password...<br><br/>\
         Do you forget your password? >> <a href= "http://localhost:8080/renew>"\
         Click Here</a>'.format(error=error)

@get('/renew')
def renew_area():
     return'''
        <form action='/send' method='post'>
             ID = <input name ="re_id" type ="text" />
             <br><br/>
             Mail address = <input name ="mail" type ="text" />
             <input value ="renew" type ="submit" />
        <form>
    '''
@post('/send')
def send():
    r =request.forms.get('re_id')
    p =request.forms.get('mail')    
    return '<font size=5><center> Password changed... </center></font><br><br/>\
        <font size=5><left> click this URL >> </left></font>\
        <a href = "http://localhost:8080/login"> Click!!</a>'.format(r,p)

@error(404)
def error404(error):
    return '<font size=6><left> You got lost?? <br><br/>\
    Here is the login URL ->> </left></font>\
    <a href = "http://localhost:8080/login">Click!!</a>'.format(error=error)

run(host='localhost',port=8080,debug=True)

<html>
  <head>
  </head>
  <body>
    <p>Welcome to AMASON.com, {{name}} !!</p>
  </body>
</html>

まだ未完成！
ログイン成功時→ ”LOGIN SUCCESS”のような画面を出力
ログイン失敗時→ パスワードお忘れの方用のリンクを出力する画面に移行できます。
※移行後の画面はまだ作っていない。これから。

お問合せフォーム作成

Django

公式サイトはこちら→ https://www.djangoproject.com/
アメリカっぽいデザイン。一番盛りだくさんの機能が使えるフレームワーク。
Youtube,Dropbox,instagramなど海外発のアプリの多くはDjangoで作られている。
<デメリット>
・レンタルサーバーではだいたい動かない(HerokuやVPSが必要)
・日本語ソース少なめ
・Go言語などに比べると遅いらしい

Mission>> DBサーバにストックした情報をブラウザから閲覧編集したい！！

語学学習アプリ

実装したい機能-> 自分が学習した動画のリンクを貼ったり、ノート機能、カテ分けできる

Flask

公式サイトはこちら→ https://flask.palletsprojects.com/en/1.1.x/
ヨーロッパっぽいデザイン。HPが一番洗練されているので個人的に一番好きかもww
サンプルプログラム

hello3.py

from flask import Flask, escape, request

app = Flask(__name__)
@app.route('/')
def hello():
    name = request.args.get("name", "World")
    return f'Hello, {escape(name)}!'

出力結果

pythonで簡単なwebアプリ開発