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

#daiizメモ

フレンチフライ トリュフ塩仕立て

技術ネタはてブ数が多いごはん情報

スポンサーリンク

Chromeアプリ内部で、Twitterの短縮URLから元のURLを得る方法

chrome tech

ツイッターにURLを投稿すると、自動で「t.co」で始まる短縮URLに置換されます。そして、この短縮URLがクリックされると、自動で見事に置換前のURLのウェブページが開きます。

置換後の短縮URLが与えられたとき、置換前のURLを知るにはどうしたらよいでしょうか?

人間が知りたいと思っている場合は、実際にリンクをクリックし目的のページが開かれるのを見届け、そのときのブラウザのアドレスバーの値を確認すれば良いですね。

それでは、知りたい人が人間ではなくて、プログラムの場合は何か良い方法があるでしょうか。

これについて、少し調べたところ、結構簡単にできることがわかりました。以下がChromeアプリ内部でTwitter短縮URLから元のURLを得る実験の手順です。手順を飛ばして結論のみを見て頂いてもOKです!

とりあえずXHRでt.coを開いてみる

次のJavaScriptをアプリのプログラム内の適当な場所に記述し実行します。

var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://t.co/aykMvbprE2', true);
    xhr.responseType = 'document';
    xhr.onload = function(e) {
      console.log(xhr.response);
    }
    xhr.send();

Chromeのconsole画面を開く

アプリ画面上で右クリックして表示されるメニュー「要素を検証」からコンソール画面を開きます。すると以下の様なHTMLコードが出力されていると思います。

<html>
  <head>
    <noscript>
      <meta http-equiv="refresh" 
            content="0; URL=https://www.google.co.jp">
    </noscript>
    <title>https://www.google.co.jp</title>
    <script>
      window.opener = null; 
      location.replace("https:\/\/www.google.co.jp");
    </script>
  </head>
  <body>
  </body>
</html>

考察

これは、前ステップのプログラムの5行目の結果です。つまり、「t.coで始まる短縮URL」をXMLHttpRequest()で開いたときのレスポンスです。
このHTMLを見てみると、scriptタグ内のlocation.replace()https://www.google.co.jpに誘導しようとしていることがわかります。短縮前の投稿されたオリジナルURLが判明しました。さらにtitleタグ内にも同じく、短縮前のURLが記述されています。
Chromeアプリのプログラム内部では、このtitleタグ内の文字列を取得すれば良さそうです。

結論

Chromeアプリ内部で、Twitter短縮URLから元のURLを得る」ためには、

  1. xhr(XMLHttpRequest)で短縮URLをレスポンスタイプをdocumentとして呼び出す
  2. 得られた結果(xhr.response)のtitleを読む

だけで良い。具体的に、プログラムは以下のように書けば良い。

var xhr = new XMLHttpRequest();                        
    xhr.open('GET', 'https://t.co/aykMvbprE2', true);
    xhr.responseType = 'document';
    xhr.onload = function(e) {
      var originalURL = xhr.response.title;            /* 2. */
    }
    xhr.send();                                        /* 1. */

さいごに

Chromeアプリ内部でTwitterを扱う関連記事として、よろしければ、こちらもどうぞ。