Help us understand the problem. What is going on with this article?

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away