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

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

@junkpot1212

自己紹介

名前: 上田 信尋

Twitter: junkpot1212

Blog: http://tech.junkpot.net

WEB屋さんPHPerお仕事ください

前回のLTのおさらい

Firefox OSの不便なところ

・iOSやAndroidのように 電話帳やカレンダーのクラウド同期が無い

無いなら作っちゃえばいいんですよ(ﾟ∀ﾟ)

丸投げ作ってないんかいのツッコミ多数

ってことで同期できるアプリを作ってみよう

電話帳のクラウド同期アプリ

既にあった

OSが対応してた

カレンダーのクラウド同期アプリ

OSが対応してた

大ピンチ※事実に気付いたのが昨日の夜

作るネタがなくなって大ピンチ

途方にくれつつ何か無いかと手持ちのAndroidのホーム画面を眺めてみる

foursquare

WEB屋さんがfoursquareアプリを

作ってみたら

foursqareって？

foursquare（フォースクエア）は、位置情報に基づいたソーシャル・ネットワーキング・サービスのウェブサイト、携帯電話用ソフトウェア、およびゲーム（位置ゲー）である。※Wikipediaより

スポットにチェックインして場所を共有したりチェックイン状況によってバッジが獲得出来たり

● 色んなプラットフォーム対応

● ブラウザでアクセスすると←のような表示に

● OAuth API対応

FirefoxOS版を作ってみた

デモやります

開発に使ったツール

• Netbeans• Firefox OS simulator

foursquare api Document

https://developer.foursquare.com/start公式ドキュメント結構丁寧に書いてある

http://tdoc.info/foursquare-API/index.html有志による非公式日本語訳も

注意点

・OAuth認証foursquareへのアプリ登録の際に設定するredirect Urlとトークンをリクエストする時のredirect_urlは共通にしないと動かない

・権限の設定特権(privileged)アプリにするsystemXHR, geolocation, browser3つのpermissionsを設定する

・シミュレーターは位置情報を　常にMozilla本社付近を返す

OAuth認証

OAuth認証

Redirect Url を揃えないと動かないのでアプリ内ブラウザを使ってダミーのredirect Urlでリクエストし、アプリ内ブラウザが遷移したURLからトークンを取得。

manifest.webapp

manifest.webapp

"type": "privileged" で特権アプリの設定"systemXHR": OAuth等の通信に必要"browser": アプリ内ブラウザ

あとは普通に普通にAPI通信を頑張れば完成

感想

・WEB向けAPIをアプリで使うのに多少工夫が必要

・むしろアプリ内ブラウザ等ただブラウザでやるより便利な面も？

・昨日の夜は泣きそうだった

教訓

Firefox OS の進化の速さを侮るなかれ

ご清聴ありがとうございました