攻略! ツール・ド・プログラミング (55) 直感的なHTMLコードの生成が可能な「renderSnake」

ニュース
トップ

【コラム】

攻略! ツール・ド・プログラミング

55 直感的なHTMLコードの生成が可能な「renderSnake」

杉山貴章  [2011/06/23]

55/61

renderSnakeとは

renderSnake」は、JavaプログラムでHTMLコードを生成するためのライブラリである。複雑な手続きを必要とせずに、単純メソッド呼び出しだけで直感的にタグを出力できることや、少ないメモリ使用量で軽量に動作するため様々なアプリケーションに組み込んで利用できることなどが大きな特徴。Webアプリケーション開発での利用も積極的にサポートしており、ServletやJSP、Spring MVC、Google Guiceなどとの連携にも対応している他、フォームからの入力処理を簡略化する機能などが用意されている。

renderSnakeはApache License Version 2.0にもとづいて公開されており、Google Codeに開設されたプロジェクトサイトよりダウンロードすることができる。本稿執筆時点における最新版はバージョン1.1。HTML5で追加された新しいタグや属性、Spring MVCやGoogle Guiceとの連携、静的リソースの読み込みやテンプレートの利用などがサポートされている。また、スナップショットの段階ながらjQueryも一部サポートしている。

renderSnakeでHTMLコードを出力する

ダウンロードしたファイルを解凍すると、jarsフォルダに本体となるjarファイルが格納されている。jQueryを使わない場合は、「rendersnake-1.1.jar」をクラスパスに含めて利用すればよい。その他、別途Apache Commons Langをダウンロードしてクラスパスに含めておくとよい(後述するwtite()メソッドがCommons Langのテキストエスケープ機能を利用するため)

renderSnakeによるHTMLコード生成の基本となるのがHtmlCanvasクラスである。このクラスにはHTMLのタグを出力するためのメソッドが、それぞれのタグごとに用意されている。例えばHTMLタグに対応したhtml()や、bodyタグに対応したbody()などだ。閉じタグはメソッド名の先頭にアンダースコアがついた_html()、_body()のようになっている。

HtmlCanvasのインスタンスは、コードの出力先となるWriterオブジェクトを指定して次のように生成する。

FileWriter writer = ...; 
HtmlCanvas html = new HtmlCanvas(writer);

このHtmlCanvasオブジェクトに対して、次のようにbody()メソッドを呼び出したとする。

html.body();

すると指定されたWriterを経由して次のHTMLコードが出力される。

<body>

さて、html()やbody()などのタグ出力用メソッドは、戻り値として現在使用中のHtmlCanvasオブジェクトそのものを返すようになっている。したがって、次のようにメソッドを連続で呼び出すことで複数のタグの出力を1行で書くことができる。

html.html().body()._body()._html();

この結果は次のようになる。

<html><body></body></html>

以下のコードは、「output1.html」にHTMLコードを出力するプログラムの例である。

package jp.co.mycom.toolde.rendersnake;


import java.io.*;
import org.rendersnake.HtmlCanvas;


public class CreateHtml1 {
  public static void main(String[] args) {
    CreateHtml1 doit = new CreateHtml1();
  }

  public CreateHtml1() {
    FileWriter writer = null;
    try {
      // 出力先を指定してHtmlCanvasを生成
      writer = new FileWriter("output1.html");
      HtmlCanvas html = new HtmlCanvas(writer);

      // HTMLコードを出力
      html.html()
          .body()
            .h1()
              .write("renderSnakeのサンプル")
            ._h1()
          ._body()
        ._html();


    } catch (IOException ex) {
      ex.printStackTrace();
    } finally {
      try {
        writer.close();
      } catch (IOException ex) {
        ex.printStackTrace();
      }
    }
  }
}

h1()はh1タグを、write()はプレーンテキストを出力するためのメソッドである。write()の第一引数には出力するテキストを渡す。このプログラムによって出力されたHTMLコードは次のようになった。Webブラウザで表示すると図1のようになる。

<html><body><h1>renderSnakeのサンプル</h1></body></html>

図1 : renderSnakeを利用して生成したHTMLの例

なお、HtmlCanvasのコンストラクタを引数なしで呼び出した場合、出力先は自動的に内部的なStringWriterオブジェクトとなる。このStringWriterに出力された内容は、toHtml()メソッドを呼び出すことでStringとして取り出すことができるようになっている。

タグに属性を付ける

続いて、出力するタグに属性を付けてみよう。属性を出力するにはHtmlAttributesクラスを利用する。このクラスのインスタンスは、属性の名前と値をセットにして保持する。これをタグ出力用のメソッドに渡すことで、指定された属性が付けられたタグが出力される。例えばbodyタグにonload属性を付けたい場合は次のように記述すればよい。

html.body(new HtmlAttributes("onload", "init()"));

出力結果は次のようになる。

