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

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

参考サイト

公式サイト
OSDE公式サイト

---

環境構築

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

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

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

---

OpenSocialでGWT

参考
Building an OpenSocial Gadget with GWT, Hosting on Google Code, and Putting on Your Webpage

準備

• 下記の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がちっとも動かない…

参考OpenSocial Specification Release Notes

• 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ではまだ非対応っぽいので、しばらく放置しておこう…

---