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

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【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タグを埋め込むのは、セキュリティ的によろしくないので注意が必要です。その場合は、データが安全かどうかを確認する必要があります。

参考サイト

» HTML入門のまとめはこちらです。