#この記事について
Djangoのテンプレートの拡張子は「.html」です。
Ajaxを使えば組み込みタグは不要になり、Webデザイナーの編集作業が独立して出来ると期待したんですが、静的コンテンツの組み込みタグ（例:<img src="{% static 'myapp/a.jpg' %}" alt="My image" />）は外せないのでそのままではダメと悟りました。
Chrome拡張のJavaScript挿入機能を使い、とりあえず 画像とcssのリンクを、staticタグから通常のリンクに置き換える手法を考えてみました。
#目的
テンプレート内のstaticファイル用の組み込みタグを、ブラウザ拡張で通常のリンクに変換する。ブラウザの「ファイルを開く」から表示しても変換されるようにする。
BEFORE:<img src="{% static 'myapp/a.jpg' %}" alt="My image" />
AFTER: <img src="../../static/myapp/a.jpg" alt="My image">
<!DOCTYPE html>
<html lang="en">
<body>
<!-- {% load static %} -->
<img src="{% static 'myapp/a.jpg' %}" alt="My image" />
</body>
</html>
#環境
- Windows7 64bit
- Python3.6
- Django 1.11
- Google Chrome 62.0
#設定手順
ScriptAutoRunnerをインストール
Chromeで拡張機能「ScriptAutoRunner」をインストールする。
ScriptAutoRunner - Chrome ウェブストア
他のブラウザのJavaScript挿入機能でも同様に可能だと思いますが、ローカルファイルにも適用できるタイプのものは限られるようです。
ローカルファイルへのアクセスを許可
Chromeの設定→その他ツール→拡張機能より拡張機能の一覧を表示、ScriptAutoRunnerのチェックボックス「ファイルのURLへのアクセスを許可する」をチェック。
これでローカルファイルでもJavaScriptが実行されます。
ScriptAutoRunnerに変換コードを設定
使い方はこちらの記事が詳しいです。
任意のサイトで任意のJavaScriptを自動実行させるChrome拡張
ScriptAutoRunnerで遊んでみる（フォームをいろいろ）
ScriptAutoRunnerの設定画面を表示し、「>」ボタンで追加エントリを表示、以下のコードを入力する
var re = new RegExp("{% static '(.*)' %}")
a = document.getElementsByTagName("*")
for (var i = 0; i < a.length; i++) {
src = a[i].getAttribute("src")
if (src && re.test(src)){
new_src = src.replace(re, '../../static/$1')
a[i].setAttribute("src", new_src)
}
}
最後にプラグのアイコンをクリックして有効化する。
テンプレートファイルを開く
Chrome上で「Ctrl + O」でテンプレートファイル選択、もしくはファイルをドラッグアンドドロップでもOKです。成功すればsrc属性のstaticタグが、プロジェクト内のstaticディレクトリへのリンクに変換されます。
ScriptAutoRunner適用前
ScriptAutoRunner適用後
ただし、この方法はstaticタグで読み込むJavaScriptが実行されないので、残念ながらあまり汎用性はありません…
まずふつうのリンクでHTMLを作って、受け入れの時にstaticタグに置き換える方法が確実なんですかね。