Web アプリケーションでのマッシュアップ作成は頭痛の種になる可能性があります。開発者は JavaScript や RSS、Atom の解析、JSON の解析、その他のフォーマットの解析などを幅広く理解していなければなりません。また、マッシュアップ・サービス・プロバイダーが提供する下位レベルの API も勉強する必要があり、マッシュアップと Web アプリケーションとを統合するためにコードを大量に作成する必要もあります。Mashups4JSF はインキュベーション段階のオープンソース・プロジェクトであり、マッシュアップ・サービスと JSF の世界とを統合することを目指しています。Mashups4JSF では、単純なタグを使用することで、リッチでカスタマイズされたマッシュアップを作成することができます。この記事では、Mashups4JSF のアーキテクチャーと Mashups4JSF のライブラリーの構成について説明するとともに、Mashups4JSF と WebSphere® Application Server V7.0 の IBM® JWL (JSFWidget Library)、そして JSF 2 を使って、わずかな行数のコーディングをするだけでマッシュアップ・アプリケーションを作成する方法について説明します。

Hazem Saleh, Staff Software Engineer, IBM  

Photo of Hazem SalehHazem Saleh は JEE とオープンソース技術に 6 年の経験があります。彼は Apache MyFaces のコミッターであり、また MyFaces プロジェクトの多くのコンポーネントに関する作業を開始してきました (Tomahawk CAPTCHA、Commons ExportActionListener、Media、PasswordStrength など)。彼は GMaps4JSF (Google マップと JavaServer Faces とを統合するプロジェクト) と Mashups4JSF (マッシュアップ・サービスと JavaServer Faces とを統合するプロジェクト) の創始者です。彼は『The Definitive Guide to Apache MyFaces and Facelets』(Apress 刊) の著者であり、JSF に関する多くの記事を執筆しており、developerworks への寄稿者であり、JSF の正式講演者でもあります。現在はスタッフ・ソフトウェア・エンジニアとして IBM エジプトに勤務しており、そこでは Web 2.0 技術のエキスパートとして認められています。



2010年 7月 13日

Mashups4JSF のアーキテクチャー

図 1 は Mashups4JSF のアーキテクチャーを示しています。

図 1. Mashups4JSF のアーキテクチャー
このフローチャートは Mashups4JSF のアーキテクチャーを表しており、Mashups4JSF のコンポーネントとクライアントがどのように接続されるかを示しています。

Mashups4JSF のコンポーネントはマッシュアップ・サービス・プロバイダーが提供するクライアント・サイドの API または REST API を介して、マッシュアップ・サービスとやり取りします。Mashups4JSF には、各マッシュアップ・サービス・プロバイダーに対して実装されたサービスをラップする、一連のファクトリーが用意されています。現状、Mashups4JSF には Google、Yahoo!、YouTube、Twitter、Digg のためのファクトリーがあります。このアーキテクチャーを使用することで、現在サポートされているマッシュアップ・サービス・プロバイダー用のサービスを追加したり、新しいマッシュアップ・サービス・プロバイダー用にファクトリーを追加したりするのが容易になります。このアーキテクチャーのもう 1 つのメリットとして、ラップされたマッシュアップ・サービスは Mashups4JSF のコンポーネントから完全に分離されているため、マッシュアップ・サービスを独立に使用することができます。この記事の執筆時点で、Mashups4JSF には以下のコンポーネントが実装されています。

  • Yahoo! 天気情報<mashup:yahooWeather/>: JSF アプリケーションを Yahoo! 天気情報と統合することができます。
  • YouTube プレーヤー <mashup:youTubePlayer/>: JSF アプリケーションの中で YouTube の動画を再生することができます。
  • YouTube 動画リスト <mashup:youTubeVideoList/>: 適当な検索条件を使って YouTube の動画を検索することができます。
  • Digg での検索リスト <mashup:diggSearchList/>: 適当な検索条件を使って Digg のニュース記事を検索することができます。
  • Google での検索リスト <mashup:googleSearchList/>: 適当な検索条件を使って Google で検索することができます。
  • RSS フィード・リーダー <mashup:rssFeedReader/>: JSF アプリケーションの中で RSS フィードを読むことができます。
  • ATOM フィード・リーダー <mashup:atomFeedReader/>: JSF アプリケーションの中で ATOM フィードを読むことができます。
  • GMaps4JSF (Google マップを JavaServer Faces と統合するためのライブラリー): 現在、GMaps4JSF は Mashups4JSF に組み込まれていませんが、Mashups4JSF ライブラリーの V1.0 には組み込まれる予定です。

