SOARISTO工房 Logo
2013年1月 Archive
2013/01/23

 「小粋空間」さんにて、画像を遅延ロードするプラグイン、「Lazy Load」が紹介されていました。

 このプラグインは、画面をスクロールしていくと、画像がじわ~んと浮き上がってくるような視覚的効果があり、また画像が画面上でVisibleになった段階でロードされるため、ページロード時のHTTPリクエストを減らすことができる、という効果があります。

screen01+.gif

 以前から気になっていたのですが、実際にMT(Movable Type)に導入しようとすると、いくつかの課題があることが分かったため、この解決方法について、しばらく考えていました。

#「Lazy Load」についての具体的な導入方法については、「小粋空間」さんや、本家「Lazy Load」をご覧ください。

 MTへの「Lazy Load」の導入時の課題は、以下の2点です。(この課題は、「MTに限らず」ですが)

(1) 記事を編集する際に、画像が見えなくなってしまう

 「Lazy Load」では、遅延ロードさせる画像の<img>タグに対して、所定のclass設定をします。

 このclass設定を目印として、画像がVisibleであるかどうかを判定して、Visibleである場合には、本来表示すべき画像(オリジナル画像)を表示(ロード)し、Visibleでない場合には、ダミー画像を表示します。

 実際の<img>タグのサンプルは、以下のとおりです。

   <img class="lazy" src="image/transparent.gif" data-original="image/snapshot.jpg" width="360" heigh="270" alt="Snapshot" />

 ここで、MTでの編集時には、<img>タグは通常どおり認識されるので、表示される画像は、srcで指定した画像となり、白や透明などのダミー画像(この場合は、「transparent.gif」)が表示されてしまいます。(当たり前ですが)

 たしかに、これで良いといえば良いのですが、編集時には、本来表示すべき画像(この場合は、「snapshot.jpg」)を表示しておかないと、日本語表現力の疎い職人には、文章のイメージが湧いてきません。

 なんとか、「編集時にはオリジナル画像、公開時にはダミー画像」を表示したいものです。

(2) 過去の記事に対して適用することが難しい

 これから新規に投稿する記事については、<img>タグに対してclass設定することにより、遅延ロード効果を掛けることができます。しかし、過去に投稿した記事については、再度その記事を編集して、手動で設定するしかありません。

 工房には、blog開設時から数えて約900件もの記事(約2,600件もの画像)がありますが、これら一つ一つの記事にチマチマと手動で設定していたのでは、日が暮れてしまいます(年が明けてしまいます)。

 なんとか、過去の記事に対しても、楽チンで自動設定させたいものです。


 ということで、簡単な解決方法を考えましたので、紹介します。

 当初は、MTが参照するSQLデータベースから記事(mt_entry)を抽出して、その中に含まれる<img>タグを直接改変してしまう、という方法も考えたのですが、これでは「課題(1)」は解決できないため、別の方法を採ることにしました。

 といっても、特に難しいことはしておらず、以前に紹介した「PHPコードを圧縮してDLを高速化する」と同じような考え方です。

 MTが生成したPHPソースを読み込んで、その中に含まれる<img>タグについて、一定条件に合致する場合にタグを改変する、という方法です。これにより、MTでの編集時には、画像が普通に見えていて、公開時には、画像にきちんと遅延ロード効果が掛かる、ということになります。(「課題(1)」の解決)

 また、対象とするPHPソースについては、blogに設定されているサイトマップを読み込んで、そこに登録されているすべてのエントリに対して<img>タグの改変を適用する、という方法を採りました。これにより、過去に投稿した記事のみならず、カテゴリー別アーカイブや月別アーカイブなど、MTが生成するすべてのエントリに対して遅延ロードを適用できる、ということになります。(「課題(2)」の解決)


 ということで、能書きはこれくらいにして、肝心のPHPのソースです。

 ExtractSiteLinks()は、その名のとおり、サイトマップファイルからリンクを抽出し、配列として返す関数です。

 ChangeImageTags()が、今回の操作のキモで、PHPソースに含まれる<img>タグを抽出し、ある一定の条件に合致する場合にタグを書き換える関数です。

 “ある一定の条件”とは、ここでは、オリジナルの画像の大きさが、「MinWidth × MinHeight以上であること」としています。

