急に思いついて

急に思いついて新しいWebページを作ることにした。以前、ドットコムでやっていた「我が社の一冊」を個人的に始める。

ページの趣旨は単純で、「今年はこれだったという「我が社の一冊」を世間に向けてアピールしましょう」ということだ。オレが作ったページが世間へのアピールになるかどうかはわからないが大事なのは世間にアピールしたいという姿勢だ。

ページのイメージはなんとなくあった。今回は見た目を重視したい。加えて新しめの技術を学びたい。ということで、CSSフレームワーク（Bootstrap）を使うことにする。テンプレートエンジンというのも気になるが、一度に新しいことを盛り込み過ぎるとキツイので、今回はCSSフレームワークに絞った。

Bootstrapはまったく理解も納得もできなかったんだけど、いじっているとなんとなく「ああ、こういうことか」という瞬間がちょこちょことある。classで指定していくのが「昔のHTML4.0みたいだな」と思って抵抗があったのだが、CSSだけでなくJQUERYも含めて指定するという意味があることは理解した。そのうえで、やりたいことのためには（逆引きの）リファレンスのようなものが欲しい。まあ、検索したら大抵見つかるんだけど。

メインの部分は表紙画像を並べたい。それも「重版出来ですYO」とは違う見た目で、かつ、Bootstrapを使って。

結果的にこんな感じになった。25日23:30の状態。

いちおうBootstrapのグリッドシステムでレスポンシブ。縮小したから見えないけど背景はCSS（linear-gradientの組み合わせ）でテクスチャを設定。面陳の書籍はページを開く毎にランダムで。下の書名リストは全点を掲載。

面陳コーナー、書籍のサイズがバラバラなのでどうしても隙間が不揃いになる。背景に色を乗せるより白くして枠線+ドロップシャドウのほうがいいのか迷う。

表紙画像の間に表示するページタイトル「我が社の一冊2016」と「PUBLISHERS' CHOICE 2016」も場所はランダムに変わる。Webフォント（NotoSans Japanese）使用。

ここまでやって「横長の書籍は倒してしまえばいいんだ」と気づく。そうするともう少し隙間が減らせる。

ということでやってみた。

「PHPの getimagesize で縦横の長さを取得、横長の場合はCSSでtransform:rotate(-90deg) を指定」でうまいこと横倒しにできた。けど、すごく重い。 getimagesize が問題のようだ。どうしたもんか。

ここまで25日金曜日の深夜1時過ぎ。とりあえず終了。

土曜日は苦戦苦闘。

色々試しているうち、CSSのtransform:rotateだと表紙画像を背景に設定した縦長のDIVが横倒しになるので駄目だと発見。そりゃそうか。そうだよな、都合よく背景に指定した画像だけ回転とかむりだろ。やっぱり元の画像を横に倒さないとダメだ。

ということでPHPのimagerotateを使ってみた。全然うまくいかない。うまくいかない理由がわからない。泥沼の予感。

PHPでの画像の処理そのものがよくわかっていなかったことがよくわかった。改めて正しいと思われる手順で試しみた。おお、横に倒れる。素晴らしい。しかし、そこから実際にページの中で表示させるのに一苦労。何が間違っているのか本当に分からない。困った。うまくいってるプログラム（画像単体で回転）とそうでないプログラム（多数の画像を一度に回転）とを見比べる。パスの指定だった。そういえば以前、画像のリサイズの時にもハマった気がする。このあたり、苦手な所なのかもしれない（得意なところが有るのかはともかく）

ここで、ループの中で全データに対して getimagesize を実行していたのを画像を表示するレコードだけに限定。これで随分ともっさり感は解決。でも遅い。画像サイズを取得すると5秒弱かかるのに、画像サイズを取得しないと0.11とか。なんとなく勝手に時間がかかると思っていた imagerotate はまったく問題なし。

表示する画像を減らせば解決するだろうなと思いつつ、それは避けたい。それと、どうも書店の平台だとよく見かける手法である「横長の書籍は向きを変えて隙間を減らす」は、Webサービスだと見かけない。実現できると案外画期的かもしれない。なので、どうしても実現したい。

色々調べたが、getimagesize に代わる最適な方法は無いようだ。困った。この段階で何か他の方法は無いかと考え始める。例えば画像サイズ取得だけを別途実施してしまうとか。点数が多くないから簡単か。極端な話、手作業でひとつずつサイズを取得したって間に合うな。でも面倒だなあ。

考えてもしょうがないので寝た。

日曜は遅く起きた。

寝床で、「回転させるかどうかだけのフラグで充分」と気がついた。そうか、それでいいのか。

やりたいことは「横長の画像の場合のみ横倒しにすること」のみ。なので、DBに「横長」もしくは「回転の対象」といったフィールドを用意してフラグとして使用する。参加各社に書誌情報（版元ドットコムAPI、但し、価格が未登録の場合が多いので他を使うか検討中）を確認してもらう際に画像（amazon）のサイズをチェックしてDBにフラグを登録しておこう。そうしよう。

という結論に達するまでにえらい時間を費やしてしまった。

その後、「画像の有無も参加者に確認してもらったら file_exists も必要ないじゃん」と気がついた。そうしよう。但し、その場合は画像のアップローダーを用意しないといけないんじゃないか。まあ、それはなんとかなるだろう。

昼飯を用意せねば。