関連ブログ：MUSHIKAGO APPS MEMO http://mushikago.com/i/?p=3176 http://mushikago.com/i/?p=3270 http://mushikago.com/i/?p=3331 http://mushikago.com/i/?p=3368 サッポロクリエイティブキャンプ2013 スマホでFacebookアプリの第一歩

1. サッポロクリエイティブキャンプ2013
いこうよ！「クリエイティブキャンプ」
∼スマホでFacebookアプリの第一歩∼
2013年10月19日
ICC「Cross x Garden」
講師：白石哲也（虫カゴデザインスタジオ株式会社）
13年10月21日月曜日

2. 自己紹介
虫カゴデザインスタジオ株式会社
白石 哲也（しらいし てつや）
東京造形大学卒業後、マクロメディア（現アドビ システムズ）に入社。Quality Assurance
やテクニカルサポートマネージャーとしてFlash、DreamweaverなどのWeb製品を担当。
独立後、虫カゴデザインスタジオ株式会社を設立し、現在では、Adobe AIRやPhoneGap、
Titaniumを利用したiOS向けのアプリ開発に従事。
twitter : @mushikago
facebook : http://facebook.com/mushikago
: http://facebook.com/mushikago.inc
web : http://mushikago.com/
blog : http://b.mushikago.com (MUSHIKAGO APPS MEMO)
13年10月21日月曜日

3. 概要
■概要：
Facebookアプリの第一歩として、講師が開発したアプ
リを例に、iOS用のアプリからFacebookへ画像を投稿
するまでの流れを紹介します。開発環境として、Adobe
AIR、PhoneGap、Titaniumの3種を想定しています。
■開発ツール：
• Adobe Flash Professional CC (Adobe AIR)
• PhoneGap Build
• Titanium Mobile
13年10月21日月曜日

4. 予定
10/19 15:00 - 18:00
➡
Facebookへの投稿について
➡
Facebook開発者登録の流れ
➡
画像投稿の流れ（Titanium + GitHub 紹介）
➡
開発ツール紹介 （奮闘中）
・PhoneGap Build + GitHub 紹介
・PhoneGap + FacebookConnect
・Flash Pro + Gaming SDKs
・Flash Pro + AirFacebook.ane
13年10月21日月曜日

5. Facebookへの投稿について
13年10月21日月曜日

6. Facebookへ画像を投稿する
２つの方法
OSまかせ
13年10月21日月曜日
自分のアプリ

7. iOSとFacebook
iOS6.0でOS自体にFacebookが統合され、カメラロールなど
から直接Facebookへアップロードできるようになった。
iOSより
画面はiOS7.0
13年10月21日月曜日

8. Social.framework
XcodeでSocial.frameworkを使うと、自作アプリからも
このOS標準の機能を簡単に利用できる。
Xcode
+
Social.framework
13年10月21日月曜日

9. 自分のFacebookアプリから
Facebook開発者登録を行って、自分のFacebookアプリを
使って投稿する。（iOS6.0以前はこの方法しかなかった）
https://developers.facebook.com
13年10月21日月曜日

10. Graph API
OneTwoPunch
Graph APIを使うと、画像投稿だけではなく、Facebook上の
さまざまなデータにアクセスするアプリが作れます。
MUSHIKAGO
OneTwoPunchより
13年10月21日月曜日

11. FACEBOOK
DEVELOPER
Facebook開発者登録の流れ
13年10月21日月曜日

12. Facebook : 開発者登録をしてApp IDを取得するまで
http://mushikago.com/i/?p=3176
13年10月21日月曜日

13. 画像投稿の流れ
（Titanium Mobile + GitHub）
13年10月21日月曜日

14. Titanium Mobileでの例
Titanium MobileにはFacebookモジュールがついているので、
それを利用してみる。
+
Titanium Mobile
13年10月21日月曜日
GitHub

15. Titanium StudioとGitHubをセットアップする
http://mushikago.com/i/?p=3270
13年10月21日月曜日

16. Titanium : GitHub上のプロジェクトをForkして開く
http://mushikago.com/i/?p=3331
13年10月21日月曜日

17. 画像投稿の流れ：example
https://github.com/mushikago/ImgToFB/
blob/master/Resources/ui/common/
FirstView.js
short URL
http://bit.ly/imgtofb
13年10月21日月曜日

18. 解説
Facebookモジュールの組み込み
モジュールを使用する準備：tiapp.xml
<property name="ti.facebook.appid">152874854922555</property>
と
FBのAppID
<modules>
<module platform="iphone">facebook</module>
</modules>
を追加。
13年10月21日月曜日

19. 解説
ログインと認証（アプリの使用許可）
ログイン成功
認証画面
ログインしているか
13年10月21日月曜日
共有範囲選択（省略可）

20. 解説
投稿範囲の選択と投稿
privacy
_postObj
'ALL_FRIENDS'
'EVERYONE'
'SELF'
○.requestWithGraphPath("me/photos", _postObj, "POST", function(e){...})
function(e)
13年10月21日月曜日
e.success

21. もう一度
short URL
http://bit.ly/imgtofb
実際の動作
http://vimeo.com/mushikago/imgtofb
13年10月21日月曜日

22. 開発ツール紹介 （奮闘中）
13年10月21日月曜日

23. PhoneGap Build : Githubを使って最初のアプリをビルド
http://mushikago.com/i/?p=3368
13年10月21日月曜日

24. 奮闘中
• PhoneGap Build : FacebookConnect
• Flash Pro + Gaming SDK (Social.ane)
• Flash Pro + AirFacebook.ane
• Flash Pro + GraphAPI_Mobile_1_8_1.swc
13年10月21日月曜日

25. 【DEMO】
Flash Pro CC / PhoneGap Build
13年10月21日月曜日

26. つづきは
MUSHIKAGO APPS MEMO で。
http://b.mushikago.com/
虫カゴデザインスタジオ株式会社
白石 哲也（しらいし てつや）
twitter : @mushikago
facebook : http://facebook.com/mushikago
: http://facebook.com/mushikago.inc
web : http://mushikago.com/
13年10月21日月曜日