2013/01/13

 つづいて、またもお届け物が。

SCD-XA5400ES

 SONYのスーパーオーディオCDプレーヤー、「SCD-XA5400ES」(希望小売価格:176,400円、購入価格:117,810円)です。

SCD-XA5400ES

 マルチチャンネルインテグレートアンプ、「TA-DA5400ES」と、デザイン的に統一されています。

SCD-XA5400ES

 信号出力は、HDMI、光、同軸に加えて、バランス出力も備えています。

 さらに、「SCD-XA5400ES」と「TA-DA5400ES」とを、HDMIケーブルで接続することにより、「H.A.T.S.」(High quality Audio Transmission System)機能を有効とすることができます。

SCD-XA5400ES

 プレーヤーとアンプとを接続する、HDMIケーブルです。

 HDMIケーブルにも、「ES」の名を冠した製品(DLC-9150ES)があり、わずか1.5mで74,970円(希望小売価格、受注生産品)とかいう、ものすごい製品がありますが、とてもそんなものは買えないので、その下のグレードのもの(DLC-HE10XF)にしました。

 ケーブルには、DLC-9150ESと同じ「シルバーコーティングワイヤー」(銀メッキ銅線)が使われ、プラグには、振動伝搬を抑えるために、亜鉛ダイカストケースが使われています。

 ということで、さっそく試聴です。

SACD UC YMO

 YMO好きとしては、まずはこれ。「UC YMO」(Ultimate Collection of Yellow Magic Orchestra)です。

 SACDラボさんのレビューにも、嬉しくなっちゃうようなコメントが寄せられていますが・・・、

弾力と解像度。SACDでハイファイYMO

 「SACDでYMOを聴いてもどうよ? あのシンセ♪が高音質になるのかい?」

 とお思いのアナタ、ぜひこのSACDを聴いてみてください。かなり凄い音にビックリすると思います。

(続きを読む)

 本当に、そのとおりでした。0xF9CF

 これまで、SACDを、PlayStation 3(初期型)にて聴いていましたが、そこから出る音とは、面白いくらいに、まったく異なる音がします。
(もっとも、3万円台の汎用機と、17万円台の専用機とで、音が違わなかったら困りますが)

 まずは、ユキヒロさんの叩くドラムセット、特にバスドラムの暴力的なくらいの重低音。立ち上がりの鋭い、殴られるようなアタック音に驚かされます。「こんな音が入っていたのかっ!!」と。

 つづいて、キョウジュ(とホソノさん)の奏でるシンセサイザー。艶やかというか、煌びやかな高音と、ずっしり重く、分厚い低音。アナログシンセならではの高次倍音まで、しっかり聴き取ることができます。ここでもまた驚かされます、「こんな音まで含まれていたのかっ!!」と。

 耳で感じる音を、言葉で表すことは難しいのですが、視覚的なイメージに言い換えると、「大好きな映画を、これまで何度もDVDで観ていて、ある日、Blu-ray DiscのHDリマスター版で、改めて観てみた時の感動」、とでも言いましょうか。

 泣きたくなるようなセンチメンタルな主旋律を持つ「Tong Poo」(東風)、その音の広がりや密度には、心の底から驚かされました。子供のころ、初めてYMOを聴いた時の感動が、再び甦ってきました。まるで、目の前で弾いてもらっているような、そんな臨場感です。それぐらい、解像度の高い音がします。

 まさに、「Hi-FiなYMO」でした。素晴らしいっ!!0xF9CB

SACD Glenn Gould

(以下、編集中)

SACD Holst Planets

 ヘルベルト・フォン・カラヤン指揮、ウィーン・フィルハーモニー管弦楽団演奏、「ホルスト:組曲≪惑星≫」。1961年の名演を、2011年にDSD化したものです。

2013/01/12

 なにやら、またお届け物が届きました。