<body onload="init()">

HtmlAttributesには、add()メソッドを使って複数のタグを追加することもできる。また、属性名に対応したメソッドが用意されており、このメソッドの引数に値を渡して呼び出すことで属性を追加することもできるようになっている。これらのメソッドはHtmlAttributesオブジェクト自身を返すため、HtmlCanvasの場合と同様に連続して呼び出すことが可能。例えば以下のような感じだ。

HtmlAttributes attr = new HtmlAttributes("id", "hoge");
attr.add("class", "piyo");
attr.width("100").height("20");
html.div(attr);

出力結果は次のようになる。

<div id="hoge" class="piyo" width="100" height="20">

一般的に利用する属性についてはHtmlAttributesFactoryクラスを利用すると便利だ。このクラスには各属性に対応したstaticメソッドが用意されており、引数として値を指定して呼び出すことで対応するHtmlAttributesオブジェクトを生成してくれる。このクラスを利用すると、上のdivタグの例は次のように記述できる。

html.div(HtmlAttributesFactory.id("hoge").class("piyo").width("100").height("20"));

この方法を用いて入力フォームを生成するコードを生成してみよう。この場合、formタグやinputタグに属性を付ける必要がある。以下にHTML出力部分の例を示す。

html.html()
  .body(new HtmlAttributes("onload", "init()"))
    .h1()
      .write("renderSnakeのサンプル")
    ._h1()
    .form(HtmlAttributesFactory.action("/FormAction").method("POST"))
      .label(HtmlAttributesFactory.for_("message"))
        .write("メッセージ:")
      ._label()
      .input(HtmlAttributesFactory.type("text").id("message"))
      .input(HtmlAttributesFactory.type("submit").value("送信"))
    ._form()
  ._body()
._html();

出力結果は以下のようになる(見やすいように改行を入れている)。Webブラウザでの表示は図2のようになる。

<html>
  <body onload="init()">
    <h1>renderSnakeのサンプル</h1>
    <form action="/FormAction" method="POST">
      <label for="message">メッセージ:</label>
      <input type="text" id="message"/>
      <input type="submit" value="送信"/>
    </form>
  </body>
</html>

図2 :タグに属性を追加した例

Renderableでコード生成をコンポーネント化する

HTML生成部分の細分化や、何度も使うコードの再利用にはRenderableインタフェースによるコンポーネント化を利用しよう。このインタフェースにはHtmlCanvasオブジェクトを受け取るrenderOn()というメソッドが定義されている。これをオーバーライドし、渡されたにHtmlCanvasに対してタグを出力するコードを追加してみる。次に示すMyFormComponentクラスは、前述のフォームの例から入力フォームを生成する部分だけを抜き出し、それをrenderOn()の処理とした例である。

public class MyFormComponent implements Renderable {
  @Override
  public void renderOn(HtmlCanvas html) throws IOException {
    // フォーム用のコードを出力
    html.form(HtmlAttributesFactory.action("/FormAction").method("POST"))
      .label(HtmlAttributesFactory.for_("message"))
        .write("メッセージ:")
      ._label()
      .input(HtmlAttributesFactory.type("text").id("message"))
      .input(HtmlAttributesFactory.type("submit").value("送信"))
    ._form();
  }
}

HtmlCanvasクラスにはrender()というメソッドが用意されている。このメソッドにRenderableをimplementsしたクラスのインスタンスを渡すと、、呼び出し元のHtmlCanvasインスタンスを引数としてrenderOn()が実行される。したがって、以下のようにMyFromComponentを利用するれば、先ほどの入力フォームの例と同様のHTMLコードが出力されるということだ。

html.html()
  .body(new HtmlAttributes("onload", "init()"))
    .h1()
      .write("renderSnakeのサンプル")
    ._h1()
    .render(new MyFormComponent())
  ._body()
._html();

次回は、renderSnakeのサーバサイドでの利用方法を紹介しよう。

55/61

インデックス

