Download - 「Facebook SDK for Android」を使ったFacebookログイン
![Page 1: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/1.jpg)
Facebook SDK for Androidを使った Facebookログイン
⽇日 本 A n d r o i d の 会
⿅鹿 児 島 ⽀支 部
野 崎 弘 幸
2012.11.29JAGK 第11回勉強会
![Page 2: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/2.jpg)
⾃自⼰己紹介
野崎 弘幸
⿅鹿児島企業に所属しています。
⽇日本Androidの会⿅鹿児島⽀支部⾧長 / 運営委員
不定期でAndroidの勉強会やってます。Android技術に関する勉強会。アプリ作成の技術とか、組込みとか、クラウドやHTML5のことも。
いやいや、だいぶ空いてしまいました・・・。お久しぶりです。
![Page 3: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/3.jpg)
アジェンダ
Facebook SDK for Androidを使ってFacebookログインするのを作ってみたので
そのへんの話をしようと思います。
「こんな便利なのがあるんだねー。」という感じで聞いて頂けばと。
(いや、もう前からあるっぽいので、知ってるかもしれませんが・・・。)
![Page 4: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/4.jpg)
Facebook SDK for Android
![Page 5: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/5.jpg)
Facebook DEVELOPERSには、Facebookなデータを扱うための
各種SDKが⽤用意されています。
https://developers.facebook.com/docs/sdks/
![Page 6: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/6.jpg)
今回、利⽤用するのはこの中の「Facebook SDK for Android」です。
https://developers.facebook.com/android/
![Page 7: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/7.jpg)
このSDK、ドキュメントも充実しています。「Facebook Login for Android」という、
テクニカルガイドページも⽤用意されています。
https://developers.facebook.com/docs/howtos/androidsdk/3.0/login-with-facebook/
![Page 8: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/8.jpg)
Facebook ログインの実装
![Page 9: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/9.jpg)
ともあれ、まずは、SDKのダウンロードとインポートを⾏行います。
![Page 10: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/10.jpg)
ちなみに、Facebookは、エミュレーターにFacebookアプリを
インストールできるような⽤用意もしています。
https://developers.facebook.com/docs/getting-started/facebook-sdk-for-android/3.0/
実機を使うので、今回はここはスルーで。
![Page 11: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/11.jpg)
1.ダウンロードして適当なとこに展開しておきます。
![Page 12: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/12.jpg)
2.Paceage Explorerから右クリックでImport選択
![Page 13: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/13.jpg)
3. ナビゲーションに従って、Facebook SDKをインポートします。
![Page 14: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/14.jpg)
4. compiler levelを設定します。
![Page 15: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/15.jpg)
次にAndroidのプロジェクトを作って、Facebookにアプリの登録を⾏行います。
![Page 16: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/16.jpg)
1. Androidのプロジェクトを作ります。
![Page 17: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/17.jpg)
2. Facebook DEVELOPERSでアプリの登録を⾏行います。と、その前に、
Androidアプリの登録時に必要なKey Hashを作っておきます。
https://developers.facebook.com/docs/getting-started/facebook-sdk-for-android/3.0/
![Page 18: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/18.jpg)
3. Facebook DEVELOPERSでアプリの登録を⾏行います。
![Page 19: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/19.jpg)
4. Androidプロジェクトが、Facebook SDKにリンクするよう設定します。
![Page 20: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/20.jpg)
ここまでで、事前準備完了です。コードを書いていきます。
![Page 21: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/21.jpg)
1. string.xmlにFacebook DEVELOPERSで割り当てられた
APP IDを設定します。
![Page 22: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/22.jpg)
2. AndroidManifest.xmlにuses-permissionを追加します。
![Page 23: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/23.jpg)
3. AndroidManifest.xmlにmeta-dataを追加します。
![Page 24: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/24.jpg)
4. AndroidManifest.xmlにactivityを追加します。
![Page 25: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/25.jpg)
5. MainActivity.javaを編集します。
![Page 26: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/26.jpg)
6. Facebookのユーザー名を表⽰示するTextViewを設定します。
![Page 27: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/27.jpg)
7.MainActivity.javaに戻って編集します。
https://developers.facebook.com/docs/getting-started/facebook-sdk-for-android/3.0/
![Page 28: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/28.jpg)
これでいちおう完成です。動作を確認してみます。
![Page 29: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/29.jpg)
端末にFacebookのアプリがインストールされていると、Facebookの認証の確認画⾯面が出て、
了承するとログインできます。
![Page 30: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/30.jpg)
Facebookのアプリがインストールされていない場合は、WEBViewなポップアップで認証することになります。
![Page 31: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/31.jpg)
ユーザー名だけでは、味気ないので、少し、レイアウトを弄ります。
![Page 32: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/32.jpg)
このへんとかを参考にして、
https://developers.facebook.com/docs/tutorials/androidsdk/3.0/scrumptious/personalize/
https://developers.facebook.com/docs/reference/android/3.0/ProfilePictureView/
![Page 33: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/33.jpg)
レイアウトと処理のコードを追加します。
![Page 34: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/34.jpg)
プロフィール画像がでるようになりました。
![Page 35: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/35.jpg)
これですべて完了です。あとは、作るアプリに合わせて
変更していけばいいかと。
ちなみに・・・。
![Page 36: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/36.jpg)
やはり、iOSもやっときたいところですね。
Facebook DEVELOPERには当然、iOS版も⽤用意されています。
![Page 37: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/37.jpg)
時間の都合等で、ここでは、詳細の説明は省きますが、
![Page 38: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/38.jpg)
iOS版もAndroidと同じようにドキュメントが⽤用意されています。
動作も同じ感じです。
![Page 39: 「Facebook SDK for Android」を使ったFacebookログイン](https://reader031.vdocuments.pub/reader031/viewer/2022020713/5561521ad8b42a8a7d8b5078/html5/thumbnails/39.jpg)
ご清聴ありがとうございました。