#この記事について

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">

template.html

<!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の設定画面を表示し、「>」ボタンで追加エントリを表示、以下のコードを入力する

js

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タグに置き換える方法が確実なんですかね。