前回のエントリでは、サムネイルをランダムに表示するための下準備をしました。今回は、いよいよその本題です。

　まずは、PHPのスクリプト（photogallery.php）です。

• サムネイルのデータベース（thumbnail.dat）を読み込み、配列（$AssetImageArray）に格納する。
• 配列から、所定の個数（$ThumbnailImageNum）分、ランダムにサムネイルを選定する。
  （選定の際には、すでに選定されたものが重複して選定されないようにする）
• 選定したサムネイルへのタグ<IMG>と、サムネイルを含むエントリへのリンクのタグ<A>を出力する。

＃「$BlogBaseURL」と「$BlogBasePath」は、利用する環境に合わせて適当に変更してください。（「$ThumbnailImageNum」は、お好みで）

＃「$DebugFlag」を1とすると、実行中にいくつかの状態メッセージを表示することができます。

　上記スクリプトを、MT5の「テンプレートモジュール」に登録し、blogを再構成します。

　実行した結果です。

　登録されているアイテム（画像）のサムネイルが表示され、サムネイルをクリックすると、サムネイルを含むエントリにリンクします。

　サムネイルのサイズ（$ThumbnailWidthと$ThumbnailHeight）は、当初はサムネイルのデータベース（thumbnail.dat）の中に埋め込んでいました。その方が、blogの運用途中でサムネイルのサイズを変更したとしても、表示側（photogallery.php）で動的に対応できるからです。

　しかし、この方法だと、サムネイルの数が膨大になってくると、サムネイルのデータベースのファイルサイズも膨大になり、読み込み時にblogサーバに負荷が掛かってしまいます。（すべての情報を、一旦配列に読み込むため）

　これを避けるため、サムネイルのサイズは、定数としました。

＃よって、blogの運用途中でサムネイルのサイズを変更した場合には、生成側（thumbnail.php）でForceオプションを使って強制的にサムネイルを再作成するとともに、表示側で定数を変更して、blogを再構成してください。

　同様に、サムネイルへのリンク（$ThumbnailImagePath）と、サムネイルを含むエントリへのリンク（$EntryLinkPath）も、登録されているアイテム（画像）のリンク（$AssetImagePath）から生成するようにしました。

　サムネイルのデータベースに埋め込む情報を必要最小限に絞ることで、データベースのファイルサイズをかなりコンパクトにすることができました。

　ということで、ひとまず完成です。0xF9C6

　Intelの新チップセットに不具合が見つかったことにより、作り込みを一時中断していましたが、

　本日、ASUSより「Maximus IV Extreme」の交換品が届きました。

　基板上には、改修品であること（P67チップセットのリビジョンB3）を示すシールが貼られています。

　これでやっと本格的に作製に入れます。

　別件ですが、

　組み合わせるキーボードは、Logicoolの「Illuminated Keyboard CZ-900」にしました。

　その名のとおり、キーボードの裏面に白色LEDが仕込んであり、暗闇では、文字が白く浮かび上がります。ホームシアターなど、照明を落としたところでも、迷わずしっかりとタイピングすることができます。

　最近では、ワイヤレスキーボードやマウスが流行っているようですが、バッテリ切れの心配をしながら使うのはいちいち面倒くさいので、あえて有線にしました。

　キーストロークは、ノートPC用のように浅く、軽いタッチでサクサクとタイピングすることができます。

　また、キーボードの周囲は、BRAVIAのようにクリアフレームで囲まれており、なかなかクールなデザインとなっています。思っていた以上に、良いです。0xF9C6

　マウスは、キーボードに合わせてLogicoolにしようかとも思ったのですが、ここでも、みょ～なこだわりをみせてみました。0xF9C7

　ASUSの「Laser Gaming Mouse GX800」です。

　別にゲームしないので、ゲーミングマウスでなくてよかったのですが、ASUSのグローバルサイトを見ていたところ、マザーボードと同じ「R.O.G.」（Republic Of Gamers）ブランドで、マウスが出ていることが分かりました。

　せっかくなので、「R.O.G.」ブランドで"こーでねーと"することにしました。

　しかし、このGX800は、現時点では日本未発表となっています。（付属のマニュアルには、日本語のページもあるので、いつでも売り出せると思うのですが）

　たまたま某オークションで出品されていたところを、タイミングよくゲットできました。

