今日は、“ミスチル勝手にレビュー”のページ作成を進めた。(“ボウリングの紆余曲折”のスコア分析がいつまで経っても進まんなあ、、、)

最終的には“勝手にレビュー”の名の通り、各曲に対する個人的な感想を書いていくつもりであるが、今日はとりあえず楽曲の一覧ページを作成。

その過程でのポイントを2点。

1つはphpに関するもので、getimagesize()関数について。

これは指定した画像ファイルの情報を返してくれるスグレモノ。

全部で7つの要素からなる配列を返すが、詳細は下記PHP Manualサイトで確認のこと。

getimagesize - PHP Manual
http://php.net/manual/ja/function.getimagesize.php

ここでは画像のサイズ(幅と高さ)を取得したいのだが、これらはそれぞれ1番目・2番目の要素として返ってくるので、

list($width,$height) = getimagesize($imgURI);

としてやれば簡単に画像のサイズを取得できる。

これを使うと、画像を小さくして表示したい場合(下の例では1/10)なんかに、

list($width,$height) = getimagesize($imgURI);
$ratio = 0.1;
$width = round($width / $ratio);
$height = round($height / $ratio);
print "<img src=\"{$imgURI}\" width=\"{$width}\" height=\"{$height}\" />";

としてやればよい。

因みにround()関数は浮動小数点数を整数値に“丸める”ためのモノで、ほぼ四捨五入と考えるとよい。第2引数を指定すると、小数点以下の位で丸めることができる。

なぜround()関数を使っているかというと、htmlのimgのwidth属性とheight属性は整数値しか指定できないため。これをやらないと、かの“Another HTML-lint gateway”様に「こらっ」と叱られる。

もう1つはcssに関するもので、display:inline-block;について。

これは、span要素などのインライン要素を“インライン中のブロック要素”にすることができる。

display:block;だと完全なブロック要素となってしまうため、span要素に続く文字列等が改行されてしまうので、続く文字列をそのままインラインのようにするためにはfloat;left;を指定して、あとでclearして、、、と超メンドクサイが、display:inline-block;だとインラインを保ったままheightやmarginなどのプロパティを設定できるのでとても便利。

まあ、そんなこんなでなんとか一覧ページは完成。

とりあえずは、アルバム毎・シングル毎のページを作成したが、将来的にはmySQLで管理するようにしよう。

でも、今日は寝よう。