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

　IE7 では、ネットで開いた頁の HTML ソースコードを開くのは、秀丸エディタに指定しており、それで開いていた。
　指定の方法は、IE でツール→インターネット・オプション→プログラム→HTML エディタで秀丸エディタをインストールすると表示される「HIDEMARU」 を選択する。

　ところが、IE8 に変えてから同じような指定をしているのに、Miscrosoft のエディタとなる。秀丸エディタに比べれば、慣れていないせいもあるだろうが使いにくい。
それでネットをググッテみると、YOU LOOK TOO COOL というブログに解決方法を提示してくれていた。それで解決したので、備忘録として記録しておきたい。ネットでは、ほとんどのことが解決される。

1. 事前に、Hidemaru.exe を収納したフォルダーを確認しておく。
2. IE8 の「ツール」→「開発者ツール」をクリックして、開発者ツールを立ち上げる。ウィンドウ上部の表示は、現在開いている Window のページ表示が出るようである。
3. ここで、メニューバーの「ファイル」→「Internet Explorer ソースの表示カスタマイズ」→「その他」を選択すると「ファイルを開く」ポップアップ画面がでるので、ここで Hidemaru.exe を収納したフォルダーを指定して、 Hidemaru.exe を指定し、開発者ツールを閉じればよい。

　このような設定にしておくと、開いたウィンドウのソースは、IE8 の「表示」→「ソース」で秀丸エディタで表示される。また、二つめのウィンドウのソースは、秀丸エディタでは、新しいタブ・ウィンドウで表示されるので、作業がやりやすい。

　なんとなく週に一回しか行かない習慣になってしまって、モッタイナイので　スポーツ・ジムを退会した。その代わりに、毎朝のウォーキングを再開することにした。
　１時間～２時間ほど歩くと、野鳥の撮影場所ロケハンができる。ほとんど決まった場所に行くのだが、行くたびに双眼鏡の視野に入ってくる野鳥に変化がある。
　それで、後々の記録にと思って、「探鳥日誌」とでも名付けて、下のようなWeb ページを作ることにした。

　今まで、テーブルのセルを縦方向に連結したことがなかったので、ネット・サーチをしてみると、簡単な方法は載っているが、下のような少し複雑な表のコード例は紹介されていなかった。いろいろとトライしてみたが上手くいかない。
　それで、Excel の表が Web ページにできることを思い出し、Excel でサンプル・ページを作り、そのWeb ページのソースをコピペして参考にした。ブログに使った　html ソース・コードを備忘録として記録しておきたい。

探鳥メモ
date	weather	location	Name	qtty.	memo
Revised on Feb. 11th, 2010
2010/2/11 7:15 - 8:15	曇天 　ときに小雨	田辺池	ヒドリガモ	26羽	３グループ
		東谷池	ヒドリガモ カイツブリ コサギ	11羽 2羽 1羽	この池で初めて
		西松尾池	マガモ	10羽	この池で初めて

<table border="1" align="center">
<thead>
<tr>
<td id="th1" colspan="6" align="middle">探鳥メモ</td></tr>
<tr align="middle"><td id="th1">date</td><td id="th1">weather</td><td id="th1">location</td><td id="th1">Name</td><td id="th1">qtty.</td><td id="th1">memo</td></tr>
</thead>
<tfoot>
<tr>
<td bgcolor="#cccccc" align="right" colspan="6">Revised on Feb. 11th, 2010</td>
</tr>
</tfoot>
<tbody>
<col span=6 > 
<tr >
  <td width="100" rowspan=3 >2010/2/11<br />   7:15 - 8:15</td>
  <td width="100" rowspan=3 >曇天<br />　ときに小雨</td>
  <td width="100">田辺池</td>
  <td width="115">ヒドリガモ</td>
  <td width="80" align="right">26羽</td>
  <td width="230">３グループ</td>
 </tr>
 <tr >
  <td >東谷池</td>
  <td >ヒドリガモ<br />カイツブリ<br />コサギ</td>
  <td align="right" >11羽<br />2羽<br />1羽</td>
  <td valign="top">この池で初めて</td>
 </tr>
 <tr >
  <td >西松尾池</td>
  <td >マガモ</td>
  <td align="right" >10羽</td>
  <td >この池で初めて</td>
 </tr>
</tbody></table>

