Movable Type をバージョンアップする前（MT4.0) にはできていたのに、７ にアップしてから指定日時投稿ができなくなった。普段あまりそのようなことをすることはないのだが、年賀状の記事投稿を元旦の早朝に上げるような時に使っていた。今年は 9月に Movable Type をバージョンアップしているので、一度試しておこうとテストしてみた。が、うまくいかない。
　MT の記事編集画面で公開日時を指定し、サーバー上で同時に（私は、MovableType の運用は、レンタル・サーバーの Xserver を使っている。）cron 設定で日時を指定することまでは覚えていた。cron を使う方法は変わっていないと思うのだが、以前は見よう見まねで、どこからかひらってきたコマンドでうまくいっていたのだ。こうなると基本的な知識がないから、原因がさっぱり検討がつかない。
　このようなページで、cronとは何かの学習から始めなければならなかったが、なんとか自力で公開日時投稿ができるようになったので、備忘録として記録しておきたい。歳とともに、記憶力は極端に減衰してきている。

【MT の記事編集画面で公開日時を指定する】
　編集画面の右カラムで、【公開】の「ステータス」で　日時指定　を選択する。その下の「公開する」で日付ボックスをクリックするとカレンダーが表示されるので、記事をアップしたい日付を選ぶ。その下の時刻表示では、時間（24時間）：分（2桁）：秒（2桁）で設定する。
【保存】ボタンをクリックして保存する。MT の記事編集画面でする作業はこれだけである。

【Xserver での cron 設定】

• Xserverのサーバーパネルにログインする。
• 【アカウント】のグループにある「⇒Cron設定」を選択する。
• 【Cron設定】画面で、「CRON一覧」タブの、「予約投稿テスト」の「変更」ボタンをクリックする。
  一般的な解説ページでは、「CRON追加」タブを選択し、新たに、日時指定と実行するコマンドを入力するように説明されているが、一回限りの日時指定投稿では、すでに作成しているコマンドを利用する方が楽ちんである。
• 出てきた画面で、下の表のルールで日時指定をする。例えば、1月1日午前1時ちょうどならば、分：0　時間：1　日：1　月：１　曜日：*　という風に設定する。*　は何曜日でも適応される。　
  

  

• コマンド欄には、次のように入力する。
  cd /home/ユーザ名/ドメイン/public_html/cgi/mt77; ./tools/run-periodic-tasks
  「変更」の場合には、コマンドはすでに表示されているから、編集する必要はない。実は、つまづいたのはこの部分である。指定日時投稿を実行する run-periodic-tasks というスクリプトは、MT アプリケーションファイルが収納されているフォルダー（私の場合：/public_html/cgi/mt77 )にある tools というフォルダーにある。このフォルダーへのパスである /home/ユーザ名/ドメイン/public_html/cgi/mt77　の後ろに　/（trailing slash） をつけているとうまくいかない。それと、./tools/run-periodic-tasks へのつなぎ（；)もよく理解できていない。Linux script の書き方らしいが。マネするしかしかたない。
  

  

【FTPで、run-periodic-tasks　のパーミッション設定】
FFFTPを使って、ファイル [run-periodic-tasks]　のパーミッションを　755　に設定した。ネットサーチをしていると、そのような記述があったので、修正しておいた。

この記事も、実験的に、12月1０日13時に、予約投稿にしてみた。

当サイトの Studio YAMAKO では、年度別に「国内旅行地図」というページを開設している。現在、YAMAKOさんが、2017年に国内旅行した（訪問した）つど、その地点をプロットしマークを立て、そこに関連したブログ記事をリンクしている。
　ここで使用しているソフト（サービス）は、Google Maps JavaScript　API V3 である。
（参照：隠居のパソコン備忘録：Google Maps API V3 で旅行地図を作成する
　　　隠居のパソコン備忘録： Google Maps API JS V3 でXML ファイルを読み込む）
　この地図では、新しい地点を追加する毎に、XMLファイル（ここでは、V3_yamako_2017.xml）に地点情報を追加して対応している。このXMLファイルの編集には、XML notepad というXML に特化したテキスト編集ソフトを使用している。

