2013年9月21日土曜日

コマンドラインからHTMLサニタイズする

ソースコードをブログに貼付ける際に、簡単なサンプルコードをコマンドラインからHTMLサニタイズしたくなりました。そこで、方法を調べたところ、perlやphpをコマンドラインから呼ぶ方法や、recodeコマンドを使う方法が見つかりました。(正確には逆のことをする方法を見つけたので、サニタイズするコマンドに書き換えてみました)

方法1.PHPによるシェルコマンドの作成


cat $1 | php -r 'while(($line=fgets(STDIN)) !== FALSE) echo htmlspecialchars($line);'

php5.4を前提にしたコードになっていたので、少し修正しました。5.4の場合はHTML5などに対応したオプションフラグが容易されているため、php5.4環境が前提ならばhtmlspecialcharsにフラグを追加するとよいかもしれません。

方法2.Perlによるシェルコマンドの作成


cat $1 | perl -MHTML::Entities -le 'while(<>) {print encode_entities($_);}'

なお、このコマンドを動作させるには、自分の環境(MacOSX)では root権限で下記を実行してライブラリを追加する必要がありました。

cpan install HTML::Entities

方法3.GNU recodeコマンドを使う

あまり聞き慣れないコマンドですが、代表的なLinuxディストリビューションのaptやyumパッケージには含まれているようです。様々なテキストコードの変換が可能なので、勉強しておくと結構役立つかもしれません。

recodeのインストール

recodeはroot権限にて下記を実行してインストールできます。

yum install recode
or
apt-get install recode

reocodeによるHTMLサニタイズ例

cat ファイル名 | recode utf8..html

utf8のところは文字エンコーディングによって変える必要があります。

JavaのMapに同じキーの要素を含めるには

JavaのMapに同じキーに対して複数の要素を含めたくなる場合があります。
しかし、Javaの標準ライブラリに含まれるMapの実装にはHashMapやTreeMapがありますが、これらは重複したキーの要素を単純に登録することはできません。

対策1.HashMapなどの要素をコレクション型(ArrayListなど)にする

もっとも単純な解決策は要素をコレクション型にすることです。

iimport java.util.*;

public class Test {
  public static void main(String[] args) {
    Map<String,List<Integer>> map = new HashMap<String,List<Integer>>();
    // 登録
    List<Integer> list = new ArrayList<Integer>();
    list.add(11);
    list.add(12);
    map.put("group1", list);

    // 参照
    for ( Integer i : map.get("group1") ) {
      System.out.println(i);
    }
  }
}

対策2.guava-librariesのようなサードパーティライブラリを使用する

重複キーをうまく取り扱うことができるサードパーティ製の信頼できるライブラリが公開されています。

Guavaプロジェクトのページ
https://code.google.com/p/guava-libraries/

重複キーを扱えるMap実装(ArrayListMultiMap)
http://guava-libraries.googlecode.com/svn/tags/release03/javadoc/com/google/common/collect/ArrayListMultimap.html

下記のサンプルコードを見ると登録がとても簡潔にできるようになっているのが分かるかと思います。

import java.util.*;
import com.google.common.collect.*;

public class Test2 {
  public static void main(String[] args) {
    Multimap<String,Integer> map = ArrayListMultimap.create();
    // 登録
    map.put("group1", 11);
    map.put("group1", 12);

    // 参照
    for ( Integer i : map.get("group1") ) {
      System.out.println(i);
    }
  }
}

2013年9月20日金曜日

Bloggerでクッキーを使用して初回表示の判定を行う

JavaScript(JS)とクッキーを使用して、Bloggerで初回表示の判定をして表示分けをしてみました。

JSのライブラリとして jquery と jquery-cookie を使用しています。BloggerでJSのライブラリを使うためには、どこかのサイトにJSのライブラリを配置する必要がありますが、この2つを配置したCDNサービスが見つかったので、CDNサービスから呼び出すことにしました。

Bloggerの[テンプレート]-[HTMLの編集] からテンプレートを修正し、<head>にJSを記述。初回表示エリアに表示内容を記述します。

1.<head>部分にJSをロードするタグと追加のスクリプトを記述します。

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
      <script>
        //<![CDATA[
         $(function(){
          var dom_class= 'div.non_repeater_display_area';
          var key = 'refer_count';
          var expire = 30; // day

          var cnt = $.cookie(key);
          console.log(cnt);
          if ( cnt == null ) {
            cnt = 0;
          } else {
            cnt = parseInt(cnt);
          }
          $.cookie(key, cnt + 1, { expires: expire } );

          if ( cnt == 0 ) {
            $(dom_class).each(function(){ $(this).css('display', 'block'); });
          }
        });
        //]]>
      </script>