　ゲーム用ということもあり、付属のユーティリティをインストールするｌことで、マウスの解像度（DIP値）の変更や、マウス側面の2つのボタンによく使う操作を設定することができます。（まぁ、職人的には、使うことはない機能ですが）

　また、GX800には、同じR.O.G.ブランドの上位モデル、「GX900」が出ていますが、マウス本体の色が赤いのと、ちょっと仰々しいデザインのため、PCケースの色と合わせて、落ち着いた感じのGX800にしました。

〔関連情報〕
　　　・Intel P67/Intel H67搭載マザーボードの販売再開を発表
　　　（2011年3月24日：ASUSTeK Computer Inc.）
　　　・Intel P67/Intel H67搭載マザーボードの交換受け付けを開始
　　　（2011年3月3日：ASUSTeK Computer Inc.）

　ぷららのblogサービス「Broach」のあまりの重さと対応の遅さに業を煮やし、工房blogを移設した訳ですが、0xF9D1

　他社のblogサービスにそのまま乗り換えても面白くないので、webサーバにblogソフトウエアをインストールして、自前で調達することにしました。（さしずめ、blogの自炊？）

　インストールしたblogソフトウェアは、「Movable Type 5」（以下、MT5）という、現在最も広く普及しているもののひとつを選定しました。

＃MT5のインストールから実際に公開できるようになるまでには、いろいろと苦難の道がありましたが、これについては、また別の機会に述べることにします。

　このエントリでは、標記、「MT5でサムネイルをランダムに表示する」方法について、自分への備忘録も含めてまとめることにします。

　工房blogには、すでに1,000件近いエントリと、数1,000枚におよぶ大量の画像がアップされています。

　これらの画像について、フォトギャラリー的に過去の画像を表示し、その画像を含むエントリにリンクを張っておけば、過去のエントリに対するアクセスを期待することができます。

　これまで、MT5に標準で設定されているWidgetの「アイテム」を改造して、サムネイルを表示するようにしていました。

　ただ、標準の状態では、「直近のものから（連続的に）10枚を選ぶ」など、機能がかなり限定されています。

　これを補うため、「ランダムにアイテムを抽出する」というプラグインが公開されていますが、ここでいう"ランダム"のタイミングとは、「エントリを作成するなど、blogが再構成された場合に」という条件付きです。

　これを補うため、「コメントやトラックバックの追加などをトリガとして、blogを再構成する」方法や、「cronを使って、毎日定期的にblogを再構成する」方法などが紹介されています。

　ただ、いずれの方法でも、blogを再構成しなければならないため、「訪問者がページにアクセスする度に、ランダムにアイテムを表示する」という機能は実現することができません。

　ネット上をいろいろ探してみましたが、ここまで凝った機能を実現する方法は紹介されていないようです。（探し方が足りないのかも知れませんが）

　そこで、
　　　「足らぬなら　作ってしまえ　プラグイン」0xF9C3
ということで、所望の機能を自前で実現することにします。（プラグインの自炊）

• 訪問者がページにアクセスする度に、過去のサムネイルをランダムに抽出し、表示する。

• MT5のDatabaseサーバ（SQLサーバ）にアクセスし、過去のアイテム（サムネイル）の一覧を得る。
• サムネイルの一覧の中から、重複がないよう、所定の個数分、ランダムにサムネイルを抽出する。
• サムネイルへのリンクと、サムネイルを含むエントリへのリンクを返す。

　さっそく、PHPとSQLのスクリプトをゴリゴリ書いて、MT5のテンプレートを改造しましたが、以下のような問題点があることが分かりました。

• ページを表示する度に、Databaseサーバにアクセスするため、サーバに負荷が掛かる。（ページの表示が遅い）
• サムネイルを所定の大きさにリサイズする際、ブラウザの縮小表示に任せると、サムネイルの画質が悪くなる。（ジャギーが発生する）

　MT5では、画像をアップロードした際、自動的にサムネイルを作成し、サーバに格納してくれますが、このサムネイルの横幅は、75/100/240pixelなどの特定の値となっており、そのままフォトギャラリー用の画像として使うには、適さないようなサイズです。

　また、一度画像をアップロードし、サムネイルが作成されてしまうと、その後リサイズをしようにも、二度と作成されることはありません。

　ということで、標記、「MT5でサムネイルをランダムに表示する」方法の第一段階として、以下の機能を実現します。