　この作業は、殆どの場合二階デスクに置いている Windows10 にアップグレードしたディスクトップパソコンで行っているが、時々一階居間においている今年購入したノートパソコンでも作業をする。作業対象となるファイルは、レンタル・サーバーー上にあるので、いずれのパソコンでもファイルを編集できる。
　ところが、新しいノートパソコンで XML ファイルを編集するソフト XML notepad が開かない。二階のパソコンでは、XML ファイルをダブルクリックするとXML notepad が立ち上がったのだが、新しいノートブックパソコンでは XML notepad をダウンロードしても、XML ファイルを編集するには、わざわざ XML notepad を開いて、編集するファイルを選択しなければならない。極めて不便である。
　それで、デスクトップパソコンと同様に、XML ファイルをダブルクリックすれば、XML notepad を開くことができないかと「Windows10　拡張子によって、開くプログラムを特定する」といった言葉でググってみると、いろいろとヒットするが、以下の方法で拡張子によって開くプログラムを指定することができることがわかった。

1. Windows システムツールから、コントロールパネルを開く。コントロールパネルのプログラムを開く。
   　
   コントロールパネル⇒プログラム画面
   
   　　
2. ここで既定のプログラムのあるファイルの種類を特定のプログラムでオープンを選択し、拡張子の .xml ライン（ここでは、既定のプログラムは、メモ帳となっている）を反転し、右上のプログラムの変更ボタンをクリックする。
   
   
   既定のプログラム⇒関連付けを設定する画面
   
   
   
   
3. すると、ポップアップ画面に xml ファイルを編集する機能を持ったプログラムが表示される。XML notepad がインストールされていれば、XML Notepad 2007 が表示されるので、これを選択し、OK ボタンをクリックすれば、既定のプログラムが変更される。そして画面を閉じればいい。
   
   
   プログラムを選択するポップアップ画面画面
   

　この方法で、例えば拡張子が mp3 のファイルを Windows Media Player で開くように指定できる。（Windows10 では、初期設定では、Groove ミュージックとなっている）

　なお、このブログを記載するにあたって、ポップアップ画面をキャプチャーした。その方法は、ポップアップ画面内にカーソルをおいて、Alt + PrintScreen キーを打てば、OneDrive のスクリーンショット　フォルダーに保存されることが分かった。ついでに、記録しておきたい。

先日高校同期のウオーキング・飲み仲間と、花見を目的に、阪神香櫨園から阪急西宮北口まで歩いて、北口の居酒屋で一杯した。
　平坦なところを歩くというので持って行った SONY α7Ⅱ で撮った写真を仲間にも見てもらおうと共有する方法を考えた。昨秋、別の集まりで和倉温泉・金沢に旅したときの写真をウェブアルバムとして共有したことを思い出し、今回もその方法で思ったが、どうしても思い出せない。かなり簡単な方法であったとは覚えているが、その方法に辿りつけない。痴呆は進行しているようだ。
　ネットでのサーチや自分のブログの記録にないかと探したがヒットしない。その時にやり取りしたメールを辿って行くと、どうやら Google Picasa3 でアルバムを作成し、ブログ用のレンタルサーバーにアップロードしたと分かった。分かってみれば、それほど難しい作業ではないが、たどり着くのに時間がかかったので、次回同じような作業をする場合に備えて、方法を備忘録として記録しておきたい。
　私は、基本的に写真の整理は、Google Picasa3 を使っているので、これを前提として記述する。
　Google Picasa3　の導入については、Googleの写真編集ソフトを参照ください。

　

1. 新規にアルバムを作成するには、Picasa3 ツールバー「ファイル(F)」から｛新規アルバム｝を選択する。【アルバム　プロパティ】画面が出てくるので、ここにアルバム名などを入力し、OK する。と新規アルバムが作成される。こ
   

   
   

   ここでは、新しいアルバムとして、上のように、「花の文化園：2016/4/6」を作成した例を示したい。 新しくアルバムが作成されると、Picasa3 の画面左カラムに、下のように新アルバム名が表示される。
   

   