JSF アプリケーションで Mashups4JSF を使えるように構成する

JSF アプリケーションで Mashups4JSF を使えるように構成するためには、以下の手順に従います。

  • 最新の安定版 Mashups4JSF の JAR をダウンロードします。この記事の執筆時点で、Mashups4JSF の最新の安定版 JAR はこちらです。
  • Mashups4JSF は Rome V0.9 と JDOM V1.0 に依存しています。そのため、この 2 つを必ずアプリケーションのクラスパスに含めるようにします。また WebSphere Application Server V7.0 を使用している場合は、他にも依存関係として JDOM V1.0 が必要です。
  • ダウンロードした JAR を、JSF Web アプリケーションの lib フォルダー (WEB-INF/lib) に配置します。
  • JSP ページ内でタグ・ライブラリー宣言をします (リスト 1)。
リスト 1. JSP ページ内で Mashups4JSF のタグ・ライブラリー宣言をする
<%@ taglib uri="http://code.google.com/p/mashups4jsf/" prefix="mashup" %>

JSF アプリケーションが JSF 2 (または Facelet) の場合には、タグ・ライブラリー宣言を XHTML ページ内で行います (リスト 2)。

リスト 2. XHTML ページ内で Mashups4JSF のタグ・ライブラリー宣言をする
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:mashup="http://code.google.com/p/mashups4jsf/">

Mashups4JSF の resources タグを JSP ページの <head> 要素の中に含めます (リスト 3)。

リスト 3. Mashups4JSF の resources タグを JSP ページの <head> 要素の中に含める
<head>
    ...
    <mashup:resources />
    ...
    </head>

JSF アプリケーションが JSF 2 アプリケーションの場合には、resources タグを XHTML ページの <h:head> 要素の中に配置します (リスト 4)。

リスト 4. Mashups4JSF のリソース・タグを XHTML ページの <h:head> 要素の中に含める
<h:head>
    ...
    <mashup:resources />
    ...
    </h:head>

Maven2 のサポート

Mashups4JSF では Google Code 上に Maven2.0 のリポジトリーがあります。Maven2.0 Web アプリケーションに Mashups4JSF の JAR を含めるためには、Mashups4JSF の依存関係をアプリケーションの pom.xml に追加する必要があります (リスト 5)。

リスト 5. Mashups4JSF の Maven2 への依存関係を pom.xml に追加する
<repositories>
        ...
        <repository>
            <id>googlecode.com</id>
            <url>http://mashups4jsf.googlecode.com/svn/trunk/mashups4jsf-repo</url>
        </repository>
        
</repositories>    

<dependencies>
        ...    
        <dependency>
            <groupId>com.googlecode.mashups4jsf</groupId>
            <artifactId>mashups4jsf-core</artifactId>
            <version>0.0.2-SNAPSHOT</version>
        </dependency>  
        </dependencies>

Places マッシュアップ・アプリケーション (JWL バージョン)

JWL アプリケーションで GMaps4JSF を使えるように構成する

Places アプリケーションは GMaps4JSF を使って Google マップを表示します。GMaps4JSF の使い方の詳細については「WebSphere 7.0 環境で IBM JWL と GMaps4JSF を使ってマッシュアップ・アプリケーションを作成する」を見てください。

では Places マッシュアップ・アプリケーションに移りましょう。Places アプリケーションには、マスター dataTable、詳細な地図、詳細な天気欄があります。dataTable の各行は住所を表します。このアプリケーションのユーザーが任意の行で「Retrieve Information (情報を取得)」ボタンをクリックすると、その場所の位置が詳細な地図の中に表示され、またその場所の天気情報が天気欄に表示されます。図 2 は Places アプリケーションのスクリーン・ショットを示しています。

