HTMLにデータを差し込むには

Velocityコンポーネント

テンプレートを使って動的にテキストを生成するためのコンポーネントとして、Velocityコンポーネントが用意されています。テンプレートに、指定された書式で入力ストリームを差し込むことで、HTMLやXMLなどのデータに変換して出力できるようになります。

VelocityコンポーネントでデータをHTMLに差し込む

1.Webサービスから取り込んだデータのマッピング設定などを行い、「ツール」タブのVelocityコンポーネント(「Velocityを使ってデータの差込み変換します」)を配置して接続する

9-2-01.PNG

HINT
Velocityコンポーネントは、テンプレートファイルを用いてデータの変換を行うためのコンポーネントです。入力ストリームや変数などの値を、Velocityテンプレートの任意の位置に埋め込みできます。少々複雑なフォーマットのJSONを生成したり、独自業務アプリの設定ファイルを生成したりと、いろいろな用途に活用が可能です。

Velocityテンプレートを直接入力するには
Velocityコンポーネントプロパティの「テンプレートの指定方法」で「直接入力」を指定し、表示される「テンプ レートの内容」プロパティにテンプレートの内容を直接テキストで入力することもできます。

 

2.Velocityコンポーネントの「ファイルパス」プロパティに、テンプレートとするファイルへのパスを指定する

9-2-02.PNG

 

3.ストリーム型を「HTML」に変更する

9-2-03.PNG

HINT
Webページの文字化けを防ぐために、必要に応じてストリームプロパティの「出力エンコーディング」も変更してください。

 

4.Velocityコンポーネントアイコンをダブルクリック、または右クリックして「テンプレート の編集」を選択し、「テンプレートの編集」ダイアログを表示する

9-2-04.PNG

 

5.テンプレートを編集する

9-2-05.PNG  9-2-06.PNG

HINT
コンポーネント内でのみ有効な変数は、「ローカル変数」 プロパティで定義できます。ローカル変数は、Velocityテンプレート内では「$local」として参照できます。

 

6.「OK」をクリックして「テンプレートの編集」ダイアログを閉じ、確認のダイアログが表示された場合は「はい」をクリックする

9-2-07.PNG

URLトリガーの実行設定を定義してブラウザから実行できるようにし、フローをブラウザから実行すると、 指定したマッピングとテンプレートに基づいてデータが差し込まれ、Webページとしてブラウザに出力されます。

9-2-08.PNG

HINT
テンプレートの編集
テンプレート内では、オブジェクトとして各データを参照できます。たとえば、フロー変数は「$flow. <フロー変数名>」として、システム変数は「$system. <システム変数名>」として参照できます。また、コンポーネントに入力されたストリームはすべて$inに格納され、arrayメソッドを用いて各ストリームにアクセスでき、record メソッドを用いてストリーム内の各レコードにアクセスできます。Velocityについての詳細は、http://velocity. apache.org/ を参照してください。

プレビューを利用するには
「テンプレートの編集」ダイアログで「プレビュー」をクリックすると、テンプレート内容とテストデータによる、 結果のプレビューが表示されます。ただし、プレビューファイルはクライアント環境で作成されるため、外部変数セットとシステム変数は参照できず、「$exvar.xxxx」のようなキーワードがそのまま表示されるという制限があります。また、テンプレートで#parseなどの外部ファ イルを参照する機能を使用している場合はプレビューできません。

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
    キーワード:
  • HTML
  • Velocity
他にご質問がございましたら、リクエストを送信してください

このセクションの記事

他のキーワードで検索する