　インターネット・ラジオ Live365 を Aircheck して MP3 ファイルにする方法については、以前のエントリー、「Live365 を Aircheck （録音）する一つの方法」や「アナログ音源（LP, FM, Live365 etc.）からMP3ファイルを作るひとつの方法」で、かなり詳細に記載している。
　今回は後者のエントリーに記載した中から、Live365 の録音・MP3 ファイル作成に焦点を絞って、再整理してみたい。

以下の記載は、次の環境を前提としている。

• PC に Sound Board が搭載されている。（私の場合、Sound Max digital Audio が搭載されている）
• Sound Board の output および input は、オーディオ装置（私の場合、 Pioneer コンパクトミニコンポーネント）の line-in および line-out に接続されている。
• PC に、マルティメディア・ソフト Roxio Easy Media Creator suite 10　がインストールされている。

　次に、上の環境で Live365 のOldies ジャンルの　American Sixities Radio を録音し、MP3 ファイル化した経緯を記録しておきたい。

1. Live365 に接続して、Oldies →　60ｓ を選択し、American Sixities Radio をクリックし、Play ボタンをクリックすると、若かりしころの懐かしい歌声が流れてくる。録音した後聴くと、当然ながら　audio quality（CD 64k 以上） の高い放送の方が音がいい。
   
   
   
2. Roxio Easy Media Creator を立ち上げて、オーディオ →「 LP/テープを交換」を選択する。「Easy Audio Capture」 よりは、こちらの方が後の処理が楽なように思う。
   
3. 「 LP/テープを交換」をクリックすると下のような画面となる。接続がきちんとできておれば、オーディオから音が流れ、録音レベルの横バーが動いているはずである。
   　録音のための接続については、「録音セットアップガイド」ボタンをクリックすると図入りで詳しく書かれているウィンドウがでるので参考になる。。
   　「詳細設定オプション」ボタンをクリックして、表示されるポップアップ画面で、一時保存先のファイルやファイルフォーマット、トラック検出などを指定する。
   ファイルフォーマットの画面にあるプリセット選択ボックスでは、iPod AAC も選択することができるが、iPod は mp3 もサポートしているから、私の場合、　mp3 高品質を選択している。
   
4. そのような設定をしたうえで、「キャプチャー元」の選択はサンドボード名（選択肢に入っているはず）を、入力は「ライン入力」を選択し、録音レベルの「自動」ボタンをクリックする。自動で録音レベルの設定が終われば、録音準備完了である。
   　録音ボタンをクリックすると録音が始まる。このとき自動的に、流れてくる音は停止ボタンを押すまで MP3 化して保存されている。無音部分をトラック検出指定でしてくれるし、後で部分的な削除もできるので、ズーと流し放しでいいだろう。
5. 停止ボタンを押すと、録音されたトラック（無音部分で区切られた音声）が示される。
   　ページ右下の「次へ」ボタンをクリックすると音の波形画面が現れる。右上のズームイン・アイコンをクリックすると波形の横幅が広がる。
6. 曲の途中の無音部分でもトラック・セパレータがはいる場合がある。トラック・セパレータの位置が間違っている場合は、削除したい部分を反転させて、左上にある「トラック・セパレータの削除」ボタンクリックすればよい。
   また、コマーシャルなど削除したい部分を波形上で選択（波形上にカーソルを置きドラッグする）して、delete　ボタンを押せば波形から削除できる。削除してもよいかなどは、左下にある再生ボタンを押して音で確認することができる。
   
7. このように整理した上で、左メニューの「タグ」ボタンをクリックすると、下のようなポップアップ画面となる。
8. ここで、「Mudic ID」ボタンをクリックすると、CDDB の Grace Note が立ち上がって波形から曲を判定するということになっているが、ほとんどヒットしない。
   　そこで、曲の情報にあまりこだわらなければ、適当に曲のIDタグを入力してもよいが、曲の情報を得る方法はある。
   　American Sixities Radio （録音をしている Live365 の局）のステーション・ページに、次のように Now Playing というところに、今流れている曲とその前に流された４曲（計５曲）のID タグ（Artist, Track名, Album名（シングル盤は Single で）などが表示されるので、これを メモ帳 か何かに、録音しながら（聴きながら）コピペしておく。
   注：キャプチャーした時点が異なるので、上の表示とコピペしたものの内容は異なる。
   コピペした情報を上の　「オーディオ　タグ　編集」の画面で入力すれば、MP3 ファイルに、タグが追加される。このようにしておけば、WindowsMedia Playerなどの音楽DB で整理しやすくなると思う。
   
