• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

twig30分クッキング-基本編(1)-

2016年7月22日

  • このエントリーをはてなブックマークに追加

こんばんは、Webプログラマの篠田です。

朝方でもだいぶ暑く、満員電車で体力を削られてしまい出社するだけでなんだか疲れてしまいそうになる季節ですね。

今回は前回から引き続き、テンプレートエンジン「twig」の基本的な表示方法関係のお話を中心にご紹介していきます。

この記事の目次

  • 1 単純に文字を出力してみる
  • 2 twigは初期設定としてHTMLタグをエスケープする
  • 3 エスケープをしないで表示させたい
  • 4 改行コードもtwigで変換する
  • 5 まとめ

単純に文字を出力してみる

前回、さらっと書いて深く説明をしなかった下記の基本的な記述をもとにtwigの基本的な書き方を見ていきます。

twigを含むPHPの基本コード
PHP
1
2
3
4
5
6
7
8
<?php
require_once './vendor/autoload.php';
 
 
$loader = new Twig_Loader_String();
$twig = new Twig_Environment($loader);
 
echo $twig->render(‘<h1>Hello {{ message }}!</h1>', array('message' => 'twig World'));

「$twig->render」メソッドの第1引数に出力したいHTMLや文章を渡し、第2引数で第1引数の値の中で使用されているtwig変数の値を配列で指定します。

twig変数というのが「{{ message }}」の部分になります。

twig変数「{{ message }}」の「message」は、「$twig->render」メソッドの第2引数として渡した連想配列「array(‘message’=>’twig World’)」の添字名と一致します。

そしてtwigの「{{ }}」は、PHPでいうところの「echo」と同じような意味として使います。
※つまり「{{ }}」を使うことで文字列を出力することができますが、配列やオブジェクトなどの塊ごと一気に表示することはできません。

twigを使うときは、連想配列を使って表示したい値をtwig側に送り、添字名を指定して「{{ }}」で出力を行います。

出力結果
1
Hello twig World!

twigは初期設定としてHTMLタグをエスケープする

twigのいいところは、渡す値にHTMLタグや特殊文字が含まれていても自動的に、値をエスケープして安全に出力してくる点が挙げられます。

エスケープをするtwigのコード
PHP
1
2
3
4
5
6
7
<?php
require_once './vendor/autoload.php';
 
$loader = new Twig_Loader_String();
$twig = new Twig_Environment($loader);
 
echo $twig->render(‘ {{ message }}', array('message' => '<h1>Hello twig World!</h1>'));

今回は添字「message」の連想配列の値に「<h1>Hello twig World!</h1>」を代入して、「{{ message }}」で出力します。

素直に考えると「h1タグ」に囲まれて文字フォントが大きくなった「Hello twig World!」をイメージしますが、実行すると下記のようになります。

エスケープした出力結果
1
<h1>Hello twig World!</h1>

ソースコードを見てみると下記のようになります。

エスケープされた内容のソースコード
1
&lt;h1&gt;Hello twig World!&lt;/h1&gt;gt;

しっかりとエスケープされていますね。
twigを利用することで悪意のあるコードが紛れ込んでいても実行される危険性が低くなります。
※あくまでも変数の中に紛れ込んでいた時のみ対応可能ですがそれ以外のところに紛れていたら。。。。そのようなことがないように作りましょう。

エスケープをしないで表示させたい

プログラムを作っていると、いろいろな要望があがってきます。
もちろん、エスケープせずにHTMLタグを表示させたいというのもその1つです。

twigは自動でHTMLタグや特殊文字などをエスケープしますが、エスケープをせずに表示させることも可能です。

エスケープをさせないtwigのコード
PHP
1
2
3
4
5
6
7
<?php
require_once './vendor/autoload.php';
 
$loader = new Twig_Loader_String();
$twig = new Twig_Environment($loader);
 
echo $twig->render(‘ {{ message | raw }}', array('message' => '<h1>Hello twig World!</h1>'));

注目してほしいのは、「{{ message }}」だったところが「{{ message | raw}}」になっている点です。

この「raw」というのは、twigの「フィルター」と呼ばれる機能の1つで、時間のフォーマットや数字の絶対値への変換など、表示のときに役に立つ機能をいくつか利用されています。

「フィルター」を利用するときは、twigの変数の横に「|」を書いて、フィルタ名を指定します。

「raw」は、「エスケープを行わない」というフィルタで、「raw」フィルターをつけた変数のみ、エスケープを行わずに出力させることができます。

「フィルター」は、自分で作ることもできます。
twigで用意されていない、必要そうなものがあれば自分で作ることで作業を効率化ができそうですね。

改行コードもtwigで変換する

改行コード(\nや\rや\r\n)を
タグに変換することも意外と多いと思います。

PHPであれば「nl2br」関数を使って改行コードを<br>タグに直したりします。

twigでも同じように「改行コード」を「改行タグ」に変換してくれるフィルターがあります。

改行コードを含むtwigのサンプル
PHP
1
2
3
4
5
6
7
8
<?php
require_once './vendor/autoload.php';
 
$loader = new Twig_Loader_String();
$twig = new Twig_Environment($loader);
 
echo $twig->render('{{ message | nl2br }}', array('message' => "Hello twig
World!"));

twigにもPHP同様に「nl2br」というフィルターが存在します。
これを利用すれば改行コードを含む文字列も意図した形で表示されます。

ただ、改行コードを文字として入力する場合は注意が必要です。
下記のようなプログラムを用意しました。

改行コードを明示的に文字で記述したパターン
PHP
1
2
3
4
5
6
7
<?php
require_once './vendor/autoload.php';
 
$loader = new Twig_Loader_String();
$twig = new Twig_Environment($loader);
 
echo $twig->render('{{ message | nl2br }}', array('message' => 'Hello twig \n World!'));

意図としては「twig」と「World!」の間で改行を入れたかったのですが、これは正常に動作しません。

ポイントは、「Hello twig \n World!」という文字列を囲んでいる「’(シングルクォーテーション)」です。

見えない改行コードであれば、「”」も「’」も関係なく動作するのですが、「\n」のように明示的に記述する場合は、「”」と「’」で大きな違いがでてしまいます。

「\n」のように記述する場合は「”」で囲むことで「nl2br」フィルターが正常に動作します。

まとめ

twigの便利さが前回よりは伝わりましたか?
次回からさらに便利な使い方などをご紹介していきたいと思います。

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • 08fcf6e1f27d6947fe7719c898a78c8c_m

    CLOUD FLAREとIPアドレスの関係を理解しよう

    6 10月, 2017

  • python-logo-master-v3-TM

    macにpythonの開発環境を作ってみよう!

    1 1月, 2023

  • 14800708_xl

    Macにおける、簡単ローカル環境のすすめ-Virtual Host編-

    30 6月, 2017

プログラマー募集
  • Next story YouTubeのデフォルト設定を使いこなして管理を楽にしよう!
  • Previous story 良いデザインとは何か?

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.