Atelier

　2,012年３月に、【隠居のMT 備忘録：IE で表示した時に出現する意図しないスペースを削除する】で記録した同じ現象が、【２４節気・七十二候】の Web page を作成していて発生した。
　この現象は、【隠居のMT 備忘録：テーブル（表）の形式を工夫してみる】で落着したと思っていたのだが、どうも間違っていたことが分かったので、改めて備忘録として記録しておきたと思う。

　起こった現象は、次のようなものである。

　ネットで再度サーチしてみると、HTMLで table 記述するときに、Internet Explorerでは全角スペースが、<table>?</table> の表記のうち、</tr> や　</td> の後ろに挿入されていると、これを認識してはじき出され、table 上部に表現されるためらしい。
　それで、現象を引き起こしたコードを、エディタの「秀丸」で、全角スペースの検索をしてみると、下のように、黄色く表示された。これは、コードを見やすくするために形を整えたときに、挿入したものだった。

　この黄色の部分すなわち全角スペースを削除すると、下のようにテーブル上部の余分なスペースはなくなった。ブラウザによって見え方が異なるのは困ったものだ。ページ作成のプロの人達は、いろいろと苦労をされているようだが。

　南紀をドライブしたときの訪問地点を地図にプロットしてみた。地図作成に使ったのは、【隠居のパソコン備忘録： Google Maps API JS V3 で、番号付きマーカーを表示する】で記録した方法である。この地図は、右メニューの観光地図一覧に【初春の南紀私的観光地図】として追加した。



　この地図を作るためには、Google Map を表示するための　HTML ファイルと、このページに呼び込んでくる XML ファイルを記述する必要がある。いずれも、宍道湖周辺を旅行した時の地図を作ったファイルをコピーして作成した。
　html ファイルはテキスト編集ソフト【秀丸】で、xml ファイルは　Microsoft が提供する【XML Notepad】で修正をした。XML ファイルは、秀丸でも編集できるが、このXML Notepad は、XMLファイル編集に特化しており、文法の間違いも指摘してくれるので助かる。

　html ファイルで修正・追加する箇所は次の青字部分である。

90行目あたり、
     case "num05": num = "05";
                break;
     case "num06": num = "06";
                break;
--------------------------------------------------------------------------
に、次を追加する。番号マークは、７番目まで設定したので。
    case "num07": num = "07";
                break;　　

103行目あたり
　　  gicons["num05"] = getMarkerImage(category2num("num05"));
      gicons["num06"] = getMarkerImage(category2num("num06"));
-----------------------------------------------------------------------------------
 に、次を追加する。
      gicons["num07"] = getMarkerImage(category2num("num06"));

184行目あたり、
zoom: 10,
      center: new google.maps.LatLng(35.430603,133.012136),   //松江
      zoom: 10,
--------------------------------------------------------------------------------------------------
を、次の地点の経度・緯度に変更する。もう少し、拡大したい場合は、zoom　を11と大きくする。

　　 center: new google.maps.LatLng(33.676354,135.677032),   //熊野古道中辺路道の駅
　　　zoom: 10,　    