• Databaseサーバに負荷を掛けないよう、予めサムネイルのリストを作成し、blogサーバに格納しておくておく。
  （サムネイルのリストは、画像が新たに追加された時のみ更新する）
• サムネイルは、フォトギャラリーのデザインに合わせて、後からでも任意の大きさにリサイズできるようにする。
• リサイズの際には、原画像を再サンプリングし、ジャギーのない滑らかな画像となるようにする。
• 原画像の更新状況をチェックし、更新されていた場合には、自動的にサムネイルを再作成するようにする。
  （＝後から画像を差し替えても、それに合わせてサムネイルを自動生成する）
  （＝一度生成したサムネイルは、必要のない限り再生成せず、blogサーバに掛かる負荷を軽減する）

　後からでも自動的にサムネイルを再生成するようにしたのは、工房blogでは、後から画像を差し替えることが、ままあるからです。
（こだわりの内容のエントリは、後からびみょ～にバージョンアップしてたりします）

　能書きはこれくらいにして、いよいよPHPのスクリプト（thumbnail.php）です。

• サムネイルのリスト（thumbnail.dat）を読み込み、配列（$ThumbnailImageArray）に格納する。
• Databaseサーバから、登録されているアイテム（画像）のリストを読み込み、配列（$AssetImageArray）に格納する。
• サムネイルのリストとアイテム（画像）のリストとを比較し、新たに登録されたアイテム（画像）の有無を検出する。
• 新たに登録されたアイテム（画像）があった場合には、所定の大きさのサムネイルを生成し、保存する。
•  サムネイルのリストに、新たに生成したサムネイルを追加し、保存する。

　実行した結果（サンプル）です。サンプルでは、原画像から80x60pixelのサムネイルを作成しています。

　左側の画像は、原画像を、ブラウザの縮小機能を用いて表示したものです。

　ブラウザのバーションにも依りますが、「ニアレストネイバー法」（Nearest Neighbor Method）を用いて縮小している場合には、画像のサンプリングが荒くなるので、ジャギーが発生します。

　一方、右側の画像は、原画像を、PHPの画像処理ライブラリ（GD）を用いて縮小したものです。

　「バイキュービック法」（Bicubic Method）を用いているので、画像の滑らかさが改善されています。

　また、原画像がサムネイルのアスペクト比より大きい場合（画像が横長の場合）には、サムネイルのアスペクト比に合うように、横方向にセンタリングしてからトリミングしています。（2段目の画像）

　同様に、原画像がサムネイルのアスペクト比より小さい場合（画像が縦長の場合）には、縦方向にセンタリングしてからトリミングしています。（3段目の画像）

＃ここまで細かい芸当は、MT5に標準のものではできません。

　なお、PHPには、以下の2つのオプションを設けてあります。

http://www.(userdomain)/blog/thumbnail.php?force=1

　「Force」オプション ・・・ このオプションを設定すると、画像がサムネイルのリストに登録されているか否かに関わらず、強制的にサムネイルを再作成します。

http://www.(userdomain)/blog/thumbnail.php?silent=1

　「Silent」オプション ・・・ このオプションを設定すると、画面に実行中のメッセージやリサイズの実行結果を出力しません。cronを使って毎日定期的に実行する際などに、不要なゴミ（cronの実行結果logなど）を出さずに済みます。

　ということで、これでサムネイルをランダムに表示するための素材が揃いました。0xF9C6

　前回書かなかった、PCファンのPWM制御についてです。

　PCファンの回転数制御には、大きく分けて2つの方式があります。「電圧制御」と「PWM制御」です。

　「電圧制御」とは、その名のとおり、電圧の高低によって回転数を制御するものです。

　クルマの速度検出と同じような原理で、ファンの1回転で1パルス出るような「回転数センサ」からの情報を元に、ファンの駆動電圧を制御します。

　比較的簡単な制御のため、小規模な回路で構成できますが、回転数の制御の精度を、それほど高くすることができません。また、駆動電圧を絞った分は熱として失われてしまうため、電力の変換効率を高くすることができません。

＃PCファンから出ているコネクタが3ピンのものが、この「電圧制御」によるものです。
　（グランド、電源、回転数信号の3本）

　一方、「PWM制御」とは、パルス幅変調（Pulse Width Modulation）を用いて回転数を制御するものです。

