Symfoware

Symfowareについての考察blog

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

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


前回はJSONを使用したクライアントとサーバー間の通信を試しました。
Google Web Toolkit 2.1 JSON形式のデータの利用

今回は、JSONPでのデータ取得を試してみます。


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




1. Reviewing the requirements and design



参考にしたサイトでは、JSONPで返却する値を検討しています。
今回は、はてなブックマークのエントリー情報を取得するJSONPが
公開されていますので、それにアクセスしデータを取得・表示する
サンプルを作成してみようと思います。

はてなブックマークエントリー情報取得API


こちらのサイトを参考にさせていただきました。
ブラウザからJSONで呼び出せるサービス一覧
JSON with Padding Test


オフィシャルのAPI解説よりもJSON with Padding Testでの実行結果を
見たほうが返却されるデータ形式の理解が早いかと思います。


12_001_20101109224817.png


上位に

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


という情報が並びます。


bookmarks配列のないようはこんな感じになるようです。

12_002_20101109224817.png



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




受け取り用のオブジェクトを定義するときの参考になりそうです。





2. Creating a data a source



参考にしたサイトでは、仕様を満たすサーバーサイドのソースコードに
ついて解説されていますが、ここでは、はてなAPIに送るリクエスト
について考えて見ます。

といっても簡単で


http://b.hatena.ne.jp/entry/json/?url=[取得したいサイトのURL]&callback=[コールバック関数]



という形式でGETリクエストを送信すればよいようです。






3. Requesting the data from the remote server



これまで、「StockWatcher」というプロジェクトを作成し、徐々に
機能追加を行う形で学習してきました。

復習の意味もこめて、新しくプロジェクトを作成し、プログラムを
作成することにしました。

EclipseにGoogle Web Toolkit 2.1のプラグインをインストールしておきます。
Google Web Toolkit 2.1のEclipseプラグインをインストールする


Eclipseツールバーのアイコンをクリック。

12_003_20101109224817.png


プロジェクト名を「hatena」
パッケージを「com.fc2.blog68.symfoware.hatena」
として、プロジェクトを新規作成します。

12_004_20101109224817.png


雛形のファイルが作成されますが、以下のクラスは不要なので
削除しました。


com.fc2.blog68.symfoware.hatena.client.GreetingService
com.fc2.blog68.symfoware.hatena.client.GreetingServiceAsync
com.fc2.blog68.symfoware.hatena.server.GreetingServiceImpl
com.fc2.blog68.symfoware.hatena.shared.FieldVerifier



パッケージ・エクスプローラーでの表示です。
選択状態にあるソースを削除しました。

12_005_20101109224816.png





Hatena.gwt.xmlの編集



HTTPリクエストを行ううえで後々必要になると思いますので、
Hatena.gwt.xmlに一行「com.google.gwt.http.HTTP」を使用する
設定を追記しておきます。

以下、パッケージ・エクスプローラー上からみた「Hatena.gwt.xml」の
場所と、Hatena.gwt.xmlの記載内容です。

12_006.png



<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='hatena'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet. You can change     -->
  <!-- the theme of your GWT application by uncommenting         -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

  <!-- Other module inherits                                     -->
  <!--=== 以下の一行を追加 ===-->
  <inherits name="com.google.gwt.http.HTTP" />

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.fc2.blog68.symfoware.hatena.client.Hatena'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

</module>







Hatena.htmlの編集



Hatena.htmlを雛形の状態から編集しました。
idが「rootPanel」という名前のdivを追加し、プログラム中から
ここへ部品を配置することにします。

パッケージ・エクスプローラー上での「Hatena.html」の場所と
記載内容は以下のとおり。

12_007.png



<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="Hatena.css">
    <title>はてなブックマークエントリー情報取得サンプル</title>
    <script type="text/javascript" language="javascript" src="hatena/hatena.nocache.js"></script>
  </head>
  <body>

    <h1>はてなブックマークエントリー情報取得</h1>
    <div id="rootPanel" align="center"></div>
    
    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
     <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
     </div>
    </noscript>
  </body>
</html>








web.xmlの編集



雛形として出力されたweb.xmlにはサーブレットに関する記載が
ありますが、先ほどざっくり消しましたので、このまま起動しようと
するとエラーになってしまいます。

web.xmlのサーブレットに関する指定を消しておきます。
パッケージ・エクスプローラー上での場所と内容は以下のとおり。

12_008.png




<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
    PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

  <!-- ここから==================
  <servlet>
    <servlet-name>greetServlet</servlet-name>
    <servlet-class>com.fc2.blog68.symfoware.hatena.server.GreetingServiceImpl</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>greetServlet</servlet-name>
    <url-pattern>/hatena/greet</url-pattern>
  </servlet-mapping>
  ==================ここまで削除 -->

  <welcome-file-list>
    <welcome-file>Hatena.html</welcome-file>
  </welcome-file-list>

</web-app>









Hatena.javaの編集



ここまでで下準備は整いました。
いよいよメインのHatena.javaを編集します。

初めてチュートリアルに沿わない状態でプログラムを作成しているので、まずは

・検索するURLを記載するテキストボックス(findText)
・検索実行ボタン(findButton)
・結果を表示するテーブル(stocksFlexTable)



これらを配置するだけのプログラムを書いてみました。

パッケージ・エクスプローラー上での「Hatena.java」の位置と
記載内容は以下のとおり。

12_009.png



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

import com.google.gwt.core.client.EntryPoint;
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.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();
    
    /**
     * 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);

        // 初期フォーカスは、検索URL入力テキストに設定
        findText.setFocus(true);

    }
}






ここまでで、デバッグ用のサーバーを起動して動作を確認しました。
起動は、実行ボタンの右側にある下矢印を押すと、「hatena」という
項目が追加されていますので、これを選択します。

12_010.png



サーバー起動後、
http://127.0.0.1:8888/Hatena.html?gwt.codesvr=127.0.0.1:9997
にアクセスすると、こんな表示になりました。

12_011.png



ここまでは狙い通り動いてくれているようです。





関連記事



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








関連記事

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

  1. 2010/11/09(火) 22:51:11|
  2. Google Web Toolkit
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Google Web Toolkit 2.1 はてなブックマークエントリーをJSONPで取得 その2 | ホーム | Google Web Toolkit 2.1 JSON形式のデータの利用>>

コメント

コメントの投稿


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

トラックバック

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