2.次に、<body>の初回表示を行いたい場所に下記のようにブロックを追加して完了です。
      <div class="non_repeater_display_area" style="display: none;">
        初回表示の内容をここに記述
      </div>

2013年9月4日水曜日

polymerを使ったWebコンポーネントの作成

polymerとWeb Componentsについて

W3CでWeb Componentsという仕様群が作成されている最中です。これには、外部HTMLの読み込み、テンプレートバインディング、カスタムタグなどの機能が含まれており、Web標準の仕様だけで容易にWebコンポーネントの作成を行えるようになります。
現在、Web Componentsはほとんどブラウザに実装されていませんが、JavaScriptによりWeb Componentsの機能を実装したpolymerを使うことで、既存のブラウザでWeb Componentsを動作させることができます。

コンポーネント化のサンプル(BMI計算フォーム)

サンプルはBMIを計算するフォームをコンポーネント化しています。
フォームのUIと動作はメインのHTML(index.html)とは切り離された外部HTML(gadgets/bmicalc.hml)に記述されています。メインのHTMLからは新たに定義されたカスタムタグをひとつ記述するだけでコンポーネントを表示できます。

サンプルの実行結果

File: index.html

1.scriptタグでpolymer.min.js をロードします。
<script src="polymer.min.js"></script>
polymer.min.js.map も polymer.min.js と同じパスに置かないと動作しません。

2.HTML Importsを使ってコンポーネントを定義したHTMLを読み込みます。

<link rel="import" href="gadgets/bmicalc.html" >

3.コンポーネントを表示するカスタムタグを記述します。

<devneko-bmicalc></devneko-bmicalc>

<!DOCTYPE html>
<html>
  <head>
    <script src="polymer.min.js"></script>
    <link rel="import" href="gadgets/bmicalc.html" >
  </head>
  <body>
    <h2>polytest</h2>
    <devneko-bmicalc></devneko-bmicalc>
  </body>
</html>

File: gadgets/bmicalc.html

コンポーネントを定義します。

1.カスタムタグの名称をpolymer-elementのname属性に指定します。
<polymer-element name="devneko-bmicalc">
カスタムタグ名はハイフンで区切られている必要があります。

2.template要素内にコンポーネントのUIを記述します。

3.scriptでPolymer関数を使いカスタムタグを登録します。

Polymer('devneko-bmicalc',{

Polymer関数の第二引数にはカスタムタグのインスタンスに紐づけるパラメータを指定します。
関数を設定することもでき、呼び出す場合は on-* (サンプルでは on-click) という属性を使ってハンドラー関数を指定します。

<polymer-element name="devneko-bmicalc">
  <template>
    <div class="bmicalc">
      <h1 class="bmicalc-title">BMI計算</h1>
      <div class="bmicalc-form">
        身長: <input type="text" name="height" value="{{height}}"/>cm<br/>
        体重: <input type="text" name="weight" value="{{weight}}"/>kg<br/>
        <p style="text-align:center;margin:0;padding:0;">
          <button on-click="calculate">計算</button>
        </p>
        BMI: <span style="font-size: large;">{{result}}</span>
      </div>
    </div>
  </template>
  <script>
    Polymer('devneko-bmicalc',{
        weight: '',
        height: '',
        result: '',
        calculate: function() {
          var h = this.height / 100.0;
          var res = this.weight / (h * h);
          this.result = Math.floor(res*100)/100;
        }
      });
  </script>
  <link rel="stylesheet" href="bmicalc.css">
</polymer-element>

File: gadgets/bmicalc.css

コンポーネントの見た目を定義します。
CSSの名前空間が呼び出し元と分離されているわけではないので、呼び出し元や他のコンポーネントと被らないようにクラス名などを指定する必要があります。

.bmicalc{
  border: 2px solid lightgreen;
  border-radius: 5px;
  padding: 0em;
  display: inline-block;
}
.bmicalc-title{
  padding: 4px;
  margin: 0px;
  font-size: large;
  color: white;
  background-color: lightgreen;
}
.bmicalc-form {
  padding: 0.5em;
}
.bmicalc-form button {
  color: blue;
  font-size: large;
}