元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【mustache入門:Ruby版】HTMLタグの埋め込み

テンプレートにHTMLタグを埋め込む方法を見ていきます。少し注意が必要なので、そちらも合わせて書きます。

作成するファイル

  • データファイル:data.yml
  • テンプレートファイル:template.mustache

データファイルとテンプレートファイルを以下のように作成します。

#data.yml(データの記述)
name: hoge
id: 1
html: <p>
{{! template.mustache(テンプレートの記述) }}
- {{name}}
- {{id}}
- {{html}}
- {{{html}}}
- {{&html}}

HTMLタグの埋め込み

  • {{html}}
    • HTMLタグがエスケープされる
  • {{{html}}}
    • HTMLタグを埋め込む
  • {{&html}}
    • 同上。

HTMLタグの埋め込みの確認

mustacheコマンドを実行して、HTMLタグがテンプレートに埋め込まれるかを確認します。

mustache data.yml template.mustache
- hoge
- 1
- &lt;p&gt;
- <p>
- <p>

コマンドを実行すると{{html}}が&lt;p&gt;、{{{html}}}と{{&html}}が<p>に置き換わっていることが確認できると思います。

まとめ

テンプレートにHTMLタグを埋め込む方法を見ていきました。ユーザからの入力に対してHTMLタグを埋め込むのは、セキュリティ的によろしくないので注意が必要です。その場合は、データが安全かどうかを確認する必要があります。

参考サイト