管理メニュー

とりあえず雑記帳(跡地)

OpenSocial

最終更新：

fujiyan

- view
管理者のみ編集可
WebコミックLibraryhttp://web-comi.appspot.com/
GAE/JとSlim3で作成してみた、各出版社から配信されているWebコミックをまとめて閲覧できるサイトです。只今、実験運用中…

参考サイト



環境構築

  • OSDEをEclipseにインストールする
  • Installation Guideを参照
  • 基本的にインストール後、デフォルトの状態で良いはず

サンプルデータベースの作成

  • OpenSocialアプリケーション実行にはPeopleが必要なので、とりあえずサンプルデータベースを作ることで、自分で作る手間を省く。
  • Create people to Shindig database as sample dataを参照
  • 作る前にShindigを起動しておくこと。


OpenSocialでGWT


準備

  • 下記のPluginをEclipseにインストール
    • Google Plugin for Eclipse
    • Google App Engine Java SDK(要らないかも)
    • Google Web Toolkit SDK

プロジェクト作成

  • プロジェクトは[Google]-[Web Application Project]で作成する
    • GWTコンパイルをEclipseで実行させたいから
    • プロジェクト作成の際、[Use Google AppEngine]のチェックは外しても良い。

targetフォルダの作成

  • プロジェクトルート直下にtargetフォルダを作成する。
    • OSDEでOpenSocialアプリケーションを実行させるためにはtargetフォルダが必要。

gadget.xmlの配置

  • gadget.xmlをプロジェクトルート直下に配置する。
    • 内容は、OpenSocialプロジェクト作成時に生成されるgadget.xmlをとりあえずコピーしておく。

GWTクラスの作成

  • 通常のGWTアプリケーションと要領は同じ
  • もちろんServiceは使えません。クライアント側のみで動作するアプリを記述します。
public class GWTExample implements EntryPoint {
	public void onModuleLoad() {
		final Button showButton = new Button("show");
		final TextBox textBox = new TextBox();
		
		class MyHandler implements ClickHandler {
			public void onClick(ClickEvent event) {
				Window.alert(textBox.getText());
			}
		}
		
		MyHandler handler = new MyHandler();
		showButton.addClickHandler(handler);
		
		HorizontalPanel panel = new HorizontalPanel();
        panel.add(showButton);
        panel.add(textBox);
        
        RootPanel root = RootPanel.get();
        root.add(panel);
	}
}

Moduleのgwt.xmlファイル

  • <add-linker name="xs"/>を指定する。
    • これによって、GWTコンパイル後のコードが全てJavaScriptファイルとなる。
    • 通常のリンカ(std)では、GWTコンパイル後に複数のHTMLファイルになり、gadgetのHTMLと分かれてしまうため、GWT側からOpenSocialのJavaScript関数にアクセスできない。

GWTコンパイル

  • これも通常のコンパイル手順と同じ
  • コンパイル後に、warフォルダ以下にModule名のフォルダが作成されるので、そのModule名フォルダをtargetフォルダにコピーする

gadget.xmlの修正とコピー(この変がイマイチ…)

  • Moduleのjsファイルを読み込むようにする。
    • Moduleのjsファイルのパスはhttp://[ホスト名]:[ポート番号]/[プロジェクト名]/[Module名(小文字)]/[Module名(小文字)].nocache.js
      • http://localhost:8123/GWTExample/gwtexample/gwtexample.nocache.jsとか
  • あと、<base>で基底を指定しておかないと、その他のjsファイルを読んでくれないっぽい。
    • <base>で指定するのはhttp://[ホスト名]:[ポート番号]/[プロジェクト名]/[Module名(小文字)]/
      • http://localhost:8123/GWTExample/gwtexample/とか
<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="GWT Example" author_email="xxx@xxxxx">
    <Require feature="opensocial-0.8" />
  </ModulePrefs>
  <Content type="html" view="canvas"><![CDATA[
<script type="text/javascript">
var contextUrl = "http://localhost:8123/GWTExample/";

function loadJs() {
	var module = "gwtexample";
	var baseUrl = contextUrl + module;

	var base = document.createElement("base");
	base.href = baseUrl + "/";
	document.getElementsByTagName("head")[0].appendChild(base);

	var script = document.createElement("script");
	script.src = baseUrl + "/" + module + ".nocache.js";
	script.type = "text/javascript";
	document.getElementsByTagName("head")[0].appendChild(script);
};

loadJs();
</script>
  ]]></Content>
</Module>

  • 修正したgadget.xmlファイルをtargetフォルダにコピーする。

実行

  • Shindigを起動する。
  • プロジェクトルート直下のgadget.xmlを選択し、[Run application locally]で実行する。
  • ところがEclipseのブラウザでは動かないので(原因不明)、URLをコピーしてWebブラウザで表示させる。
    • 案外動くもんです…


gadgets.io.makeRequest()のコールバックメソッドにJava(GWT)側のメソッドを指定した場合

  • コールバックメソッドから、そのメソッドが属するクラスの他のメンバにアクセスできない。
  • 原因の詳細と対処方法はGWTの「JavaScriptから呼び出されるコールバックメソッド内から他のメンバにアクセスできない」にて


OpenSocial 0.9がちっとも動かない…

  • JavaScirptのエラーでクラスやメソッドが未定義と言われたり…
var req = opensocial.newDataRequest();
としても'opensocial.Container.get() is null'と怒られる。
  • 0.9からはOSAPIというのが新たに追加
    • 0.8までのAPIを整理し簡便化したもの?
    • <Require feature="osapi">で利用可能。既存のAPIと定義が被らない様にしている。
    • だから、既存のAPIは<Require feature="opensocial-0.9">を使って、引き続き利用可能っぽいのに…。0.9はおとなしくOSAPIを使うべき?
  • でもまぁ、mixiではまだ非対応っぽいので、しばらく放置しておこう…

「OpenSocial」をウィキ内検索
人気記事ランキング
  1. Struts 2
  2. Android
  3. Slim3/文字列の部分一致検索とページング
  4. Apache
もっと見る
最近更新されたページ
もっと見る
ウィキ募集バナー