2. アルバムに収載したい写真を Picasa3 から選択し、（サムネイルからでも、一枚ずつ表示しながらでも）右クリックすると次のような画面が出てくるので、作成してあるアルバムを選択すると該当するアルバムに写真が追加される。
   

   

   追加した写真の枚数は、下のように、アルバム名の後の（　）内に数字が表示されるとともに、写真のサムネイルが表示される。
   

   

3. このアルバムをウェブアルバムとして共有するには、アルバム名を右クリックすると出てくる画面で、「HTMLページとしてエクスポート」を選択する。
   

   

   すると、エクスポートするURL ページの詳細を決める画面が出てくるので、アルバムに掲載される写真の大きさを指定したり、PCに保存するフォルダーや画面の体裁（選択肢はあまりないが）を選択して、エクスポートすると指定したフォルダーに保存される。

   
   どのようなページになっているかの確認は、エクスポート保存したファイルをクリックすれば、ブラウザーに表示される。

4. 後は、ウエブサーバーにアップロードするだけである。アップロードは、作成保存したフォルダーまるごとをサーバーに転送すればよい。
   私の場合、ウエブサーバーは、ブログ用にレンタルしている Xserver で、アップロード（FTP)は、FFFTP を使っている。

   

　なお、この用例に使用したアルバムは下のURLで確認できます。内容は全くありません。
　http://n-shuhei.net/photo/花の文化園：201646/index.html
　写真を見てもらう人には、このURL （フォルダーの）をメールで送信すれば良い。メールで写真を送付するのが、一番簡便であるが、量に制限がある。この方法なら、かなりの量の写真も見てもらうことができる。
　なお、掲載した写真の中から、自分用に特定の写真をダウンロードしたい場合は、ページ上の該当写真を右クリックすると出る画面で、「名前をつけて画像を保存」を選択することで、パソコン内に取り込むことができる。

ブログが突如開けなくなったと、当サイトの YAMAKO さんからメールが入った。あわてて自分のブログ(n-shuhei.net/atelier/)にアクセスすると、下のように同じ 500 error がでる。
　レンタル・サーバー先の Xserver のサポートの助けがあって、なんとか修復できたので、備忘録として記録しておきたい。

"Internal Server Error xserver" （xerver はサイトを置いているレンタル・サーバーである）で原因をネットで探ってみると、次のような回答があった。

新しいプラグインを設定するなど何も弄っていないので、原因は「CGIやPHPの同時接続数が多くなり、アカウント単位のリソース制限となっている」ぐらいしか考えられないが、急激にアクセスが増えたとは思われない。知識が少ない老人には解決できそうにない。思い余って、xserver のサポートに助けを求めた。

本件はお客様のサーバーアカウントにおきましてプログラム負荷が高まったため、一時的なリソース制限が行われその影響で500エラーが発生しているようです。

当サービスではPHPやCGIプログラムの実行、FTP接続、IMAP接続など全ての動作における合計に「同時稼動数」の上限を設けております。

「同時稼動数」が上限に達しますとPHPやCGIの実行で500エラーや503エラーが発生したり、IMAP接続に失敗するという状況が発生します。

そのような状況下で500エラーが発生している場合はサーバーパネル「ログファイル」にてエラーログを確認していただければリソース制限によるものかどうかをある程度確認することが可能です。

エラーログには以下のようなログが発生しますのでご参考にしていただければと存じます。
------------------------------------
Resource temporarily unavailable（PHP実行時）
suexec policy violation: see suexec log for more details（CGI実行時）
------------------------------------
Premature end of script headers
という旨のエラーメッセージが表示されている場合は、CGIの同時起動数が多くなり、 アカウント単位のリソース制限がかかっている可能性がございます。

（ご参考：突然、または断続的にCGIやPHPが500エラーで動作しない。）
http://www.xserver.ne.jp/faq_service_php.php#11

