人工知能○ 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 |
| 単体テスト編 | Django unittestで単体テスト |
今回の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を編集。
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項目を追加。
STATIC_URL = '/static/'
STATICFILES_DIRS =[
STATIC_DIR,
]
STATICFILES_DIRSはDjangoが静的ファイルを探すディレクトリを指定するという意味です。今回はやりませんが、ファイルが増えたので種類で分けたいとかなったときに複数のディレクトリを指定できます。
画像ファイルをフォルダに入れる
ファイル名は何でもいいですが、test_img.pngという画像ファイルを
C:\Users\○○○\django\testproject\static\images\test_img.png
いれます。
これですでにrunserverして
にアクセスすると
画像は表示されます。
あとはhtmlテンプレートに入れていくだけ。
index.html編集してトップページに画像を表示
前回作った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装飾してみます。
h1 {
color: blue;
border-bottom: double 6px #87CEFA;
}
index.htmlにCSSを読み込む記述を追加します。
<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
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"も足してます。
<!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