Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WEB屋さんがアプリを作ってみたら

1,260 views

Published on

関西Firefox OS勉強会 4th GIG

  • Be the first to comment

WEB屋さんがアプリを作ってみたら

  1. 1. WEB屋さんが アプリを作ってみたら @junkpot1212
  2. 2. 自己紹介 名前: 上田 信尋 Twitter: junkpot1212 Blog: http://tech.junkpot.net WEB屋さん PHPer お仕事ください
  3. 3. 前回のLTのおさらい
  4. 4. Firefox OSの不便なところ ・iOSやAndroidのように 電話帳やカレンダーのクラウド同期が無い
  5. 5. 無いなら 作っちゃえばいいんですよ(゚∀゚)
  6. 6. 丸投げ 作ってないんかいのツッコミ多数
  7. 7. ってことで同期できるアプリを 作ってみよう
  8. 8. 電話帳の クラウド同期アプリ
  9. 9. 既にあった
  10. 10. OSが対応してた
  11. 11. カレンダーの クラウド同期アプリ
  12. 12. OSが対応してた
  13. 13. 大ピンチ ※事実に気付いたのが昨日の夜
  14. 14. 作るネタがなくなって大ピンチ
  15. 15. 途方にくれつつ何か無いかと 手持ちのAndroidの ホーム画面を眺めてみる
  16. 16. foursquare
  17. 17. WEB屋さんが foursquareアプリを 作ってみたら
  18. 18. foursqareって? foursquare(フォースクエア)は、 位置情報に基づいた ソーシャル・ネットワーキング・サービスのウェブサイト、 携帯電話用ソフトウェア、 およびゲーム(位置ゲー)である。 ※Wikipediaより スポットにチェックインして場所を共有したり チェックイン状況によってバッジが獲得出来たり
  19. 19. ● ● ● 色んなプラットフォーム対応 ブラウザでアクセスすると←の ような表示に OAuth API対応
  20. 20. FirefoxOS版を作ってみた
  21. 21. デモやります
  22. 22. 開発に使ったツール • • Netbeans Firefox OS simulator
  23. 23. foursquare api Document https://developer.foursquare.com/start 公式ドキュメント 結構丁寧に書いてある http://tdoc.info/foursquare-API/index.html 有志による非公式日本語訳も
  24. 24. 注意点 ・OAuth認証 foursquareへのアプリ登録の際に設定するredirect Urlと トークンをリクエストする時のredirect_urlは 共通にしないと動かない ・権限の設定 特権(privileged)アプリにする systemXHR, geolocation, browser 3つのpermissionsを設定する ・シミュレーターは位置情報を  常にMozilla本社付近を返す
  25. 25. OAuth認証
  26. 26. OAuth認証 Redirect Url を揃えないと動かないので アプリ内ブラウザを使ってダミーのredirect Urlでリクエストし、 アプリ内ブラウザが遷移したURLからトークンを取得。
  27. 27. manifest.webapp
  28. 28. manifest.webapp "type": "privileged" で特権アプリの設定 "systemXHR": OAuth等の通信に必要 "browser": アプリ内ブラウザ
  29. 29. あとは普通に普通に API通信を頑張れば完成
  30. 30. 感想 ・WEB向けAPIをアプリで使うのに多少工夫が必要 ・むしろアプリ内ブラウザ等ただブラウザでやるより便利な面も? ・昨日の夜は泣きそうだった
  31. 31. 教訓
  32. 32. Firefox OS の進化の速さを 侮るなかれ
  33. 33. ご清聴ありがとうございました

×