図 2. Places アプリケーション
このスクリーン・ショットでは、上半分に場所の一覧があり、それぞれの場所に「Retrieve Information (情報を取得)」ボタンがあります。下半分には、選択された場所の地図と天気のデータが表示されています。

リスト 6 は、index.jsp (Places アプリケーションのページ) のコードの最も重要な部分を示しています。"cmdRetrieve" という commandExButton がクリックされると、選択された行 (その場所の情報を含んでいます) が Ajax プロトコルを使ってサーバーに送信されます。Bean のアクション #{place.setSelectedPlace} では、リスト 7 に示すリクエストの属性 "selectedPlace" に場所の情報が設定されます。#{selectedPlace} 式でその場所の住所と郵便番号を指定すると、地図と天気欄の両方が更新されます。地図にはその場所が表示され、またその場所の住所を指すマーカーと、その場所の住所を示す情報ウィンドウが表示されます。天気欄は、裏で Yahoo! 天気情報の REST API のリモート呼び出しを行った後、その場所の天気情報を表示します。

リスト 6. Places アプリケーションの JSP ページ (index.jsp)
<h:dataTable value="#{places.data}"
             var="place"
             ...>
<!--Columns Here-->
			 
             <h:column>
             <f:facet name="header">
                 <h:outputText value="Action" />
             </f:facet>

            <hx:commandExButton id="cmdRetrieve"
                                value="Retrieve Information"
                                action="#{place.setSelectedPlace}">
                                <hx:behavior event="onclick" id="behavior1"
                                             behaviorAction="get"
                                             targetAction="placeInformation">
                                </hx:behavior>
            </hx:commandExButton>

             </h:column>
</h:dataTable>


<h:panelGrid columns="2" id="placeInformation">
             <h:panelGroup id="placeMap">
                 <m:map width="400px" height="300px"
                        renderOnWindowLoad="false"
                        rendered="#{selectedPlace ne null}"
                        address="#{selectedPlace.longAddressName}" 
                        zoom="9">
                        <m:marker/>
                        <m:htmlInformationWindow 
                                htmlText="#{selectedPlace.longAddressName}"/>
                 </m:map>
             </h:panelGroup>
    
             <h:panelGroup id="placeWeather">
                 <mashup:yahooWeather locationCode="#{selectedPlace.postalCode}"
                                      rendered="#{selectedPlace ne null}" 
                                      temperatureType="c"/>
             </h:panelGroup>
</h:panelGrid>
<hx:ajaxRefreshSubmit target="placeInformation" id="ajaxRefreshSubmit1"/>

リスト 7 は、Place Bean のコードを示しています。この中には、単純にゲッターとセッター、そして setSelectedPlace アクションが含まれています。

リスト 7. Place Bean のコード (Place.java)
public class Place {
    String shortAddressName;
    String longAddressName;
    String postalCode;

    // Some setters and getters here ...

    public String setSelectedPlace() {
        FacesContext.getCurrentInstance().getExternalContext().
        getRequestMap().put("selectedPlace", this);

        return null;
    }
}

Places マッシュアップ・アプリケーション (JSF 2.0 バージョン)

Mashups4JSF は JSF 2 の実装 (Mojarra V2.0 と Apache MyFaces V2.0) で完璧に動作します。Places アプリケーションには JSF 2.0 バージョンがあります。JSF 2.0 バージョンと JWL バージョンとの主な違いは Ajax の処理方法にあります。JSF 2.0 のおかげで、Ajax の処理は JSF 仕様の一部となり、<hx:behavior/> タグと <hx:ajaxRefreshxxx/> タグの機能は、<f:ajax/> タグによって実行可能になりました。リスト 8 は JSF 2.0 で Ajax の処理を行う index.xhtml (Places アプリケーションのページ) のコードを示しています。

リスト 8. Places アプリケーションの XHTML ページ (index.xhtml)
<h:dataTable value="#{places.data}"
             var="place"
             ...>
