LaravelでHTMLの生成

Laravelを習得するのに一番の早道は、実際に自分自身でプログラムを作成することでしょう。そこで、早速実践編を作成しようと思ったのですが、実際に作成するとなるとHTMLクラスとFormクラスぐらいは事前に勉強しておく必要があると思いました。そこで、HTMLの生成とフォームの生成を勉強してから実践編をはじめたいと思います。

HTMLエンティティ

1. クロスサイトスクリプティングよりアプリケーションを守るためにHTML中の全ての文字をHTMLエンティティに変換することは重要です。例えば<シンボルは必ずエンティティ表現に変換します。Laravelでエンティティ表現に変換するにはHTMLクラスのentitiesメソッドを使うか、グローバルヘルパーの’e’を使います。

2. Helloコントローラにtestアクションを作成し、下記のように記述します。

laravel/application/hello.php

public function action_test(){
 $data['script']="<script>alert('不正攻撃です');</script>";
 return View::make('hello/test',$data);
 }

3. ビューファイルを下記のように作成してみます。

laravel/application/views/hello/test.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>テストビュー</title>
</head>
<body>
テストビューです
<?php echo $script;?>
</body>
</html>

4. ブラウザを開いてみます。下記のようにJavaScriptが実行されました。

http://localhost/laravel/public/hello/test

5. 今回は文字を表示するだけのスクリプトでしたが、これが実際に不正攻撃なら大変なことになります。そこで、HTMLエンティティ変換する必要があるのです。

6. ビューファイルを下記のように修正します。

laravel/application/views/hello/test.php

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>テストビュー</title>
 </head>
 <body>
 <h1>テストビューです</h1>
 <h3>entitieメソッドによる表示</h3>
 <p><?php echo HTML::entities($script);?></p>
 <h3>グローバルヘルパー'e'による表示</h3>
 <p><?php echo e($script);?></p>
 </body>
 </html>

7. JavaScriptはHTMLコンバートされて、文字列として表示されました。

スクリプトとスタイルシート

8. JavaScriptファイルへの参照を生成するにはHTMLクラスのscriptメソッドを使用し、cssファイルへの参照を生成するには、styleメソッドを使用します。

9. ビューファイルを下記のように修正します。

laravel/application/views/hello/test.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>テストビュー</title>
</head>
<body>
<h1>テストビューです</h1>
<h3>JavaScriptファイルへの参照を生成する</h3>
<p><?php echo HTML::script('js/scrollTO.js');?></p>
<h3>CSSファイルへの参照を生成する</h3>
<p><?php echo HTML::style('css/common.css');?></p>
<h3>メディアタイプを指定し、CSSファイルへの参照を生成する</h3>
<p><?php //echo HTML::style('css/common.css','print');?></p>
</body>
</html>

参照するファイルの場所は、ドキュメントルート(pulbicフォルダ)です。Laravelでは、publicフォルダの下にjsフォルダ、cssフォルダ、imgフォルダがあります。

14行目をコメントアウトしているのは、公式ドキュメント通りに記述したはずですが、エラー表示されたので、コメントアウトしています。理由が分かったら後日修正します。

※公式ドキュメント翻訳の川瀬氏からエラーの理由を頂戴いたしました。styleメソッドの第2引数は、配列のようです。下記のように修正して下さい。
HTML::style(‘css/common.css’,array(‘media’=>’print’))

10. 生成されたHTMLソースコードを確認してみます。

リンクの生成

11. 次にリンクの生成方法を調べてみます。リンクを作成するには、HTMLクラスのlinkメソッドを使います。httpsリンクを生成するには、secure_linkメソッドlink_to_secureメソッドを使います。第3引数に配列でHTML属性を渡すことが出来ます。

12. それでは、ビューファイルを下記のように修正します。

laravel/application/views/hello/test.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>テストビュー</title>
</head>
<body>
<h1>テストビューです</h1>
<h3>URIからリンクを生成する</h3>
<p><?php echo HTML::link('hello/index','トップページ');?></p>
<h3>HTTPSを使用しリンクを生成する</h3>
<p><?php //echo HTML::secure_link('hello/index','セキュアなトップページ');?></p>
<h3>追加のHTMLリンク属性を指定し、リンクを生成する</h3>
<p><?php echo HTML::link('hello/add','addアクション',array('id'=>'top'));?></p>
</body>
</html>

12行目も上記同様エラーが表示されましたので、コメントアウトしています。こちらも理由が判明次第、修正します。

