Symfoware

Symfowareについての考察blog

Google Web Toolkit 2.1 はてなブックマークエントリーをJSONPで取得 その3

Google Web Toolkit 2.1のチュートリアルを試してみています。
Google Web Toolkit に関する記事の一覧


JSONPでデータが取得できるところまで、前回試してみました。
Google Web Toolkit 2.1 はてなブックマークエントリーをJSONPで取得 その2

今回は、JSONPで取得したデータを全てオブジェクトに格納してみます。


Making cross-site requests
こちらを参考に、プログラムを作成しました。




配列データ(bookmarks)の取得



前回は、一番変換が簡単そうなデータだけ取得してみました。


count(ブックマークしている合計ユーザ数)
url(ブックマークされているURL)
title(タイトル)
eid(エントリーID)
entry_url(はてなブックマークエントリーページのURL)
screenshot(スクリーンショット画像のURL)





今回は、配列で定義されている「bookmarks」のデータを取得してみます。
bookmarks配列の個々の内容はこんな感じになります。


comment(コメント)
timestamp(ブックマークした時刻)
user(ブックマークしたユーザ名)
tags(タグの配列)





かなり手探りでしたが、まずbookmarks配列用のオブジェクトを
定義しました。

パッケージ・エクスプローラーで「com.fc2.blog68.symfoware.hatena.client」を
選択した状態でEclipseの[ファイル]-[新規]-[クラス]を選択。

名前に「HatenaBookmarkData」
スーパークラスに「com.google.gwt.core.client.JavaScriptObject」
と入力して、完了を押下します。

14_001.png



クラスの内容は以下のとおり。


package com.fc2.blog68.symfoware.hatena.client;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArrayString;

public class HatenaBookmarkData extends JavaScriptObject {
    
    protected HatenaBookmarkData() {
    }
    
    // コメント
    public final native String getComment() /*-{ return this.comment; }-*/;
    
    // ブックマークした時刻
    public final native String getTimestamp() /*-{ return this.timestamp; }-*/;
    
    // ブックマークしたユーザ名
    public final native String getUser() /*-{ return this.user; }-*/;
    
    // タグの配列
    public final native JsArrayString getTags() /*-{ return this.tags; }-*/;
}



タグの配列は、文字列の配列となるのですが、この戻り値に
何を指定すればよいかわからずはまりました。

最初、戻り値をString[]としていたのですが、これだと
オブジェクト変換時にエラーになります。

どうやら、「com.google.gwt.core.client.JsArrayString」を
使えばJSONの文字列配列を表現できるようです。


前回作成した「HatenaData」クラスにブックマークの配列を
取得するためのメソッド「getBookmarks()」を追加します。




package com.fc2.blog68.symfoware.hatena.client;

import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;

public class HatenaData extends JavaScriptObject {
    
    protected HatenaData() {
    }
    
    // ブックマークしている合計ユーザ数
    public final native String getCount() /*-{ return this.count; }-*/;
    
    // ブックマークされているURL
    public final native String getUrl() /*-{ return this.url; }-*/;
    
    // タイトル
    public final native String getTitle() /*-{ return this.title; }-*/;
    
    // エントリーID
    public final native String getEid() /*-{ return this.eid; }-*/;
    
    // はてなブックマークエントリーページのURL
    public final native String getEntryUrl() /*-{ return this.entry_url; }-*/;
    
    // スクリーンショット画像のURL
    public final native String getScreenShot() /*-{ return this.screenshot; }-*/;
    
    // bookmarks配列を取得
    public final native JsArray<HatenaBookmarkData> getBookmarks() /*-{ return this.bookmarks; }-*/;
}






getBookmarks()の戻り値を以下のように定義するのがミソ。


JsArray<HatenaBookmarkData>








テーブルにデータを表示する処理



これでデータの取得と変換が行えるようになりました。
テーブルに取得したデータを表示する処理を追加します。


package com.fc2.blog68.symfoware.hatena.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.http.client.URL;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;


public class Hatena implements EntryPoint {
    
    // 検索するURLを入力するテキストボックス
    private TextBox findText = new TextBox();
    // 検索事項ボタン
    private Button findButton = new Button("検索");
    
    // 検索条件、検索ボタンを配置するパネル
    private HorizontalPanel findPanel = new HorizontalPanel();
    // 検索結果を表示するためのテーブル
    private FlexTable bookmarksFlexTable = new FlexTable();
    
