Facebookアプリ開発、基礎の基礎

3,606 views

Published on

【第1回】 yoyogi.fb(代々木facebookアプリ開発勉強会)-初心者向け-@株式会社HatchUpでの講義スライドです

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

No Downloads
Views
Total views
3,606
On SlideShare
0
From Embeds
0
Number of Embeds
908
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Facebookアプリ開発、基礎の基礎

  1. 1. 第1回 yoyogi.fb Facebookアプリ基礎の基礎 ∼プログラミングせず、 Graph API Explorerを使って学ぶ∼12年3月25日日曜日
  2. 2. 自己紹介12年3月25日日曜日
  3. 3. ・前原 秀徳 (29歳) ・@maeharin ・文系リーマン ・半年前まで、プログラミングできず12年3月25日日曜日
  4. 4. 私が作ったもの12年3月25日日曜日
  5. 5. 友達Tube http://tomodachitube.herokuapp.com/12年3月25日日曜日
  6. 6. 少し実演12年3月25日日曜日
  7. 7. 仕組み12年3月25日日曜日
  8. 8. API インター Facebook ネット API ブラウザ インター ネット Youtube API12年3月25日日曜日
  9. 9. 規模感 ソースコード : 約200行 プログラミング言語 : JavaScriptのみ12年3月25日日曜日
  10. 10. 使用技術・環境 PC Mac Book Air(OS X LION) エディタ Vim サーバ heroku html 直書き cssフレームワーク Twitter Bootstrap プログラミング言語 JavaScript ライブラリ JQuery API Facebook,Youtube デザイン Fireworksサーバーサイドプログラミング無し! データベース無し!12年3月25日日曜日
  11. 11. コード12年3月25日日曜日
  12. 12. ですが、今日はプログラミングは行いません12年3月25日日曜日
  13. 13. まずは、 「何を作りたいか」 が大事12年3月25日日曜日
  14. 14. 今日はみなさんに 「こんなものを作りたいな」 というアイディアの種 を持って帰ってもらえればと 思います12年3月25日日曜日
  15. 15. ということで、本日は2部構成 1、講義 2、ディスカッション12年3月25日日曜日
  16. 16. 1、講義 「FacebookAPIからどのような情報が取得できるか」を理解する12年3月25日日曜日
  17. 17. 最新情報はここで https://developers.facebook.com12年3月25日日曜日
  18. 18. 英語ですがorz12年3月25日日曜日
  19. 19. 日本語訳あるお http://fb.dev-plus.jp/12年3月25日日曜日
  20. 20. 日本語訳あるお http://facebook-docs.oklahome.net/12年3月25日日曜日
  21. 21. でも仕様変更に注意!12年3月25日日曜日
  22. 22. 日本語 英語おすすめ12年3月25日日曜日
  23. 23. で、Facebookアプ リですが12年3月25日日曜日
  24. 24. 3タイプあるようです12年3月25日日曜日
  25. 25. 1. Websites 友達Tubeもこれです12年3月25日日曜日
  26. 26. 2. Mobile12年3月25日日曜日
  27. 27. 3. Apps on Facebook12年3月25日日曜日
  28. 28. どうやって作るの?12年3月25日日曜日
  29. 29. 12年3月25日日曜日
  30. 30. 少し開発者視点で 言うと12年3月25日日曜日
  31. 31. Facebook Developer登録 ↓ サーバー用意 ↓ プログラム作成 ↓ サーバーにアップ12年3月25日日曜日
  32. 32. 例:友達Tube 1. Facebook Developer登録 2. heroku登録 3. gitインストール 4. HTML,CSS作成 5. Facebook,YoutubeのAPI学習 5. JavaScript作成 6. デザイン作成 7. デプロイ12年3月25日日曜日
  33. 33. 以上、概要はこんな感 じです12年3月25日日曜日
  34. 34. ではFacebookから どんな情報がとれる?12年3月25日日曜日
  35. 35. どんな情報がとれるのか? (1) Public information (2) Basic information (3) User Permissions (4) Friend Permissions (5) その他12年3月25日日曜日
  36. 36. (1) Public information12年3月25日日曜日
  37. 37. Public informationとは? The Graph API as such allows you to easily access all public information about an object. For example,https://graph.facebook.com/btaylor (Bret Taylor) returns all the public information about Bret. For example a users first name, last name and profile picture are publicly available. source: https://developers.facebook.com/docs/reference/ api/12年3月25日日曜日
  38. 38. ようは、 誰でも見れる情報12年3月25日日曜日
  39. 39. 誰でもブラウザで アクセスできるお12年3月25日日曜日
  40. 40. https:// graph.facebook.com/ ユーザーID12年3月25日日曜日
  41. 41. json形式で 名前や性別12年3月25日日曜日
  42. 42. プログラムで使えるお <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script> <script type="text/javascript"> var url = "https://graph.facebook.com/xxx"; //facebookのユーザーID $(function() {   $.getJSON(     url,     function (res) {       for (var key in res) {         document.write(key + :: + res[key] + <br>);       }     }   ); }); </script>12年3月25日日曜日
  43. 43. 実行結果12年3月25日日曜日
  44. 44. プロフ画像もPublic informationだよ /picture と追記12年3月25日日曜日
  45. 45. 12年3月25日日曜日
  46. 46. 小っさw12年3月25日日曜日
  47. 47. 大きい画像 ?type=large と追記12年3月25日日曜日
  48. 48. 12年3月25日日曜日
  49. 49. (゚ ゚)イイネ!12年3月25日日曜日
  50. 50. あ、ちなみにURLの規則は、こち らに書いてあります12年3月25日日曜日
  51. 51. ただ、このPublic Information、ユーザーが公開 してる全ての情報がとれるわけで はありません12年3月25日日曜日
  52. 52. 例えば、自分が好きな音楽を公開 していても、取得できません12年3月25日日曜日
  53. 53. ユーザーの情報 非公開情報 公開情報12年3月25日日曜日
  54. 54. ユーザーの情報 Public Information 非公開情報12年3月25日日曜日
  55. 55. ユーザーの情報 Public Information 非公開情報 Basic Information12年3月25日日曜日
  56. 56. (2) Basic Information12年3月25日日曜日
  57. 57. Basic informationとは? Basic Information When a user auths your app and you request no additional permissions, your application will have access to only the users basic information. By default, this includes certain properties of the User object such as id, name, picture, gender, their locale and their age range. and certain connections of the User object such as the Friends connection. If the user has made more of their data public, more information will be available. source: https://developers.facebook.com/docs/12年3月25日日曜日
  58. 58. ユーザーの情報 Public Information 非公開情報 Basic Information アプリの認証が必要12年3月25日日曜日
  59. 59. アプリの認証とは? Facebook Aさん アプリ12年3月25日日曜日
  60. 60. アプリの認証とは? Facebook Aさん アクセス アプリ12年3月25日日曜日
  61. 61. アプリの認証とは? Facebook Aさん 認証を要求 アプリ12年3月25日日曜日
  62. 62. アプリの認証とは? Facebook Aさん 許可 アプリ12年3月25日日曜日
  63. 63. アプリの認証とは? Facebook Aさん リクエスト アプリ12年3月25日日曜日
  64. 64. アプリの認証とは? Facebook Aさん Aさんの情報 アプリ12年3月25日日曜日
  65. 65. アプリの認証とは? Facebook Aさん レスポンス アプリ12年3月25日日曜日
  66. 66. では、具体的にどのよ うな情報が取得できる か調べるには?12年3月25日日曜日
  67. 67. コード書く?12年3月25日日曜日
  68. 68. 英語読む?12年3月25日日曜日
  69. 69. 大丈夫です12年3月25日日曜日
  70. 70. Facebookは 便利なツールを 用意してくれています12年3月25日日曜日
  71. 71. Graph API Explorer12年3月25日日曜日
  72. 72. FacebookのAPIから 取得できる情報が 簡単に調べられます12年3月25日日曜日
  73. 73. http:// developers.facebo ok.com/tools/ explorer/12年3月25日日曜日
  74. 74. 12年3月25日日曜日
  75. 75. Basic Information を取得してみる12年3月25日日曜日
  76. 76. ユーザーの情報 Public Information 非公開情報 Basic Information こいつ12年3月25日日曜日
  77. 77. /me と打ち込んでみる12年3月25日日曜日
  78. 78. エラー。 アプリ(Graph API Explorer)を認可し てないから12年3月25日日曜日
  79. 79. Graph API Explorerで 「アクセストークン を取得」をクリック12年3月25日日曜日
  80. 80. Permissionsの設定 「Get Access Token」をクリック まずはBasic Permissionsで12年3月25日日曜日
  81. 81. Graph API Explorerを許可 「Facebookでログイ ン」をクリック12年3月25日日曜日
  82. 82. アクセストークンGet 「エンター」12年3月25日日曜日
  83. 83. /me取得12年3月25日日曜日
  84. 84. /me以外も、公開してれば取得で きます /me/music12年3月25日日曜日
  85. 85. 公開してない情報は不可 /me/books12年3月25日日曜日
  86. 86. (3) User permissions12年3月25日日曜日
  87. 87. ユーザーの情報 Public Information 非公開情報 Basic Information こいつ12年3月25日日曜日
  88. 88. 非公開情報は、12年3月25日日曜日
  89. 89. Graph API Explorerでパー ミッションを許可12年3月25日日曜日
  90. 90. パーミッションを許可12年3月25日日曜日
  91. 91. 非公開情報が取得できます /me/books12年3月25日日曜日
  92. 92. (4) Friend permissions12年3月25日日曜日
  93. 93. その友達の情報 自分だけ Public Information 友達まで ユーザーの情報 Basic Information その友達の情報 Public Information 非公開情報 Basic Information 自分だけ Public Information 友達まで Basic Information こいつら(例外あり)12年3月25日日曜日
  94. 94. Graph API Explorerでパー ミッションを許可 こっち12年3月25日日曜日
  95. 95. 友達の情報が取得できます12年3月25日日曜日
  96. 96. (5) その他12年3月25日日曜日
  97. 97. その他 ・Extended Permissions ・Open Graph Permissions12年3月25日日曜日
  98. 98. 私もよくわかりません orz12年3月25日日曜日
  99. 99. 詳しくはWEBで! https://developers.facebook.com/12年3月25日日曜日
  100. 100. (時間あれば) 実演:herokuにindex.phpを pushするまで12年3月25日日曜日
  101. 101. 休憩12年3月25日日曜日
  102. 102. 2、ディスカッション「取得したデータを使って、どのようなアプリを作れるか」を議論する12年3月25日日曜日
  103. 103. ご清聴ありがとうございました12年3月25日日曜日

×