野良ジニアのスクラップブック

野良エンジニアによる雑記帳。技術、本、便利グッズなどを気の向くままに。

【コピペで完了】はてなブログに一瞬で表のソート機能を追加する方法【はてな記法・マークダウン記法もOK】

こんにちわ、野良ジニアです。

今日は、はてなブログ一瞬(コピペ)で表のソート(並び替え)機能を追加する方法を紹介します。

どんな動きになるの?

まずは論より証拠、以下の表の見出し部分をクリック(or タッチ)してみてください。

No. なまえ 背番号
1 たなか 50
2 すずき 70
3 さとう 2
4 いのうえ 99
5 むらた 30

ブラウザがよっぽど古いとかでなければ、表のソート(並び替え)が動いたと思います。

前置き(本コードの元ネタについて)

本記事は、Qiitaの以下投稿のコードをそのまま使用させて頂いています。

qiita.com

自分が書いたコードではないのですが、ものすごく簡単にソート機能を導入できて感動したので、記事にした次第です。@bakenezumiさんご本人に掲載させてもらえないか確認したところ、快く承諾して頂けました!ありがとうございますm(_ _)m

もし、投稿内容に問題がありましたら、記事の削除や修正を致しますのでご連絡頂ければと思います。

先に結論:設定画面にコピペするだけで完了!

以下のコードをコピペするだけで完了です!

JavaScript部分

「デザイン」→「カスタマイズ」→「記事」→「記事下」あたりに貼り付けてください。

<!-- 表のソート機能 -->
<script>
(function () {
  function sort(tbody, compareFunction) {
    var rows = tbody.children;
    if(!rows || !rows[0] || rows.length == 1) return;
    var size = rows.length;
    var arr = [];
    for(var i = 0; i < size; i++) arr.push(rows[i]);
    arr.sort(compareFunction);
    for(var i = size - 1; i > 0; i--) tbody.insertBefore(arr[i-1], arr[i]);
  }
  function numConvert(s) {
    return s == Number(s) ? Number(s) : s; 
  }
  function asc(idx) {
    return function(a, b) {
      var a_ = numConvert(a.children[idx].innerText);
      var b_ = numConvert(b.children[idx].innerText);
      return a_ > b_ ? 1 : -1;
    };
  }
  function desc(idx) {
    return function(a, b) {
      var a_ = numConvert(a.children[idx].innerText);
      var b_ = numConvert(b.children[idx].innerText);
      return a_ < b_ ? 1 : -1;
    };
  }
  function sortEvent(tbody, idx) {
    var mode = true;
    return function(e) {
      if(mode) sort(tbody,  asc(idx));
      else     sort(tbody, desc(idx));
      mode = !mode;
    };
  }
  var ts = document.getElementsByTagName('table');
  for(var i = ts.length; i--; ) {
    var ths = ts[i].tHead.getElementsByTagName('th');
    for(var j = ths.length; j--; )
      ths[j].addEventListener("click", sortEvent(ts[i].tBodies[0], j));
  }
})();
</script>

※設定や他スクリプトの影響などで動かない場合があるかもしれません。上記をコピペ後、自分のブログでちゃんと動くかご確認ください。

デザインCSS部分

こっちは貼り付けなくても動きます。せっかく並び替えできるようになっても読者が使わなければ意味がないので、表の下に「並び替えできますよー」と表示するためのものになります。

「デザイン」→「カスタマイズ」→「デザインCSS」に以下を貼り付けてください。お好みで、文章や色、フォントサイズはご変更ください。

/* 表の後ろに注釈を表示 */
tbody:after {
    content: "※見出しを クリック/タッチ で並び替え";
    color: #f50;
    font-size: 70%;
    font-style: italic;
    text-decoration: underline;
}

ソート機能導入についての経緯とか

導入しようと思った理由

「ブログ内の表でソートできたら便利そうだなー」と、ふと思ったのがきっかけです。特に何か目的があったわけではなく、単なる思いつきでした。

色々と調べてみた結果

実は既に良記事があるのでは?

まずは「既に先人がいるかもしれない」と思い、「はてなブログ 表 ソート」でググりました。

グーグル先生「貴殿がお探しなのは、この記事かな?」

motagp.hatenablog.com

僕「おー、ヌルヌル動く、凄い」
僕「けど、table タグに id とか設定しないとダメっぽいなあ…」
※もしかしたら $('table') とかするといけるかも。この時は深く考えずにスルーしちゃいました。
僕「マークダウンで書くと、id とか class とか設定できないんだよなぁ」
僕「先人はいたけど、他の方法が無いか探してみよう」

意外にも(僕の思い描くような)先人はいませんでした。簡単に実現できそうな方法がないか、続けて調べてみることにします。

簡単な方法がないか調べてみた

続けて「table ソート javascript」でググりました。

グーグル先生「この記事はどうかな?」

qiita.com

僕「お、jQueryじゃない素のjavascriptか」
僕「なんかコピペだけでいけそうな気がするし試してみるか」
僕「…動いた!!(驚愕)」

なんと、コピペするだけでソート機能が動いてしまいました。

導入にあたっての注意事項

  • 本記事の内容を導入して発生したいかなる問題や損害に関しても、当方では責任を負いかねます。
    (まぁ表のソート機能で生じる問題や損害って何だよとは思うけど一応)
  • 表のデータが埋まってないと、ソートの挙動がおかしくなるケースがあるようです。
    細かい動作までは把握しきれていないため、導入は自己責任でお願いします。
  • はてなブログ無料版の場合、色んなキーワードに自動リンクが貼られます。
    「ソートしようとしたら、キーワードリンク先に飛ばされた」となる可能性もあります。
  • 元記事にも書いてある通り、数値や数値変換可能文字列(おそらく漢数字とか)は数値としてソートできますが、それ以外は文字コードでのソートになります。要するに、「漢字とかはうまくソートできないかもよ」ってことです。
    • 数値変換可能文字列は数値として評価、その他は文字コードで評価しソートする
  • この表はソートできるよ、と表の下に出すようにしたのですが、1列目のデータとして扱われているっぽいです。なので、1列目の幅がおかしくなったりします。
    解決策をご存知の方がいれば教えて頂けると嬉しいです。ググったけど見つからず…

まとめ

  • コードをコピペすれば表がソートできるようになるよ
  • スクリプトとかの影響でうまく動かないかもしれないよ
  • 何か問題とか起きても自己責任
  • 何に使えるか良く分からないけど、何かの役に立つかもしれないよ

勢いで導入してみたけど役に立つのかなぁ…ww

おまけ:ブログ執筆時の記法について

途中で「マークダウン記法が~」とか書きました。ご存知の方も多いとは思いますが、はてなブログの執筆記法として、以下の3種類があります。

僕はエンジニア界隈で市民権を獲得してる「マークダウン記法」を使用しています。スマホからだと面倒かもしれませんが、PCから記事を書くのであればマークダウン記法を使うことをオススメします。

マークダウン記法の詳細については、以下の記事がまとまっているのでオススメです。

igcn.hateblo.jp

mametanuki.hateblo.jp

「覚えるの面倒くさい」と思うかもしれませんが、慣れればそんなに難しくないので試してみてください!

ちなみに冒頭の表はこんな書き方になります。

|No.|なまえ|背番号|
|--|--|--|
|1|たなか|50|
|2|すずき|70|
|3|さとう|2|
|4|いのうえ|99|
|5|むらた|30|