PythonとDjangoを使って自作ブログを立ち上げ、いざ収益化のためにアフィリエイトリンクを貼ろうとしたら、文字だけが表示されてうまく機能しない。そんな壁にぶつかった経験はないでしょうか。
特にもしもアフィリエイトのかんたんリンクのようなJavaScriptを含むコードは、Djangoのセキュリティ機能や導入しているリッチテキストエディタの仕様によってブロックされてしまうことが多いです。今回は、DjangoとTinyMCEを組み合わせた環境で、かんたんリンクを正常に表示させるための具体的な手順と設定方法を解説します。
1. テンプレートファイルでエスケープを無効化する
まず大前提として、Djangoのテンプレートはセキュリティ対策として、データベースから渡されたHTMLタグを単なる文字列として処理するエスケープ機能がデフォルトで働いています。
もしもアフィリエイトのコードにはdivタグやscriptタグが含まれているため、そのまま表示させようとするとコードが画面にそのまま出力されてしまいます。これを防ぐため、記事の本文を呼び出しているHTMLテンプレートファイル(post_detail.htmlなど)の変数にsafeフィルタを追加します。
{{ post.content|safe }}
この記述により、Django側にこれは安全なHTMLコードだからそのまま実行してよいと認識させることができます。
2. TinyMCEがscriptタグを削除するのを防ぐ
safeフィルタを設定し、いざTinyMCEのエディタ画面からコードを貼り付けて保存しても、うまく表示されないことがあります。再度ソースコードを確認すると、一番重要なscriptタグの部分だけが綺麗に消え去り、リンクという代替テキストだけが残っている現象です。
これはTinyMCEの初期設定によるものです。悪意のあるスクリプトが埋め込まれるのを防ぐため、デフォルトではscriptタグを入力しても保存時に自動で削除される仕組みになっています。
これを解決するには、Djangoプロジェクトのsettings.pyを編集し、TinyMCEに対してscriptタグの入力を許可する例外設定を追加する必要があります。
3. settings.pyの具体的な設定コード
settings.pyを開き、TINYMCE_DEFAULT_CONFIGの項目を以下のように編集します。ポイントは、HTMLのソースコードを直接編集するためのcodeプラグインを有効にすることと、scriptタグを許可する2行を追加することです。
# settings.py 内のTinyMCE設定 TINYMCE_DEFAULT_CONFIG = { 'width': '100%', 'height': 500, # プラグインに code を追加してソースコード編集を可能にする 'plugins': 'image link lists code', # ツールバーに code ボタンを表示させる 'toolbar': 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | link image | code', # ▼ ここから下が重要な追加部分 'extended_valid_elements': 'script[type|src|charset]', 'valid_children': '+body[script],+div[script]', }
extended_valid_elementsとvalid_childrenの記述を追加することで、エディタがscriptタグを安全な要素として認識し、保存時に消去されるのを防ぐことができます。
4. サーバーを再起動してコードを貼り付ける
settings.pyの編集が終わったら、必ず一度開発サーバーを再起動してください。再起動しないと設定がエディタに反映されません。
サーバーを立ち上げ直したら、記事の編集画面を開きます。ツールバーに追加されたソースコード表示ボタン(または表示メニュー内のソースコード)をクリックし、裏側のHTML編集画面を開きます。
そこへ、もしもアフィリエイトのサイトからコピーしたかんたんリンクの全文コードをそのまま貼り付けて保存します。これで、自動削除されることなくデータベースにコードが保存され、実際のブログ画面でも楽天やAmazonの綺麗な商品ボタンが表示されるようになります。
まとめ
自作のブログシステムは自由度が高い反面、WordPressなどの既存システムならプラグイン一つで解決できるようなことでも、今回のようにセキュリティの壁にぶつかることがあります。しかし、設定ファイルの意味を理解し、一つずつエラーを解決していくプロセスこそが自作開発の醍醐味です。Djangoでブログを構築し、これからアフィリエイトに挑戦しようとしている方の参考になれば幸いです。
