Web製作メモ帳

Web制作で気づいたことをつらつらと

はてなダイアリーが来年春で終了だそうな

 タイトルにある通り、はてなダイアリーが2019年春をめどに終了だそうである。

d.hatena.ne.jp

 というわけでこの日記というかブログもはてなダイアリーからはてなブログに移行した。

 本家のブログは結構前に(上記のお知らせが出る前に)移行してあったのだが、「はてなダイアリー」と「はてなブログ」を別ブログで並行して運用してみるのも面白いかもと思い、こっちは移行していなかったのだが、はてなダイアリーが終了するということで、遂に移行する運びとなった。

 はてなダイアリーは私が使い始めた頃(ブログ黎明期?)は日本一ユーザ数が多いブログシステムだったと思う。そもそも使い始めた理由が「日本一ユーザ数が多いブログシステムははてなダイアリー」という記事をどっかで見て、それで今はなきさるさる日記で書いていた日記を移行したのがきっかけだった。

 そのはてなダイアリーもついに終了とは時代の流れを感じる。はてなダイアリーはもともとはその名の通り日記用のシステムとして立ち上がって、そこからブログ的な機能がいろいろと追加されていったんだよな。

 ブログというものはニュースに対して何か感想とかコメントとかを書くサイトに便利だということで日付入りで管理できるCMSだったのだが、日本ではWWW黎明期からWeb上で日記を書く文化があったため、主に日記用システムとして普及していった。これは日本独自の文化だろう。その日記システムがベースになっているはてなダイアリーがなくなるのは寂しい気がするが、一つの会社が2つの似たようなWebサービスを提供していくのも無駄が多いだろうから、まあしょうがないか。

 というわけで久々の投稿だが、これからもいろいろとWebを初めとしたITについて、ここで書いていこうと思う。最近はあまりコアな技術的な話題は書いていないし更新頻度も高くないが、まあ、気が向いたらということで。

 というわけではてなブログ移行初の投稿は単なる感想文でした(笑)。

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

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

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


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


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

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

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

更新日は日付を 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 を定義して、更新日でソートしてみた結果が以下の画像。

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

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

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

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

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

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

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

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

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

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

こないだから無駄なファイルを消したり、大きなサイズの画像を圧縮して軽量化したりといろいろとやっていたのだが、それでも追いつかなくなってきたので助かった。
まあ、ファイルを軽量化するということは、使っているホームページスペースの制限だけではなく、アクセスする人にとっても軽くて優しいページになるので、普段から心がけるべきことではあるけどね。みんながみんな高速光回線で見ているわけではないし、光回線が普及してきているとはいえ、スマホも普及してきていてモバイル回線で見てる人も増えてきてるのだから。

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

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

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

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

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

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

ヘッダの修正

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

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

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

サイドバーの修正

サイドバー (sidebar.php)の中にヘッダで追加したDIVタグを閉じるタグを追加する。
この時 id="primary" を閉じるタグは最初で良いが、id="#content" を閉じるダグは上図の様に最後に記述する。



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

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

意外と便利な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個のおさらい」というページで、旧来のものも含めて色々と載っており、非常に参考になる。意外と忘れてるセレクタもあるんだよな。というわけで、興味のある方はそちらのページもどうぞ。

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

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

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

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

箇条書きのアイコンはCSSを使って指定するのが便利

箇条書きをする時に文字の左にアイコンを置きたい時に最も楽な書き方は、

 <img src="hogehoge.gif" height=11 width=11> テキスト 

みたいにIMGタグを使って書く方法です。(height、width属性は省略可能だが付けないと表示が遅くなるので付けたほうがいい。)

1個だけならこれで十分ですが、これを何個も書きたい時はすべての要素にいちいちIMGタグを付けていると面倒だし、ソースの可読性も良くありません。

そこでリスト形式(UL)にして、リストの各要素の先頭の画像を指定する方法があります。

<ul style="list-style-image: url('hogehoge.gif')">
<li>要素1</li>
<li>要素2</li>
<li>要素3</li>>
</ul>

これで画像ファイルを指定するのは1箇所ですがリストの全ての要素の左側にアイコンを表示することができます。

しかし、これでは画像は1種類しか使えません。「要素のタイプごとに違うアイコンを使いたい。」こんな場合にはこの方法では実現できません。

たとえば、次の様に要素のタイプごとにアイコンを変えたい時はどうすればいいのでしょうか?

要素赤1
要素青1
要素赤2
要素赤3
要素青2


上の例みたいに要素のタイプごとにアイコンを変えたい場合はスタイルシートを使うのが便利です。以下にその方法を記述します。

<head>
<style type="text/css">
<!--

/* この例では画像ファイル以外の属性は全てまとめて指定 */
.red,.blue {background-repeat: no-repeat;background-position:2px center;padding-left:24px;}
/* 画像ファイルはクラス毎に指定 */
.red{background-image: url('red.gif');}
.blue{background-image: url('blue.gif');}
 -->
</style>
</head>
<body>
:
<div class="red">要素赤1</div>
<div class="blue">要素青1</div>
<div class="red">要素赤2</div>
<div class="red">要素赤3</div>
<div class="blue">要素青2</div>
:
</body>

つまりスタイルシートで背景画像としてアイコンを使用するのです。CSSの"background-repeat"属性を"no-repeat"に設定してアイコンが1つの要素につき1つしか表示されない様にしています。"background-position"では画像の表示位置を指定しています。上の例ではブロックの左から2pxのところ、縦位置は中央になるように指定しています(左側をインデントする必要がなかったら1つ目の値は"left"で構いません)。それだけだと画像とテキストが重なってしまうため"padding-left"を使用してテキスト要素の開始位置をずらしています。この値はアイコンの大きさによって適宜変えて下さい。

上記のサンプルではHEADタグの中にCSSを記述しましたが、もちろん外部スタイルシートファイルを使用してもOKです。

この方法を使うと要素ごとにIMGタグを使用する必要がなく、またある要素のタイプが変更になった場合もクラス名を変えるだけで済むのでメンテナンス性という意味でも便利です。


私の運営している一口馬主のページ我が一口馬主人生でもこの方法でテーブル内の左側の項目に付けているアイコンを指定して見ました。そのページでは上記の例のようにDIVタグではなくTABLEタグの子要素のTDタグでその方法を使用しています。今まではIMGタグを使って一つ一つアイコンを設定していたのですが、数が増えてくるとソースが長くなり、また、見づらくなってきたのでこの方法を試して見ました。