お客様の場合はCGIプログラムが、この「同時稼動数」を圧迫し、WEBサイト上のPHPなどの実行にも影響を及ぼしております。

大変お手数ですが、お客様が構築なされたプログラムについて構成の見直しを行っていただくことや、該当プログラムを一時削除いただく、またはパーミッション値を000等に変更し無効化することで症状が改善されるかなどお試しいただきましたら幸いです。

自分で分かる範囲で、指示された事項をいじってみたがうまくいかない。それで、"Xserver 500 error" で更にググってみると、次のようなページがヒットした。
http://net10man.com/archives/1836/
ここに書かれているPHP高速化設定(FastCGI化)を XserverPanel で実行してみると、ホームページへのアクセスは出来るようになった。が、MovableType の管理・編集画面でも同じような 500 Internal Server Error が出て、新たにブログを編集することができない。

再び、Xserver サポートに助けを求めた。次のような回答があり、今回の原因は悪質なクローラーが絨毯爆撃的に、robot でクロールしていたことが原因らしいと分かった。

サポートにて確認いたしましたところ、このたびのリソース制限の原因でございますが、お客様設置の【mt-search.cgi】というプログラムが多数稼動しサーバーアカウントにてご利用可能なリソースを大きく圧迫しておりました。

取り急ぎサポートにて該当プロセスを強制終了しましたので、再度状況をご確認くださいますようお願いいたします。

また、これまでと同様のホームページ運用を行っている場合、いずれ同様の500エラーが発生してしまいます。

・該当プログラムへのサーチエンジンロボット（クローラー）からの過剰なアクセスがある場合にはアクセスを拒否する
など、適切なご対応をいただきますようお願いいたします。

　※mt-search.cgiはMovableTypeにて作成した記事の「全文検索」を行うためのプログラムかと存じます。こちらのプログラムへ集中アクセスが起きた場合、この度のようなリソース制限の原因となってしまいます。

悪質クローラーからのアクセスを拒否する方法について、xserver サポートに問い合わせて見ると、次のような回答があった。以下に記すように、ブログへのアクセス解析サービス Artisan lite を導入しているので、方法をよく考えて実施したいと思う。それにしても、たくさんのクローラー（検索エンジンBot）がネット上では動いているのだ。

検索エンジンBotのアクセス制限につきましては、サーバーパネル「アクセス拒否」設定等にて設定を行っていただければと存じます。
　※アクセスログ等にて過剰なアクセスがないか等、ご確認ください。
なお、主要な検索エンジンのクローラーからのアクセスを拒否しても問題がないようでございましたら、[public_html]フォルダ直下の[.htaccess]に、下記の記述を追加していただくことで拒否が可能でございます。
########################################
Deny from env=blockbot

SetEnvIf User-Agent "Googlebot" blockbot
SetEnvIf User-Agent "Slurp" blockbot
SetEnvIf User-Agent "bingbot" blockbot
SetEnvIf User-Agent "Yeti" blockbot
SetEnvIf User-Agent "Baiduspider" blockbot
SetEnvIf User-Agent "DotBot" blockbot
SetEnvIf User-Agent "AhrefsBot" blockbot
SetEnvIf User-Agent "bingbot" blockbot
SetEnvIf User-Agent "TweetmemeBot" blockbot
SetEnvIf User-Agent "FlipboardProxy" blockbot
SetEnvIf User-Agent "QuerySeekerSpider" blockbot
SetEnvIf User-Agent "PaperLiBot" blockbot
SetEnvIf User-Agent "Google-HTTP-Java-Client" blockbot
SetEnvIf User-Agent "EveryoneSocialBot" blockbot
SetEnvIf User-Agent "LongURL API" blockbot
SetEnvIf User-Agent "LivelapBot" blockbot
SetEnvIf User-Agent "FlipboardProxy" blockbot
SetEnvIf User-Agent "Twitterbot" blockbot
SetEnvIf User-Agent "help@dataminr.com" blockbot
SetEnvIf User-Agent "MetaURI API/2.0 +metauri.com" blockbot
SetEnvIf User-Agent "Applebot" blockbot
SetEnvIf User-Agent "Jakarta Commons-HttpClient/3.0.1" blockbot
SetEnvIf User-Agent "ShortLinkTranslate" blockbot
SetEnvIf User-Agent "EveryoneSocialBot" blockbot
SetEnvIf User-Agent "OpenHoseBot" blockbot
SetEnvIf User-Agent "MetaURI" blockbot
SetEnvIf User-Agent "ceron.jp" blockbot
SetEnvIf User-Agent "FlipboardProxy" blockbot
SetEnvIf User-Agent "Go 1.1 package http" blockbot
SetEnvIf User-Agent "Applebot" blockbot
SetEnvIf User-Agent "Sogou web spider" blockbot
SetEnvIf User-Agent "YodaoBot" blockbot
SetEnvIf User-Agent "msnbot" blockbot
########################################