<!--Columns Here-->
			 
             <h:column>
             <f:facet name="header">
                 <h:outputText value="Action" />
             </f:facet>

            <h:commandButton id="cmdRetrieve"
                             value="Retrieve Information"
                             action="#{place.setSelectedPlace}">
                             <f:ajax render=":form1:placeMap :form1:placeWeather"/>
            </h:commandExButton>

             </h:column>
</h:dataTable>


<h:panelGrid columns="2" id="placeInformation">
             <h:panelGroup id="placeMap">
                 <m:map width="400px" height="300px"
                        renderOnWindowLoad="false"
                        rendered="#{selectedPlace ne null}"
                        address="#{selectedPlace.longAddressName}" 
                        zoom="9">
                        <m:marker/>
                        <m:htmlInformationWindow 
                                htmlText="#{selectedPlace.longAddressName}"/>
                 </m:map>
             </h:panelGroup>
    
             <h:panelGroup id="placeWeather">
                 <mashup:yahooWeather locationCode="#{selectedPlace.postalCode}"
                                      rendered="#{selectedPlace ne null}" 
                                      temperatureType="c"/>
             </h:panelGroup>
</h:panelGrid>

リスト 8 を見るとわかるように、"cmdRetrieve" という commandButton から Ajax リクエストを送信するためには、<f:ajax/> タグを <h:commandButton/> の中に配置し、サーバーからレスポンスが返されたときに再描画されるコンポーネント (この場合は「placeMap」という地図と、「placeWeather」という天気欄) を指定します。

JSF 2 実装の場合、Places アプリケーションは Apache MyFaces V2.0 コアを使用します。Web アプリケーションで Apache MyFaces V2.0 コアを構成するためには以下の手順に従います。

  • http://myfaces.apache.org/download.html にアクセスします。
  • myfaces-core-2.0.0-bin.zip をダウンロードして解凍します。
  • 解凍されたファイルの lib フォルダーから Web アプリケーションの lib フォルダーに JAR をコピーします。
  • faces-config.xml に JSF 2 宣言があることを確認します (リスト 9)。
    リスト 9. faces-config.xml ファイル
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <faces-config xmlns="http://java.sun.com/xml/ns/javaee"
                  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                  http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
                  version="2.0">
    
    </faces-config>
  • web.xml の中で FacesServlet が宣言されていることを確認します (リスト 10)。
    リスト 10. web.xml ファイル
    <?xml version='1.0' encoding='UTF-8'?>
    <web-app version="2.5"
             xmlns="http://java.sun.com/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
             http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
             ...
    		 
             <servlet>
               <servlet-name>Faces Servlet</servlet-name>
               <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
             </servlet>
    
             <servlet-mapping>
               <servlet-name>Faces Servlet</servlet-name>
               <url-pattern>*.xhtml</url-pattern>
             </servlet-mapping>
    		 
    </web-app>

まとめ

この記事では、Mashups4JSF とその構成方法、そして Mashups4JSF を使って有用なマッシュアップ・アプリケーションを作成する方法について学びました。Mashups4JSF は開発コミュニティーに対し、GMaps4JSF によって行われる作業を補完する宣言型のマッシュアップを提供することを目指しています。今後の記事では、(ATOM/RSS) フィードの生成サービスなど、Mashups4JSF の他の機能や、他の Mashups4JSF コンポーネントとのやり取りの例、ポートレット環境内での Mashups4JSF の動作などについて説明する予定です。

参考文献

学ぶために

製品や技術を入手するために

  • 皆さんの次期オープンソース開発プロジェクトを IBM ソフトウェアの試用版を使って革新してください。ダウンロード、あるいは DVD で入手することができます。
  • IBM 製品の評価版をダウンロードするか、あるいは IBM SOA Sandbox のオンライン試用版で、DB2®、Lotus®、Rational®、Tivoli®、WebSphere® などが提供するアプリケーション開発ツールやミドルウェア製品を試してみてください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source
ArticleID=512986
ArticleTitle=Mashups4JSF の紹介
publish-date=07132010