Flask入門③～画像の表示～

##はじめに
前回の続き。やっぱり文字だけではなく画像も扱いたいと思ったので、色々いじっていきます。

https://qiita.com/dem_kk/private/39bb718ea92126f3d6e7

##環境
* windows10
* flask2.0.2
* python3.8.10

##画像の表示

下記のようなファイル階層にしています。htmlファイルを利用して画像を読み込むため、templatesの下にimageディレクトリを作成しています。

```html
directory/
|__flask～～.py
|__templates/
      |__index.html
      |__images/
            |__～～.png
```

画像を読み込むときは、パスをきちんと通さないといけないとのことで、imgで設定しています。

```html:index.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
</head>
<body>
<title>Flask練習</title>

<font color="red"><h2>りんご</h2><font></span>
	<img src="images/apple.png"> #画像のデータ
</body>
</html>
```
pyファイルではどこのフォルダから、画像を読み込むかの指定をしています。

```python:flask1.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask, render_template

app = Flask(__name__, static_folder='./templates/images')

@app.route('/')
def index():
    return render_template('index.html') #htmlファイルの表示

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/aef7dcd1-bd04-66f5-20cb-4fa10e314d40.png)

無事に表示できました。ただ・・・あきらかにでか過ぎる！
もっとバランスよくしたいので、画像サイズと位置の変更も実施することにします。

###画像の変更
htmlファイル内でサイズと座標を指定します。
座標はひとまずstyleタグで設定していますが、本来はCSSで設定した方がいいらしいですね(でもここでは簡単な方に逃げる)

```html:index.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
</head>
<body>
<title>Flask練習</title>

<font color="red"><h2>りんご</h2><font></span>
    <div style="position:absolute; top:30px; left:130px"> 
	<img src="images/apple.png" alt="写真" width="299" height="257">
    </div>
</body>
</html>
```
これで再度pyファイルを実行すると、写真が変更されているのがわかります。
ちゃんと小さくなっていて、少し右上に配置されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/dce0f429-233d-2c3c-899d-0a70717377f5.png)

##応用～もう少しWebページに近づけてみた～

ただ画像だけ表示するのは味気ないので、頑張ってWebページのようなものを作ってみました。
カスタマイズするにはCSSから逃れられなかったので、苦しみながらなんとか設定しました。ファイルの階層は下の通りです。Flask内でCSSを適用するには、staticディレクトリからcssファイルを読み込必要があるのでこの構成です(なかなか難しい)。

```html
directory/
|__flask～～.py
|__templates/
      |__index.html
|__static/
      |__style.css
      |__images/
            |__～～.jpg(png)
```

まずはCSSファイルの作成から。・・・しんどかったです。

```css:style.css
body {
  background-color:#CCFFFF;
}

h1 {
  border-bottom: 40px solid #000055;
  width: none;
  text-shadow: 1px 2px 5px #333;
}

.cover {
  width: 800px;
  height: 534px;
  background-image:url("images/star.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}

div.radius1 {
  border: 5px solid #333333;
  text-align: center;
  font-size: 40pt;
  text-shadow: 1px 2px 5px #333;
  line-height:0px;

 
 border-radius: 10px;
 margin-right: 10px;
 width: 500px;
 height: 100px;
 padding: 10px;
 display: inline-block;
 position:relative;
 		bottom:500px;
		left:900px;
 background: #FFFFFF
 
}

div.radius2 {
 border: 5px solid #333333;
 text-align: center;
 font-size: 40pt;
 text-shadow: 1px 2px 5px #333;
 line-height:0px;

 
 border-radius: 10px;
 margin-right: 10px;
 width: 500px;
 height: 100px;
 padding: 10px;
 display: inline-block;
 position:relative;
 		bottom:200px;
		left:355px;
 background: #FFFFFF 
}
```
htmlファイルはあまり変わりがないです。

```html:index.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<link rel="stylesheet" href="/static/style.css">　#CSS読み込み用
</head>
<body>
<title>Flask練習</title>

<h1>Example Sheat</h1>

<div class="cover"></div>

<div class="radius1">
<p>練習用のタブ1</p>
</div>
<div class="radius2">
<p>練習用のタブ2</p>
</div>

</body>
</html>
```
pyファイルは全く変更していないので、先ほどのファイルのまま実行します。
さあ、どうなるかな・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/08581074-9eac-193e-d633-da7c3729a2c0.png)

お？何かWebページっぽいレイアウトになったぞ。
デザイン性はともかく、目的は達成したのでここで終わることにします。

##まとめ
* 画像を読み込んで表示することができた
* CSSを使うことでデザイン性もカスタマイズ可能
* **FlaskよりhtmlやCSSの設定がつらかった(切実に)**

気力を使い果たしたので続けるかは未定です。