第四回Web APIを使ってWebアプリケーションを作る勉強会<br />〜 twitter , facebookのAPI を使って<br />連携アプリを作り始めてみよう〜<br />
前回のおさらい<br />ホットペッパーのAPI(リクルートWebサービス)とtwitter のAPIによる投稿のみのプログラミング体験を2時間で行いました<br />2つのAPIを無理矢理こじつけたマッシュアップなどもやってみました・・・<b...
twitterでは<br />twitterアプリの登録<br />ライブラリの利用<br />ひな形を元にお知らせbotを作成しました<br /><?php<br />require_once("twitteroauth.php");<br ...
本日のテーマは認証<br />自分が登録したアカウントで発言させるのみでした(この勉強会では初の投稿系API)<br />今日は第三者に自分が作ったサイトで認証してもらい、そこでその第三者のアカウントで発言してもらうことを目指します(この勉強会...
twitter& facebook<br />
1時間目<br />twitterで認証、タイムラインの取得、friendsタイムラインの取得<br />
1時間目の流れ<br />前回のbotの復習について<br />ライブラリを使いましょう!<br />画面フローの確認(友達のツイートを見るためのフロー)<br />作業ファイルのセットアップ、準備<br />動作テスト<br />friend...
twitterお知らせbotの復習<br />oshirase.botにアクセスするとすぐに発言される(そこに設定情報等すべて書かれている)<br />Oauth.phpとtwitteroauth.phpというライブラリを利用している<br /...
OAuth認証<br />ライブラリを使いましょう!<br />twitteroauthat master from abraham/twitteroauth– GitHubhttps://github.com/abraham/twittero...
画面フローの確認<br />「Signinボタン」<br />友達のタイムライン表示<br />
作業ファイルのセットアップ<br />templateフォルダから下記ファイルをworkフォルダにコピーして作業を始めます<br />socialconfig.phptwitterのアクセストークンやコールバック関数を書き込んでください<br ...
準備事項<br />callbackURLの設定例:http://127.0.0.1/webapi4/sample/twitteroauth/callback.php※http://localhost/は受け付けられない※当然、サーバーにアップ...
ファイルにアクセス<br />http://127.0.0.1/webapi4/work/index.php<br />※はじめての時だけ<br />
statuses/friends_timelineの取得<br />自分のfriendsのツイートと自分のツイートで構成される(homeと異なりリツイートは含まれない)<br />index.php内の<br />$content = $con...
HTMLの形に整形するには?<br />配列変数から一つずつの情報を取り出しHTMLテンプレートの中に埋め込んでいく<br />$content="";<br />foreach ($contents as $hit) {<br />$cont...
twitterマッシュアップのヒント<br />タイムラインは人それぞれ、同じ物が存在しない。また、友達や気になる人が多い<br />テキスト解析で感情をアイコン化したり、形態素解析もしくはキーフレーズ抽出でコンテンツマッチで商品紹介するなど※...
2時間目<br />facebook APIの概念、PHP SDKの利用方法、アプリにする方法<br />
2時間目の流れ<br />開発者登録の確認<br />facebookアプリ登録<br />アプリをfacebokに結合する<br />開発中はsandboxモードにする<br />PHP SDKモードの利用方法<br />プロフィール情報の表...
facebookの開発者登録<br />事前に開発者登録のお願いをしております(そこそこ時間と手間がかかります)<br />これからされる方はさっと済ませておいてください<br />下記URLが最新の開発者登録の方法を解説しているサイトです。無...
facebookアプリ登録<br />https://developers.facebook.com/apps<br />上記URLから右上の「新しいアプリケーションを作成」ボタンを押して必要事項を記入します<br />アプリの名前を入れます<...
アプリをFacebookに結合する<br />
開発中はSandboxモードにする<br />開発中は他の人がアプリに触れないようにするため、Sandboxモード(開発者のみ使える)にしておく<br />関係者を指定して使えるようにすることは出来る<br />
PHP SDKの利用方法<br />https://github.com/facebook/php-sdk/<br />上記URLからダウンロードできる<br />しかし、最新版はすでに動かない・・・。$session = $facebook-...
プロフィール情報<br />$me = $facebook->api('/me');<br />プロフィール情報の取り出しは$meに配列の形で入っているので、<?phpecho $me[‘name’]; ?>といったPHPタグの形で記述できる。...
Friendsリスト表示<br />$friends = $facebook->api('/me/friends'); <br />$friendsに複数の友達情報が含まれていて、$friendsから$friendに一人ずつ情報を代入してfor...
facebookマッシュアップヒント<br />今回の事例はfacebookアプリライク<br />日常facebook使う人向けのコンテンツアグリケーションサービス<br />Youtube、ホットペッパー、地図等アプリとして登録しておくこと...
3時間目<br />1時間集中ワーク、マッシュアップを目指す<br />
舞台がどこになるかを決めよう<br />アプリ<br />プラットフォーム<br />twitter,facebook,mixi等<br />アプリ<br />
レファレンス<br /> ▽Documentation | Twitter Developers<br />https://dev.twitter.com/docs<br /> ▽Graph API - Facebook開発者<br />htt...
参考書籍(twitter)<br />Twitter API プログラミング<br />Twitter API ポケットレファレンス<br />書籍ではないですが・・・Twitter API 仕様書http://watcher.moe-nift...
参考書籍(facebook)<br />スマートにプログラミングfacebookアプリ開発<br />facebookアプリケーション開発ガイド(中級技術者向け)<br />facebookデザインブックステップアップ活用編<br />書籍では...
Upcoming SlideShare
Loading in...5
×

第四回Web apiを使ってwebアプリケーションを作る勉強会テキスト2

7,920

Published on

Published in: Lifestyle
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,920
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

第四回Web apiを使ってwebアプリケーションを作る勉強会テキスト2

  1. 1. 第四回Web APIを使ってWebアプリケーションを作る勉強会<br />〜 twitter , facebookのAPI を使って<br />連携アプリを作り始めてみよう〜<br />
  2. 2. 前回のおさらい<br />ホットペッパーのAPI(リクルートWebサービス)とtwitter のAPIによる投稿のみのプログラミング体験を2時間で行いました<br />2つのAPIを無理矢理こじつけたマッシュアップなどもやってみました・・・<br />
  3. 3. twitterでは<br />twitterアプリの登録<br />ライブラリの利用<br />ひな形を元にお知らせbotを作成しました<br /><?php<br />require_once("twitteroauth.php");<br />// OAuthアプリ登録で取得したConsumer keyを設定<br />$consumer_key=“xxxxxxxxxxxx";<br />// OAuthアプリ登録で取得したConsumer secretを設定<br />$consumer_secret=”xxxxxxxxxxxx";<br />// https://dev.twitter.com/apps/で取得したoauth_tokenを設定(Access token)<br />$oauth_token=”xxxxxxxxxx";<br />// https://dev.twitter.com/apps/で取得したoauth_token_secretを設定(Access token secret)<br />$oauth_token_secret=”xxxxxxxxxxxxxx";<br />// twitter アカウントに発言させる内容<br />$message = "もしかして aaaa";<br />$status = $message;<br />// 発言を行うメソッドを指定<br />$method = "statuses/update";<br />// パラメータを指定(ここでは発言内容を指定)<br />$parameters = array("status" => $status);<br />// TwitterOAuthのインスタンスを生成<br />$twitter = new TwitterOAuth(<br /> $consumer_key, $consumer_secret, $oauth_token, $oauth_token_secret<br />);<br />// Twitterに発言をPOST<br />$response = $twitter->post($method, $parameters);<br />$http_info = $twitter->http_info;<br />$http_code = $http_info["http_code"];<br />// ツイートの成功可否を判別してその結果を画面表示(テキストonly)<br />if($http_code == "200" && !empty($response)) {<br /> print "ツイート成功n";<br />} else {<br /> print "ツイート失敗n";<br />}<br />?><br />
  4. 4. 本日のテーマは認証<br />自分が登録したアカウントで発言させるのみでした(この勉強会では初の投稿系API)<br />今日は第三者に自分が作ったサイトで認証してもらい、そこでその第三者のアカウントで発言してもらうことを目指します(この勉強会では初の認証系API)<br />その第一歩として認証を行います<br />
  5. 5. twitter& facebook<br />
  6. 6. 1時間目<br />twitterで認証、タイムラインの取得、friendsタイムラインの取得<br />
  7. 7. 1時間目の流れ<br />前回のbotの復習について<br />ライブラリを使いましょう!<br />画面フローの確認(友達のツイートを見るためのフロー)<br />作業ファイルのセットアップ、準備<br />動作テスト<br />friends_timelineにアクセス<br />HTMLに整形<br />
  8. 8. twitterお知らせbotの復習<br />oshirase.botにアクセスするとすぐに発言される(そこに設定情報等すべて書かれている)<br />Oauth.phpとtwitteroauth.phpというライブラリを利用している<br />登録したアプリケーション名が表示される(日本語文化圏でないクライアントでは全角文字は表示されない)<br />
  9. 9. OAuth認証<br />ライブラリを使いましょう!<br />twitteroauthat master from abraham/twitteroauth– GitHubhttps://github.com/abraham/twitteroauth/tree/master/twitteroauth/<br />細かい認証の仕組みを気にせずに開発に集中出来る!<br />
  10. 10. 画面フローの確認<br />「Signinボタン」<br />友達のタイムライン表示<br />
  11. 11. 作業ファイルのセットアップ<br />templateフォルダから下記ファイルをworkフォルダにコピーして作業を始めます<br />socialconfig.phptwitterのアクセストークンやコールバック関数を書き込んでください<br />apifunc.php<br />callback.php<br />clearsessions.php<br />connect.php<br />html.inc<br />imagesフォルダ(ボタンデザインが2種類入っている)<br />index.php<br />redirect.php<br />OAuth.php<br />twitteroauth.php<br />
  12. 12. 準備事項<br />callbackURLの設定例:http://127.0.0.1/webapi4/sample/twitteroauth/callback.php※http://localhost/は受け付けられない※当然、サーバーにアップした場合はサーバーのURLに書き換える必要がある<br />
  13. 13. ファイルにアクセス<br />http://127.0.0.1/webapi4/work/index.php<br />※はじめての時だけ<br />
  14. 14. statuses/friends_timelineの取得<br />自分のfriendsのツイートと自分のツイートで構成される(homeと異なりリツイートは含まれない)<br />index.php内の<br />$content = $connection->get(‘account/verify_credentials’);を<br />$content = $connection->get(‘statuses/friends_timeline’);と書き換えるだけ<br />
  15. 15. HTMLの形に整形するには?<br />配列変数から一つずつの情報を取り出しHTMLテンプレートの中に埋め込んでいく<br />$content="";<br />foreach ($contents as $hit) {<br />$content .="<strong>".$hit->user->screen_name."</strong>n";<br />$content .=$hit->text."<hr>n";<br />}<br />
  16. 16. twitterマッシュアップのヒント<br />タイムラインは人それぞれ、同じ物が存在しない。また、友達や気になる人が多い<br />テキスト解析で感情をアイコン化したり、形態素解析もしくはキーフレーズ抽出でコンテンツマッチで商品紹介するなど※切り口=検索、トレンドAPIの利用等<br />twitterクライアントを作る。自分専用に使いやすくしたこだわりにクライアントを作る<br />掲示板投稿の認証にtwitterを使い、掲示板投稿内容の頭100字ぐらいを本人とサイトアカウントのtwitterタイムラインに流す<br />
  17. 17. 2時間目<br />facebook APIの概念、PHP SDKの利用方法、アプリにする方法<br />
  18. 18. 2時間目の流れ<br />開発者登録の確認<br />facebookアプリ登録<br />アプリをfacebokに結合する<br />開発中はsandboxモードにする<br />PHP SDKモードの利用方法<br />プロフィール情報の表示解説<br />friendsリスト表示の解説<br />
  19. 19. facebookの開発者登録<br />事前に開発者登録のお願いをしております(そこそこ時間と手間がかかります)<br />これからされる方はさっと済ませておいてください<br />下記URLが最新の開発者登録の方法を解説しているサイトです。無料の会員登録が必要ですが、有益な記事ですので、ご確認ください。<br />http://itpro.nikkeibp.co.jp/article/COLUMN/20110929/369675/<br />
  20. 20. facebookアプリ登録<br />https://developers.facebook.com/apps<br />上記URLから右上の「新しいアプリケーションを作成」ボタンを押して必要事項を記入します<br />アプリの名前を入れます<br />半角英数字7文字以上で入力<br />
  21. 21. アプリをFacebookに結合する<br />
  22. 22. 開発中はSandboxモードにする<br />開発中は他の人がアプリに触れないようにするため、Sandboxモード(開発者のみ使える)にしておく<br />関係者を指定して使えるようにすることは出来る<br />
  23. 23. PHP SDKの利用方法<br />https://github.com/facebook/php-sdk/<br />上記URLからダウンロードできる<br />しかし、最新版はすでに動かない・・・。$session = $facebook->getSession();ここに問題があるらしい。下記の通り書き換えて、その後も準じて書き換えていきます。$uid= $facebook->getUser();※元となる参考ソースhttp://d.hatena.ne.jp/ramyana/20101012/1286897340<br />
  24. 24. プロフィール情報<br />$me = $facebook->api('/me');<br />プロフィール情報の取り出しは$meに配列の形で入っているので、<?phpecho $me[‘name’]; ?>といったPHPタグの形で記述できる。写真URLはhttps://graph.facebook.com/ユーザーID/pictureとなる<br />
  25. 25. Friendsリスト表示<br />$friends = $facebook->api('/me/friends'); <br />$friendsに複数の友達情報が含まれていて、$friendsから$friendに一人ずつ情報を代入してforeachで回します。$friend[‘name’]でその人の名前を取り出すことが出来ます<br />
  26. 26. facebookマッシュアップヒント<br />今回の事例はfacebookアプリライク<br />日常facebook使う人向けのコンテンツアグリケーションサービス<br />Youtube、ホットペッパー、地図等アプリとして登録しておくことでそのサイトに行かなくても便利なもの(付加価値がつくもの。例:居住地域や最寄り駅をベースにデフォルト検索されている等)<br />
  27. 27. 3時間目<br />1時間集中ワーク、マッシュアップを目指す<br />
  28. 28. 舞台がどこになるかを決めよう<br />アプリ<br />プラットフォーム<br />twitter,facebook,mixi等<br />アプリ<br />
  29. 29. レファレンス<br /> ▽Documentation | Twitter Developers<br />https://dev.twitter.com/docs<br /> ▽Graph API - Facebook開発者<br />https://developers.facebook.com/docs/reference/api/<br /> ▽Getting Started - Facebook開発者<br />https://developers.facebook.com/docs/<br />
  30. 30. 参考書籍(twitter)<br />Twitter API プログラミング<br />Twitter API ポケットレファレンス<br />書籍ではないですが・・・Twitter API 仕様書http://watcher.moe-nifty.com/memo/docs/twitterAPI.txt<br />
  31. 31. 参考書籍(facebook)<br />スマートにプログラミングfacebookアプリ開発<br />facebookアプリケーション開発ガイド(中級技術者向け)<br />facebookデザインブックステップアップ活用編<br />書籍ではないですが・・・facebookアプリの作り方・PHP 編(2010 年 10 月版) - 19790401173.4http://d.hatena.ne.jp/ramyana/20101012/1286897340<br />仕様変更が頻繁にあるためサンプルソースがそのまま使えないことに注意<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×