Atelier

　先日来、個人的地図作成サービス Google Maps API V3 を学習してきた。このサービスを使って、加賀地方旅行地図を作成したことを記録している。このサービスを学習中に、ｊQuery という JavaScript のライブラリーが、いろいろな JavaScript ソフトを導入するときに使われていることが分かった。

　この JavaScript ライブラリーの ｊQuery を使って、拡大写真の表示を同一画面上に表示する JavaScript の lightbox が新しいバージョン（Version 2.51)になっていることも分かった。（従来のライブラリーは、prototype.js ）
　これを、先の加賀地方旅行地図での写真表示に使って見ることにした。
サンプル画像

　インストールについては、Lightbox2 のページから、Lightboxv2.51 をダウンロードし、PC のどこかのフォルダ（例えば、lightbox2.51 を作成し ）に解凍する。
　 上のページの【How to use】を参考に、ブログをアップロードしているサーバーに新しいフォルダー（例えば、lightbox2.51 ）を作成し、ファイル転送ソフト（私の場合、FFFTP ）を使ってサーバーにアップロードする。解凍したフォルダーをまるままアップロードしても問題は無いと思う。ただ、サーバーに余裕がない場合には、先ほどのページを参考に、必要なファイルのみをアップロードしたほうが良い。このあたりは、【アクアラングウエスタンver.9.2】というページを参照させてもらった。

　このようにして、lightbox2 が動作するのを確認の上で、次のようなカスタマイズを行った。

• 初期値では、写真を表示する画面の背景色は黒であるが、これを好きな色に変えるには、lightbox.css の冒頭にある次の青字部分を変更する。

  /* line 6, ../sass/lightbox.sass */
  #lightboxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #408080; 元は、black；
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
    opacity: 0.85;
    display: none;
  }
  

  
  
  
• 写真ページを閉じるボタンを　(close.png)　から、自作の　(closelabel.gif)　に変更した。変更は、lightbox.js の50行目あたりある次の青字部分を変更した。なお、赤字部分で示したように、imageのありかは、絶対パスで書いておいたほうが無難なようである。

    LightboxOptions = (function() {
      function LightboxOptions() {
        this.fileLoadingImage = 'http://n-shuhei.net/xxxxx/Jquery2.51/images/loading.gif';
        this.fileCloseImage = 'http://n-shuhei.net/xxxxx/Jquery2.51/images/closelabel.gif';
        this.resizeDuration = 700;
        this.fadeDuration = 500;
        this.labelImage = " photo  ";　元は、Image　
        this.labelOf = "of";
      }
  

　この　Jquery lightbox2 を、Movable Type 4 で作ったブログの写真（多分1000枚以上ある）の表示に適用した。（従来は、prototype.js の lightbox 2.0 ) Movable Type に適用するには、テンプレートのヘッダーにある lightbox 2.0 の Javascript 表示を　lightbox 2.51 のコードに置き換えるだけで、すべての写真表示が新しい lightbox2.51 の表示となるので極めて楽ちんである。（つまり、HTML でのコードは、 lightbox 2.0 でも lightbox2.51 でも同じである。）

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 は黒くなる。再現性はないのだ。
　どうやら修復は不可逆性だったようで釈然としないのだが、うまく表示されるようになっているので、まあ、いいか　という気分である。
　ブラウザーに依存する障害は、いつもよく分からない。

　MT4.1 にしてからテンプレートばかりいじってきたので、新しいエントリーをアップする機会がなかった。写真をアップする方法が少し違っているようなので練習を兼ねてアップしてみた。
　MT3 のエントリー編集画面では、左メニューに「ファイルのアップロード」という項目があったが、MT4 では、編集画面上に並んだアイコンの右端に、「画像の挿入」と「ファイルの挿入」アイコンがある。
　「画像の挿入」で行うとファイルのアップロードまでの操作は、MT3 のときとほぼ同じだが、エントリー画面に取り入れを指定する方法が少し便利になっている。サムネイル画像を作る指示で、画像の幅を指定すると元の比率を維持したまま、画像の高さを決めてくれる。また、今までエントリーの中で指示していた（私の場合、CSS に属性を作成し、class で指定していた）文章の回り込みが指定できるオプションがある。
　今まで、作られたHTML コードは C&P していたが、MT4 では、自動的にエントリーの先頭に貼り付けられる。場所を移動する場合は、やはり Cut&P しなければならないが。
　それと私の場合、lightbox を導入しているので、そのための属性コードは挿入しなければならないのは、MT3 のときと同じである。

　孫の運動会見物の昼休み、校庭のそばのハルジオンなど野草が茂る土手で、モンシロチョウが羽化（と思うのですが）しているおり、その周りを2羽の蝶が飛び回っているのを見つけた。 　

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

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

　ニュータウン（政令指定都市堺市南区）の桜も見頃になってきた。天気がコロコロと変わるが、雨の止み間を縫って写真を撮りに出かけた。泉北に住まいして３１年になるが、住み始めた頃の苗木が大きく成長している。結構、いい町になった。
　明日天気が良ければ、光明池方面での桜を探索してみることにするつもりである。

続きを読む "３?４分咲き：４月４日"