モバイルブラウザからアプリを開くには

事の発端

よく見ますよね、モバイルサイトの至る所にある「Twitterでシェア」、「Facebookでシェア」ってボタン。
よく見るんですけど・・・押しますか？アレ。

TwitterもFacebookも、もちろんアプリを使ってますよね。
ブラウザでなんて、誰もログインしてないですよね。

てことは誰も押さないですよね？！！

ネイティブアプリ全盛期にブラウザWebでシェアしてね！ったって、
わざわざログインしてまでやってくれる人が、果たしてどれくらいいるでしょうか。

うー、Webつらい！アプリ強い！
せめてこのボタンを押すとアプリが起動し・・たら素敵ではありませんか？！

どうにかなるのか

別に目新しい技術ではないのですが、実は"URIScheme"っていうものがあります。

URLスキーマって言われたりスキームって言われたり、色々呼ばれてます。
Androidだとインテントって呼んでたりもするらしい。

"http://" だとブラウザが起動するのと同じように、特定のアプリを呼び出すやつです。
Twitterなら"twitter://"とかです。
これらはアプリ側で定義されてある必要があります。

それならそうと

<a href="twitter://timeline">TwitterAppのタイムラインを表示！</a>

ってすりゃいいわけです。
楽勝です。

と言いたいところですが・・・。

• アプリがインストールされてなかったら？
• Androidでも動くのか？

とか気になってきますよね？
確かに動くし良いっちゃ良いのですが、そこは気にしないといけません。

app-opner.js

てなわけで作りました。

leader22/app-opener

iOS5以上、Android4以上で動くと思います。
厳密に色んな端末で検証したわけではないですが、手元のいくつかの端末では動いてました。

var isAndroid = navigator.userAgent.toLowerCase().indexOf('android') !== -1;
var shareText = encodeURIComponent('Webからアプリが開いたよ！！ @leader22++ https://github.com/leader22/app-opener') + ' ';
var schemeStr = (isAndroid) ? 'intent://post?message=' + shareText + '#Intent;scheme=twitter;package=com.twitter.android;end;'
                            : 'twitter://post?message=' + shareText;
new AppOpener({
    schemeStr:   schemeStr,
    fallbackUrl: 'http://lealog.net'
});

って定義されたページでも用意しておけば、リンク踏むだけでおっけーです。
schemeStrさえ用意すれば、後はなんとかしてくれるライブラリです。

OS別の挙動について

iOS: 'twitter://post?message={{TEXT}}'
ANDROID: 'intent://post?message={{TEXT}}#Intent;scheme=twitter;package=com.twitter.android;end;'

これで晴れてアプリでシェアできる

できます。が。

実はいちばんやりたかったFacebookアプリの起動がどうにもこうにもできませんで・・。
正確には、起動まではいけるが、「1タップで即シェアな状態」までもっていくスキームが見つけられず・・。
Google先生に聞いてありとあらゆるパターンを試しましたがダメでした。

せっかく作ったのに勿体無いなーと思いつつ、
TwitterやLINE、その他のアプリはスキームさえあればコレで動くので、成果としてはまあ満足してはいるんですけどねー。

Facebookでシェアするスキーム！WANTED！