SocialWeb Conference vol.5 OpenSocial Night #2

  • 3,777 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,777
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. OpenSocial jQuery による ウェブ制作スキルを活かした  OpenSocial アプリケーション開発  SocialWeb Conference vol.5  〜 OpenSocial Night #2 〜  2010年2月23日 なかじまんソフトウェア株式会社 中嶋信博  http://nakajiman.lrlab.to/ 1 
  • 2. 目次  •  OpenSocial アプリの基本性質の振り返り  •  OpenSocial jQuery の目的と概要の紹介  •  OpenSocial jQuery による iGoogle ガジェッ トの開発  •  OpenSocial jQuery による mixi アプリの開 発  •  パーミッションモデルと OpenSocial jQuery  のエラーハンドリング 2 
  • 3. OpenSocial アプリのつくりって …  Profile ビュー Canvas ビュー  3 
  • 4. ビューがページのウェブアプリです  <?xml version="1.0" encoding="UTF­8" ?>  <Module>  <ModulePrefs title="Hello, world!" />  <Content type="html" view="profile"><![CDATA[  Hello, world!  ]]></Content>  ビュー = ページ = iframe <Content type="html" view="canvas"><![CDATA[  Hello, world!  ]]></Content>  HTML + CSS + JavaScript  </Module>  4 
  • 5. ウェブアプリとの違いは OpenSocial  API を使い、その影響を受けること  •  OpenSocial JavaScript API  – OpenSocial API: opensocial.*  – Gadgets API: gadgets.*  – 拡張 API: mixi.* goohome.* …  •  OpenSocial RESTful API  – RESTful Protocol  – JSON­RPC Protocol  •  パーミッションモデル  – 情報の取得や更新の制限 5 
  • 6. 例 OpenSocial JavaScript API  Hello, Viewer  <Content type="html"><![CDATA[  <script type="text/javascript">  function init() {  var req = opensocial.newDataRequest();  req.add(req.newFetchPersonRequest(  opensocial.IdSpec.PersonId.VIEWER), "viewer");  req.send(function(data) {  var viewer = data.get("viewer").getData();  var id = viewer.getId();  var name = viewer.getDisplayName();  var thumbnailUrl = viewer.getField(  opensocial.Person.Field.THUMBNAIL_URL);  });  }  gadgets.util.registerOnLoadHandler(init);  </script>  6  ]]></Content>
  • 7. OpenSocial アプリは  HTML + CSS + JavaScript  で開発できる典型的なウェブアプリ  OpenSocial jQuery の目的 OpenSocial アプリは  OpenSocial API + パーミッションモデル で成り立つプラットフォーム専用アプリ  7 
  • 8. OpenSocial jQuery は、  OpenSocial JavaScript API を  jQuery で橋渡することで、  OpenSocial アプリをウェブアプ リのように開発できるようにする  JavaScript ライブラリです 8 
  • 9. 例 OpenSocial jQuery  Hello, Viewer  <Content type="html"><![CDATA[  <script type="text/javascript" src="opensocial­jquery.js"></script>  <script type="text/javascript">  jQuery(document).ready(function($) {  $.get('/people/@viewer', function(data) {  var viewer = data[0];  var id = viewer.id;  var name = viewer.nickname;  var thumbnailUrl = viewer.thumbnailUrl;  }, 'data');  }); </script>  ]]></Content> 9 
  • 10. OpenSocial jQuery への期待  •  jQuery の高いシェア、広いターゲット層  – ウェブ制作の関係者  •  jQuery によるウェブ制作スキルの活用  – ウェブ制作の開発手法、デザイン手法  •  jQuery によるウェブ制作実績の活用  – ソースコードの移植性、jQuery プラグイン  •  OpenSocial アプリの活性化  – SAP (Social Application Provider) の動機 10 
  • 11. OpenSocial jQuery の情報源  •  ダウンロード v1.3.2.5 / v1.2.6.5  –  http://code.google.com/p/opensocial­jquery  •  ライセンス  –  MIT License  –  Apache License 2.0 (Templates プラグインのみ)  •  ドキュメント en / ja  –  http://code.google.com/p/opensocial­jquery/w  •  メーリングリスト  –  http://groups.google.com/group/opensocial­jquery  •  コミッタ コントリビュータ  –  @nakajiman @rkanbe @lackac @jonca.rafal 11 
  • 12. OpenSocial jQuery の対応環境  •  mixi アプリ (PC)  •  goo ホームガジェット  •  CREYLE アプリ (最終確認中)  •  iGoogle ガジェット  •  Google Friend Connect ガジェット  Apache Shindig http://shindig.apache.org/  •  OpenSocial: Orkut、hi5、Partuza …  •  Gadgets: Google Wave … 12 
  • 13. OpenSocial jQuery の構成  OpenSocial JavaScript API OpenSocial jQuery: opensocial­jquery.js  jQuery 1.3.2  JSDeferred 0.2.2  コアプラグイン  拡張プラグイン: opensocial­jquery.<name>.js  jQuery プラグイン 13  OpenSocial アプリ 
  • 14. OpenSocial jQuery の対応範囲  Gadgets API: gadgets.*  •  jQuery.fn.ready  •  jQuery.view &  –  ガジェットのロード  jQuery.views  •  jQuery.ajax &  –  ビューの判別と遷移  jQuery.getFeed  •  jQuery.fn.height &  –  外部サーバの呼び出し  jQuery.fn.adjustHeight &  –  署名リクエスト  jQuery.fn.autoHeight  –  フィードの取得  –  高さの変更  •  jQuery.pref &  •  jQuery.fn.minimessage  jQuery.prefArray  –  ミニメッセージの表示 –  プリファレンスとパラメータの取得  14 
  • 15. OpenSocial jQuery の対応範囲  Gadgets API: gadgets.*  •  jQuery.fn.tab  •  jQuery.fn.title  –  タブの表示  –  タイトルの変更  •  jQuery.flash.version  •  jQuery.msg  –  Flash バージョンの判別  –  メッセージバンドルの取得  •  jQuery.fn.flash  •  jQuery.container.cache  –  Flash の埋め込み  –  キャッシュの制御  •  jQuery.pub & jQuery.sub  –  ガジェット間のメッセージ送受信  •  jQuery.feature  –  フィーチャーの判別とパラメータの取得 15 
  • 16. 外部サーバの呼び出し <script type="text/javascript">  jQuery(document).ready(function($) {  $.ajax({  url: 'http://gdata.youtube.com/feeds/videos',  data: { vq: 'corgi', alt: 'json' }, dataType: 'json',  success: function(data, status) {  $.each(data.feed.entry, function(i, entry) {  var img = $('<img/>')  .attr('src', entry.media$group.media$thumbnail[0].url)  $('<li/>').append(img).appendTo('#videos');  });  }, error: function(xhr, status, e) {  $('<span/>').text(status).minimessage();  }  });  }); </script> <ul id="videos"></ul>  16 
  • 17. ビューの遷移 canvas へ <Content type="html" view="home"><![CDATA[  <script type="text/javascript">  jQuery(document).ready(function($) {  $.getJSON('http://picasaweb.google.com/data/feed/api/all', {  q: $.pref('q'), alt: 'json', 'max­results': 20  }, function(data) {  $.each(data.feed.entry, function(i, entry) {  var img = $('<img/>')  .attr('src', entry.media$group.media$thumbnail[0].url)  .click(function() { $.view('canvas', { url: entry.content.src }); });  $('<li/>').append(img).appendTo('#photos');  });  });  }); </script> <ul id="photos"></ul>  ]]></Content>  17 
  • 18. ビューの遷移 home から  <Content type="html" view="canvas"><![CDATA[  <script type="text/javascript">  jQuery(document).ready(function($, data) {  $(window).height(400);  $('<img/>').attr('src', data.url).appendTo('body');  }); </script>  ]]></Content> 18 
  • 19. 署名リクエスト + OpenSocial Host var form = $('form').submit(function() {  $.post('http://opensocialhost.com/data/insert signed', {  key1: data.url + new Date().getTime(), value1: this.note.value  }, function() { … }, 'json');  return false;  }); $.post('http://opensocialhost.com/data/search signed',  { key: data.url }, function(res) { ... }, 'json');  <form>  <input name="note" type="text" />  <input type="submit" value="保存" />  </form>  <ul id="notes"></ul>  19 
  • 20. OpenSocial jQuery の対応範囲  OpenSocial API: opensocial.*  •  jQuery.ajax & jQuery.getData  – プロフィール情報、友達情報の取得  – 永続化情報の取得と保存 (削除は未対応)  – アクティビティの取得と送信  – メッセージの送信  – アルバム情報、写真情報の取得  •  jQuery.container  – コンテナの判別、ドメインの取得 20 
  • 21. 友達伝言板アプリ 21 
  • 22. プロフィール情報の取得  $.get('/people/@viewer', { fields: 'profileUrl' }, function(data) {  var person = data[0];  $('#self a').attr({ title: person.nickname, href: person.profileUrl });  $('#self a img').attr('src', person.thumbnailUrl);  }, 'data');  <div id="self">  <a target="_top"><img/></a>  </div> 22 
  • 23. 永続化情報の取得と保存  var form = $('form').submit(function() {  $.postData('/appdata/@viewer', { comment: this.comment.value });  return false;  }); $.getData('/appdata/@viewer', function(data) {  $.each(data, function(id, data) {  form[0].comment.value = data.comment || '';  });  }); <form>  <input name="comment" type="text" />  <input type="submit" value="更新" />  </form> 23 
  • 24. プロフィール情報と 永続化情報の同時取得  $.getData('/people/@viewer', { appData: 'comment' }, function(data) {  var person = data[0];  form[0].comment.value = person.appData.comment || '';  form.find('img').attr({ title: person.nickname, src: person.thumbnailUrl });  }); <form>  <img/>  <input name="comment" type="text" />  <input type="submit" value="保存" />  </form> 24 
  • 25. 友達情報の取得  $.getData('/people/@viewer/@friends', { appData: 'comment' },  function(data) {  $.each(data, function(i, person) {  var img = $('<img/>')  .attr({ title: person.nickname, src: person.thumbnailUrl });  $('<li/>').text(person.appData.comment || '').prepend(img)  .appendTo('#friends');  }); // data.startIndex  // data.itemsPerPage  // data.totalResults  });  <ul id="friends"></ul> 25 
  • 26. プロフィール情報、友達情報の取得  •  GET /people/@viewer/@self  •  GET /people/@viewer/@friends  •  GET /people/@viewer/@friends/@app  •  GET /people/@owner/ …  •  GET /people/<id>/ …  @self は省略可 @viewer は @me でも可  •  fields, appData, filterBy, sortBy, startIndex,  count パラメータ 26 
  • 27. 永続化情報の取得と保存  •  GET or POST /appdata/@viewer/@self  •  GET /appdata/@viewer/@friends  •  GET /appdata/@viewer/@friends/@app  •  GET /appdata/@owner/ …  •  GET /appdata/<id>/ …  @self は省略可 @viewer は @me でも可  •  fields パラメータ  •  gadgets.json.stringify と parse を自動化 27 
  • 28. アクティビティの送信  var form = $('form').submit(function() {  $.postData('/appdata/@viewer', { comment: this.comment.value },  function() {  $.postData('/activities/@viewer', { title: 'コメントを更新しました' });  $('<span/>').text('コメントを更新しました').minimessage('slow');  }  ); return false;  }); 28 
  • 29. メッセージの送信  var img = $('<img/>')  .attr({ title: person.nickname, src: person.thumbnailUrl });  .click(function() {  $.postData('/messages/@viewer/@outbox', {  recipients: person.id, title: '',  body: 'コメントの催促です。コメントを更新してください。'  });  }); 29 
  • 30. アクティビティの取得と送信  •  GET or POST /activities/@viewer/@self  •  GET /activities/@viewer/@friends  •  GET /activities/@owner/ …  •  GET /activities/<id>/ …  @self は省略可 @viewer は @me でも可  •  title, body, url, mediaItems, … recipients  (mixi 拡張) パラメータ 30 
  • 31. メッセージの送信  •  POST /messages/@viewer/@outbox  @viewer は @me でも可  •  recipients, title, body パラメータ 31 
  • 32. OpenSocial jQuery の対応範囲 拡張 API: mixi.*  •  jQuery.ajax  – 学校の選択  – 学校リストの取得  – コミュニティ情報の取得  •  jQuery.invite  – 友達の招待  – 同級生の招待  •  jQuery.view  – 外部サイトへの誘導 32 
  • 33. 友達の招待  $('#invite').click(function() {  $.invite(function(ids) {  $.postData('/appdata/@viewer', { inviteIds: ids });  });  return false;  });  <a id="invite" href="#invite">  友達を招待する</a> 33 
  • 34. おやおや? Viewer や友達が アプリをインストールしていないと … 34 
  • 35. OpenSocial API の制限を受けます  •  Viewer がアプリをインストールしていない  – プロフィール情報の取得が ID のみに制限される  – 友達情報の取得がエラーになる  – 永続化情報の取得と保存がエラーになる  – アクティビティの送信がエラーになる  – メッセージの送信がエラーになる  – 友達の招待がエラーになる  •  友達がアプリをインストールしていない  – アプリに関するプライバシー設定にしたがい、 友達情報の取得が許可項目のみに制限される 35 
  • 36. 36
  • 37. エラーハンドリング 3つの方法  $.ajax({  url: '/people/@viewer/@friends',  data: { fields: 'profileUrl', appData: 'comment' }, dataType: 'data',  success: function(data, status) { … },  error: function(xhr, status, e) {  $('<span/>').text('エラーが発生しました。').minimessage();  }  }); $('body').ajaxError(function(event, xhr, settings, e) {  $('<span/>').text('エラーが発生しました。').minimessage();  }); $.getData('/people/@viewer/@friends', { … }).next(function(data) {  …  }).error(function(data) {  $('<span/>').text('エラーが発生しました。').minimessage();  }); 37 
  • 38. アプリ説明ページに遷移し、 アプリのインストールを促す  $.getData('/people/@viewer', { … }, function(data) {  …  }).getData('/people/@viewer/@friends', { … }, function(data) {  …  }).error(function(e) {  var url = 'http://mixi.jp/view_appli.pl?' + $.param({ id: $.pref('app_id') });  window.open(url, '_top');  }); 38 
  • 39. 取得できない項目を補うか、アプリを インストールしている友達に限定する  var img = $('<img/>').attr({  title: person.nickname || 'ゲスト',  src: person.thumbnailUrl ||  'http://img.mixi.jp/img/basic/common/noimage_member76.gif'  }); $.getData('/people/@viewer/@friends/@app', { … }, function(data) {  …  }) 39 
  • 40. そして、完成 … ウェブアプリと同じに 見えました? 違うように見えました? 40 
  • 41. ありがとうございました ウェブ制作の関係者のみなさん お持ちのウェブ制作スキルと実績で  OpenSocial アプリケーションを 開発してみませんか?  OpenSocial jQuery がきっと役立ちます 41