Hatena::ブログ(Diary)

smartboyのWeb製作メモ帳 このページをアンテナに追加 RSSフィード

Webサイトの構築時に気づいたことのメモ帳です。
サイト構築に関するTIPSだけではなく、ブラウザのこと等ウェブ全般について書いていきます。

2016-11-11

jQuery のプラグイン Tablesorter で日付等をきちんと解釈してソートさせる方法

自己満足なページではあるが私の一口馬主のページでトップに一口出資した競走馬のリストをテーブル形式で作成し、メニューとしているのだが、長年やっていると数も多くなってきた。こうなってくると、馬名や生年、更新日などでソートしてみたくなる。HTML の Table でソートするためにはどうすればいいんだろう?

そこで、下記のページで紹介されている、jQuery のプラグインである Tablesorter というのを利用することにした。


Tablesorterで HTMLの表をソート(並び替え)可能にする [ホームページ作成] All About


使い方については上記のサイトに詳しく書いてある。jQuery とは Javascript の有名なライブラリであり、使用している人も多いと思うが、「何それ?」という人も Tablesorter のパッケージの中に同梱されているので、上記サイトを参考に使ってみよう。

そのページに書いてある通りに Tablesorter を導入したら、概ねソートできるようになったが、日付部分がうまくソートされないという問題があった。

下記の画像でテーブルの左から4つ目「更新日」でソートしたら、うまく日付順に並んでいない。

f:id:smartboy:20161110221833p:image:left

更新日は日付を YY/MM/DD 形式で書いているのだが、それがうまくソートされておらずメチャクチャになっている。一番ソートする機会が多い項目なのに何故???単純文字列でソートしても上手くいく筈なのに…。

おそらく日付は(文字列ではなく)日付として解釈されているのだが、アメリカ式の記述法(DD/MM/YY)で解釈されてるのだろう。

中途半端なことをするよりなら単純に文字として比較して欲しいのに。そのために今まで例えば16年9月3日だと"16/9/3"って書いてたものを"16/09/03"という風に1桁部分は0埋めして書き直したのに、それでもうまくいかないなんて。


そこで、いろいろ調べてみたら Tablesorter では、 Parser (つまり構文解析ツール)を javascript で定義して組み込むことができるとのことなので、それを使ってみた。

日付のソートがうまくできるように、以下のように Parser を使って、ソート方法を定義し直した。


//ソート(jQueryプラグイン tablesorter利用)

	//Parser を定義
	$.tablesorter.addParser({ 
	    id: 'date',  //ID を設定する
	    is: function(s) {   //通常は false を返す様に作るとマニュアルに書いてある
	        return false;
	    }, 
	    format: function(s) { 
	            //数字の部分だけ取り出す
	            return s.toLowerCase().replace(/[^0-9]/g,'');
	        }, 
	    //文字列として処理する
	    type: 'string'
	}); 
 
	//Tablesorter 本体
	$("#list").tablesorter({ 
            headers: {
               3: { sorter:'date' }, //4列目に"date"という ID の Parser を使用
               4: { sorter: false }, //5列目はソートしない
               5: { sorter: false }  //6列目もソートしない
            }
         });

ちなみに headers で指定する文字番号は 0 オリジンである。

上記の Parser を定義して、更新日でソートしてみた結果が以下の画像。

f:id:smartboy:20161110221834p:image:left

これでちゃんと「更新日」が YY/MM/DD 形式で解釈されてソートできた。

この様にソートの値の解釈の仕方を Javascript で定義できるので Tablesorter の Parser は便利である。(ってか日付は普通にデフォルトで文字として解釈しろよ。)

Parser について詳しいことはドキュメントここ(英語)に書いてある。今度使う機会があったらいろいろと試してみよう。

2016-01-27 DTI のホームページ容量を無料で倍にした

DTI のホームページ容量を無料で倍にした

久しぶりの更新だが、今回は特定の条件を満たすごく一部の方にしか役立たないだろう。まあ、ブログのタイトルが「〜メモ帳」なのだから人様のお役に立つというよりは個人的なメモなので、その辺はご容赦願いたい。

DTIというプロバイダのホームページスペースに作成しているホームページが容量オーバーでファイルをアップロードできなくなったので、容量を50MBから100MBに増やした。なんと容量追加は無料だった。

DTIのホームページ容量追加のページを見ると以下のように書いてある。

auひかり 各プラン、ひかりone Tタイプ各プラン、フレッツ光各プラン、ADSL各プラン、ダイヤルアッププラン、AIR-EDGEプラン、フレッツISDNプランは、初期費用・月額利用料金共に無料で容量追加をすることができます。 (追加申し込みをした同月内に解約をする場合も無料で行えます。)

私は自宅のFTTH回線に auひかり を使っていて、プロバイダは昔からのウェブサイトや電子メールアドレスの関係で DTI を使っているのだが、auひかりプランなので無料らしい。もっと早く気づけば良かったな。

というわけで DTI でホームページを運営していて上記条件に当てはまる方は容量を増やしてみましょう!

こないだから無駄なファイルを消したり、大きなサイズの画像を圧縮して軽量化したりといろいろとやっていたのだが、それでも追いつかなくなってきたので助かった。

まあ、ファイルを軽量化するということは、使っているホームページスペースの制限だけではなく、アクセスする人にとっても軽くて優しいページになるので、普段から心がけるべきことではあるけどね。みんながみんな高速光回線で見ているわけではないし、光回線が普及してきているとはいえ、スマホも普及してきていてモバイル回線で見てる人も増えてきてるのだから。