　パルス幅変調とは、パルスの「デューティー比」（パルスが1と0になっている時間の比率）を変化させるものですが、PCファンの回転数制御においては、駆動電圧を高速にスイッチングし、そのOnとOffになっている時間の比によって、回転数を制御するものです。
（PWM信号を積分すると、電圧の高低を制御していることと、原理的に等価となります。LEDの「ダイナミック点灯」においても、明るさの制御方式として用いられています）

　PWM制御は、PCファンの回転数を精度よく制御することができるため、高い精度を求められるCPUファンの制御や、ハイエンドマザーボードの多くで採用されています。

＃PCファンから出ているコネクタが4ピンのものが、この「PWM制御」によるものです。
（グランド、電源、回転数信号、PWM信号の4本）

　今回購入した「ASUS Maximus IV Extreme」では、LGA1155ソケットのハイエンドモデルだけあって、最大8個のPCファンを接続することができ、しかも、そのすべてがPWM制御に対応しています。
（CPUファン、電源ファン、シャシーファン1～3、オプションファン1～3の、計8個）

　マザーボード付属のユーティリティーソフトを使えば、これら8個のPCファンの回転数をモニタしたり、動作ポイントをコントロールしたりすることができますが、職人としては、いちいちソフトを立ち上げなくとも、直感的に回転数を把握したくなったりします。

　ということで、少し工夫することにします。0xF9A0

　ScytheさんのPCファンコントローラー、「SCKM-1000」です。
（すでに販売終了のため、入手困難）

　最大4個の温度センサーをモニタすることができ、その温度に応じて、最大4個のPCファンをコントロールすることができます。

　3連メーターになっており、左から、サーモセンサーの「温度計」、PCファンの「回転数計」、オーディオの「ボリューム計」となっています。

＃3連メーターといえば、その昔、こんなモノを作っていました。懐かしい。0xF9C6

　右上のツマミが、サーモセンサーの切り替え、左上のツマミが、PCファンの切り替え、左下のツマミが、PCファンの回転数の設定になっています。
（右下のツマミは、オーディオのボリューム）

　「ASUS Maximus IV Extreme」は、最大8個のPCファンをPWM制御できますが、電流容量は、合計で最大1.0Aまでとなっています。

　親和産業さんのPCファン、「GF-1425PWM20AO」は、動作電流が最大0.6Aとなっているため、2個も接続すれば、余裕で電流容量をオーバーし、マザーボードに負担を掛けてしまうことになります。

　そこで、ainexさんの小物をいくつか組み合わせて、解決することにしました。

　左側から、「ファンPWM信号4分岐ケーブル」、「PWMファン用二股電源ケーブル」、「PWM＋ファンコン接続ケーブル」です。

　「ファンPWM信号4分岐ケーブル」を使い、PCファンの電源を、マザーボードからではなく、電源コネクタから直接取り出すようにします。

　「PWMファン用二股電源ケーブル」は、その名のとおり、PWM制御のPCファンの信号（4ピン）を、2分岐するものです。

　今回、140mmのPCファンを、トップパネルに2個、フロントパネルと底面にそれぞれ1個ずつ搭載しますが、それぞれのPCファンが独立に制御されている必要はありません。

　ここでは、トップパネルの2個を1セット、フロントパネルと底面の計2個を1セットとして、PWM制御することにします。

　マザーボード付属のユーティリティーソフト、「FAN Xpert」を使うと、CPU温度に対するPCファンの動作ポイントを、グラフィカルに設定することができます。

　ケースファンの動作モードを設定しているところです。

　青色のラインが標準の設定ですが、CPU温度が低い時は回転数を抑えて、できるだけ動作音が低くなるよう設定しています。（水色のライン）

　最終的には水冷ですが、まずは空冷でどこまでいけるかチャレンジしてみます。0xF8A4

　単純に冷却性能だけを追い求めるのであれば、風量の多い（および静圧の高い）PCファンをガンガン回せばよいことになりますが、これではただの爆音マシンになってしまいます。

　冷却性能を高めつつ、静音化を図るために、口径の大きいPCファン（140mm）を、できるだけ低速で回すことにします。

　「CM 690 II Plus NVIDIA edition」は、最大で8個のPCファンを搭載できますが、このうち、140mmのPCファンを搭載できるのは、フロントパネルに1個、トップパネルに2個、底面に1個となります。