9. 完了ボタンをクリックすると元の波形画面に戻り、「次へ」ボタンをクリックすると、「LP/テープ　アシスタント」画面は第３ステップとなる。
   　ここで、「トラックをエクスポート」をクリックすると、下のようなポップアップ画面がでるので、「出力設定」に　MP3 高品質　を選択し、保存先のフォルダーを指定する。なお、「出力設定」の右にある「編集」ボタンをクリックし、ファイル名/フォルダ構造→サブフォルダ構造の追加のチェックボックスを外しておいた方がよい。（デフォールトでは、チェックが入っている）
10. エクスポートすると、指定した保存先のフォルダにファイルが保存される。
11. Live365 から録音し MP3 化したファイルは MP3Gain を使って音量を一括調整をしておく。Live365 個々の放送局から流れる音は局の方で音量は調整してあると思うが、局によって調整している音量レベルは異なるので、自分の音楽DB に収納する場合は同じレベルに調整しておいた方がよい。

　このようにして、MP3 ファイルで保存しておけば、iPod に転送して外に持ち出せるし、音楽CD に焼くこともできる。まあ、若かりし頃に、FM放送から流れてくる音楽を苦労してテープに Aircheck したことと同じ作業ではあるが、今の時代には、あらゆるジャンルの Web Radio 局から流れてくる音楽をデジタルに録音し持ち歩けるのである。すごい時代になったものだと思う。

　突然、カナダのリスナーから　"radio senboku ベストはある!"　というタイトルの以下のような メールをもらった。


　どうやらgraphic designer の仕事をしながら、BGM でRadio Senboku を聴いてくれているらしい。
　たどたどしい英語で返事を書いた。チャネルを合わせてもらっていることの御礼と Radio Senboku の station page image のデザインを楽しみにしているという内容である。
　翌日に、堺市の市章を使ってデザインされた右のようなイメージ画が draft だといって送られてきた。ただ、flag right を得て欲しいと言うことであった。
　堺市の広報課に送られてきたデザインを添付して許諾して欲しいとのメールをすると、休み明けに電話があった。堺市の市章と今回のデザインとは、全体としては別物であるし、市章の著作権もないし、商用でもないので問題はないと言うことであった。

　早速、Live365 の Radio Senboku station page にある長い間使ってきたイメージを差し替えた。大きさは、276x155 px と指定されているので、Fireworks と Picasa をつかって 900x600 px の元画像を調整した。

　ところで、この１月はRadio Senboku では、Swing 特集としているが、この１ヶ月間の各国別のリスナーは、下の表のようになっている。３番目の Canada は、Thomas さんが毎日聴いてくれているからかもしれない。



（追記：2010/2/3）　Thomas さんは仕事が忙しかったようで返信がしばらくなかったが、昨日、先のデザインで色づけをしたものを何種類か送ってくれた。少し色づけがあった方がいいですねというこちらの要望にこたえてくれたものだ。ブルーの背景色に白字のものが気に入ったので、モノトーンのものと置き換えた。


　

　エントリーで、HTML や Javascript , XML のソースコードを記録するときには、<pre><code>～</code></pre>という形で記述している。
　私のMovable Type でのブログは、「小粋空間」さんのテンプレートを使わせてもらっている。もちろん付属しているCSS(Cascading Style Sheets)も使っている。そのCSSでの　<pre>　は次のように設定されている。backgroundの色は、いじっていているが。

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #ffffe0;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 100%;
    overflow: scroll;
}

　このまま、100行、200行あるソースコードを記載すると、縦に非常に間延びしたエントリーになってしまう。
　これを避ける方法をネットでサーチしてみると余りにも普通の知識なのか適切な記述が見つからなかった。もう一度 CSS の基本に立ち返って学習してみると、CSS の pre の部分に、

pre {
  ,,,,
  height: 150px;
  ,,,,
 }
 

といれればよいことが分かった。　
　が、これでは１行のコードを表示するときでも、縦 150px のボックスができてしまう。それで面倒でも、本文のHTMLで

<pre style="height: 150px"> 

とスタイルを指定すればいいことが分かった。この方法を使えば、ボックスの縦の大きさを表示するコードの行数に合わせて変えることができる。スタイルを指定しなければ、縦スクロールがなく、全てのソースコードが表示される。余りにも基本的なことなので、ブログに載せるのは恥ずかしいが、自分自身の備忘録として残しておきたい。

