Web開発で「ツイートボタン欲しい！」と思う方も多いかと思います。
「スマートフォン向けサイトなのだから、アプリが起動して、あらかじめ本文入っててくれたら良いよね～」なんて気軽に考えてしまい、ドハマりしました。
スマートフォン関連ではよくあることですが、あっちとこっちで挙動が全く違う！
なんとかして解消しようとしてみるも、ちゃんと動かない！
ということが頻繁に発生します。
一応なんとか解決しましたので、忘備も含めて投稿しておきます。
どう動けばOKか
そもそもの要件は以下のとおりです。
- Android・iOSではアプリがインストールされている場合、アプリ起動
- アプリがインストールされていなければ、ブラウザでTwitter表示
- モバイル以外では、ブラウザでTwitter表示
ということですが、全ては解決できていません。
今回の件では拡散にTwitterを利用し、アプリ未インストールでの利用が少ないと想定しているため、現状でもOKとしています。
現時点での状況は以下のとおり。
Androidの場合
- アプリがインストール済の場合、アプリ起動→OK
- アプリが未インストールの場合、ブラウザでTwitter起動→Play Store起動
標準の挙動がこうなっているようですし、問題はないでしょう。
iOSの場合
- アプリがインストール済の場合、アプリ起動→OK
- アプリが未インストールの場合、ブラウザでTwitter起動→OK
複数の方法でトライしてみましたが、無事に想定通りの挙動となりました。
モバイル以外の場合
- ブラウザでTwitter起動→OK
これは特に難しいこともなく、通常の処理ですね。
ということで、AndroidのPlay Storeが起動する件以外は問題なく動作しています。
Play Store起動についても、必死に対応する必要はないと考えます。
実装方法
さて、本題の実装についてですが、処理の流れは以下のとおり。
- モバイルなら以下の処理
- Android、iOSのUA判定とリンク生成
- UA判定に基づき、アンカータグのhref属性値を入れ替え
まずはモバイル以外のリンクを作成します。
以降、本文はURLパラメータですので、エンコードをお忘れなく。
<a href="https://twitter.com/?status=本文">通常のツイート用リンクです。
「本文」に任意の文字列を入れてください。
他にもパラメータ設定は可能ですが、とりあえず今回はこれで。
続いてAndroid用の値は以下のとおり。
intent://post?message=本文#Intent;scheme=twitter;package=com.twitter.android;end;schemeやpackageなどを変更すれば他のアプリも起動できそうですが…
正直そこまでの余裕がないので追々勉強することにします。
さらにiOS用の値は以下のとおり。
https://twitter.com/intent/tweet?text=本文通常のツイート用リンクによく似ていますが、intentへリンクしています。
Twitter側でアプリ情報を持っていて、アプリを起動するか投稿ページへ遷移するかを判定しているということのようです。
あとはjQueryでUAを判定し、それぞれの値をhref属性に設定するだけです。