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://)があるのでいろいろ調べると楽しいかもしれません。