Publish while resting-ぐだぐだわーくす

BLOG that considers the world funny conquest. Worship me (* 'ω' *

コピペ一発!はてブコメント埋め込みの日本語URLのデコード処理用スクリプト

f:id:dacs:20170413222143j:plain:w760

こんにちは!DAC(id:dacs)です。

今回は、はてなブックマークコメント埋め込みの日本語URLのデコード処理について書きます。

はてなブックマークコメント埋め込みとは

はてなブックマークでコメントを書いた場合、はてなブログなどにブログカード状に埋め込みをすることが出来ます。

詳細及び埋め込み方は別エントリとして以下に纏めてあります。
www.gudaguda.work

はてぶコメント埋め込みの日本語URL表示時の不具合

はてなブックマークを付けた先の元々のエントリのURLに日本語が含まれていると、埋め込まれたカード内での表示が文字化けのようになります。正確にはこれは文字化けではなく、日本語をエンコードした表示です。
f:id:dacs:20170409182336p:plain

URLエンコードとは

tech-unlimited.com

  • URLに日本語が含まれた場合、ブラウザによっては日本語部分が認識できず、正しくリンクされない事があります。
  • これはブラウザが基本的には半角英数字や一部の半角記号しか扱えない為です。
  • 最近のブラウザは日本語URLにも対応してきていますが、実はブラウザ側で半角英数字や記号に変換して処理しているだけです。
  • 日本語URLに対応していないブラウザもありますので、URLに日本語が含まれる場合には初めから半角英数字・記号に変換しておくと良いでしょう。
  • URLを半角英数字・記号に変換する事を「URLエンコード」といいます。逆に日本語に戻す事を「URLデコード」といいます。

はてなブログやはてなブックマークはこの対応として日本語URLをエンコードして表示しているのです。機械が解釈する場合は、全く同じものなのですが、人間の目で見ると何が何やらですよね。それに元の文字に比べて非常に冗長になり見苦しくなってしまいます。

コピペ一発!はてブコメント埋め込みの日本語URLのデコード処理用スクリプト

貼り付け場所

貼り付ける場所は、デザイン-カスタマイズ-記事-記事下とデザイン-スマートフォン-記事-記事下の二箇所です。

コピペコード

以下をコピペしてください。

 <script type="text/javascript">
  window.onload = function() {
    var article = document.getElementById("container");
    var bookmarkcommentCard = article.getElementsByClassName("hatena-bookmark-comment-embed");
    for (var i = 0; i < bookmarkcommentCard.length; i++) {
      try {
        var commentbody = new Array;
        commentbody[i] = bookmarkcommentCard[i].contentWindow.document;
      } catch(e) {return;}
      var wrapper = new Array;
      wrapper = commentbody[i].getElementsByClassName('entry-url');
   var originaltext = wrapper[0].innerText;
      var decodedtext = decodeURI(originaltext);
      wrapper[0].innerText = decodedtext;
    }
  }
 </script>

これを書く際にはてなブログカードのカスタマイズ - 気楽に生きよう!を参考にさせて頂きました。有難うございます。(自前でやろうとしていたのだけど、どうも上手くクラスセレクタ拾えず…縋りました)

実際の動作サンプル

以下は本来であれば、エンコードされたURLが表示されるところ、上記コードでデコードして表示しています。

春だからちょっと怖い話。。。②ストーカーの末路 - にーちの趣味ぶろ

出所はどう見ても日常会話には出現しない単語ですね。たしかに怖い。事なきを得てる限りは笑い話でもあるかもしれないけど、気軽には笑えない(´-﹏-`;)引用はスマートですね。自分はそんな感じの簡単貼付けを実装希

2017/04/12 07:45
b.hatena.ne.jp
春だからちょっと怖い話。。。②ストーカーの末路 - にーちの趣味ぶろ

はてなブックマークページへのリンクはできてないので普通にIDコールになってしまうのが難点かと思います。。。

2017/04/12 07:56
b.hatena.ne.jp

はてな運営に対応をお願いしたのですが…

とりあえず我慢してね…とすげないお答えを頂きました。あーあ、残念。ブログ側の設定で可能にしておいて、この対応はなんだかな…と思いました。

まあ、そのうち対応してくれるそうですよ。


2017/04/12 | 05:21PM JST はてなサポート窓口 ( cs@hatena.ne.jp )

はてなサポート窓口の***と申します。
いつもはてなをご利用いただきありがとうございます。

お問い合わせの件につきまして、現在、はてなブックマークでは日本語URLの表示に対応しておらず、ブックマークコメントを埋め込み表示させた際、日本語URLはエンコードされた状態で表示されます。本件についてはご要望としてお受けし、参考にさせていただきます。

どうぞよろしくお願いいたします。

仕方が無いのでとりあえず動けばいい的なJavaScriptをこさえました

全くこういうのは門外漢なのであちらこちら見て、張り合わせてとりあえず動けばいい的なJavaScriptをこさえました。なんかロード時に変換するのが目視出来ちゃうけど…。

にーちさん(id:nych87)、とりあえずこれで何とかなりますよ、多分。

もっと格好良いものあげたかったんですけど、力量不足でして…。また、今日は都合スクリーンショットを細かく弄ったり出来ない環境だったので、文字だけでご勘弁を(後日に追加します)

もし、誰か分かる人がチョチョチョイっと良いものに書き直してご提供くださると更に嬉しいです。

不具合(追記)

モバイルでの動作が出来ないことが分かりました。別途対応試みます。

修正完了しました。モバイルでは1ペインで#mainが無い構成のため、#containerに変更しました。