Backbone.js: フォームフレームワークを使う

backbone-forms を試した。フォームの記述にスキーマとテンプレートを使う。

<!DOCTYPE html>
<html>
<head>  
  <meta charset="UTF-8">
  <title>Backbone.Form の例</title>
</head>
<body>

<script id="formTemplate" type="text/html">
  <form action="submit.html">
    <h2>コメント</h2>
    <div data-fields="comment"></div>

    <input type="submit" class="btn btn-primary submit" />
  </form>
</script>

<div id="content" class="container"></div>
<div class="container"><h3 id="result"></h3></div>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>

<script src="backbone-forms.min.js"></script>
<script src="templates/bootstrap3.js"></script>

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />

<script>
$(function() {

  var myForm = Backbone.Form.extend({

    template: _.template($('#formTemplate').html()),

    schema: {
      comment: {
        title: 'コメント',
        validators: [{ type:'required', message: 'コメントを入力してください。' }]
      }
    }
    
  });

  var form = new myForm().render();

  $('#content').append(form.el);

  form.on('submit', function(event) {
    var errs = form.validate();

    event.preventDefault();

    if (!errs) {
      $('#result').html(form.getValue()['comment']);    
      return false;
    }

  });

});
</script>

</body>
</html>

PHP: wkhtmltopdf を使って pdf を生成する

wkhtmltopdf のラッパーライブラリである phpwkhtmltopdf を使った。h 要素を使うことでしおりは自動生成される。

require_once 'vendor/autoload.php';

use mikehaertl\wkhtmlto\Pdf;

$html = <<<EOT
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style type="text/css">
  body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
  }
  </style>
<title>タイトル</title>
</head>
<body>
<div id="print-area">
  <div id="header">
    <p>ヘッダー</p>
  </div>
  <div id="content">
    <h1>見出し1</h1>
      <p>コンテンツ</p>
    <h2>見出し1-2</h2>
      <p>コンテンツ</p>
  </div>
  <div id="content2">
    <h1>見出し2</h1>
      <p>コンテンツ</p>
    </div>
  <div id="footer">
    <p>フッター</p>
  </div>
</div>
</body>
</html>
EOT;

$pdf = new Pdf();
$pdf->addPage($html);
$pdf->addToc();
$pdf->saveAs('test.pdf');

HTML、CSS のファイルを用意する場合、次のように書く。

require_once 'vendor/autoload.php';

use mikehaertl\wkhtmlto\Pdf;

$pdf = new Pdf([
  'encoding' => 'UTF-8',
  'user-style-sheet' => 'pdf.css'
]);
$pdf->addPage('test.html');
$pdf->addToc();
$pdf->saveAs('test.pdf');

コマンドラインで直接実行する場合は次のようになる。

wkhtmltopdf toc test.html test.pdf

目次の見出しのテキストを指定してみよう。

wkhtmltopdf toc --toc-header-text "目次" test.html test.pdf

Ubuntu サーバーで wkhtmltopdf を利用する場合、xvfb や日本語フォントをインストールする必要がある。

sudo apt-get install wkhtmltopdf xvfb fonts-ipafont

xvfb-run を組み合わせて実行する。

xvfb-run --server-args="-screen 0, 1024x680x24" wkhtmltopdf toc test.html test.pdf

別の wkhtmltopdf のラッパーライブラリである Snappy も試してみよう。

require_once 'vendor/autoload.php';

use Knp\Snappy\Pdf;

$html = <<<EOT
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style type="text/css">
  body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
  }
  </style>
<title>タイトル</title>
</head>
<body>
<div id="print-area">
  <div id="header">
    <p>ヘッダー</p>
  </div>
  <div id="content">
    <h1>見出し1</h1>
      <p>コンテンツ</p>
    <h2>見出し1-2</h2>
      <p>コンテンツ</p>
  </div>
  <div id="content2">
    <h1>見出し2</h1>
      <p>コンテンツ</p>
    </div>
  <div id="footer">
    <p>フッター</p>
  </div>
</div>
</body>
</html>
EOT;

$snappy = new Pdf('/usr/local/bin/wkhtmltopdf');
$snappy->setOption('toc', true);
$snappy->setOption('toc-header-text', '目次');
$snappy->generateFromHtml($html, 'test.pdf');

2014年9月1日時点では toc オプションにバグがあるために、開発版を利用する必要がある。composer.json の内容は次のとおり。

{
    "require": {
        "knplabs/knp-snappy": "dev-master"
    }
}

ターミナルで利用可能なテキストエディタの slap を導入

Sublime に似ていて、ターミナルで利用できるといううたい文句に興味をもって slap を導入した。node.js で開発されており、 npm でインストールする。

npm install -g slap

起動は slap 起動させたときの画面は次のようになる。終了させるには C-q を押す。キーバイディングは slap.ini に書かれている。

PHP: UTF-8 の電子メールアドレスのバリデーション

Symfony 2.5 で採用された EmailValidator は UTF-8 のメールアドレスに対応しており、次のような日本語が含まれる場合にも有効なメールアドレスとして判定する。ただし、この記事を書いた時点(2014年8月)では不正なバイト列が含まれる場合にも通してしまうので、mb_check_encoding や preg_match などを使ってエンコーディングの妥当性をチェックする必要がある。

UTF-8 のメールアドレスを送信するには SMTPUTF8 をサポートするメールサーバーが必要である。Postfix は2014年7月にリリースされたバージョン 2.12 で SMTPUTF8 をサポートするようになった。

require_once 'vendor/autoload.php';

use Egulias\EmailValidator\EmailValidator;

$email = "甲斐@黒川.日本";
$email2 = "甲斐\x80@黒川.日本";
$validator = new EmailValidator;

var_dump(
    true === $validator->isValid($email),
    true === $validator->isValid($email2)
);

UTF-8 のメールアドレスを利用する場合、ラテン文字とまぎらわしい文字を混在させた国際化ドメインによるフィッシング対策が必要になる。Gmail の仕様では、UTR#39 の「Highly Restrictive」を採用している。具体的なまぎらわしい文字の例はITmedia の記事を参照。Gmail のエイリアスでも UTF-8 に対応しており、「example+テスト@gmail.com」のような文字列が使える。

アーカイブ ランダム ホーム 次のページ ページ 1 / 368