Internet Explorer 8（IE8：WindowsXP)に変えてから、私が管理しているブログのうち２つのブログ（Atelier　Shuhei Weblog と　Studio YAMAKO）　メインページで　lightboxの不具合が起こった。背景が黒くならない。個別ページでは、正常に表示されている。ただ、管理している３つのブログの一つ、Masjii's Blog では上手く機能している。
今まで学習したことを調べたり、ネットでサーチしてみても原因がわからない。両者のソースコードやStylesheet　を１ヶ月以上かけて仔細に調べてみたが、全く解決の糸口が見つからなかった。

　先日、Atelier　Shuhei Weblog をIE8 のWindows画面を開けようとすると、次のようなエラーメッセージのポップアップ画面が出て停止した。
　このエラーについて調べると、どうやら DOM という　API に関連しているらしい。DOM については全く知識がないが、どうやらプログラムとくに JavaScript　の実行順序が起因しているように思われた。
そこから類推して、Atelier　Shuhei Weblog やStudio YAMAKOのメインページには、JavaScript を多用した Lightbox で開く写真が沢山あるので時間がかかるのではないか、それが原因ではないかと思われた。Masjii's Blog には、写真はあまりなくテキストが中心である。

　そこで、MovableType4.2 の「ブログ記事の設定」で、表示数を 30 から 10 に変更すると、写真の背景は黒くなり正常に表示されるようになった。Masjii's Blog はもともと10 ブログ記事だけの表示になっていた。メインページの表示が10 件だけでも問題は余りないと思われる。

　懸案の問題が解消したので、解決策をネットでサーチしている中で見つけた lightbox のカスタマイズを参考にいじってみた。以前にも、画面を「閉じる」「Next」「Back」ボタンをカスタマイズしている。
　今回は、写真の台紙を従来の白から薄緑色に（それに伴って、キャプチャーの文字を白に）、背景の overlay を黒一色から模様入りの壁紙風に変えてみた。 Studio YAMAKOの背景は、蝶の柄が入った壁紙にしてみた。私のは青空である。
　三つを並べてみたい。

sample1：Atelier　Shuhei Weblog

sample2：Masajii's weblog

sample3:Studio Yamako

　lightbox 2.0 の最新バージョン 2.04 の導入は失敗した。導入の手順を間違ったものと思うが、サイトそのものにアクセスできないという致命的な障害がでるので、すぐに元のバージョン 2.03 に戻した。

　そのときのドサクサにまぎれてテンプレートなどをいじったせいか、次の条件のときに、画像が現れるポップアップ画面の背景 overlay が黒くならないという現象がでた。

• Windows XP SP2
• Internet Explorer 7
• MovableType 4.1 テンプレート：小粋空間：two-column-liquid-right メインページ

　アーカイブページやWindowsVista　Mozilla(Firefox) では起こらない。
　上記は私の環境で、それ以外については確認していない。

　lightbox2.0 のページの support では、overlay については次の説明がある。


　スタイルシートでは、この設定は既に以下のようになっており、問題はなさそうである。

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    word-break: normal;
    line-break: strict;
}

　ネットサーチもしてみたが、的確な示唆はヒットしなかった。見当はずれであるが、「小粋空間」さんの「Lightbox JS の Movable Type での不具合を修正する」のエントリーに、コメントとして質問を投げかけてみた。親切に以下のような返事をいただいたが、結局原因不明である。

　アクセス解析サービスの Artisan の分析では、私のサイトへの訪問者は、WindowsXP IE6/7 でのアクセスが最も多いから、早く修復したいと思ったが方途がない。

　運営している友人の２つのブログのひとつを見ていると、なんと上の条件でも、lightbox で拡大画像表示されるポップアップ画像の背景overlay が黒くなっていることが分かった。いじっているうちに偶然うまくいっていたらしい。

　このブログも同じ小粋空間：two-column-liquid-right のテンプレートを使っているので、lightbox　表示に関連していると思われるテンプレートモジュールの「ヘッダー」を子細に見てみると、正常に表示されるブログのテンプレートの<div> タグを閉じる </div> タグがひとつ少ないことを見つけた。
　どうやら、テンプレートモジュールの「ヘッダー」で<div> タグを閉じる </div> タグを余計にひとつつけたことが原因らしく思われた。テンプレートの構成上テンプレートモジュールの「ヘッダー」の<div> タグのひとつは、テンプレートモジュールの「フッター」で閉じられることになっていたのだ。

　「ヘッダー」の余計な </div> タグを削除すると上手く背景overlay が黒くなった。原因は、まったくそのせいと思っていたが、再現性を確認するために、「ヘッダー」テンプレートに余計な </div> タグをつけても、背景overlay は黒くなる。再現性はないのだ。
　どうやら修復は不可逆性だったようで釈然としないのだが、うまく表示されるようになっているので、まあ、いいか　という気分である。
　ブラウザーに依存する障害は、いつもよく分からない。

