画像をTWITTERに投稿してシェアする
最後にエフェクトを掛けた画像をTwitterに投稿してみます。Twitterに投稿するには大きく分けて3つの手段があります。
- アプリ内でTwitterのOAuth認可の処理をし、直接APIから投稿する。
- TwitterのWebIntent機能を使い、Webブラウザを開いてTwitterのサイト上からTwitter投稿させる。
- アプリ連携機能（Androidでいう暗黙的インテントのようなもの）を用いてTwitterクライアントに投稿データを渡す。
実装コストとしては1よりも2、3を選びたいところなのですが、2のWebIntentは画像のアップロードには対応しておらず、3についてはTizenのTwitter公式アプリが公開されていないので、まだ利用することができません。
というわけで今回は1の手段を用います。実装にはオープンソースのライブラリであるjsOAuthを利用します。
JSOAUTH
jsOAuthはTwitterやFacebookなどのOAuthに対応したサービスで、アプリケーションがOAuth認可を行うための機能を揃えたオープンソースのライブラリです。GitHubで公開されています。
まず、Twitterでのアプリ認可には一般的な順で以下のような方法があります。
- Twitterの認可ページからアプリのページへリダイレクトで戻ってくる
- Twitterの認可ページでPINコード（数列）を取得し、アプリ側で入力する
- Twitterへ申請をし、xAuthでの認可を可能にしてもらい、xAuthでの認可を行う。
Tizen Webアプリはそれ自体がブラウザのようなものですが、逆に「アプリ内ブラウザ」という考え方がありません。iframeは使えますが、Twitterの認可ページにはセキュリティ上の制約がかかっており、表示できません。Twitterの認可ページには「X-Frame-Options」というレスポンスヘッダが設定されており、同一のドメイン以外のサイトではiframe内に表示ができないようになっています。これについてはTizen Webアプリが採用しているCSPの新しいバージョンであれば、アプリ向けの設定としてその制約を無視する設定が可能になるので、将来的にはiframeを活用できるようになるかもしれません。というわけで、現段階では外部ブラウザを使います。
TizenにはiOSやAndroidと同じように、カスタムスキーマからアプリを起動する機能がついています。ただ、Twitterではリダイレクト先のURLにhttp(s)以外のスキーマを登録できないので1は使えません。なので利便性は損なわれますが、2のPINコードでの認可を使っていきたいと思います。
ネットワークアクセス許可の設定（POLICY）CSP
実装に入る前に、外部ネットワークへのアクセスを許可するための設定を行う必要があります。confix.xmlの［Policy］タブで［content-security-policy］のフィールド内に次のように記述します。
connect-src 'self' https://api.twitter.com;
「connect-src」は、XMLHttpRequestやWebSocketなどの通信先のドメインの許可を行う項目です。ここに自分自身を表す「'self'」に加え、TwitterAPIのドメインである「https://api.twitter.com」を追加することで、TwitterとのAPI通信が可能になります。
また、ブラウザの起動には、外部アプリケーションを起動するDevice API「Application API」を利用します。［Privileges］タブで以下の項目を追加しておきましょう。
http://tizen.org/privilege/application.launch