連載目次
第61回 ユニットテスト用モック作成ツール「EasyMock」によるメソッド呼び出し検証
第60回 ユニットテストのためのモックを簡単に作成できる「EasyMock」
第59回 スタンドアロンでのTymeleafテンプレートの利用
第58回 Java用テンプレートエンジン「Thymeleaf」の標準文法セットを利用する
第57回 XHTML/XML/HTML5をサポートしたテンプレートエンジン「Thymeleaf」
第56回 「renderSnake」をサーバサイドで利用する
第55回 直感的なHTMLコードの生成が可能な「renderSnake」
第54回 「PrimeFaces」でUIとサーバ側のManagedBeanを連携させる
第53回 収録数は100以上! JSF用軽量コンポーネントスイート「PrimeFaces」
第52回 Googleが開発した高速圧縮ライブラリ「Snappy」をJavaで使う
第51回 JSFコンポーネントライブラリ「OpenFaces」でグラフを表示する
第50回 Ajaxを利用したJSFコンポーネントライブラリ「OpenFaces」
第49回 Java用RIAフレームワーク「Vaadin」でのイベント処理
第48回 Java用RIAフレームワーク「Vaadin」を利用したWebアプリケーション開発
第47回 GWTベースのJava用RIAフレームワーク「Vaadin」
第46回 「StringSearch」による文字クラス/ミスマッチ文字を含む文字列検索
第45回 Javaライブラリ「StringSearch」による文字列検索
第44回 高速な文字列検索を実現するJavaライブラリ「StringSearch」
第43回 「AsyncHttpClient」でゼロコピー・アップロード/ダウンロードを実現する
第42回 AsyncHttpClientを用いたJavaプログラムによる非同期HTTP通信
第41回 Javaで非同期なHTTP通信を行うための「AsyncHttpClient」
第40回 AWT/SwingアプリをAjax Webアプリに変換する「AjaxSwing」
第39回 Java用IMライブラリ「Smack」で仲間リストの変更を検出する
第38回 Java用IMライブラリ「Smack」で仲間リストを表示する
第37回 XMPP対応IMアプリを手軽に作成できるJavaライブラリ「Smack」
第36回 AndroidでZXingを使ってバーコードを読み取るには
第35回 「ZXing」でQRコードに格納された情報を読み取る
第34回 バーコードの読み書きをサポートするJava/Android用ライブラリ「ZXing」
第33回 PDF Rendererを利用してSwingプログラムにPDFを取り込む
第32回 Javaプログラムに組み込んで使えるPDF描画ライブラリ「PDF Renderer」
第31回 Apache FOPをServletで利用する
第30回 JavaプログラムからApache FOPを利用する
第29回 XSL-FO文書からPDF文書を作成するための「Apache FOP」
第28回 iTextにおけるリストおよびテーブルの使い方
第27回 PDF生成ライブラリ「iText」における文書オブジェクトの構造
第26回 PDF文書を生成するJava用ライブラリ「iText」
第25回 face.com APIを利用して写真の顔認識を行う
第24回 face.com APIを利用して顔写真のタグ情報を更新/登録する
第23回 JavaScriptからFace.comの顔認識APIを利用する
第22回 Face.comが無料公開した顔認識APIとは
第21回 Aptana StudioおよびEclipseでZen-Codingを利用する
第20回 Zen-Codingをカスタマイズしてさらにコーディング効率を上げる
第19回 HTMLやCSSのコーディングを爆発的に効率化する「Zen-Coding」
第18回 qooxdooの低レベルAPIでHTML要素を操作する
第17回 「qooxdoo」でDOMを直接操作する
第16回 「qooxdoo」でWebアプリケーションをカスタマイズする
第15回 HTML/CSS/DOMを書かないWebアプリケーションフレームワーク「qooxdoo」
第14回 JsTestDriverによるJavaScriptのユニットテスト その2
第13回 JavaScript用のユニットテストフレームワーク「JsTestDriver」」
第12回 ODF文書を扱うためのJava API「ODFDOM」で表計算ドキュメントを作成する
第11回 JavaプログラムでODF文書を扱うための「ODFDOM」
第10回 RESTEasyのクライアントフレームワーク
第9回 JBoss製JAX-RS実装「RESTEasy」を試す
第8回 JaValidを用いてバリデータを自作する
第7回 Javaオブジェクトのバリデーションを可能にするフレームワーク「JaValid」
第6回 Ftpletを用いてApache FtpServerの動作をカスタマイズする
第5回 アプリケーションへの組込みも可能な「Apache FtpServer」
第4回 Web標準技術を活用したOSSのRIAプラットフォーム「Appcelerator Titanium」
第3回 Javaアプリケーション対応のクラウド環境「Stax Networks」 その3
第2回 Javaアプリケーション対応のクラウド環境「Stax Networks」 その2
第1回 Javaアプリケーション対応のクラウド環境「Stax Networks」

もっと見る

    

    マイナビニュースのセミナー情報

    オススメ記事

    マイナビニュースの集合特集

    関連サイト

    新着記事

    転職ノウハウ

    あなたの仕事適性診断
    あなたの仕事適性診断

    4つの診断で、自分の適性を見つめなおそう!

    Heroes File ~挑戦者たち~
    Heroes File ~挑戦者たち~

    働くこと・挑戦し続けることへの思いを綴ったインタビュー

    はじめての転職診断
    はじめての転職診断

    あなたにピッタリのアドバイスを読むことができます。

    転職Q&A
    転職Q&A

    転職に必要な情報が収集できます

    ドS美人面接官 vs モテたいエンジニア
    ドS美人面接官 vs モテたいエンジニア

    入室しようとしたら、マサカリ投げられちゃいました!?

    特別企画

    一覧

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      一覧

        求人情報