　野鳥の写真サムネイルは、Kinarie&May さんの Flash MT用のフォトサムネイラーを使ってきた。このプラグインは、エントリーのカテゴリー（例えば birds ）ごとに掲載されている写真をサムネイル化してくれる。

　非常に有用であるが、欠点は各エントリーに掲載されている１枚の写真かすべての写真を選択してサムネイルすることである。私のように、一つのエントリーにいろいろな写真をのせていると雑音の多い野鳥の写真サムネイルができてしまう。
　それとサムネイル化するファイルの拡張子は、小文字の jpg でなければなければならない。大文字の JPG ファイルも結構あり、修正するのは大変である。
　それで、DIY作品集のようにテーブルを利用して web page 作ることにした。

　ひとつづつのセルに写真ファイルを納めていくことは時間のかかる作業であるが、プラグインの lightbox　が使えたり、録音したさえずりを再生するプレイ・ボタン を設置できたりするので自由度が高い。

　右サイドメニューに置いていた「野鳥の写真サムネイル」ボタンのリンク先を作った写真集へ付け替えた。興味のある方は、一度覗いてみてください。

　野鳥ばかり追っかけている人のブログなどに出てくる写真と比較すると余りにもお粗末であるが、それぞれの写真のリンクをたどるとその写真を撮ったTPO が分かるので懐かしい。 早い時期にデジスコの体制を整えて、もう少しましな写真集に撮りたいと思っている。　

　最近、友人の海外旅行の写真集をブログ Studio YAMAKO に作成していることもあって、画像の挿入する機会が増えた。MT4.1 で写真を掲載することは、MT3.3 のときに比べれば少し楽になっているが、まだいろいろと操作をしなければならない。

　私の場合、写真はブログ本文にサムネイルを掲載し、これをクリックすれば画面全体がブラックアウトして、ポップアップ的に原寸の写真が表示される lightbox というプラグインを使用しているので、その分も操作が多い。そこで、私の知識でもう少し手を抜くことはできないかググッテみた。

　MT4.1 で画像の挿入操作をしたときに自動的に貼り付けてくれるHTMLコードは下のようなコードである。

<form mt:asset-id="227" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a href="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001.jpg">
<img alt="080818_001.jpg" src="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001-thumb-200x132.jpg" width="200" height="132" class="mt-image-right" style="float: right; margin:  0 0 20px 20px;" /></a></form>

今までは作成してくれたコードを、次の青字のように数カ所属性を追加したり、手を加えたりしていた。

<form mt:asset-id="227" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a href="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001.jpg" title="ABC" rel="lightbox[aa]">
<img alt="クリックすると大きな写真になります" src="http://n-shuhei.net/studio_yamako/xxxxxx/080818_001-thumb-200x132.jpg" width="200" height="132" class="mt-image-right" style="float: right; margin: 5px;" /></a></form>

　このように手を加えることは挿入する写真が多くなると結構な手間になる。
　「モバイルタイプ備忘録」の関連ページなどを参考に、perl なんてこれから晩学するつもりで全く分からないが、画像の挿入時に使われるソース・プログラムを覗いて、「秀丸」でいじってみた。
　ソース・プログラムは、/cgi/mt/lib/MT/Asset フォルダーにある Image.pm である。この320行目あたりにある行を青字のように変えた。

# '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
'<a href="%s" title="" rel="lightbox[]"><img alt="%s" src="%s" %s %s /></a>'

　私の場合、lightbox は 2.0 を使っているので、グループ表示のための [] とキャプション挿入の title="" を付け加えた。日本語文字列の「クリックすると大きな写真になります」を入れようとしたが、これは上手くいかなかった。　perl の勉強が必要のようだ。この挿入は、「だい」→「クリックすると大きな写真になります」とIME に単語登録して簡単化することにした。
　初期値では、サムネイル写真を表示するボックスの周囲に余白を作る style の margin が私の場合適切ではないので、この部分も先ほどのソース・プログラムで見つけて(279・282行目あたり）、次のように改定すると上手くいった。

# ' $wrap_style .= q{style="float: left; margin: 0 20px 20px 0;"};
    $wrap_style .= q{style="float: left; margin: 5px;"};

# ' $wrap_style .= q{style="float: right; margin: 0 0 20px 20px;"};
 ' $wrap_style .= q{style="float: right; margin: 5px;"};

　ソース・プログラムが少しいじれるようになったので、ブログつくりも面白みが増えたが、リスクとは隣り合わせのようだ。しっかりとバックアップをとってからいじるようにしたいと思う。それにしても、学習しなければならないことが多いので、もうちょっとの間はボケの進行が止まっていて欲しいと祈念している。

　litebox1.0 jpeg　IE と揃うと写真の表示で白い点々（white noise) が出ることがあることは、以前のエントリーで記載した。それで、litebox1.0 を lightbox2.0 に変更したら、 white noise が出なくなった。この lightbox2.0 の support 欄Q&Aに次のような記載があったので、導入してみた。最近のエントリー＜隠居の庭：夏の花（２）＞のローズアーチの写真で使っている。