    // はてなAPIのURL
    private static final String JSON_URL = "http://b.hatena.ne.jp/entry/json/?url=";
    
    // デバッグ用のラベル
    private Label debugLabel = new Label();
    
    
    /**
     * HTML描画時に呼び出されるメソッド
     */
    public void onModuleLoad() {
        
        // 検索テキスト、ボタンを水平パネルに配置
        findText.setWidth("300px");
        findPanel.add(findText);
        findPanel.add(findButton);
        
        // 検索するURLを入力するテキストボックスの初期値は、blogのURL
        findText.setText("http://symfoware.blog68.fc2.com/");
        
        // テーブルの作成
        bookmarksFlexTable.setText(0, 0, "ユーザー");
        bookmarksFlexTable.setText(0, 1, "コメント");
        bookmarksFlexTable.setText(0, 2, "ブックマーク時刻");
        bookmarksFlexTable.setText(0, 3, "タグ");
        
        // HTMLに記載したdiv name="rootPanel"の位置に部品を配置
        RootPanel.get("rootPanel").add(findPanel);
        RootPanel.get("rootPanel").add(bookmarksFlexTable);
        RootPanel.get("rootPanel").add(debugLabel);
        

        // 初期フォーカスは、検索URL入力テキストに設定
        findText.setFocus(true);
        
        // クリック時、データの検索を行う
        findButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                findData();
            }
        });
    }
    
    private void findData(){
        
        debugLabel.setText("");
        
        String url = JSON_URL;
        
        // はてなAPI用のURLに、テキストボックスに入力された文字列を連結
        url += findText.getText();
        
        // callback関数名を連結
        url = URL.encode(url) + "&callback=mycall";
        
        getJson(url, this);
    }
    
    public native static void getJson(String url, Hatena handler) /*-{
        var callback = "mycall";
        
        // [1] Create a script element.
        var script = document.createElement("script");
        script.setAttribute("src", url);
        script.setAttribute("type", "text/javascript");
        
        // [2] Define the callback function on the window object.
        window[callback] = function(jsonObj) {
            // [3]
            handler.@com.fc2.blog68.symfoware.hatena.client.Hatena::handleJsonResponse(Lcom/google/gwt/core/client/JavaScriptObject;)(jsonObj);
            window[callback + "done"] = true;
        }
        
        // [4] JSON download has 1-second timeout.
        setTimeout(function() {
            if (!window[callback + "done"]) {
                handler.@com.fc2.blog68.symfoware.hatena.client.Hatena::handleJsonResponse(Lcom/google/gwt/core/client/JavaScriptObject;)(null);
            }
            
            // [5] Cleanup. Remove script and callback elements.
            document.body.removeChild(script);
            delete window[callback];
            delete window[callback + "done"];
        }, 1000);

        // [6] Attach the script element to the document body.
        document.body.appendChild(script);
    }-*/;
    
    
    public void handleJsonResponse(JavaScriptObject jso) {
        if (jso == null) {
            debugLabel.setText("Couldn't retrieve JSON");
            return;
        }

        HatenaData data = asHatenaData(jso);
        
        for (int i = 0; i < data.getBookmarks().length(); i++) {
            HatenaBookmarkData bookmark = data.getBookmarks().get(i);
            
            bookmarksFlexTable.setText(i + 1, 0, bookmark.getUser());
            bookmarksFlexTable.setText(i + 1, 1, bookmark.getComment());
            bookmarksFlexTable.setText(i + 1, 2, bookmark.getTimestamp());
            bookmarksFlexTable.setText(i + 1, 3, bookmark.getTags().join(":"));
        }
    }
    
    private final native HatenaData asHatenaData(JavaScriptObject jso) /*-{
        return jso;
    }-*/;
}






開発用のサーバーを起動して実行してみると

14_002.png


非常に画面が地味ですが、ちゃんと情報を取得できていることが
確認できました。








関連記事



Google Web Toolkit 2.1 はてなブックマークエントリーをJSONPで取得 その2
Google Web Toolkit に関する記事の一覧






関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/11/11(木) 22:42:36|
  2. Google Web Toolkit
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Microsoft SQL Server 2008 R2 RTM - Expressをインストールする | ホーム | Google Web Toolkit 2.1 はてなブックマークエントリーをJSONPで取得 その2>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
https://symfoware.blog.fc2.com/tb.php/644-d7bc34c9
この記事にトラックバックする(FC2ブログユーザー)