　ということで、140mmのPCファンを、4個搭載することにします。

　右側は、「CM 690 II Plus NVIDIA edition」に標準搭載されている140mmのPCファンで、左側が、今回搭載する親和産業さんのPCファン、「GF-1425PWM20AO」です。

　120mmのPCファンは、多数のメーカーから様々な製品が出ており、非常に選択肢が広いのですが、140mmのPCファンで、クリアフレーム、しかもPWM制御というのは、ネットやアキバでいろいろ探し回ったのですが、親和産業さんからしか出ていないようです。

＃なぜに「PWM制御」にこだわったのかについては、つぎの記事で述べることにします。

　標準搭載のPCファンは、回転数：1,200rpm（固定）で動作音：19dBA、親和産業さんのPCファンは、回転数：800～2,000rpmで動作音：39.5dBAとなっています。

　動作音が40dBA近いのが若干気になりますが、これは最高回転数で動作させた時のもので、1,000prmあたりで動作させれば、ほとんど音は気にならないはずです。

　もっとも大きな違いは、標準搭載のPCファンは、風量が60.9CFMであるのに対し、親和産業さんのPCファンは、最大で153.47CFMもあることです。

　もちろん、この値は、最高回転数時のもので、低速で動作させれば、もっと値が落ちることになりますが、フィンの密度の違いからして、低速で動作させても、十分な風量が得られるはずです。

　親和産業さんのPCファンは、標準状態では青色LEDであるため、緑色LEDに交換します。

　交換する緑色LEDは、日本が世界に誇る日亜化学さんの「NSPG500DS」（購入価格：180円/個）です。

　指向角：15°で光度：37,700mcdもあり、直視すると目が痛くなるほどの明るさです。0xF9CF

　1つのPCファンに、4個のLEDが取り付けられています。ひとつひとつ、丁寧に交換していきます。（なによりも、1個180円もするので、失敗しないように）0xF9C7

　通常、LEDを他の色に交換すると、駆動回路を見直す必要がありますが、緑色LEDは、青色LEDと順電圧・順電流ともほぼ同じなので、そのまま交換することができます。
（NSPG500DSの順電圧（V_f）：3.2V、順電流（I_f）：20mA）

　アノードとカソードの両端子は、ショートしないよう、熱収縮チューブで保護しておきます。

　非常に細かい作業ですが、この辺りは「高輝度白色LEDポジションランプの製作」で培った技で、手慣れたもんです。0xF9C6

＃いま振り返ると、10年も前のことなのですね。当時はまだ誰もやっていない、非常に珍しいことだったのですが、いまや普通になってしまいました。

　比較のために動作させてみました。右側が、標準状態の青色LED、左側が、交換後の緑色LEDです。

　「NSPG500DS」は、昔からある緑色LEDのようなくぐもったグリーンではなく、鮮やかなグリーンをしています。（ちょっとハデかなぁ）0xF9C7

　フロントパネルの140mmファンも交換しました。

　フロントパネルのPCファンは、取付位置を2段階で選ぶことができます。標準状態では、上段に取り付けられていますが、交換後は、ハードディスクの冷却効果を高めるため、下段に取り付けました。

　仮組みして動作させた状態です。

　NVIDIAのコーポレートカラーである、グリーンに統一してみました。0xF9F8

＃5インチベイの上2段には、「Aquagate Max Limited Edition」が搭載されることになり、さらにグリーングリーンなことになります。

　こだわりついでに、小物にも気を遣ってみました。

　右側から、親和産業さんの「高性能制振ワッシャー付き25mm厚FAN用ネジセット」と「高性能制振ワッシャー」、ainexさんの「ゴムワッシャー付インチネジ」と「ゴムワッシャー付ミリネジ」です。

　「25mm厚FAN用ネジセット」は、M4×35mmのボルト＋ナットに、ウレタン製の「制振ワッシャー」が付いています。

　ただし、ネジセット単体では、制振ワッシャーがボルト（のアタマ）側にしか付いていません。

　そこで、「制振ワッシャー」をナット側にも追加して、ボルトとナットの両方からPCファンを挟み込みこむことにより、ビビリ音を可能な限り低減させることにしました。

　「インチネジ」は、3.5インチHDDなどを固定する場合に、「ミリネジ」は、Blu-rayドライブなどを固定する場合に使用します。

　いずれも、ゴムのワッシャーが付いています。