おかげで、MovableType のブログ編集画面も元に修復したが、設定している xserver の設定を見直すと、しばらくほってあったので、PHPやデータベース MYSQL のバージョンなどが低くなっている。これらのバージョンをUPすると、今度は ブログへのアクセス内容を解析するサービス Artisan lite が稼働しなくなった。
　5年前にArtisan lite を設定してから、これも見なおしていなかったので、バージョンが上がるなど問題が発生している。色々と修復を試みたが、うまくいかず、仕方なく新たにインストールしなおしたら、ようやく動くようになった。Artisan Lite のインストールについては、別のエントリーで記録しておきたいと思う。

　いつものように、旅行で訪れた地点をマークで表示する旅行地図を Google Maps API V3 で作成した。前回、和歌山を旅行した時の【初春の南紀私的観光旅行地図】のソースを土台にした。
　ソースは、html と xml のファイルがセットである。html のソースに手を加える部分は、タイトル、地図の中心点・大きさの指示であるが、今回は表示する地点が、14箇所となったので、これらのマークを作成するコードの追加が必要（単純に、元の行の数字を変えるだけであるが）であった。ついでに、マークの色を、オレンジ色に変えた。
また、呼び込んでくる xml　ファイル名を指定しなければならない。

　このような新しいマークを作るのは、ICANN というサイトが提供している【Google-Maps markers generator】というページが極めて有用である。
　画面の指示通り、ピン・マークの色を選び、中に表示する数字またはアルファベットを指示して、ダウンロードボタンをクリックすると指定したフォルダーに指示したマーカーの数だけのファイルがダウンロードされる。今回の場合は、例えば、norange_Marker_xx.png というファイルが作成されている。これをFFFTPでサーバーにアップロードして使えばよい。

　単純だか、時間がかかる作業は、訪問地点の経度・緯度、地点名、表示する写真などにリンクするhtml コードをリストする xml ファイルの作成である。
　これも、前回の xml ファイルの内容を変更し、地点数を増やすだけの作業である。入力する経度・緯度の表示は、Google Maps で地点を特定し、地点を右クリックすると現れるポッピアップの「この場所について」をクリックして表示される10進法の数字を使う。私の場合、写真の EXIF に経度・緯度が表示される（カメラにGPSユニットをつけている。）が、これは60進法で、10進法に変換する必要があるので、Google Maps で地点が特定できないときに使っている。

　順調に動き始めた新しいパソコンの　Windows 7 であったが、ブログに新しい記事を投稿しようとしてつまづいた。
　私が使っているMovable Type 4.1（MT4.1)のブログ管理画面で記事の本文を入力しようとしたが、どうしても入力することができない。このブログ記事の投稿作業は、ある意味ではクラウド型で、レンタルしているサーバー（私の場合、XSERVER ）にネットからアクセスして、ブログ管理画面を開くことになっている。このアクセスの方法が間違っていたのかと思い、URL を再確認するなど何度もトライしてみたが、うまくいかない。

　"なんでやねん？"　と思いを廻らしてみたが、原因が検討もつかない。きっとまた単純なミスをしているに違いない。こういうときは、早く休んで頭をスッキリさせるにかぎると、ベッドに入ってみたが、気になって寝付けない。

