2.6.1 ScrapingView

ScrapingViewは、Webアプリケーションからスクレイピングしたコンテンツを表示する部品です。マッシュアッププロキシから取得したコンテンツを表示する場合などに使用します。

表示例

HTMLドキュメント、およびdata属性に指定したmodelData.scrapingHtmlの値が以下の場合の表示例を示します。

HTMLドキュメント

...
<div rcf:type="Model" rcf:id="dataModel" rcf:object="modelData"></div>
<div rcf:type="ScrapingView" rcf:id="scrapingView" rcf:data="{dataModel.scrapingHtml}"
    rcf:width="200" rcf:height="100" rcf:overflow="auto"></div>
...

modelData.scrapingHtmlの値

<div><p><a href="http://jp.fujitsu.com/">
    <img src="http://interstage.fujitsu.com/jp/imgv3/jp/ja/fujitsu/messagelockup.gif"
     width="300" height="50" alt="富士通" /></a></p>
</div>

表示例

記述形式

<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="ScrapingView" data="{model1.html}" ... ></div>

modelで定義したオブジェクトは、ScrapingViewのdata属性で指定する値と対応をとる必要があります。(「.html」の箇所は、アプリケーションに依存した属性名となります。)

注意

子要素は指定できません。詳細は、「5.1.4 子要素を持たない部品に子要素を記述した場合の動作」を参照してください。

ポイント

本部品は、前後に改行コードが挿入されて表示されます。
ScrapingViewで使用するデータ(dataプロパティで指定したデータ)は、Modelによりモデル定義されたデータとバインディングします。Modelの仕様については、「3.1.1 Model」を参照してください。
ScrapingViewには、以下の方法でフォーカスを当てることができます。フォーカスはScrapingView全体に当たり、フォーカスがある状態では、キーボードによる操作が可能になります。
- ブラウザが提供するTabキーおよびTab+SHIFTキーによるフォーカス移動
- FocusManagerによるフォーカス移動
- ScrapingViewをマウスでクリック

プロパティ

表の項目の意味は、「Text」の「プロパティ」を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
data	String	Webスクレイピングコンテンツを文字列で指定します。	可	""	バインド	可	不可
disableTagNames	String	dataプロパティで指定したコンテンツの中で、無効にするタグ名を正規表現で指定します。	可	(注1)	値	不可	不可
disableAttributeNames	String	dataプロパティで指定したコンテンツの中で、無効にする属性名を正規表現で指定します。	可	(注2)	値	不可	不可

注2) "^(id|class|tabindex|on.*)$"

部品共通のプロパティも指定できます。詳細は、「2.8.1 画面部品共通プロパティ」を参照してください。
なお、styleClassプロパティは、dataで指定したHTML部分を囲むスタイルに使用されます。含まれる個々のタグにスタイルを適用する機能はありません。

ScrapingViewの記述例

以下にScrapingViewとMuRequestを組み合わせての使用する例を示します。

<script type="text/javascript">
//<![CDATA[
  // イベント定義
  var myEvent = {
    userButton:{
      click:userTable
    }
  };
  // 初期処理定義
  RCF.addInitializedListener(
    function(eventObject) {
      // イベント登録
      rcf.event.EventRegistrar.registerEvents(myEvent);
    }
  );
  var userData = {
    userId:'',
    userTableHTML: ''
  };
  function userTable(event){
    var reqParams = {
      serviceId:'employeeInfo',  // 登録したサービスID(webスクレイピング)
      type : 'xml'  //結果をXML形式の文字列で取得する
    };
    var option = {
      url:'muf/proxy',
      callback:function(html){ // Webサービスの結果を処理
        //webスクレイピング結果をScrapingViewのdataプロパティに反映
        userDataModel.setProperty('userTableHTML', html);
      }
    };
    var user=new Object();
    user.userId=userDataModel.getProperty('userId');
    MuRequest.send(user, reqParams, option);  // webスクレイピング呼出し
  }
//]]>
</script>
<!-- 機能定義部 -->
<div rcf:id="userDataModel" rcf:type="Model" rcf:object="userData"></div>
<!-- 画面情報定義部 -->
ユーザーID:
<span rcf:id="search" rcf:type="TextInput" rcf:value="{userDataModel.userId}"></span>
<div rcf:id="userButton" rcf:type="Button" rcf:value="search">検索</div>
<!-- 結果表示部 -->
<div rcf:id="result" rcf:type="ScrapingView" rcf:data="{userDataModel.userTableHTML}"></div>

スタイルプロパティ

本部品全体のスタイルプロパティを以下に示します。

パーツ名	プレフィックス	クラス名	指定可能なスタイル
部品全体	なし	rcf-ScrapingView	サイズカラーフォントテキストボーダーパディングマージンポジションオーバーフロー

詳細は、「2.9 スタイルプロパティ」を参照してください。

イベントリスナ

名前	説明	イベントオブジェクト
onDataChange	Dataプロパティが変更されたときに呼ばれます。	ValueChangeEvent

部品共通のイベントリスナもあります。部品共通のイベントリスナは、「2.8.2 画面部品共通イベントリスナ」を参照してください。

JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、「2.8.3 画面部品共通JavaScript API」を参照してください。

補足事項

本部品を使用する場合、以下の注意事項があります。

スクレイピングしたコンテンツ内に、スクリプトは記述しないでください。スクリプトが含まれているコンテンツを表示したい場合には、disableTagNamesやdisableAttributeNamesを用いて、無効化してください。
一般的にスクリプトを含む可能性がある、<script>タグや「on*」によるイベント記述属性は、disableTagNamesやdisableAttributeNamesのデフォルト値で無効化されます。スクリプトは、記述する場所にかかわらず、動作は保障されません。
スクレイピングしたコンテンツ内にスタイルが指定されている場合、その指定のとおりに表示されます。意図しないスタイルが含まれている場合には、disableAttributeNamesに「style」を含めるなどして、コンテンツ内の指定を無効化することができます。
スクレイピングしたコンテンツ内のフォーカスの移動は、FocusManagerではできません。
id属性およびclass属性は、disableAttributeNamesのデフォルト値に従って削除されます。
これらの属性を有効とし、かつスクレイピングしたコンテンツに含まれる、id属性およびclass属性が、Ajaxフレームワークが作成する属性と重複した場合、Ajaxフレームワークとして動作は保障されません。「5.1.3 画面部品表示時のエラー」も参考にしてください。