AV Rack & TV Board

 ハヤミ工産さんのHAMILeXブランド、NAシリーズ(インテリアファニチャー)の「NA-751」(希望小売価格:39,900円、購入価格:18,600円)と「NA-712」(希望小売価格:29,400円、購入価格:13,900円)です。

 「NA-751」は縦型のAVラック、「NA-712」は横型のTVボードで、設置場所に合わせて、縦型と横型を購入しました。

AV Rack & TV Board

 NAシリーズは、キャスターを取り付けるか否かを選択できるようになっていますが、フローリングの上で重量物を収容したAVラックを動かすと、床面が傷だらけになってしまうため、キャスターは取り付けないことにします。

 組み立てキットには、床面保護用のフェルトシートが付属していますが、安っちぃ~モノしか付いていないため、市販の厚手のフェルトシートを購入しました。フェルトシートには、「滑り止め」のタイプと「滑る」タイプの2種類があります。

 縦型のラックには、AVアンプ(TA-DA5400ES)を収容し、ケーブル類の挿抜にラックを前後させる必要があるため、「滑る」タイプを貼り付けます。横型のラックには、「滑り止め」のタイプを貼り付けます。

AV Rack & TV Board

 このように、フェルトシートをラックの底面に貼り付けます。

 フェルトシートは、できるだけ面積が広くなるよう切り出し、ラックの重量が分散するように(単位面積あたりの重量が軽くなるように)します。

#付属のフェルトシートは4枚しかなく、かつ1枚あたりの面積が狭いため、重量物を収容して長期間経過すると、フェルトシートの形にフローリングが凹んでしまいます。

AV Rack

 こちらは、これまで使用していたDENONさんのAVラック、「ARC-3501」(希望小売価格:44,100円)です。(けっきょく、仮設置したまま現在に至る)0xF9C7

#同じシリーズで、横型のモデル、「ARC-3502」(希望小売価格:50,400円)も出ていたのですが、いつの間にかディスコンになってしまっていたため、仕方なく今回のAVラックとTVボードとの組み合わせとなりました。

AV Rack & TV Board

 設置したところです。

 「Karimoku」の家具とも、色的に統一されました。

AV Rack & TV Board

 AVラック上段は、5400ES兄弟を収容しています。

 マルチチャンネルインテグレートアンプ、「TA-DA5400ES」(希望小売価格:262,500円)と、スーパーオーディオCDプレーヤー、「SCD-XA5400ES」(希望小売価格:176,400円)です。

 下段は、「我が青春のESシリーズ」にて紹介したコンポーネントを収容しています。(現在は使用していません)

 メインスピーカー用のプリメインアンプ、「TA-F555ESG」(1989年発売、定価:128,000円)と、サラウンドスピーカー用のパワーアンプ、「TA-N330ES」(1989年発売、定価:44,800円)です。

AV Rack & TV Board

 TVボード右側は、、BSチューナー、「SAT-333ESG」(1990年発売、定価:79,800円)と、CDプレーヤー、「CDP-X55ES」(1989年発売、定価:89,800円)です。

 左側は、FM/AMチューナー、「ST-S333ESG」(1989年発売、定価:49,800円)と、カセットデッキ、「TC-K555ESG」(1989年発売、定価:99,800円)です。

AV Rack & TV Board

 こちらのクマさんは、一昨年に訪れた「BMW Welt」から連れてきたものです。“可愛い”というよりは、“賢そう”な顔をしています。

2013/01/05

水天宮

 日本橋人形町、「水天宮」さまに行ってきました。(一昨年の模様は、こちら

水天宮

 参拝の方で、たいへんな賑わいです。

水天宮

水天宮

月島

 せっかくなので、月島にやってきました。

月島

 「おしお」さん。

月島

 とりあえず、定番の「もちめんたいチーズ」と、新作の「塩もんじゃ」を頼みました。

月島

 塩麹が入っている、業界初のもんじゃだそうです。

 まいう~!0xF9F7

2013/01/02

品川神社

 近所の氏神さま、「品川神社」に行ってきました。(一昨年の模様は、こちら

品川神社

 今年も、静かで心休まる一年となりますように。(-人-)