NetflixのサイトをTwitterで共有するブックマークレット

私は、映画やアニメなどの映像作品を見るため、Netflixを利用している。

Netflix - Watch TV Shows Online, Watch Movies Online

Netflixは、月額料金で映像作品を見放題というサブスクリプションの映像配信サイト、と今更説明するまでもないが。
その作品を見ると語りたくなって、Twitterにシェアすることも多い。その方法についてはNetflixの公式サイトに書かれている。

モバイルで映画やドラマをシェアする方法

スマートフォンからの送信方法として、Netflix公式アプリで作品ページから「共有」アイコンのタップで可能。
でも、その方法でTwitter公式アプリに送ると、このような表示が出てツイートできない。

左：スマートフォンの画面 ／ 右：PCで解析

調べたら、文字の間に"U+FEFF"というコードが入って…。簡単に言えば、海外サイト特有の表示が入って悪さしていた。
また、その部分を修正してツイートしても、Twitterにはサムネイル画像が出ない。

これ、日本にちゃんと対応していないとか、完全にNetflix公式アプリのバグだろうと言いたいが、これは全く使い物にならないので、原因を探って解決する方法を探ってみた。

URLを解析して原因を探る

まず、NetflixのサイトをPCのブラウザで見ると、URLは次のようになる。

https://www.netflix.com/browse?jbv=81621036
https://www.netflix.com/title/81621036

このURLは、現在TV放送中のアニメーション作品『よふかしのうた』。
前者がNetflix公式サイトのトップから作品クリックによるURL。後者がTwitterなどのリンクから直接作品ページを見たときのURL。
更に、Netflix公式アプリから共有すると何かのNo.が追加されるが、詳細不明だし省略してもいい。

でも、いずれのURLもツイートによるサムネイルは出ない。
実際に表示されるのはこちら。

https://www.netflix.com/jp/title/81621036

"www.netflix.com/"の後ろに"jp/"を挟むだけ。

でも、Facebookではいずれの表記でもサムネイルが表示、またTwitterでも「Netflixオリジナル作品」なら可能だった。

Tekken: Bloodline - Netflix
https://www.netflix.com/title/81002441

これは、どうも権利関係があるかも知れない。それが原因なら、改善の見込みはなさそうだ。
ならば、ツイートするときは必ずURLに"jp/"を追加すればいい。URLの修正はブラウザからブックマークレットを使えば可能なので作ってみた。

Netflixページをツイートするブックマークレット

javascript:(function(){open('http://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+' https://www.netflix.com/jp/title/' +document.URL.replace(/^.*[\/=]/,''),'_blank');})();

マウスのドラッグ操作で、ボックス内の文字を全て範囲指定して、ブックマークのツールバーにドラッグする。

この動作により、「ブックマークレット」として追加することができる。

ブラウザによってはブックマークバー、お気に入りバーなどの名称や、確認のダイアログが出る・出ないなど挙動の違いがある。
このブックマークレットをNetflixの作品ページでクリックすると、URLに"jp/"が付いた状態でツイートされる。

改行と解説を入れたものがこちら。

javascript:(
  function(){
    open(                                      // 開く
      'http://twitter.com/intent/tweet?text='  // ツイートURL
      +encodeURIComponent(document.title)      // タイトルをエンコード
      +' https://www.netflix.com/jp/title/'    // Netflix URL
      +document.URL.replace(/^.*[\/=]/,'')     // URLの作品No.のみ抽出
      ,'_blank'                                // 新規タブで
    );
  }
)();

処理としては、URLの末尾に入っている8桁の数字が作品ナンバーなので、それのみを抽出して正しいURLに置き換えればいい。
その処理が、"replace"メソッドに記載している正規表現

/^.*[/=]/

で、URLから「\」もしくは「=」までを抽出して消去するという処理。

応用編

また、Netflix公式サイトから作品をクリックすると、作品タイトルがページ名として表示される。
その表記は「よふかしのうた - Netflix」などNetflixの文字が入るが、これも省略してしまうブックマークレット。

タイトルから" - Netflix"を削除

javascript:(function(){open('http://twitter.com/intent/tweet?text='+encodeURIComponent(document.title.replace(/ - Netflix/,''))+' https://www.netflix.com/jp/title/' +document.URL.replace(/^.*[\/=]/,''),'_blank');})();

タイトルから" - Netflix"を削除、『』を追加

javascript:(function(){open('http://twitter.com/intent/tweet?text='+encodeURIComponent('『'+document.title.replace(/ - Netflix/,'')+'』')+' https://www.netflix.com/jp/title/' +document.URL.replace(/^.*[\/=]/,''),'_blank');})();

ただ、これを使っても上手くいかないときがある。原因は、URLを直接クリックで作品ページを見ると「ホーム - Netflix」と表示されて作品名が出ないから。

その上、こいつにもコードが入ってるしもう…、と言いたいが、そういう色々な面倒がある。

ということで、NetflixとTwitterを利用する上で、お役にたれれば幸い。