URIScheme

URI SchemeでTwitter投稿をしてみる

More than 3 years have passed since last update.


URI Scheme

スマートフォンサイトで、Twitterに画像投稿をしたかったのですが、iOS6以降、Android2.2以降からしか、input[type=file]が使えないため、URI Schemeを使って対応しました。


URI Schemeとは

インターネット上のデータの所在を表すURI(URL)の先頭部分で、データにアクセスするための手段を表したもの。

URIスキームには通信プロトコル名などが用いられ、Webにアクセスするための"http"、SSL/TLSで暗号化されたWebアクセスを意味する"https"、FTPでファイルを送受信するための"ftp"、ローカルファイルにアクセスするための"file"、メールの送信先を指定する"mailto"などが有名。


iOSで使えるURI Scheme

Safariのアドレスバーにcomgooglemaps://を入れればGoogleMapsが、music://を入れれば音楽アプリが起動します。

iPhone URL Schemes


TwitterのURI Scheme

iOSのSafariから下記のURI Schemeにアクセスすると、Twitter公式アプリが起動します。


  • twitter://post?message=hello%20world

  • twitter://status?id=12345

  • twitter://user?screen_name=kzhrk0430

  • twitter://user?id=12345

  • twitter://status?id=12345

  • twitter://timeline

  • twitter://mentions

  • twitter://messages

  • etc...


Appの起動

Twitter公式アプリがインストールされていない状態でtwitter://にアクセスすると、iOSだと「ページが開けません」とアラートが表示され、Androidだと「404 Not Found」になると思います。

twitter://へのアクセスに失敗した場合、AppStoreやGooglePlayにアクセスし直す必要があります。

対応方法としては、iframeからtwitter://にRequestを飛ばして、反応がなかったらアプリのダウンロードページに飛ばします。

このとき、iOSとAndroidでは別々の実装が必要になります。


Android

var iframe = document.createElement('iframe');

iframe.style.border = 'none';
iframe.style.width = '1px';
iframe.style.height = '1px';

iframe.src = 'twitter://post?message=' + encodeURIComponent('ほげほげ #ふがふが');
document.body.appendChild(iframe);

iframe.onload = function() {
window.location.href = 'market://details?id=com.twitter.android';
iframe.parentNode.removeChild(iframe);
};

iframeのsrcにtwitter://を入れてアプリがインストールされていれば、そのままTwitter公式アプリが起動します。

されていなければ、iframeのonloadイベントが走って、GooglePlayに飛ぶようになっています。


iOS

var iframe = document.createElement('iframe');

var start = new Date().getTime();
iframe.style.border = 'none';
iframe.style.width = '1px';
iframe.style.height = '1px';

iframe.src = 'twitter://post?message=' + encodeURIComponent('ほげほげ #ふがふが');
document.body.appendChild(iframe);

setTimeout(function() {
var diff = new Date().getTime() - start;

if (diff < 510) {
window.location.href = 'http://itunes.com/apps/twitter';
iframe.parentNode.removeChild(iframe);
}
}, 500);

こちらもAndroidとほぼ同様ですが、onloadイベントの発火のタイミングが悪いため、setTimeoutで遅延させてます。

iframeのsrcにtwitter://を入れて、500ミリ秒後にアプリ起動判定の関数を実行しています。

twitter://にアクセスして500ミリ秒が経過し、尚且つ関数実行から10ミリ秒以内であれば、アプリがインストールされていないと判断してAppStoreに飛ばしています。


Android(Chrome)

Android Chromeの場合、セキュリティの問題でiframeのsrcからtwitter://にアクセス出来ないので、intent://を使います。

window.location.href = 'intent://post?message=' + encodeURIComponent('ほげほげ #ふがふが') + '#Intent;scheme=twitter;package=com.twitter.android;end;';

とやってやるだけで、Twitter公式アプリがあればアプリを起動、アプリがなければGooglePlayに飛ばしてくれます。


おわりに

Facebook公式アプリも、URI Scheme(fb://)があるのでいろいろ調べると楽しいかもしれません。