※こちらも川瀬氏よりエラーの理由を頂戴いたしました。川瀬様併せてお礼申し上げます。下記のように修正して下さい。
HTML::link_to_secure(‘hello/index’,’セキュアなトップページ’) 

13. 生成されたHTMLソースコードを確認してみます。

Mailtoリンク

14. 公式ドキュメントでは、『ボットをあしらうために、HTMLクラスのmailtoメソッドは与えられたメールアドレスを分かりづらくします。』との記述がありましたが、実際にどのような効果があるかは検証していませんので分かりません。

15. 第2引数に代替文字列を指定することが出来ます。それでは、実際に試してみましょう。下記のようにビューファイルを記述します。

laravel/application/views/hello/test.php

<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8">
 <title>テストビュー</title>
 </head>
 <body>
 <h1>テストビューです</h1>
 <p>Mailtoリンクを生成する
 <p><?php echo HTML::mailto('nakada@winroad.info','メールはこちら');?></p>
 <p>メールアドレスをリンクテキストとして生成する
 <p><?php echo HTML::mailto('nakada@winroad.info');?></p>
 </body>
 </html>

15. ブラウザで確認してみます。リンクをクリックすれば、各自のパソコンで設定されているメールソフトが起動します。

画像の生成

16. HTMLクラスのimageメソッドで、イメージタグを生成することができます。第1引数にドキュメントルートからの画像のパス、第2引数にalt属性、第3引数にHTML属性を配列で指定することができます。尚、第3引数は省略することができます。

17. 画像を表示するためにpublic/imgフォルダにとりあえず任意の画像を保存して、ビューファイルを下記のように修正します。

laravel/application/views/hello/test.php

<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8">
 <title>テストビュー</title>
 </head>
 <body>
 <h1>テストビューです</h1>
 <p>HTMLイメージタグを生成する</p>
 <p><?php echo HTML::image('img/kura001.jpg','雪と蔵之介',array('class'=>'kuranosuke'));?></p>
 </body>
 </html>

18. ブラウザで確認して、保存した画像が表示されたらOKです。

19. ブラウザのHTMLソースを見てみます。下記のようになっています。

リストの生成

20. HTMLクラスのol、ul、dlメソッドで、リストを生成することができます。ルーターで下記のように記述します。

laravel/application/routes.php

Route::get('hello/test',function(){
 $data=array(
 'apple'=>'リンゴ',
 'orange'=>'みかん',
 'banana'=>'バナナ',
 );
 return View::make('hello.test',$data);
 });

21. ビューファイルを下記のように修正します。

laravel/application/view/hello/test.php

<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8">
 <title>テストビュー</title>
 </head>
 <body>
 <h1>テストビューです</h1>
 <p>olリストを生成する</p>
 <p><?php echo HTML::ol(array($apple,$orange,$banana));?></p>
 <p>ulリストを生成する</p>
 <p><?php echo HTML::ul(array($apple,$orange,$banana));?></p>
 <p>dlリストを生成する</p>
 <p><?php echo HTML::dl(array($apple=>'青森',$orange=>'愛媛',$banana=>'沖縄'));?></p>
 </body>
 </html>

22. ブラウザで確認してみます。

公式ドキュメントでは、この他に名前付きルートへのリンク、コントローラアクションへのリンク、カスタムマクロ等がありましたが、検証を省略させていただきました。

次回は、『Bladeテンプレート』『フォームの生成』について調べてみます。

本日は以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

トラックバック

コメント

  1. HiroKws より:

    どうも、公式ドキュメント翻訳の川瀬です。
    エラーが表示されるところは、公式ドキュメントの原文が間違っています。
    HTML::style()の第2引数は、配列ですので、array(‘media’ => ‘print’)として渡すのが正しいようです。

  2. HiroKws より:

    HTML::Secure_link()もドキュメントの間違い、もしくは古いままになっているようです。
    現在HTML::link_to_secure()が正しいようです。

    原文がそうなっているの私が勝手に変更できません。原文を修正してもらうように、これから修正依頼をかけますので、しばらくお待ちください。

    • nakada より:

      川瀬 様
      早速のエラー理由のご指摘、ありがとうございます。
      少しでも早くLaravelを習得したいものですから、分からないところは飛ばして先に進んでしまいがちです。
      ブログの方は修正しておきました。
      これからも宜しくお願いいたします。
      WinRoad徒然草管理人 中田


コメントをどうぞ

このページの先頭へ