　なお、、<pre><code>　～　</code></pre>　の　～　部分（ソースコード）にある　<　>　は、特殊文字と判定されるので、&lt; &gt;  とHTML エンコードする必要がある。
私はエンコードには、HTML エンコードフォームというサービスを使わせてもらっている。これを使うと空白文字が 、&nbsp; に、" が &quot;に、& が &amp;にエンコードされるが、エンコードされたものをそのまま　Copy&Paste して使っても問題はない。
　また、いろいろな場面でソースコードを整理する必要があるが、そのようなときはシェアウエアの「秀丸エディタ」を使っている。テキストを編集する様々な機能が備わっているので、非常に便利である。

　昨年末の投稿に記載したように、私のブログの、どのページに、どれぐらい数の方々が訪問されているかなどを分析する無料のアクセス解析サービス　Artisan を導入している。

　この分析には、アクセスする方が使用されている ブラウザ、OS 、解像度なども表示される。
　昨年の１２月１日からの分析をみると、それぞれのベスト５は、以下のようになっている。

Artisan による分析(2009/12/1～2010/1/5)
順位	ブラウザ	%	OS	%	画面解像度	%
1 2 3 4 5	Internet Explorer 8 Internet Explorer 6 Internet Explorer 7 Firefox Safari	33.9 21.6 20.4 14.0 3.5	WindowsXP WindowsVista MacOSX WindowsNT Windows2000	65.2 21.0 4.1 3.7 1.9	1024x768 1280x1024 1280x800 1680x1050 1440x900	29.0 19.1 14.9 6.3 5.5

　少し前までは、ブラウザは Internet Explorer 7 (IE7) が一番多かったのだが、2009年3月に Internet Explorer 8(IE8) がリリースされ、5月の終わり頃から画面上に 自動更新による自動インストール通知が現れるようになってきたことが、原因していると思われる。
　IE6 から IE7 へバージョンアップしたときの不具合に懲りているので、自動インストール通知を無視してきたが、上のように Artisan の解析で、IE8 がトップを占めてきたので IE8 をインストールしてみた。
　インストールする前に、"IE8　不具合"でネットサーチしてみると、goo! のQ&A に私も導入しているスパイウエアの検索と修復ソフトである「Spybot - Search & Destroy」 で不具合が起こる場合があることが分かった。それで、回答にあるように、IE8 をインストールする前に処理しておいた。
　また、IE8 に対応していないアドオンを導入している場合などでは、動作しないことも報告されている。たとえば、講談社の「日中辞典」CD-ROM は上手く動作しないようである。
　そのような準備をしてインストールするとすんなりと動くようになっている。

　まだ、使い始めたところであるが、気がついた点を備忘録として記録しておきたい。
　IE8 では、IE7 と比較すると文字の大きさが異なるようである。Firefox（=Google Crome）と同じように大きな表示になる。こちらが標準HTMLの表示のようである。ただ、ツールバーのURL を入力するボックスの右にある「互換表示」ボタンをクリックすれば、IE7 の表示に変えることができる。互換表示については、Microsoft のページに次の解説がある。
　また、アクセラレータという機能があり、ウェブ・ページの文中にある文字を選択するとその近くにのようなマークが出る。 このマークをクリックすると「Google で検索」など検索オプションを選択するセレクトボックスが出てくるので、たとえば、「Google で検索」をクリックすると、Google で検索したと同じ結果になる。文中で選択した言葉が建造物や地名だと　セレクトボックスから「Live search 地図」をクリックすると Google の地図検索と同じような結果になる。これは、今まで使ったことはなかったが、Microsft　の地図検索サービスのようである。要するに、IE8 は　Microsoft が iGoogle を意識したサービスになっているようだ。

　詳細は、Internet Explorer 8: ホーム ページを参照すればいい。

　皆様、あけましておめでとうございます。今年も、よろしくお願いします。
　今年も、自分用の記録のために、ブログを続けたいと思います。ネット の世界の片隅に参加していることで、世の中の変化が、少しは肌で感じられるないかと不遜なことも考えています。

　GoogleMapsAPI を使った地図ページ、例えば、Studio YAMAKOの「クロアチア・スロベニア・モンテネグロを巡る旅」は、GoogleMapsAPI を使いこなすためのtutorial の中から、自分でなんとか使えそうなサンプルを参考にというか、ほぼそのままに Copy&Paste して使っている。
　このページでは、Google Map　をテーブルの中に表示しているが、ここで使っている表題の日本語が、場合によって文字化けを起こす現象が起きていた。
　文字化けを起こしている場合は、画面を右クリックし、出てくるポップアップ画面でエンコード→Unicode(UTF-8) を選択すれば治るのであるが、見にきてくれる人にお願いをするわけにはいかない。　
　そこで、何か方法はないかとネットサーチしてみると、上のHTML コードのなかの<head> ～</head> 部分に、その文書に関する日本語コード情報（メタ情報）を指定していなかったために起きたらしい。 つぎのようなメタコードを挿入すると、文字化けはなくなった。（と思う。）

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

