人工知能○　Webアプリ情報X　Python

第三回目PythonのWebアプリケーションフレームワーク「Django」の初心者プログラマー用のwebアプリ作成チュートリアルです。
>>前回記事

人工知能、ディープラーニング、機械学習…
せっかく画像認識機械学習、自然言語系の機械学習が完成してもアプリで使えなければ意味がないです。

Pythonで人工知能作ったのならどうせならPythonでアプリ作って誰かに使ってもらったり、アピールに使おう！
っていうのがこの一連の記事の趣旨。その3回目。

ソースコード

この章のコードは以下です。確認やコピペでどうぞ
>> part3 code

静的ファイルを使う

今回はDjangoを使ってwebページに

画像を埋め込む
CSSを適用して見た目をきれいにする
JavaScriptを導入

していこうと思います。

このような、画像, CSS, JavaScriptファイルはDjangoではデータを埋め込むために、Django(Python)で、
あれこれ加工しないでそのまま使用します。このようなファイルを「静的ファイル」っていうのですが、その使い方を試してみましょう。

内容が古くなったのでDjango 3で記事更新しました。 updated: 2021/09

Pythonで作るDjangoアプリ記事一覧

	内容
part1	簡単な文字表示アプリを作る
part2	HTMLテンプレート表示
part3	"画像" "CSS" "Javascript"実装 ← ココ
part4	フォーム送信
part5	データベースの値取得・更新
番外編	Django AWS デプロイ
APIサーバー編	Django REST frameworkとReact #4

今回のPython Djangoフレームワークで作るもの

画像の表示
CSS適用
javascript

これらをWebアプリで使うための基礎。全部staticフォルダに入れて作っていきます。フォルダを作ってください。
C:\Users\○○○\django\testproject\static

蛇足かもですが、staticって静的とか静電気とかいう意味あります

画像の表示をPython Djangoで

まず、Djangoで画像を埋め込む方法を試します。さっき作ったstaticの中にimagesフォルダ作成
C:\Users\○○○\django\testproject\static\images

今回はアプリケーションフォルダ直下に作っていこうかと思います。
の下にstaticのディレクトリ指定するためにsettings.pyを編集。

testproject/testproject/settings.py

BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_DIR = Path.joinpath(BASE_DIR, 'static')

何しているかというとBASE_DIR は
C:\Users\○○○\django\testproject

なんですけど、これに\static足して
C:\Users\○○○\django\testproject\static
にしているだけです。

「BASE_DIR」「STATIC_DIR」はアクセスするパスを保存しているということです。 Djangoアプリにおける基礎というかルートディレクトリを「BASE_DIR」に定数として入れておく。画像とかの静的ファイルは「STATIC_DIR」ディレクトリに入れますよー。ということで定数に入れてます。

settings.pyの最下部にSTATICFILES_DIRS項目を追加。

testproject/testproject/settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS =[
    STATIC_DIR,
]

STATICFILES_DIRSはDjangoが静的ファイルを探すディレクトリを指定するという意味です。今回はやりませんが、ファイルが増えたので種類で分けたいとかなったときに複数のディレクトリを指定できます。

画像ファイルをフォルダに入れる

ファイル名は何でもいいですが、test_img.pngという画像ファイルを
C:\Users\○○○\django\testproject\static\images\test_img.png
いれます。

これですでにrunserverして

http://127.0.0.1:8000/static/images/test_img.png

にアクセスすると

画像は表示されます。
あとはhtmlテンプレートに入れていくだけ。

index.html編集してトップページに画像を表示

前回作ったindex.htmlに足していきます。

testproject/webtestapp/templates/webtestapp/index.html

<!doctype html>
{% load static %}
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>テストWebアプリ</title>
  </head>
  <body>
    <h1>index.html表示してます</h1>
    <img src="{% static "images/test_img.png" %}" alt="表示できません">
    <p>{{ insert_something }}</p>
    <p>作成者は<b>{{ name }}</b>です。</p>
.
.
.
  </body>
</html>

{% load static %}が新しく出てきています。
静的ファイルを使うテンプレートでこの記述をします。settings.pyに記述した静的ファイルの参照ディレクトリを読み込めます。
あとは普通のHTMLタグの参照先ディレクトリの箇所だけ普通のHTMLと違います。最初に設定したパスを埋め込む処理です。
<img src="{% static "images/test_img.png" %}" alt="表示できません">

画像を埋め込むことができました！
ついでに前回も書きましたが、↓

{{ }} はデータをテンプレートの中に埋め込んでほしい(画面に表示したい)ときに使う
{% %}は、何かしら計算・処理をしてほしい(※画面に出力するのではない)ときに使う

CSSを適用

WEBアプリでCSSを使わないようなページはもう存在しないので、CSSの適用方法を試してみましょう。
staticフォルダの中にcssフォルダを作成してCSSファイル作成。
C:\Users\○○○\django\testproject\static\css\style.css

テキトウにh1装飾してみます。

testproject/static/css/style.css

h1 {
  color: blue;
  border-bottom: double 6px #87CEFA;
}

index.htmlにCSSを読み込む記述を追加します。

testproject/webtestapp/templates/webtestapp/index.html

  <head>
    <meta charset="utf-8">
    <title>テストWebアプリ</title>
    <link rel="stylesheet" href="{% static "css/style.css" %}"/>
  </head>

これも画像と同じように普通のHTMLの書き方で参照先だけ埋め込む感じです。

JavaScriptをDjangoで使う

画像、CSSと読み込み方がほぼ同じで、参照のところだけ普通のHTMLと違います。
javascriptフォルダを作成してjsファイル作成します。
C:\Users\○○○\django\testproject\static\javascript\sample.js

testproject/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"も足してます。

testproject/webtestapp/templates/webtestapp/index.html

<!doctype html>
{% load static %}
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>テストWebアプリ</title>
    <link rel="stylesheet" href="{% static "css/style.css" %}"/>
    <script src="{% static 'javascript/sample.js' %}"></script>
  </head>
  <body>
    <h1>index.html表示してます</h1>
    <img src="{% static "images/test_img.png" %}" alt="表示できません">
    <p>{{ insert_something }}</p>
    <p>作成者は<b id="test">{{ name }}</b>です。</p>
    <h2>タイトル表示</h2>
...

Javascriptで色変えたいので該当箇所のindex.htmlを少し変更してます。
<p>作成者は<b id='test'>{{ name }}</b>です。</p>

「Bashi」を色変えただけです。

おわりに

これで超最低限のアプリは作れるかもしれないですね。でも、ユーザーから情報をもらって処理をする処理も絶対といっていいほど使うので、第4回はフォーム追加しようと思います。

一連の記事

	内容
part1	簡単な文字表示アプリを作る
part2	HTMLテンプレート表示
part3	"画像" "CSS" "Javascript"実装 ← ココ
part4	フォーム送信
part5	データベースの値取得・更新
番外編	Django AWS デプロイ
APIサーバー編	Django REST frameworkとReact #4

参考

この章のコードは以下です。確認やコピペでどうぞ
>> part3 code

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

人工知能○ Webアプリ情報X Python

ソースコード

静的ファイルを使う

Pythonで作るDjangoアプリ記事一覧

今回のPython Djangoフレームワークで作るもの

画像の表示をPython Djangoで

画像ファイルをフォルダに入れる

index.html編集してトップページに画像を表示

CSSを適用

JavaScriptをDjangoで使う

おわりに

一連の記事

参考

人工知能○　Webアプリ情報X　Python