Twitterの埋め込みリンクをいい感じに作るやつを書いた話

久々にまともに記事を書くことで自己満足を得るというやつをやるぞ！
大学がないと彼女といるかグランヴァニアにいるかバイト行ってるかしてないと昼寝てるみたいな生活を改善してコード書きまくりマンしたい。昼寝減らしたい

追記

もっと便利なアレがあって号泣してる。 platform.twitter.com/widget.js をscriptタグで読み込んで、twttr.widget.createTweet("status_id",target[,options]) とかでできるらしい。これ

埋め込みツイートの取得

基本的にははてなブログのやつの処理を見て頑張ったやつです。
gistにもちょろっと書いたけどまたまとめます.

エンドポイントは http(s)://syndication.twitter.com/tweets.json?callback=callback&ids=${status_ids}&lang=ja&suppresss_response_codes=true になってるみたいですね。
idsパラメータはカンマ区切り、まあ普通にstatus_idの配列をjoin(',')すればいいと思います。JSONPなのでグローバルに関数を置かなきゃいけないのでレンダラを適当に定義するといいと思います。 返ってくるJSONは

{
  "${status_id}": "${HTML Strings}"
}

って感じですね、for(id in response)で回して処理するのが基本ですかね。

返ってきたHTMLのアレ

プロフィール画像の部分がdata-src-1xとdata-src-2xのどちらかsrc属性に指定するべきみたいな感じなので返ってきたHTML文字列をDOMParser#parseFromStringしたあとquerySelector("img.Avatar.u-photo")でいい感じに拾うと良さそう。
なんかスタイルシートは自前で用意しなきゃいけないっぽいのでそれっぽい感じに自分で書いてくれ、ぼくはまだ書いてないし面倒なので後で書きます。

テストページとJSのソース

<!-- index.html -->
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test page</title>
  </head>
  <body>
    <iframe id="syndicate-frame" style="display:none;"></iframe>
    <div id="container"></div>
    <script src="./tweet.js"></script>
    <script>emb(["215401020602322945"])</script>
  </body>
</html>

// tweet.js
var iframe = document.getElementById("syndicate-frame"), doc = iframe.contentDocument;
var emb = function(ids){
  doc.write("<script async src=\"https://syndication.twitter.com/tweets.json?callback=render&ids=" + ids.join(",") + "&lang=ja&suppresss_response_codes=true\"></script>");
};

iframe.contentWindow.render = function(response){
  for(var id in response){
    var tweet = (new DOMParser).parseFromString(response[id], "text/html").body.firstChild;
    var img = tweet.querySelector("img.Avatar.u-photo");
    img.src = img.getAttribute("data-src-1x");
    document.getElementById("container").appendChild(document.adoptNode(tweet));
  }
};

実際にやるとこんな感じ

f:id:MysticDoll:20160202000819p:plain

CSS全く書いてないので地獄みたいな見た目になってる