ワイヤード・パンチ

Tumblr用のTwitter cardを改良したかったけど失敗した。

image

TumblrのTwitter cardはデフォルトのままだと、なぜか記事一覧にしか対応していません。そこで前回は、個別記事ページにも対応するようにコードを作ったのですが、本文にシングルクオートを含む記事だとバグが出ます。特に、コーディング関係の記事だと致命的です。よって、それを解決したかったのですが…。

広告

修正版コードができるまでの流れ。

Tumblrで記事の本文を出力するための独自タグは、{body}しかありません。(テキスト記事の場合。)しかし{body}は、htmlタグもまるごと含めた本文全体を出力してしまいます。Twitter card上だとhtmlタグは表示されないので、その点では含んでいても問題ないのですが、ページ上だとクオートの重複があると表示に影響が出る恐れがあります。

{body}とは別に、htmlタグを省いた状態で本文の冒頭だけ出力してくれるような独自タグがないか探してみたものの、そんな都合の良いものはありませんでした。それならばリクエストしてしまおうと、サポートにお願いしてみたのですが、残念ながら以下の返答でした。

大変申し訳ありませんが、カスタムHTML/CSSの技術的なサポートは提供しておりません。

こうなれば限られた素材で対処するしかありません。そこで思いついたのが、{body}からhtmlタグを全部省いて、その値をmetaに追記するという処理をする、javascriptのコードを作ろうということ。もしこれがうまく行けば、クオートの有り無し気にすることなく記事が書けるうえに、Twitter cardにも本文の冒頭部分を出せるはず。

そして出来上がったのが下記のコード。これをheadタグ内に入れ込みます。

$(function() {
	var $tweet_str;
	$tweet_str = (function(param) {return param[0].replace(/n|r/g, "");})`{block:Posts}{body}{/block:Posts}`;
	$tweet_str = $tweet_str.replace(/])*>/g,"");
	$("meta[name=’twitter:description’]").attr("content", $tweet_str);
});

まず{body}で出力されるテキストを、変数に格納するのですが、{body}は改行込みで出力されるため、そのままでは変数に入れられません。特殊な書き方をすることで、改行込みで変数に格納することが可能です。そして変数に対してhtmlタグを全部省く処理を行い、その変数の値をTwitter card用のmetaタグに代入して終了です。

下記のサイトがとても参考になりました。

JavaScriptで変数に代入するテキストを複数行にする方法まとめ – みかづきブログ その3

JavaScriptでHTMLタグを削除する正規表現 – Qiita

実際の結果は?

上記コードを入れたあと、個別記事ページを開き、ブラウザのソースコード表示機能を使います。ここから見れば、たしかにmetaの中にhtmlのない本文が代入されていました。(エンコードされて記号の羅列になっていますが。)本文にシングルクオートもダブルクオートもない状態なので、ページの表示崩れは起こしていません。しかし問題は、これでTwitter cardに対応するのかどうかということ。

googleだったら検索結果にインデックスされる際、本来はページが開かれてから実行されるjavascriptですが、複雑な内容でなければjavascript実行後に出力されるテキストもインデックスの対象になります。こういうことがあったので、もしかしたらTwitter cardもgoogleみたいに、javascriptの結果を認識してくれるのではないかと期待しました。

Card Validator | Twitter Developers

でも実際はそんな甘くありませんでした。上記サイトで個別記事のURLを入れてテストしましたが、Twitter cardはjavascriptの存在を認識できないようであり、本文を示すdescriptionが空だと判断されてエラーになってしまいました。

結局、今回は失敗に終わってしまいましたが、このまま検証を続けるべきか、Tumblr側の対応を待つか、迷うところです。