　メールなどの文字化けについては、よく相談を受けるが原因がよく分からない場合が多い。多くは、使っているメーラーの設定によると思われるが、発信元・受信先を探らないとよく分からない。もう一つのよくある原因は、普通には使わない名前などで使われている特殊な２バイト文字が宛先とか文中に使われる場合である。また、ドイツ語のウムラクトつきu（ü）などでも、文字化けを起こすようである。

　ブログの中に送信先のボタンを表示して、それをクリックすれば、直接メールをしてもらうことができる。このリンクをブログに書くHTML コードは、例えば私の場合　

<a href="mailto:n_shuhei.net@n-shuhei.net"> n_shuhei へメールする</a> 

　となる。

　多くの方々がインターネットのブラウザは、 Internet Explorer を使い、メールは、outlook express を使用されている。そのような場合、このメール送信ボタンをクリックすると、下のスクリーンショットのように、outlook express の送信画面となり、宛先欄に例えば私のアドレスが記入されている。

　ただ、これで全く問題はないのであるが、最近は 便利さから Gmail を使っておられる方が結構おられる。 Gmail を普段使っていると送信記録もそこに残されるから、このような場合も Gmail から発信された方が好ましい。
　WindowsXP で Internet Explorer 環境では、普段使う電子メールプログラムは、「ツール」→「インターネットオプション」→「プログラム」→「電子メール」に表示されている。ただし、Gmail は、Yahoo メールなどと同じように、web メールであるので、普段使っていても、ここには表示されない。
　そこで、 Gmail から発信できる方法をネットサーチしてみた。設定の方法は簡単であるが、設定する場所を見つけるのが難しかったので、備忘録的に記録しておきたい。
Gmail を利用されている方なら、Google 本体はインストールされているはずである。その場合、 Internet Explorer の表示で、一般的には下のスクリーンショットのように、 Google Toolbar が表示されている。表示されていない場合は、「表示」→「ツールバー」→「Google toolbar」をクリックすれば表示される。

このツールバーの右の方にあるマークをクリックすると出てくるポップアップ画面で「検索」を選択し、「ウェブ閲覧ツール」で「送信先リンクで Gmail を使用する」にチェックを入れておけば、送信先ボタンをクリックしたときに下のスクリーンショットのように Gmail の送信画面が立ち上がる。

　2006年7月にロサンゼルスに住んでいる先輩女史から送ってもらったアメリカ独立記念日のGreeting Cardがが素晴らしかったので、この E-cards を作成して有料で提供している jacquielawson と契約した。年間 $12 （2年間：$18 ）で、作成されたそれぞれが素晴らしい E-cards が自由に使える。

　１０月終わり近くになって、jacquielawson から、右のような新しい Hallowe'en（ハロウィン）の E-card をリリースしたとのメールが届いた。（メンバーになると新しい E-card が発表されるたびにメールをしてくれる）　 E-cards はカードといっているが、 Flash で動くアニメーションである。余談ではあるが、このカラスはハシブトカラスだろう。
長い間 私の右サイトにボタンを置いている　Season's　Greeting を更新していなかったので、今回このハロウィンの E-card に置き換えた。最近作成された E-cards は、次の記述にあるように"back story"がついている。これもなかなか洒落ている。今回の "back story"は、scarecrow（かがし） について興味ある記述がつけられている。


　　提供されている E-cards　は欧米圏の文化に基いており英語であり残念ながら年賀状はないが、誕生日・出産の祝い・結婚祝い・新築祝い・お見舞いなどもあるので年間1000円少しほど払って使ってみられたらいかがだろうか。（念のために言っておくが、私はこの jacquielawson のアフリエートをしているわけではない。）　こういうものが容易く手にはいるようになったのも、インターネットの発展のおかげである。ネットの暗い部分ばかりに疑心暗鬼にならずに、sunny side を上手く活用すれば生活はもっと便利に潤いのあるものになるだろう。行動範囲の狭くなってきている私のような高齢者でも、パソコンの前に座ることによって若いときよりずっと世界が広がってきていると感じている。