Symfoware

Symfowareについての考察blog

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

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


雛形で生成されたプログラムを変更するところまで、前回試してみました。
Google Web Toolkit 2.1 はてなブックマークエントリーをJSONPで取得 その1

今回は、JSONPでデータを取得するロジックを考えたいと思います。


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




JavaScriptObjectを継承したクラスの作成



取得したデータを解析し、オブジェクトに変換するための
JavaScriptObjectを継承したクラスを作成します。

パッケージ・エクスプローラーで「com.fc2.blog68.symfoware.hatena.client」を
選択状態にしておき、[ファイル]-[新規作成]-[クラス]を選択。

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

13_001.png



まず、一番上位にある変換が簡単そうなデータから。
以下の情報をJSON形式のデータからマッピングするクラスを作成してみます。


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





「HatenaData.java」の内容はこんな感じになりました。


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

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

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; }-*/;
    
    // TODO
    // bookmarksを配列で宣言
}








データ取得と変換部分の作成



入力されたURLをパラメーターに付加し、JSON形式のデータを取得できるようにします。
あまり内容の詳細を理解できていませんが・・・参考サイトに
記載されているソースから試行錯誤して作成したソースがこちら。




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 stocksFlexTable = 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/");

        // HTMLに記載したdiv name="rootPanel"の位置に部品を配置
        RootPanel.get("rootPanel").add(findPanel);
        RootPanel.get("rootPanel").add(stocksFlexTable);
        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);
        debugLabel.setText(data.getEntryUrl() + ":" + data.getTitle() + ":" + data.getCount());
    }
    
    private final native HatenaData asHatenaData(JavaScriptObject jso) /*-{
        return jso;
    }-*/;
}






ちゃんとデータの取得と変換が行われれば、デバッグ用に用意したラベルに
・はてなブックマークエントリーページのURL
・タイトル
・ブックマークされている件数
が表示されるはずです。




実行結果



ここまでで、開発用のサーバーを起動し、動作を確認してみました。
検索ボタンを押すと、狙い通りの情報が表示されました。

13_002.png


次は、配列として格納されているbookmarksを変換する方法について
考えてみることにします。





関連記事



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





関連記事

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

  1. 2010/11/10(水) 23:49:08|
  2. Google Web Toolkit
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Google Web Toolkit 2.1 はてなブックマークエントリーをJSONPで取得 その3 | ホーム | Google Web Toolkit 2.1 はてなブックマークエントリーをJSONPで取得 その1>>

コメント

コメントの投稿


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

トラックバック

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