【Python】「a」タグでどうリンクさせる?テンプレート上での変数内テキストにリンクを設定しよう!【Django】

まず初めに

みなさん、こんにちは。はねすけと申します。

今回はPythonのフレームワークであるDjangoに関する記事を書いていきます。
テーマは「テンプレート上でのリンク設定」です!

Djangoを使用していない方についてはなんのこっちゃといった内容かもしれません。
しかし、今後Djangoを使った際に思い出してもらえるような有益な内容にできるよう頑張って解説していきたいと思います。
それではどうぞ!

こんな方はぜひ読んでみてくださいね

・Djangoでシステム開発を行う予定・現在行っている方

・Djangoテンプレート上で、リンクテキストの設定方法を知りたい方

組み込みタグと組み込みフィルタ

header15-1

基本の振り返り

viewにおいて、DBから取得したデータをテンプレート側で操作するのはDjangoにおいてはよくある光景ですよね。
その際には、組み込みタグ・組み込みフィルタを使用することでより便利で柔軟な制御を実現することができます。

  • 組み込みタグ…Djangoテンプレートファイル内で使用する「{% タグ %}」のような記載です。一番使いがちなのは「{% if %}{% endif %}」のif文表現でしょうか。使用することで、HTMLファイル上でもpythonコードを記載することができるようになります
  • 組み込みフィルタ…Djangoテンプレートファイル内で使用する「{{ 値 | フィルタ }}」のような記載です。view側で取得したデータ値の後ろに記載していくことにより、様々な属性を付与できます。

タグとフィルタには様々な種類があるので、まずは一度開発における前提条件として調べておくと良いでしょう。
そうすることにより開発する上での思考の幅・効率が大きく向上することでしょう。

a_tag_test-1
イメージの参考までに掲載しますが、上画像は以前別の記事でもご紹介したDjangoにおけるリスト表示用のHTMLページのソースです。組み込みタグにより、HTML上でpythonコードによるループ処理で一覧表示を実現していますね。

上記のソースが具体的にどう使用されていたかを知りたい方は下記の記事もぜひ参考にしてみてください。

header14【Python】インデックスを指定しよう!テンプレート上での配列の特殊な扱い方を図解でわかりやすくご紹介します【Django】

併用利用でこそ実現できることもある

header15-2

簡単に動作しない「a」タグ

ここからは自分が開発する上で実際に躓いた点について解説していきたいと思います。

実現したかった内容は「DBから取得したテキスト情報の一部にリンクを設定する」でした。
リンクの設定には「a」タグを使用するのですが、DjangoはXSS(クロスサイトスクリプティング攻撃)対策のため、デフォルトだとタグの記載も単純なテキスト情報に変換されてしまいます
クロスサイトスクリプティングについてはIPAも関連する記事を公開していますので、詳しく知らないという方は下記のリンクよりぜひ読んでみてくださいね。

現象の確認のために実際のアプリを動かしてみましょう。ここでは以前別の記事で作成したテスト用アプリを使用してみます。Djangoアプリの起動方法や管理ページの使い方についてはここでは詳しくは触れませんが、別の記事で詳しく紹介していますので、わからないという方はぜひ参考にされてください。

header9【初心者必見】Djangoって一体何?実行の手順・理解のコツを図解でわかりやすく解説します♪【Python】
a_tag_test-2
①管理ページから、movieモデルの要素の1つの「内容」項目に上記のように設定します。ここで「https:yahoo.co.jp」を呼び出すための「a」タグを含むHTMLコードを配置しています。これをWebページとして表示させた際に、「a」タグが有効に働いてテキストがリンクされた状態になってほしいですね。
a_tag_test-3
②ちなみに実際にWebページとして表示させるためのテンプレートファイルの内容は上記のとおりです。赤枠のようにmovieモデルのtitleとcontent項目をループで一覧表示させる内容となっています。
a_tag_test-4
③サーバを起動し、実際にWebページとして表示させてみました。…やはり何もしなければHTMLコードはdjangoのクロスサイトスクリプティング攻撃対策により、ただのテキストとしか表示されませんね。

ではどうすれば良いかと言いますと、リンクを設定するためにはフィルタを使用して明示的にタグの使用を許容するよう設定してあげる必要があります
そのため私は最初に以下のような記載をしました。

HTML
<p>{{ object.content1 | linebreaksbr | safe }}</p>

「test.content1というデータ値に対して、「linebreaksbr」「safe」という2つのフィルタを適用していました。
それぞれの意味は、テキストの改行タグを入れる・タグの入力を有効にするです。

しかしこの書き方だとなぜか「a」タグはリンクとしてではなくただのテキストとしてしか表示されませんでした。
いったい何が悪かったのでしょうか?

色んなパターンを試してみると良い

原因はタグに関するフィルタを重ねていることにありました。以下のように改行のフィルタを除外し、タグが1つの状態にするとうまくリンクとして動作しました。

HTML
<p>{{ object.content1|safe }}</p>

通常フィルタは重ねて使用することができるのですが、すべての組み合わせで有効なわけではありません
今回のケースでいうと以下のように、タグとフィルタを併用した記載で解決できました。
「autoescape 」というタグを使用することで「safe」フィルタと同等のことを実現することができました

HTML
{% autoescape off %}
      <p>{{ object.content1|linebreaksbr }}</p>
{% endautoescape %}
a_tag_test-5
上画像は実際にタグとフィルタを併用した形式にソースを変更して実行したWebページですね。しっかりと「a」タグが動作しリンクとして表示させることができました!

このように、タグだけ・フィルタだけでは実現できないことでも、2つを組み合わせることで実現できるケースもありますので、あきらめずにぜひいろいろ試行錯誤してみてください!

システム開発においては、上記のように少し書き方や表現を変えてみることで上手く動作するようになることが往々にしてあります。
困った際の常とう手段として身に着けておいて損はないので、ぜひ意識してみてくださいね。

まとめ

いかがだったでしょうか?

本日お伝えしたかった内容を簡単にまとめると以下のようになります。

ぜひ何らかの形でお役に立てれば幸いです。

それでは次の記事でまたお会いしましょう♪

本日のまとめ

・組み込みフィルタは重ねて適用できますが、有効でない組み合わせもあるため注意しましょう

・困った際にはあきらめずに少しの調整や表現の変更を試してみましょう。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です