　よく早朝、リビングのこたつの上に置いているタブレット（XPERIA)で、ブログ管理画面に入ってみた。ブログの少しぐらいの修正なら、タブレットでもできるようにと設定してあったのを思い出した。そうすると、なんのことはない　Android タブレットからすんなりと管理画面に入ることができ、記事の本文修正も問題なくできる。

　どうやら、新しいパソコンだけの問題のようだ。新しいパソコンでネットワークに関係するのは、Internet Explorer（IE) である。新しいパソコンでは、IE　は　version９になっている。"MT4.1"　"IE9"　でネットサーチしてみると、ヒットした。どうやら、IE9 では、MT4 や　MT5 の管理画面が正常に機能しないらしい。

　ブラウザの問題であることが分かったので、新しいパソコンで、Gmail などのために設定している　Google chrome からアクセスしてみると、問題なくブログ管理画面が表示された。結果論ではあるが、それなら焦る必要はなかったのである。

　IE9 での解決法をネットで探っていくと、いつもお世話になっている小粋空間さんから、対処のための「IE9でMovable Typeの管理画面を操作できるようにする「EmulateIEプラグイン」」というプラグインが用意されていることが分かった。
　新しいパソコンでのファイル転送ソフト：FFFTPの設定に、少々手間取ったが、早速、インストールした。ブログ管理画面は、問題なく機能するようになった。

　どうやら、市場占有率の高い　IE だけの問題のようだ。CSS などでも微妙に異なるブラウザ間の互換性は早く統一してほしいものだ。

　
　昨年夏に、サムネイル写真をクリックするとウインドウ中央に写真が拡大表示される Llightbox を ｊQuery という JavaScript のライブラリーを使用した Lightbox2.51 を導入した。
　その時、カストマイズしたのは、デフォールトでは黒である背景画面の色を緑にしたのと、写真ページを閉じるボタンを　デフォールトの　から、自作の　　に変更しただけである。

　私が管理している友人の Lightbox は、prototype.js という JavaScript のライブラリーを使った旧バージョン Lightbox2.0 を使っている。背景画面に、蝶をあしらった壁紙を使っていて、これを Lightbox2.51 で使う方策が分からなかったからである。
　 Lightbox2.51 のカストマイズは、【jQueryのlightBoxプラグインの使い方】【jQuery LightBox Pluginの使い方】 などに詳しい。これらのプラグインは、新たに JavaScript を付け加えてカストマイズする方法である。だが、私のやり方が悪かったのか上手く行かなかった。
　そこで、当初導入した時にいじったJavaScript lightbox.js と スタイルシート lightbox.css 再度いじって見ることにした。 私にコードが理解できるわけではないから、やりかたは　ここはと思われるスクリプト　ないしは　CSS をいじって、FTP でサーバーにアップロードし、実際のページでの変化を観察する方法である。幸い、JavaScript と　CSS の変更は、すぐにページに現れるから楽である。この結果を備忘録として記録しておきたいと思う。

1. 自作の closelabel に置き換える。
   lightbox.js の41行目を下のように独自の画像に置き換える。

         this.fileCloseImage = 'http://n-shuhei.net/atelier/Jquery2.51/images/closelabel.gif';

   
   
2. セットで写真を表示している場合の表示を　"image"(default) から "画像"に置き換える。44行目

         this.labelImage = " 画像 "; 

   
   
3. セットの写真の何枚目を示す、表示を例えば　"1 of 8"　を　" 1 / 8 "に置き換える。45行目

         this.labelOf = "/";　　

   
   
4. 背景画面を単一色から、壁紙画面に変える。lightbox.ccs の7行目あたりの背景色をコメントアウトして、壁紙イメージを挿入する。

   /*  background-color: #000000; */
        background-image: url("http://n-shuhei.net/atelier/lightbox2/images/overlay_1.jpg") ;　

   
   
