Your SlideShare is downloading. ×
0
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ソーシャルアプリ勉強会(第一回資料)配布用

5,356

Published on

サイラボがスタートする、ソーシャルアプリに関する公開社内勉強会の第1回目の資料です。 …

サイラボがスタートする、ソーシャルアプリに関する公開社内勉強会の第1回目の資料です。
ソーシャルアプリが持つ無限の可能性
サイテック株式会社 代表取締役 谷田部輝真

サーバサイドプログラミングで行うmixiアプリ開発
電脳製作株式会社 技師 新井元基

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,356
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
130
Comments
0
Likes
9
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. 新井 元基 Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 2. 前提 • 以下については理解しているものとして進め ます Opensocialの仕様 Javascript, jqueryの文法 Ajaxの仕組み Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 3. オープンソーシャルアプリ? • Javascript API(PC向け) • クライアントサイドでJavascriptをばりばりコーディ ングする必要あり • 普段サーバサイドでプログラムを書いているWEB 屋さんにとっては、敷居が高い?過去の資産= ソースコードを活用できない? Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 4. オープンソーシャルアプリ? • No!! →サーバサイドアプリケーションの土俵に持ち込む Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 5. どうやって? • Iframe ○完全にサーバサイド ×Javascript APIにアクセスできない • Ajax △一部クライアントサイド →クライアントサイドは可能な限りいじらなくて済む ように、毎回共通で使うクライアントプログラムを 用意 Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 6. 具体的に • アプリ領域全体を<div>で囲み、div領域全体 をAjaxで書き換える • アプリ起動時にJavascript APIでOWNER, VIEWER, FRIENDS(OWNER)などのSocial Data を取得してサーバへPOST • サーバ側のセッションはURLパラメータでセッ ションIDを引き回すことで維持 • アクティビティの送信はサーバレスポンスで Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 7. div領域をAjaxで書き換える • <div id="gadget_container"></div> • gadgets.io.makeRequest でサーバからHTML を取得 • $(“#gadget_container”).html(<取得した HTML>); Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 8. gadget.xml <Module> <ModulePrefs title="test"> <Require feature="opensocial-0.8"/> <Require feature="views"/> <Require feature="dynamic-height"/> </ModulePrefs> <Content type="html"> <script src="http://xxxx/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://xxxx/jquery.mixigadget.js" type="text/javascript"></script> <link href="http://xxxx/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> (function(){ $('#gadget_container').mixigadget(); })(); </script> <div id="gadget_container"></div> </Content> </Module> Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 9. jquery.mixigadget.js ;(function($) { var name_space = 'mixigadget'; $.fn[name_space] = function(config){ config = jQuery.extend({ session_id: "", session_key: "", base_url: "", view_name: gadgets.views.getCurrentView().getName() },config); gadgets.util.registerOnLoadHandler(gadgetInit); function gadgetInit() { switch(config.view_name) { case 'canvas': canvasInit(); break; } } function canvasInit() { klass.requestContainer('/test.html‘); } Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 10. klass.requestContainer = function (urlPath, urlParams) { requestServer(urlPath, urlParams, function(obj) { var html = obj.text var ScriptFragment = '<script[^>]*>([¥¥S¥¥s]*?)<¥/script>'; var scripts = html.match(new RegExp(ScriptFragment, 'img')); if (scripts) { for (var i=0; i<scripts.length; i++) { var script = scripts[i].match(new RegExp(ScriptFragment, 'im')); if (script) eval(script[1]); } } $("#gadget_container").html(html); gadgets.window.adjustHeight(); }); } Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 11. function requestServer(urlPath, urlParams, callbackFunction) { if (urlParams==null) urlParams = {}; var url = config.base_url + urlPath; var params = {}; params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT; params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(urlParams); gadgets.io.makeRequest(url, callbackFunction, params); } $[name_space] = klass; $[name_space.replace(/_([a-z])/g, function () { return arguments[1].toUpperCase() })] = klass; return this; }; })(jQuery); Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 12. test.html <h1>TEST</h1> <p><a href=“#” onclick=“$.mixigadget.requestContainer('/test2.html');”>test2へのリンク</p> test2.html <h1>TEST2</h1> <p><a href=“#” onclick=“$.mixigadget.requestContainer('/test1.html');”>test1へのリンク</p> Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 13. Social DataをサーバへPOST • JavaScript APIのPerson & Friends APIからデー タを一通り取得 • 取得したデータをJSON化 • サーバへPOST Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 14. jquery.mixigadget.js(追加・修正部分のみ) function canvasInit() { var req = opensocial.newDataRequest(); var friend_params = {}; friend_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 1000; req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.OWNER), "owner"); req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer"); req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({'userId':opensocial.IdSpec.PersonId.OWNER, 'groupId':opensocial.IdSpec.GroupId.FRIENDS}), friend_params), "friends"); req.send(function (res) { var params = { "owner" : person_to_json(res.get("owner").getData()), "viewer" : person_to_json(res.get("viewer").getData()), "friends" : people_to_json(res.get("friends").getData()) }; klass.requestContainer('/register', params); }); } Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 15. function person_to_json(_person) { return gadgets.json.stringify(_person_to_hash(_person)); } function people_to_json(_people) { var people = []; _people.each(function(_person) { people.push(_person_to_hash(_person)); }); return gadgets.json.stringify(people); } function _person_to_hash(_person) { var fields = { 'mixi_id' : opensocial.Person.Field.ID, 'thumbnail_url' : opensocial.Person.Field.THUMBNAIL_URL }; var person = {}; for (var key in fields) { person[key] = _person.getField(fields[key]); } person['nickname'] = _person.getDisplayName(); return person; } Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 16. /register(サーバ側プログラム) 略(POSTされたJSONデータをセッションなりDBなりに保持する) ※Ruby on Railsの場合、以下のようにPOSTされたデータを取得できる owner_data = JSON.parse(params['owner']) viewer_data = JSON.parse(params['viewer']) friends_data = JSON.parse(params['friends']) Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 17. サーバのセッション維持 • /register のレスポンスHTMLでSession IDを Javascriptの変数にセットする Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 18. jquery.mixigadget.js(追加・修正部分のみ) klass.setSession = function(session_key, session_id) { config.session_key = session_key; config.session_id = session_id; } function requestServer(urlPath, urlParams, callbackFunction) { if (urlParams==null) urlParams = {}; if (config.session_id) urlParams[config.session_key] = config.session_id; (以下同じ) } Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 19. /registerのレスポンス <script type="text/javascript"> $.mixigadget.setSession(‘_sid', ‘xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'); </script> <p>Hello World!!</p> Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 20. アクティビティの送信 • サーバからのレスポンスHTMLでアクティビ ティを登録するJavascriptを実行 Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 21. レスポンス例 <script type="text/javascript"> var params = {}; params[opensocial.Activity.Field.TITLE] = "Hello!"; var activity = opensocial.newActivity(params); opensocial.requestCreateActivity(activity, opensocial.CreateActivityPriority.HIGH, function(response) { // do something... }); </script> <p>アクティビティを送信したよ!</p> Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 22. まとめ • Javascript APIしか提供されていない(mixi) オープンソーシャルアプリでも、サーバサイド アプリケーションと同じような感覚でつくること ができる! Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 23. mixiアプリモバイル • mixiアプリモバイルでは、携帯端末で Javascriptが動作しないので、代わりにRESTful APIが提供されている Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 24. ということは • モバイル向けには、サーバサイドでプログラ ムを組む必要がある • PC向けにはJavascriptで、モバイル向けにはサー バサイドだと、別々のプログラムを組むことになる →PC向けをサーバサイドアプリとして作ってい れば、モバイル向けにも同じプログラムを使 える!! Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 25. というわけで • 今回紹介した方法を使えば、一度でPC・モバ イル両対応のアプリをつくることができるので かなりおすすめ • すでにあるWEBアプリをmixiアプリ対応するのに もおすすめ Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 26. より詳細な情報 • Peeled unshiu • http://wiki.unshiu.jp/ • ドリコム社提供 • オープンソースのモバイルSNSサイト構築パッ ケージ(Ruby on Rails) • プラグインとしてmixiアプリの構築基盤を提供 ユーザー数等の各種効果測定が可能 ドリコム社提供のポイント広告システム『poncan』対応 Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 27. より詳細な情報 • mixiapp_base • git://github.com/araimotoki/mixiapp_base.git • Peeled unshiuのmixiアプリプラグインを改良し、単 独でmixiアプリを作成できるようなパッケージ (Ruby on Rails) Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 28. Peeled unshiu/mixiapp_baseの紹介 • クライアント側プログラム(Javascript)がすでに用 意されており、普段はそれらを意識する必要がな い • helperが充実しており、通常の流れでJavascriptを 直接書くことはあまりない(リッチUIの実装のため にjavascript(jquery)を書くことはある) →普通にRuby on Railsでアプリケーションをつくるの とあまり変わらない Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 29. test_controller.rb class TestController < ApplicationController before_filter :validate_session def profile end def friends end end profile.html.rb <h1>プロフィール</h1> <p> <img src="<%= current_owner.thumbnail_url %>"><br> mixi_id: <%= current_owner.mixi_id %><br> nickname: <%= current_owner.nickname %><br> </p> <%= link_to_update “友達", :url => { :action => “friends” } %><br> friends.html.rb <h1><%= current_owner.nickname %>の友達</h1> <% current_owner.friends.each do |user| %> <p> <img src="<%= user.thumbnail_url %>"><br> mixi_id: <%= user.mixi_id %><br> nickname: <%= user.nickname %><br> </p> <% end %> <%= link_to_update “戻る", :url => { :action => “profile” } %><br> Copyright(c)2009 Cyworks Inc. All Rights Reserved.
  • 30. mixiapp_baseの実用例 • マイミク記念日 • http://mixi.jp/run_appli.pl?id=7981 • 記念日のカウントダウン+マイミクの記念日に メッセージを送るアプリ • PC・モバイル両対応 Copyright(c)2009 Cyworks Inc. All Rights Reserved.

×