そうだ。Web アプリ作ってみよう

こんにちは。
なんか作りたいなー

#Hello world を表示する page をつくろう。
とりあえず以下を実行

```flask_install.py
pip install Flask==1.1.1
```

よし、コードを書こう。
っつーか、パクった、適当に。

```helloWorld.py
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
    return "Hello World,AKpirion"
if __name__=="__main__":
    app.run(host="0.0.0.0")
```

実行すると、コンソール上に以下のコメントが
出てくる

```comment.py
* Running on http://0.0.0.0:5000/(Press CTRL+C to quit)
```

ほう。意気揚々とブラウザに打ち込んだが error になる。
なぜ？　理由は以下。

https://teratail.com/questions/75773

っと言うことで **http://localhost:5000/** をタイプする
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/77cfd474-b9b3-b127-3c55-1878b59f21fe.png)

おおー!! 皆さんもやってみてください。
#Hello World 以外を HTML で表示させてみよう
まずは、以下を斜め読み

https://qiita.com/oliva/items/7ae5de21307d101b4759

なるほど、やってみよう。

```MyPro.py
from flask import Flask,render_template

app = Flask(__name__)
@app.route('/')
def index():
    username="AKpirion"
    age=36
    hobby="プログラミングと その他 勉強"
    word = "意志あるところに道は開ける"
    return render_template("index.html",\
                           username=username,\
                           age=age,\
                           hobby=hobby,\
                           word=word)

if __name__=="__main__":
    app.run(host="0.0.0.0")
```

指示通りに html 用の template 用のフォルダを作って以下を用意。

```index.hmtl
<html><body>
    <h3>{{username}}さんの紹介</h3>
    <div>
        <p>年齢は,{{age}} 才です.</p>
        <p>趣味は,{{hobby}} です.</p>
        <p>座右の銘は,{{word}} です.</p>
    <div>
</body></html>
```

以下、実行結果。
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/2d3bec17-ac41-38be-5737-3863516ebf17.png)

なんか味気ないなー。

#画像を貼ってみよう
以下のページに大変お世話になった。感謝

https://qiita.com/5zm/items/db6acb96594e0ff7c549

```app.py
from flask import Flask,render_template

#pass view
#   testpage <=フォルダ
#    |=>app.py
#        templates <=フォルダ
#         |=>index.html
#             images <=フォルダ
#              |=>car.jpg


#app = Flask(__name__,static_folder='C:/work/web/testpage/templates/images')#絶対パス
app = Flask(__name__,static_folder='templates/images')#相対パス
@app.route("/")
def index():
    return render_template("index.html")
if __name__=="__main__":
    app.run(host="0.0.0.0")
```

叩いた html はスーパーシンプル

```index.html
<html><body>
    <h3>akp test</h3>
    <img src="images/car.jpg" alt="test"/>
</body></html>
```

以下、実行結果。

![実行結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/578e6c6e-5148-2db3-1fc8-8558e885b6ff.png)

なるほど。面白かった。

#CSS も混ぜてみよう
以下を斜め読みして、コードをいじってみた。

https://www.nblog09.com/w/2020/12/24/flask_url_for/


```app.py
from flask import Flask,render_template

#pass view
#   testpage
#   |=>app.py
#      templates
#      |=>index.html
#      static
#       |=>car.jpg
#          index.css

app = Flask(__name__)
@app.route("/index")
def index():
    return render_template("index.html")
if __name__=="__main__":
    app.run(host="0.0.0.0")
```

```index.html
<html><body>
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='index.css') }}">
    <h3>akp test</h3>
    <img src="{{ url_for('static', filename='car.jpg') }}">
</body></html>
```

```index.css
h3 {
    background-color: blue;
    color: white;
}
```

以下が実行結果

![image_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/f441844a-2c67-8700-3f21-889af4caf3be.png)

取りあえずテキストの装飾ができた。よかった。

#問い合わせ用のテキストボックス追加しよう
以下のページを斜め読み。

https://asahi-net.jp/support/guide/homepage/0020.html

https://www.t-com.ne.jp/service/homepage/cgi/sample_basic.html#_ga=2.917876.43624955.1633583972-1017896532.1633583972

なるほど、書いてみよう。
HTML を修正するだけで行けそうです。

```index.html
<html><body>
    <!-- formタグによるフォームメールCGI呼び出し -->
    <form action="http://www2.tba.t-com.ne.jp/cgi-bin/form.cgi" method="post">
    <!-- 入力の項目の開始 -->
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='index.css') }}">
    <h3>akp test</h3>
    <img src="{{ url_for('static', filename='car.jpg') }}">
    <br>
    <input type="text" name="comment" size="30">
    <!-- フォームメールの送信先メールアドレス -->
    <input type="hidden" NAME="tomail" VALUE="example@gmail.com">
    <!-- フォームメールの送信されるメールの件名 -->
    <input type="hidden" NAME="tosub" VALUE="from AKP">
    <br>                             <!--↓以下の記述がないと送信時に文字化けする-->
    <input type="submit" VALUE="送信" onclick="document.charset= 'Shift-JIS';">
    </form>
    
</body></html>
```

さぁ、やってみよう。

![image_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/5f2c6d75-6c5b-e50c-76ea-7db2ed872e18.png)
コメント欄が出てきたので Go!Go! と入れてみた

![image_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/938eb54f-3d82-461b-61af-a096af8f1850.png)
送信ボタンを押すと確認画面が出てきた。勿論 oK を押す。

![image_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/a0a9ccb9-0ca7-75aa-5fb0-2bac5e466004.png)
どうやら完了したらしい。

![image_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/c0a448ca-5669-30e2-9ddc-3a839c9529be.png)
メールボックス見たら迷惑めーるだったけど、受信できた。
以下のメール送信時の文字化け対策も貼っておきます、きっと役に立つと思います。

http://blog.thinkreatesoft.net/notes/memos/formmail-charactererror.html

#背景を入れてみよう

挿入のためには、ファイルのパスの概念をしっかりさせた方がいい。

https://www.nblog09.com/w/2020/12/24/flask_url_for/

https://techacademy.jp/magazine/23884

あとは CSS の書き方ができれば挿入は簡単

https://www.sejuku.net/blog/52779

https://www.sejuku.net/blog/55771

こんな風に背景の画像を固定して page のスクロールとかも可能だ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/c5960873-094a-e334-7ab8-dcf7ba800762.png)

#味気なくてもいい。まずは機能を拡張しよう
素晴らしい記事を見つけた。

https://note.com/junyaaa/n/n9eab953c73c9

絶賛、解析中。。。