5. 画像の枠（台紙）の色をかえる。lightbox.ccs の35行目あたり。デフォールトは、"white;"

      background-color: #ffffe0;

   
   
6. 画面の"前画面"　"次画面"　へのボタンを独自のボタンに置き換える。lightbox.ccs の112行目、117行目あたり。　

       background: url(http://n-shuhei.net/lightbox2/images/prevlabel.gif) left 40% no-repeat;
   
   
       background: url(http://n-shuhei.net/lightbox2/images/nextlabel.gif) right 40% no-repeat;

   
   
7. 写真の説明文字の色を変える。lightbox.ccs の145行目あたり。デフォールトは灰色。

    color: #ffffff;

   
   

　その他、細かい部分も、CSS をいじることで変えられそうだ。
サンプル画像は、次のエントリー【隠居の探鳥ウォーク：ハリエンジュ　花芽ついばむ　鷽（ウソ）４羽 】などで確認できます。

　　

　酷暑で屋外での活動は歳を考えて自粛していた。それで、自然とパソコンに向かう時間が多くなっていた。取り組んだのは、V3 にバージョンアップした Google Maps JS API で旅行地図などを作成するなどのいろいろなトライである。

　といっても、一から Google Maps JS API で希望する地図を作成する能力はないから、公開されている人様のコードをいじることが主体である。このようなときに、重宝させていただいているのは、Using the Google Maps API v3にあるサンプルである。
　Mike Williams' tutorial　というサイトで V2 でサンプル表示されていた More advanced stuff - Part 25 Marker Categoriesを、V3 コードに置き換えた translated to v3というのが紹介されている。これを利用すれば、野鳥撮影地点を種別に表示するときなどに使えそうと思い自分のできる範囲でいじって見ることにした。

　このような作業をする時の手順は、だいたい次のようにしており、備忘録として記録しておきたい。

1. サンプル画面のソース・コード（IE の場合、メニューバーの表示⇒ソース）を取得する。これを、テキスト編集ソフト（私の場合：秀丸）にコピペし、名前をつけて、適当なフォルダーに、html ファイルとして保存する。
2. サンプルコードで使用されている Javascript ユティリティ ファイル（今回の例では、downloadxml.js　ファイル）や使用するマーカイメージ・ファイル（今回のサンプルでは、marker_red.png のようなファイル）を用意し、ファイル転送ソフト（私の場合：FFFTP )でサーバー（私の場合：Xserver ）上の適当なフォルダーにアップロードしておく。
3. サンプル・コードで使用されている xml ファイル（普通はサンプル・コード内で相対パスで表示されている。これを絶対パスにして、ブラウザで表示させる）をC&P して、秀丸の新しいファイルとする。適当な名前（xmlファイルで）で保存する。これも、先ほどと同じサーバー上の同じフォルダーにアップロードしておく。
4. 秀丸画面で、自分の環境に合うように、サンプルコードのそれらのファイルの path を書き換える。私の場合、ミスがないように、絶対パスで書くことにしている。
5. 自分のサーバー環境に合わせたサンプル・コードをブラウザで表示してみる。これで、參照サンプルと同じように表示されたら、サンプルのコピーは成功である。
6. このサンプルコードを少しづついじって、目的とする地図（今回、地元の公園・ホームセンター・大型電気店を種別（ caｔegory ）に表示することを目指した。）に近づけていく。先ず、地図の中心を地元にするために、地図の center 緯度・経度を置き換えた。
7. と同時に、xml ファイルも、サンプルで使われているファイルを真似して、新たに日本語を含むファイルを作って（XML ファイルの編集は、XmlNotepad を使っている）サーバー上にアップロードした。（日本語のエンコードは、UTF-8 ）
8. その他、caｔegory の名前を変えたことに対応する修正などを加えて保存、サーバーにアップロードして、ブラウザで表示してみた。地図やチェックボックス、日本語のサイドバーは、期待通り表示されたが、肝心のマーカーが表示されない。元のサンプルコードと見比べながら、チェックしてみたが、原因が分からない。
   ＪａｖａＳｃｒｉｐｔや HTML のコードは、カンマ一つ抜けても動かないことがあるので、再度やり直すなど作業を続けて見たが、うまくいかない。
9. 3日間ほど悩んで、諦めかけていたが、原因はどうやら XML ファイルにあるらしいと思われたので、再度フィルを眺めていると、ing（longitude：経度） と lat（latitude：緯度）の数字が入れ替わっていることに気がついた。今まで、このような XML ファイルは lat ⇒ lng という順序で記入していたのに、今回使ったサンプル XML ファイルは順序が逆になっていたのだ。サンプル XML ファイルの経度・緯度が海外の地点を示していたので、気づくのが遅れたらしい。
   　数字を入れ替えてみると期待通りに表示されるようになった。ミスというのは大体において、このようにうっかりミスが多いものだが、ついつい難しく考えてしまいがちだ。
10. このサンプルコードを土台に、マーカーの吹きだし(infowindow) に画像やリンクURL を表示を試みたが、それらも OK のようである。
    　なお、写真の表示が、画面の中心に表示され背景がフェードアウトする lightbox も使えるので、今後いろいろな応用ができるのではないかと考えている。

　作成例：泉北ニュータウンの公園・ホームセンター・大型電気店地図 サンプル・ページ

　　

　先日来、個人的地図作成サービス 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 でも同じである。）

　今までのブログ以外にサイトを開設する気になった。新しいサイトをつくるにあたっては、最新の MovableType5（MT5) を導入して見ようと考えた。MT5 では、ブログだけでなくウェブページも管理しやすくなっているらしい。早速、【基本からしっかりわかる Movable Type 5】という参考書を購入して、これに倣ってトライしてみることにした。

