Google Waveのガジェットの作成と公開

Google Waveで登録を開いた後、それを使用してワークフローを整理し、顧客と通信することが可能になりました。

進行状況バーを使用してタスクのステージを表示すると便利な場合があります。 既製のソリューションはなかったため、独自のソリューションを作成することにしました。

「ブリップ」ウェーブへの要素の追加は、ガジェットを使用して行われます。 これは、次の2つのファイルのみで構成されます。
installer.xml 、
gadget.xml

wysiwyg google waveパネルにボタンを追加するにはinstaller.xmlが必要です。 （拡張機能をインストールせずに、参照によってガジェットを追加することもできます）。
設定とガジェットコードを含むgadget.xmlファイル。

Installer.xml

< extension
name ="Progressbar"
thumbnailUrl ="http://adcirobot.appspot.com/assets/gadget.png"
description ="Insert a progress bar into your waves, and click it to indicate the current progress. " >
< author name ="Fedor Indutny" />
< menuHook location ="toolbar" text ="Add Project Progress"
iconUrl ="http://adcirobot.appspot.com/assets/gadget-small.png" >
< insertGadget url ="http://adcirobot.appspot.com/assets/gadget.xml" />
</ menuHook >
</ extension >

* This source code was highlighted with Source Code Highlighter .

これは私のガジェットから取った実際の例です。

Google Wave Gadget APIはGoogle Gadget APIのアドオンであるため、ファイル構造はほぼ同じです。

拡張機能名、作成者名、説明を必ず指定してください。 ギャラリーに表示されます。 また
ファイルにmenuHookエントリがあります。これは、blip編集パネルにボタンを追加することを意味します（設定の意味は名前から明らかだと思います）。 insertGadgetは、このボタンをクリックすると、リンクで指定されたガジェットがカーソルの後に挿入されることを示しています。

実際、これがinstaller.xmlについて知っておく必要があるすべてです。

Gadget.xml

<? xml version ="1.0" encoding ="UTF-8" ? >
< Module >
< ModulePrefs
title ="Progressbar"
author ="Fedor Indutny"
author_email ="fedor.indutny@gmail.com"
screenshot ="http://adcirobot.appspot.com/assets/gadget.png"
thumbnail ="http://adcirobot.appspot.com/assets/gadget.png"
>
< optional feature ="shareable-prefs" />
< Require feature ="wave" />
< Require feature ="dynamic-height" />
</ ModulePrefs >
< Content type ="html" ><! [CDATA[
html-
]] ></ Content >
</ Module >

* This source code was highlighted with Source Code Highlighter .

ModulePrefs属性もかなり論理的であり、Google Gadget APIから取得されます 。
以下に注意する価値があります。

• shareable-prefs-ガジェットを格納するデータがすべてのユーザーによって共有されることを意味します（それぞれ、waveのすべてのサブスクライバーに対して動的に更新されます）。
• wave -Wave API機能へのアクセスを提供するwave.jsスクリプトを接続します（パラメーターと状態を変更するだけです）。
• dynamic- height-説明する価値はないと思います。

コードをコンテンツに配置できます（iframe内で実行されるため、何でも記述できます）。このコードを書きました。

< script type ="text/javascript" src ="url_to_jquery.js" ></ script >

<div id= "A" style= "-webkit-user-select:none;height: 10px;background:white;border:1px solid #bbb;margin:0;padding:0;" title= "click to indicate current progress " >
<div id= "B" style= "height:100%;width: 0%;background: transparent url(data:image/png;base64, base64 ) repeat-x 0 0" >
<div style= "-webkit-user-select:none;height:100%;opacity:0.33;background:transparent url(data:image/gif;base64, base64 ) repeat 0 0;border: 0;margin:0;padding:0" ></div>
</div>
</div>
<script type= "text/javascript" >

</ script >

* This source code was highlighted with Source Code Highlighter .

（通常の構文の強調表示ができるように、jsコードを個別に取り出します。jqueryをインラインで接続しただけなので、ここでは説明しません）。

Javascript

// ,
//
gadgets.util.registerOnLoadHandler( function () {
var
//
lock = 0,
// (A - progressbar holder, B - progressbar)
A = $( "#A" ), B = $( "#B" ), mousemove = 0, $procent = 0,
//
round = Math.round, A$offset = A.offset(),
A$outerWidth = A.outerWidth();

//
// Google Wave -
if (!wave || !wave.isInWaveContainer()) return ;

// ()
wave.setStateCallback( function () {
// wave :
// getState()
// get([attr-name]),
var procent = wave.getState().get( 'procent' ) || 0;

//
B.stop().animate({width: procent + "%" , backgroundPosition: "(0px -" + procent + "px)" }, function () {
A[(procent >= 100) ? "addClass" : "removeClass" ]( "full" );
});
});

//
// (, )
wave.setModeCallback( function () {

if ( lock = wave.getMode() == wave.Mode.EDIT ? 0 : 1) {
//
A.css({cursor: "" });
B.css({cursor: "" });
mousemove = 0;
} else {
//
A.css({cursor: "pointer" });
B.css({cursor: "pointer" });
}
});

//
A.click( function (E) {

E.preventDefault();

//
if ( lock ) return ;

// submitDelta -
// ( ,
// setStateCallback )
wave.getState().submitDelta({procent:
E.ctrlKey ?
(A.hasClass( "full" ) ? 0 : 100)
:
round((100 * ( E.pageX - A$offset.left) / A$outerWidth))
});
}).mousedown( function (E){
// Drag
E.preventDefault();
mousemove = 1;
changed = 0;
});

$(window).mousemove( function (E){
// , submitDelta
//
if (!mousemove || lock ) return ;

changed = 1;

B.css({
width: ($procent = round((100 * ( E.pageX - A$offset.left) / A$outerWidth))) + "%" ,
backgroundPosition: "0 -" + $procent + "px"
},
function () {
A[($procent >= 100) ? "addClass" : "removeClass" ]( "full" );
});

})
.mouseup( function (E) {
mousemove = 0;
if (!changed) return ;

wave.getState().submitDelta({procent: $procent});

});

//
gadgets.window.adjustHeight(13);
});

* This source code was highlighted with Source Code Highlighter .

API関数の詳細については、 こちらをご覧ください。

公開プロセス

ガジェットの準備ができたら、ホストにファイルをアップロードします（通常、 appspotが使用されます）-公開を開始できます！

まず、 Submitty拡張機能をインストールする必要があります。 インストール後、新しいタイプのWaveを作成できるようになります-Extension Submission 。 ウェーブを作成し、指示に従って（アンケートのデータを入力し、installer.xmlへのパスを入力します）、[ レビュー担当者と共有 ]ボタンをクリックします。
これで、ガジェットがGoogle Waveチームによる検討のために送信されました。一定の時間が経過すると、ガジェットはあなたに応答し、（すべてがうまくいけば）ギャラリーでガジェットへのリンクを送信します。

そして、これが私のガジェットです。
ここで彼にふけることができます 。

読んでくれてありがとう！

PS
興味があれば、Google Waveのロボットを作成するときに新しいAPIを使用することについて話をすることができます。