2014-04-13

WordPress の掲示板プラグイン bbPress でカラム落ちさせない方法

先日 WordPress を使ってウェブサイトリニューアルしたのだが、そこに掲示板を作ろうと思った。いろいろと調べたところ、 WordPress 上で掲示板を作るには、「bbPress」というプラグインが評判がいいらしい。そこで、bbPress を使って掲示板(フォーラム)を作ることとした。

ちなみに、私も勘違いしていたのだが ppsPress ではなく bbPress ね。

ppPress の設置方法は「WordPressで掲示板を作成する方法〜bbsPressの使い方」というサイトに詳しく書いてあるが、そこに書いているテーマ「Twenty twelve」を使用していても、サイドバーが下の方にカラム落ちしてしまう。そのページに書いてある通りにやってもうまくいかない。掲示板のページでうまくいっても、そのかわりトップページでカラム落ちしたりする。

色々と試行錯誤した結果、以下のようにすればうまくいったので、その方法を紹介しよう。

まず、前提条件としてテーマ「Twenty twelve」を使っていること。プラグイン bbPress のインストールまでは先ほど紹介したページ等を参考にしていただきたい。そのページの後半部分「カラム落ちの修正」が、その通りにやってもうまくいかないため、以下ではその部分のやりかたを紹介する。


ヘッダの修正

f:id:smartboy:20140413132809p:image

ヘッダー (header.php) の最後の方に

	<div id="main" class="wrapper">
		<div id="content" role="main">
			<div id="primary" class="site-content">

この2行を追加する。ここまでは先に紹介したサイトと同じ

サイドバーの修正

f:id:smartboy:20140413131203p:image

サイドバー (sidebar.php)の中にヘッダで追加したDIVタグを閉じるタグを追加する。

この時 id="primary" を閉じるタグは最初で良いが、id="#content" を閉じるダグは上図の様に最後に記述する。



そうすると、固定ページテンプレート (page.php)でコードが重複するので該当箇所を削除。ここは先ほど紹介したページと同じですね。

該当箇所は下の図を参照。

f:id:smartboy:20140413131204p:image

これでカラム落ちは発生しなくなりました。めでたしめでたし。

2013-12-29

意外と便利なCSS3の":nth-of-type"

 CSSで追加されたCSSセレクタ(擬似クラス)に":nth-of-type(n)"というのがある。

 「n番目に現れる要素にスタイルを適用する」というやつだ。

 最初見た時は「何だこれ?」と思ったが、意外と便利だ。例えばテーブルの3列目にだけ要素を適用したいのなら、


TR>TD:nth-of-type(3) { … }

 

という様に書く。"2nd-of-type" ではなく、"nth"の部分はそのまま"nth"と書いて、カッコの中の引数に数字を書く。念のため。

:nth-of-type(odd) ・・・ 奇数番目の要素に適用
:nth-of-type(2n+1) ・・・ 奇数番目の要素に適用
:nth-of-type(even) ・・・ 偶数番目の要素に適用
:nth-of-type(2n) ・・・ 偶数番目の要素に適用
:nth-of-type(3n) ・・・ 3,6,9,12…番目の要素に適用
:nth-of-type(3n+1) ・・・ 1,4,7,10…番目の要素に適用
:nth-of-type(-n+3) ・・・ 最初の3つの要素に適用
:nth-child(n+3) ・・・ 最初の3つの要素以外に適用 

なんてこともできる。

 「テーブルの特定の列だけにスタイルを適用したい」といった場合、CSS2の書き方だと全行の TD タグにクラス名を設定して、クラスに対してスタイルを適用するという書き方になるが、それだとソースが肥大になり、しかも見づらい。(特定の「行」に対してなら TR タグにクラスを付けておけばいいのでまだラクなんだけどね。)

 それが、nth-type-of を使うと HTML のソースがシンプルに書けることになる。

 私が管理しているとあるページでも、 class タグが大量に設定された読みづらいTABLEのHTMLソースを書き換えて、以下の様なCSSを定義してみた。

TR>TD:nth-of-type(2) {font-size:8pt;}
TR>TD:nth-of-type(n+3){@extend .small;}
TR>TD:nth-of-type(-n+4) {white-space: nowrap;}

 ちなみに2行目はSassというものを使っているので、普通に書いただけじゃ動かない。SassとはCSSを記述するための言語(メタ言語)の一つであり、同言語で記述したファイルをCSSファイルへ変換するソフトウェアである。@extend とは別に定義されているスタイルを継承するものであり、今回はもともとクラスに対して使っていたスタイルをそのまま用いた。Sassも便利なものだが、詳しい紹介は気が向いたらということで。

 今回は nth-type-of を紹介したが、某所にある「意外と知らない!?CSSセレクタ20個のおさらい」というページで、旧来のものも含めて色々と載っており、非常に参考になる。意外と忘れてるセレクタもあるんだよな。というわけで、興味のある方はそちらのページもどうぞ。

2012-03-06

複数のアカウントを1つのTwitterアカウントと紐付ける方法ってある?

このブログサブアカウントにしているのですが、Twitterアカウントとの連携を再設定したら「既にそのアカウントは別のidと連携しています」みたいなエラーが出てきて連携できなくなりました。

以前はメインとサブの両方のアカウントとTwitter連携できていたのですが、設定しなおしたら1つのアカウントしかできなくなってしまいました。

複数のはてなアカウントを1つのTwitterアカウントに連携する方法はないものでしょうか? > 教えてはてなダイアリー