Can I insert links in the caption?
Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents.
For example:
<a href="images/image-4.jpg" rel="lightbox" title="&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;">Image</a>

　html entity equivalents とは、日本語で言うHTMLエンコードのことのようだが、引用の中で使った &lt; は、エントリーのフォーム(HTML)では &amp;lt; と書かないと表現されない。
　なお、HTMLエンコードするには、 lightbox2.0 のソースコードの中に、エンコードおよびデコードしてくれるページが記載されていた。日本語でも同様のページがある。ありがたいことです。

　ヤブカンゾウはニッコウキスゲの仲間らしいが、花びらがくしゃくしゃなのが特徴らしい。決して綺麗ではない。その側に咲いている黄色のヘメロカリスは可憐である。植木鉢に植えられてから久しいマンリョウに白い花が付いている。これが、赤い実になるらしい。
　ところで、このエントリーではlightbox　2.0から発展したLitebox-1.0.ｊｓをインストールした。実はlightbox　2.0のインストールは上手くいかなかった。「小粋空間」さんがインストール法を紹介してくれることになっていたが、その間にLitebox　1.0がでた。lightbox　2.0から画像をグループ化してスライドショウ的に見る仕様になっており、それを導入したかったのである。今回、「小粋空間」にインストール法が紹介されたので早速取り組んだ。サムネイルをクリックすると大きな写真になり、その右上近くにカーソルを近づけると「NEXT」の文字が現れ、左上には「PREV]が現れる。どうやら上手く機能しているようである。表現の文字などはもう少し調査してみたい。

続きを読む "隠居の庭：ヤブカンゾウ by Litebox-1.0.ｊｓ"

　５月の庭は賑やかである。とくにビオラ・パンジー類は様々な彩りで咲き誇る。そんな中で白いジャスミンが際だっている。

　

　昨日のゴルフは強い雨だったのに今日は風が強いものの良い天気である。めったに現れない黒い蝶が玄関の寄せ植えに飛来し、あまり離れようとしない。NikonD70で連写した。カメラをPCにUSB接続して整理しながら名前を調査した。本の積ん読が好きだった親父が残していた１９６６年４月発行の「標準原色図鑑全集１：蝶・蛾」（古本屋に持って行ったが昔の本は写真の質が悪いと言うことで相手にもされなかった。捨てないで良かった。）とGoogle（インターネットという巨大な百科事典があるから本はいらないのだが。)とで探してみたら、どうやらオナガアゲハらしい。間違っていたらご指摘ください。（追記を見てください。指摘を受け訂正しました。）ついでに、前に撮った蝶の名前を確認してみるとどうやらキアゲハは間違いで単なるアゲハのようである。

続きを読む "<s>オナガアゲハ</s>クロアゲハ"

　現在、lightboxが不調です。回復までしばらくお待ちください。Version2.02へのupgradeで行き詰まっています。テスト・サイトでうまく動いたものが、本番で上手くいきません。
（追記：2006/5/11)　結局、Vresion2.02での修復方法が分からず、Vresion1.0（正式には、Versionは表示されていない。lightbox.jsとあるだけだ。）に戻した。ただ、前まで使っていたのに比べると写真にキャプションが入れられるようになっていたりして進化している。Version2.02はまだβ版のようなので普及するまで待つことにする。Pioneerになることはやめにした。

　パソコンの前ばかりでは体に悪いし陽気も良くなってきたこともあって、久しぶりにDIYをした。といってもたいした作品ではない。昨年ウッドデッキの上に立てたパーゴラの一部にルーバ風の目隠しを作った。パーゴラを立てたときは大きく葉をつけて茂っていたデュランタが目隠しになってルーバはいらないと思っていたが、この冬の寒さのせいか家内が枝を切りつめたのが原因かで枯れ木になってしまった。そばに植わっているライラックも春に僅かの花を付けるが古木のため枯れ木寸前である。みっともないので上部に付けたと同じような手作りルーバをとりつけた。
　２X４材の端材を相欠きはぎで接いで（縦にこのような接ぎ方良くないが）斜めに１X４材用の切り込みを入れた。この切り込みは、はじめ昨年同様のものを作ったとき置いてあったテンプレートを使ってトリマーでとりかかったが、トリマーの馬力が弱く音ばかり大きくて作業が捗らなかったので、ルータをフリーハンドで使った。ルータはトリマーより馬力があるので慎重に作業すればかなり上手くいくことが分かった。取り付ける前に、最近アメリカで健康上に問題があるとか言われているキシラデコールに代わる木材保護用の塗装をし、インパクトドライバーでコースレッド止めした。２X４材の継ぎ目部分がかっこよくないので、またの機会に何かで目隠しを考えている。久しぶりの木の香でDIYへの時間が増えそうな気がする。