193行目あたりの　読み込む xml ファイルを新しい xml ファイルに変更する。
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_sinnjiko_num.xml", function(doc) {
----------------------------------------------------------------------------------------------------------------
      downloadUrl("http://n-shuhei.net/atelier/maps/V3_kisyuu_num.xml", function(doc) {　　

221行目あたり、
<tr><td align="center"style="width:1000px; background-color: #ffffe0;" ><br /><h2>晩秋の宍道湖私的観光地図</h2></td></tr>
--------------------------------------------------------------------------------------------------------------
地図のタイトルおよび大きさを指定する。地図の幅を指定する箇所はもう一箇所ある。
<tr><td align="center"style="width:700px; background-color: #ffffe0;" ><h2>初春の南紀州観光地図</h2></td></tr>      
<tr><td><div id="map" style="width: 700px; height: 500px"></div></td></tr><tr>

読み込む XML ファイルは、XML Notepad を使って、宍道湖の地図を作った時のファイルをもとに、番号マークをプロットする地点の経度・緯度とプロット地点の名前や紹介する写真リンク先を 入力すればよい。リンク先のURL などは、ブログのソースを使えば簡単である。参考までに、作成した　XMLファイルは次のようなものである。

<?xml version="1.0" encoding="utf-8"?>
<markers>
 <marker name="１：志原海岸" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_024.jpg" title="志原海岸" rel="lightbox[nanki]">志原海岸</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_003.jpg" title="ハマダイコン：志原海岸" rel="lightbox[nanki]">ハマダイコン</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_004.jpg" title="イソヒヨドリ：志原海岸" rel="lightbox[nanki]">イソヒヨドリ</a>" lng="135.431213" lat="33.570291" category="num01"/>
 <marker name="２：串本海中公園" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_020.jpg" title="水中トンネル：海中公園" rel="lightbox[nanki]">水中トンネル</a>" lng="135.745783" lat="33.481639" category="num02"/>
 <marker name="３：串本ロイヤルホテル" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_023.jpg" title="露天風呂：串本ロイヤルホテル" rel="lightbox[nanki]">露天風呂：串本ロイヤルホテル</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_021.jpg" title="日の出：串本ロイヤルホテル" rel="lightbox[nanki]">日の出</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130322_028.jpg" title="小雨にけぶる橋杭岩：串本ロイヤルホテル" rel="lightbox[nanki]">小雨にけぶる橋杭岩</a>" lng="135.784836" lat="33.481281" category="num03"/>
 <marker name="４：潮岬" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_009.jpg" title="潮岬灯台" rel="lightbox[nanki]">潮岬灯台</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130322_027.jpg" title="潮岬から太平洋を望む" rel="lightbox[nanki]">潮岬から太平洋を望む</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_007.jpg" title="ジョウビタキ雌：潮岬" rel="lightbox[nanki]">ジョウビタキ雌</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_008.jpg" title="トビ：潮岬" rel="lightbox[nanki]">トビ</a>" lng="135.762500" lat="33.433055" category="num04"/>
 <marker name="５：樫野崎灯台" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_010.jpg" title="樫野崎灯台" rel="lightbox[nanki]">樫野崎灯台</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_025.jpg" title="樫野崎から潮岬の眺望" rel="lightbox[nanki]">樫野崎から潮岬の眺望</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_013.jpg" title="樫野崎から太平洋の眺望" rel="lightbox[nanki]">樫野崎から太平洋の眺望</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_012.jpg" title="内海側の定置網" rel="lightbox[nanki]">内海側の定置網</a>" lng="135.86259" lat="33.473263" category="num05"/>
 <marker name="６：那智の滝" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_018.jpg" title="那智の滝" rel="lightbox[nanki]">那智の滝</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_014.jpg" title="那智の滝への石段" rel="lightbox[nanki]">那智の滝への石段</a>" lng="135.887704" lat="33.675069" category="num06"/>
 <marker name="７：熊野那智大社" address="<a href="http://n-shuhei.net/atelier/photo_drive/130321_016.jpg" title="熊野那智大社" rel="lightbox[nanki]">熊野那智大社</a><br /><a href="http://n-shuhei.net/atelier/photo_drive/130321_015.jpg" title="イソヒヨドリ：熊野那智大社" rel="lightbox[nanki]">イソヒヨドリ</a>" lng="135.890236" lat="33.668533" category="num07"/>
 </markers>

なお、地図作成と直接関連していないが、Internet Explorer 9　では、ページを編集・更新して、サーバーにアップロードしてもも反映されないことが起こった。（Google Chrome ではすぐに反映される）　IE8 のときと違って更新されるタイミングが異なるようだ。
　このようなときは、IE9　で　ツール⇒インターネットオプション⇒全般タグ⇒閲覧の履歴の設定で、出てくるポップアップ画面で、インターネット一時ファイルの選択を【Web サイトを表示するたびに確認する】（default　では　自動的に確認する　となっている）を選択すれば治るようだ。

　

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

　エントリーで、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 して使っても問題はない。
　また、いろいろな場面でソースコードを整理する必要があるが、そのようなときはシェアウエアの「秀丸エディタ」を使っている。テキストを編集する様々な機能が備わっているので、非常に便利である。

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

　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（?）などでも、文字化けを起こすようである。

　全く自己満足の世界であるが、W3Schools での JavaScript Tutorial でお勉強を続けてみたい。

　今回は、[JS Functions]の項である。Function は、Example で既に使われているので、今回はおさらいである。

• Function（関数）とは、イベントあるいは関数が呼び出されるときに実行される再使用可能なコードの集まりである。
• おさらいのために、今回次のような学習のためのJavaScript を作成した。
• ブログ・サーバーにおいた LinkButton.js という名前の js ファイル。
  //JavaScript Study Making Link Button
  function link_button()
  {
  var name=prompt("リンクする URL 名を入力ください。","URL");
  if (name!=null && name!="")
  {
  window.open(name);
  }
  }
• この中で、prompt box に入力された URL を新しいウィンドウに開くという関数 link_button を設定している。
• この関数を、ページを開いた時に呼び出すために、HTMLの <head> 部（MTのテンプレートで）においた。関数は、 <head> 部にも、 <body> 部にもおくことができるが、<head> 部におく方が賢明なようである。
• <head> 部に関数を設定している js file を呼び出すためのHTML。<$MTBlogURL$>はMovableType のテンプレート・タグであり、私の場合、http://n-shuhei.net/blog/ を置換するタグである。
  <script type="text/javascript" src="<$MTBlogURL$>LinkButton.js"></script>
• 呼び出した関数を実行するために、 <body> 部に関数 link_button() を実行させる次のような HTML を記述する。
  <input type="button" value="URL you want" onclick="link_button()" />

右のボタンをクリックするとリンク先のURLを入力できる。　　


• 上の例は、arrgument （引数）がない場合の関数であるが、一般的には、次のような構文となる。
  function functionname(var1,var2,...,varX)
  {
  some code
  }
• var1,var2 などは関数に取り込まれる変数または値である。 { と }　は、関数の始めと終わりを示す。
• var1,var2 などの引数がない場合にでも、関数名の後ろに () をつけなければならない。
• 関数名は、小文字なければならない。JavaScript は大文字・小文字の区分が厳格である。



• 関数ではまた、次のように関数から戻される値（戻り値）を特定する return statement が使われることがある。
  function prod(a,b)
  {
  x=a*b;
  return x;
  }
• 上の関数を呼び出すときは、次のように２つのパラメータが必要である。
  product=prod(2,3);
• 関数 prod() からの戻り値は 6 となるが、この値は product という変数で保存される。
• 関数の中で宣言された変数は、その関数の中だけで使われるローカル変数となる。関数の外で宣言された変数は、グローバル変数と呼ばれ、宣言されたページのどの関数でも使用できる。ページが閉じられたときに消滅する。

　自分のWeblogを中心とするホームページに手を加えた事項を備忘録的に書き留めて、カストマイズ履歴のページをテンプレートとして作成している。カストマイズした項目のリストは新しいカストマイズが一番上にきているが、リストの番号は一番最新のものが常に１番であった。この番号はできれば最新のカストマイズが何番目のカストマイズかを示したいので、番号は降順にして１番目にしたカストマイズは１番にしたい。HTMLのコードでは、HTML4.01の仕様書でもそのような方法は記載されていないらしく、HTMLコードではどうも駄目らしい。Googleで「HTML 降順　リスト　ol li」でサーチすると、人力検索？Hatena:：Qustionで「HTML番号リストで番号を逆順にする方法は？」という質問があり、その回答に andi さんという方が JavaScript での解決を提示されておられる。この JavaScript をいただいて、カストマイズ履歴テンプレートに貼り付けてみると希望通りの表示になった。ただし、このJavaScriptは、</ol>　の後に貼り付けると上手くいくようだ。なお、<ol>　は下のScript 似合わせて　<ol　id=hoge>　とValue属性が必要である。　ちなみに、この JavaScript は以下の通りである。

<script>
var o = document.getElementById("hoge");
var max = o.childNodes.length;
for(var i = 0;i < max;i ++){
o.childNodes[i].value = max - i;
}
</script>

続きを読む "番号リストで番号を降順にする方法は？"

　MovableType-ja　でエントリーを編集するとき、ほとんどの場合編集画面の左上に用意されているタグ・アイコンで用が足りるが、私のような素人でも時によってはそれ以外のHTMLコードを使うことになる。例えば、リンクの表示 target を _blank にしたり、文字の色を赤にしたいというような場合である。このような場合を考えて、MTのExpert達が様々なプラグインなどを公開されている。でも、MTを始めて間もない人には少々取っつきにくいし、帯に短し襷に長しの感がある。
　そこで私は、FEP（日本語入力システムの意味で使ってます。）の単語登録機能を使うことを思いついた。例えば、このエントリーでも使っているが、「あかいろ」と入力すると　<span style="color:#ff0000;"></span>　に変換する登録をしておくのです。ようやく日本語入力は、あまりキーを見ないで入力出来るようになってきたからずいぶんと楽であるし、簡単である。

　ちなみに単語登録例は、

あかいろ　　　<font color="#ff0000"></font>

ぶら　　　　　　target="_blanK"

こもじ　　　　　　<small></small>

　といった具合である。必要に応じて単語登録を増やすだけなので簡単と思う。また、HTMLの構文を思い出すのにも有用である。日本語でエントリーを書く最大の武器かもしれない。　

　2006年の４月５日に、What Is New?　のエントリーを個別エントリーではなくテンプレートにした。それ以降HPに手を加えるに従って20回近くにわたって、このテンプレートの内容を書き換えている。何か他に良い方法がないか模索していたときに、「小粋空間」で紹介されているLee, Joonさんという韓国の方が作られたBigTemplateWindowというプラグインを見つけた。このプラグインをCaramel*Vanillaさんという日本の方が日本語版にされている。今年の１月でMovableTypeのblogは閉じられているが、日本語版はそのまま置かれている。ありがとうございます。
　早速このプラグインを導入し、"What'ｓ　New？"ページを編集した。今までと違ってHTMLタグが簡単に使えるので重宝する。本来の目的はMTタグを使いやすくすることだと思うが。トロット夫妻が作ったMovableTypeは多くはロングテールに属する様々な人々によって時々刻々進化している。Japanese　WOM（Write　Only 　Member　in　Japanese：私の造語）では、この世界では置いてきぼりを食うようである。

　naoyaさんという方のamazonアフリエートを支援するカスタマイズ　amazlet を使用したとき、Netscapeでは問題は起こらないが、IEでは日付とタイトルおよび感想記事の表示がマウスでなぞるか、エントリーの最終までカーソルを動かさないと現れないという現象が起きた。
　私のサイトで本を買う人もいないだろうから削除してしまってもいいのだが、なんとかならないかと模索した。MTではなく古典的なページでテーブル表示をしてみると問題は起こらないので、このコードをMTに持ち込んで見ると日付とタイトル・記事が表示されない現象はなくなった。
　ブラウザによって異なる現象が起きると素人ではHTMLかCSSの対応違いぐらいしか原因の調査の仕方が分からない。

MTのカスタマイズに役にたっています。画面サンプルの文字が小さくて老人にきついですが。丁寧に書かれています。丁寧に読む必要はありますが。

詳解HTML&スタイルシート辞典―最新実用カラー版 posted with amazlet on 06.04.02 岡蔵 龍一 秀和システム (2000/09) 売り上げランキング: 184,878 おすすめ度の平均: 正しいHTMLを書くために 手元に置いておくと便利です。 コンセプトが洗練されていない Amazon.co.jp で詳細を見る

　今日は朝から雨。桜見の散歩は中止して、PCの前に座っている。　先日からCSSをもうちょっと深く学習する状況になって、３年ほど前に買っていた「HTML＆スタイシート辞典」を見ていたら、今まで使っていなかったタグを使いたくなった。この頃、特にMTのカスタマイズ投稿で、ITがらみの略語が増えてきたので、これらのフルスペルを abbr を使ってマウスがonされたときに表示したいとおもってやってみた。どうも上手くいかないので、Googleのサーチでよくよく調べてみると、abbr　はIEでは機能しないことが判明した。本を丁寧にみてみると対応ブラウザは、IE5-Mac となっていた。（Win　Netscapeでも機能する） Win IE では、acronym　を使わなければならない。Netscapeでは、どちらも使えるが、ほんとは abbreviation と acronymとに使い分けるのだそうだ。この投稿のように、英語：日本語でも使えちゃうから、そんな厳密な使い分けは考えなくても良いと思う。
　NetscapeとIEの争いを垣間見る思いだ。