【Python Flask】初心者プログラマーのWebアプリ#3 【Javascript導入】【画像表示】【CSS適用】

# 今回のPython Flaskフレームワークで作るもの
今回はFlaskで静的ファイルを使用する方法について書きます。
前回はHTMLテンプレートを使って表示を作りました。簡単なデータ埋め込みです、表示を動的に作成していました。
今日扱うのは、「静的ファイル」を使ってページ作成です。静的ファイルは

- 画像ファイル
- CSS
- JavaScript

こんなものがあります。WEBページを作るときには必須の要素ですがファイルそのものを配置して、Flaskではとくに処理しないで表示するだけという、中身のデータが変化しないでそのまま使うようなものを静的ファイルって言います。

![html,js,css.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260345/4890a8f2-c20c-f9db-49e1-7ee6a89a84f7.png)

# :pushpin: Pythonで作るFlaskアプリ記事一覧

|  | 内容|
|:----:|:----:|
|**part1**|[簡単なページ作成](https://qiita.com/Bashi50/items/30065e8f54f7e8038323)|
|**part2**|[HTMLテンプレート表示](https://qiita.com/Bashi50/items/9bb5ca4a519c17caf475)|
|**part3**|**"画像" "CSS" "Javascript"実装← ココ** |
|**part4**|[フォーム送信](https://qiita.com/Bashi50/items/457d3b8a2328b2b1d012)|
|**part5**|[データベースの値取得・更新](https://qiita.com/Bashi50/items/e3459ca2a4661ce5dac6)|

## ソースコード
この章のコードは以下です。確認やコピペでどうぞ

https://github.com/kohishibashi/flask/tree/part3

# 0. 静的ファイルをFlaskで扱うための準備
では、静的ファイル入れるために`static`フォルダを作ってください。
その後、今回は画像、CSS、JavaScriptを使うので画像を入れるための`images`フォルダを作成しました。

```
$ mkdir static
$ cd static
$ mkdir images 
```

そして、今回私は`images`フォルダの中に`flask-logo.png`と言う名前のファイルを入れました。
別に画像ならなんでもいいので、好きな画像ファイルを配置してください。

# 1. 画像の表示をPython Flaskで
第一引数に`'static'`を指定、`filename`に先ほど作成した`static`ディレクトリ以降を記述すればOKです。

```/Users/dev/flask/testapp/templates/testapp/index.html
.
.
<div class="container">
    <h1>index.html表示してます</h1>
    <img src="{{ url_for('static', filename='images/flask-logo.png') }}">
.
.
```
![スクリーンショット 2021-11-30 0.36.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260345/a98ad518-5aee-3d89-782f-0f627640b5be.png)

表示されました。
url_forはリンクとか、ファイルのディレクトリ先を作成する関数。なので直に以下のURL

> http://127.0.0.1:5000/static/images/flask-logo.png

アクセスすると普通に画像だけ表示されます。
`http://127.0.0.1:5000/static/images/flask-logo.png`
こんなURLをFlaskで作ってHTMLに埋め込んでいるだけと言うことです。


# 2. FlaskでCSS適用
[前回](https://qiita.com/Bashi50/items/b9666030a058795c7dd8)すでにbootstrap使っているので不要かもしれませんが、追加の方法を書きます。
手順は画像の追加方法とほぼ同じです。

まずcssファイルを配置するためのディレクトリを作成して、さらにCSSファイルをその中に作成します。

```
$ mkdir css
$ touch css/style.css
```

```/Users/dev/flask/testapp/static/css/style.css
h1 {
    color: blue;
    border-bottom: double 6px #87CEFA;
}
```
お試しなのでわかりやすいようにh1の色と線を変更してみました。
このCSSファイルを読み込めばいいだけです。


```/Users/dev/flask/testapp/templates/layout.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/>
    <title>テストWebアプリ</title>
</head>
```

読み込んでいるのは
`{{ url_for('static', filename='css/style.css') }}`
参照先を`url_for()`で作成しているだけです。

[前回](https://qiita.com/Bashi50/items/9bb5ca4a519c17caf475#2-%E5%85%B1%E9%80%9A%E9%83%A8%E5%88%86%E3%82%92%E5%88%87%E3%82%8A%E5%87%BA%E3%81%99)共通で使用するテンプレートを作成しました。

今回のCSSは今後作成するどのページでも使用するようにしてみたいので、`layout.html`に読み込みを追加しました。

画像の時の違いは`link`タグにして`href`に変えただけです。
ここら辺はPythonでなくHTMLの話なのでいまいちわからない方はHTMの話ですね。

![スクリーンショット 2021-11-30 0.49.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260345/4df28645-d7c3-ee46-68e0-f099b6eb3458.png)

cssを指定した`h1`がちゃんとダサくなりましたのでちゃんとスタイルが適用されていますね。

# 3. FlaskでJavaScriptを配置
これも`url_for()`を使って該当ファイルを参照すればいいので同じです。
フォルダを作成して、JavaScriptの処理を記述するのは`sample.js`にしました。

```
$ mkdir javascript
$ touch javascript/sample.js
```

JavaScriptの学習はメインでないので以下をコピペで良いと思います。

```/Users/dev/flask/testapp/static/javascript/sample.js
window.onload = function() {
    var changeColor = function() {
        var e = document.getElementById('test');
        e.style.color = 'red';
        console.log("書き換えテスト")
    }
    setTimeout(changeColor, 5000);
}
```

idが「test」の要素を5秒後に赤くしてるだけです。
追加するのは

- 読み込みの記述
- `id="test"`
    - idはJavaScriptの処理で今回は使っているので


読み込みは`layout.html`で行っても良いですが、全てのページで処理が起こって欲しくはないので`index.html`に追加しました。

```/Users/dev/flask/testapp/templates/testapp/index.html
{% extends "layout.html" %}

{% block content %}
<div class="container">
    <h1>index.html表示してます</h1>
    <img src="{{ url_for('static', filename='images/flask-logo.png') }}">
    <p id="test">{{ my_dict.insert_something1 }}</p>
    <p>{{ my_dict.insert_something2 }}</p>
    
...

</div>
<script src="{{ url_for('static', filename='javascript/sample.js') }}"></script>
{% endblock %}
```

`script`タグを読むのはHTMLのルールと同じ。どこでもいいです。

今回は`{% endblock %}`の前だと`body`タグ終わり直前なので(`layout.html`も参照)ここで読み込むようにしました。
もしくは、`layout.html`の`<head>`の中でJSファイルを参照しても同じ結果は得られるはずです。

画面を確認してみましょう。

![スクリーンショット 2021-11-30 0.58.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260345/81a34505-94e8-7de2-732e-fb13cdcbd41b.png)


5秒後に文字が赤くなったらOKです。


# まとめ
今回URLのリンク作るだけなので中身が薄い気がしますが、、、
簡単すぎるからか、公式のQuickstartにさらっとしか書いてなかったのでお役に立てればなと思います。

# :pushpin: Pythonで作るFlaskアプリ記事一覧

|  | 内容|
|:----:|:----:|
|**part1**|[簡単なページ作成](https://qiita.com/Bashi50/items/30065e8f54f7e8038323)|
|**part2**|[HTMLテンプレート表示](https://qiita.com/Bashi50/items/9bb5ca4a519c17caf475)|
|**part3**|**"画像" "CSS" "Javascript"実装← ココ** |
|**part4**|[フォーム送信](https://qiita.com/Bashi50/items/457d3b8a2328b2b1d012)|
|**part5**|[データベースの値取得・更新](https://qiita.com/Bashi50/items/e3459ca2a4661ce5dac6)|

## ソースコード
この章のコードは以下です。確認やコピペでどうぞ

https://github.com/kohishibashi/flask/tree/part3