　新しいサイトのために、独自ドメインをレンタル・サーバー先の Xserver から取得した。サーバーは、今のところに余裕があるので、これを使うことにした。
　MT5 の導入については、また別のエントリーで記録することにして、今回は MT5 で使用する推奨データベース MySQL5 を設定したときに気をつけねばならない事項を備忘録として記録することにした。
　Xserver では、ドメインが異なっても、同一アカウントではデータベース MySQL のバージョンは複数では運用できないようだ。同じサーバーを使うのだから当然なのかもしれないが。
　知識のない人間がデータベースをいじるので、いささか勇気がいるが、Xserver には MySQL4 から MySQL5 への移行サービスがあるので、これを使って移行した。
　移行の結果、ブログのページを見ると、一見うまく移行しているように見えたが、次のページへリンクできなくなっていた。

• ブログ内で作成した Webpage
• ブログ編集画面が開かない
• アクセス解析の Research Artisan Lite の表示（再設定を求められる）

　対処をネットでググってみると、MT4 のインストール以降いじったことのない mt-config.cgi というファイルにある DATABASE SETTINGS で指定しているデータベース MySql の項にある DBHost をXserver で移行したときに示されたホスト名（私の場合、localhost ⇒　mysql14.xsever.jp ）に変更しなければならないことが分かった。
　FFFTP でホストにある mt-config.cgi ファイルを ローカルにダウンロードして、【秀丸】で該当箇所を修正して、再度ホストにアップロードした。すると、今までのブログ編集画面（ http://xxxxxx/cgi/mt/mt.cgi )が開くようになった。ここで、ブログごとに再構築を行うと、Webpage へのリンクは復活した。
　また、再設定を求められる Research Artisan Lite は、【「public_html（ドキュメントルート）」ディレクトリの下の階層にある「setting」ディレクトリ】のアクセス権（パーミッション）を書き込み可能（"777"）に変更する必要があるが、再設定画面でホスト名を変更（他の項目は変更なし）すると、結果が表示されるようになった。
　DB を移行すると文字化けがよく起こるようであるが、文字コードを MT の基本である UTF8 に指定したためか、今のところ文字化けは起こっていない。
　今後も、いろいろと問題が起こるかもしれないが、それぞれで対処していくことになるだろう。これで、MT5 を設定する環境は整った。