読者です 読者をやめる 読者になる 読者になる

exlar's IT note

ITやスマートデバイスを中心とした趣味情報の寄せ集め

閲覧中ページをbitlyで短縮URLにしてからTwitterクライアントの投稿欄に入力するブックマークレット

閲覧中ページをbitlyで短縮URLにしてからTwitterクライアントの投稿欄に入力するブックマークレット

これなに?

閲覧中サイトのURLを短縮URL化したうえで、Twitterクライアント(公式)のTweet投稿画面を開いてページタイトルと短縮URLを入力するものです。

例えば本ページの場合はこんな感じになります。
『 || 閲覧中ページをbitlyで短縮URLにしてからTwitterクライアントの投稿欄に入力するブックマークレット - まとめノート (exlair's note) http://bit.ly/1cxACM7

Mac / iOS(8.xで確認) いずれも Safari / Chrome で動作することを確認しています。

きっかけ

ブラウザで閲覧中のサイトをTweetして共有したいと思った時、

  • URLをはりつけるのが面倒臭い
  • ページタイトルも表示したいんだけどなぁ
  • 文字数の節約/クリック数統計のためにbit.lyを使いたい
  • iOS標準の共有機能によるTweetはいまいち好きになれない

といったシーンがあるかと思います。また、「家ではMacだけど外ではiPhone/iPadなんだよね」といったことも最近ではよくある話。そして、利用しているデバイスに応じて方法が変わるのも面倒くさい話。

というわけで、閲覧中のページを共有したい時 MacでもiPhoneでも、Twitter公式クライアントを入力窓にすればいいや、というのが今回の話。

使い方

普通のブックマークレットです。
bit.lyで短縮URLを作成するために自身のIDとAPIkeyを利用する前提で作っていますので、適宜書き換えてください。 それぞれ、i='your user name'(メールアドレスではないもの)とk='your bitly API key'(R_ から始まる桁数の多い文字列)の部分です。

Tweet w/t Bitly
(Mac向けのリンク。お気に入り欄にドラッグして登録してください)

Tweet w/t Bitly
(iOS向けリンク。iOSの場合はブックマークレットを直接お気に入り登録できないため、この仮URLをお気に入り登録したうえで、その後URLを下記のコードに書き換えてください。全部上書きでOKです)

なお、Safari も Chrome も、MacとiOS間でブックマークを共有(割と早い)する機能がありますので、その場合はブラウザで登録した方が楽です。

javascript:(function(d,l){ var i,k,u,s;i='your user name';k='your bitly API key';u='http://api.bit.ly/v3/shorten?format=json&callback=bitlycb&login='+i+'&apiKey='+k+'&longUrl='+encodeURIComponent(l.href);s=d.createElement('script');s.type='text/javascript';s.src=u;d.body.appendChild(s);})(document,location);var bitlycb=function(r){ var t,h;t=document.title;t=t?t:'';h='twitter://post?message='+encodeURIComponent(' || '+t+' '+r.data.url);console.log(h);location.href=h;};

他のTwitterクライアントを使いたい場合

ひとつのコードでMacもiOSも対応できる理由は、Twitterクライアントを起動するためのURIスキームが twitter:// となっており同一であるためです。ですので、以下の対応が可能です。

  • 他のTwitterクライアントでもMacとiOS対応しているものがあり、かつクライアントを呼び出すURLスキームの部分が同一である場合
  • マルチデバイス対応なんていらない(例えばiPhoneだけでいいよ)という場合は、選択肢がグッと広がります。いくつかサンプルを記載しますが、色々ありますので調べてください。

なお、これはTwitterクライアントに限定されるものではありません。

実装

(function(d,l){
    var i,k,u,s;
    i='your user name';
    k='your bitly API key';
    u='http://api.bit.ly/v3/shorten?format=json&callback=bitlycb&login='+i+'&apiKey='+k+'&longUrl='+encodeURIComponent(l.href);
    s=d.createElement('script');
    s.type='text/javascript';
    s.src=u;
    d.body.appendChild(s);
})(document,location);

var bitlycb = function(r){
    var t,h;
    t=document.title;
    t=t?t:'';
    h='twitter://post?message='+encodeURIComponent(' || '+t+' '+r.data.url);
    console.log(h);
    location.href=h;
};