2008年3月31日

隠居の JavaScript :番号付きリストを降順にする。(追記)

 W3Schools JavaScript Tutorial の Loop の項まで学習して、Customaize History 履歴ページでのリスト番号を降順にする方法に使っている Expert が書いた次の JavaScript が少し理解できるようになったので、私の理解できた範囲でコメント文に記した。
<!--list descend-->
<script>
var o = document.getElementById("hoge");
//getElementById メソッドは指定ID(この場合:"hoge")のエレメント(この場合<ol>を指定する。
//"hoge"は、HTMLの<ol id="hoge"> というように指定している。
var max = o.childNodes.length;
//<ol id="hoge"> 要素内の子ノード(この場合、<li>..</li>)の数を変数 max に与える。参考:AllAbout JavaScript
for(var i = 0;i < max;i ++)
//隠居のお勉強:for loop の例
{
o.childNodes[i].value = max - i;
//子ノード<li>の i 番目に、(最大番号- i )を代入する。結果は、番号が降順になる。
}
</script> 


 なお、 Customaize History 履歴ページの番号降順設定は、上の JavaScript でInternetExplorer(IE) では上手くいっていたが、Mojilla 系の Firefox Netscape では番号が倍になり、原因が突き止められないまま放ってあった。
 今回改めて "childNodes.length" でネットサーチしてみると答えがあった。thescript.com というサイトのフォーラムによると、どうやら Mojilla 系では、 whitespace (空白スペース)をカウントの対象に入れるらしいことが分かった。
 そこで、Customaize History 履歴ページ(MovableType のインデックス・テンプレートで作成している)の編集画面で編集しやすくするために入れていた </li>....<li> の間の空白スペースを削除すると、Mojilla 系でも IE と同じように、綺麗な降順番号を表示するようになった。<li>..</li> のタグ・セット間に必ず空白スペースが入っていたので、偶然数字が倍の偶数になっていたらしい。

 この世界、学習すべきことは五万とある。死ぬまで退屈することはないだろう。

2008年3月30日

隠居のお勉強:JavaScript Basic (8) Loop

 W3Schools JavaScript Tutorial の第8回である。まだ、基礎部分を学習している。使わせてもらっている Expert が書かれた JavaScript を理解するには、まだ当分時間がかかりそうだが、少しずつ理解できる部分もでてきた。

 今回は Loop (ループ)である。ループには、For Loop While Loop がある。

  • for loop は、スクリプトを何回繰り返すかが分かる場合に使用される。
    • Example を次に示す。
      <html>
      <body>
      <script type="text/javascript">
      var i=0;
      for (i=0;i<=10;i++)
      {
      document.write("The number is " + i);
      document.write("<br />");
      }
      </script>
      </body>
      </html>
    • loop は、i=0 からスタートし、i が 10 以下の間、下のコード( document.write() )が繰り返される。i は1回繰り返されるたびに、1 付加される。結果は次のようになる。
      The number is 0
      The number is 1
      The number is 2
      The number is 3
      The number is 4
      The number is 5
      The number is 6
      The number is 7
      The number is 8
      The number is 9
      The number is 10


  • while loop は、特定の条件が true (真)である間ループする実行を求めるときに使われる。
    • Example を次に示す。
      <html>
      <body>
      <script type="text/javascript">
      var i=0;
      while (i<=10)
      {
      document.write("The number is " + i);
      document.write("<br />");
      i=i+1;
      }
      </script>
      </body>
      </html>
    • loop は、i が 10 以下の間、下のコード( document.write() )が繰り返される。結果は、for loop の場合と同じである。


  • do...while loop は、while loop の変種である。この loop は、常に code block を一度は実行する。それ以降は、特定の条件が true (真)である間実行をループする。
    • Example を次に示す。
      <html>
      <body>
      <script type="text/javascript">
      var i=0;
      do
      {
      document.write("The number is " + i);
      document.write("<br />");
      i=i+1;
      }
      while (i<0);
      </script>
      </body>
      </html>
    • 結果は、次の通りである。
      The number is 0

syntax は理解できたが、どのような場合に使われるかがよく分からない。

2008年3月29日

泉北西原公園:サクラなど

クリックすると大きな写真になりますクリックすると大きな写真になりますクリックすると大きな写真になります  堺泉北のサクラ名所、西原公園のサクラもこのところの暖かさで3分咲きくらいになった。レンギョウ・ユキヤナギは満開で、黄色・白・ピンク・緑のコントラストが楽しい季節である。
 サクラの花にメジロが吸蜜しにきた。NIKKOR18-200mm では、大きく撮ることは難しい。Google の Picasa でトリミングしてみるとなんとか見える写真になった。ヒヨドリもあいかわらず多いが、撮るチャンスを逸した。下に目をやるとタンポポの黄色い花が地面にはいつくばっていた。
クリックすると大きな写真になりますクリックすると大きな写真になります 公園からの帰り道、花木の多いお宅の庭の垣根には、ユキヤナギ・木蓮・レンギョウと蝋梅の黄色い花が、道路上に溢れていた。家に帰り着くと、「ツーピーツーピー」と小鳥のさえずりがかなり身近に聞こえる。空を見上げると、鳴き声はすれど姿が見えずだったシジュウカラが、電線にとまっている。ズームを一杯にのばして撮った写真を Picasa でトリミングしてみるとシジュウカラの特徴である胸の黒ネクタイがはっきり見える。餌台をおけばきっと現れるのではないかと作る気になっている。

泉北近辺私的観光地図に掲載

2008年3月28日

隠居のお勉強:JavaScript Basic (7) 関数

 全く自己満足の世界であるが、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;
      }
    • 上の関数を呼び出すときは、次のように2つのパラメータが必要である。
      product=prod(2,3);
    • 関数 prod() からの戻り値は 6 となるが、この値は product という変数で保存される。
    • 関数の中で宣言された変数は、その関数の中だけで使われるローカル変数となる。関数の外で宣言された変数は、グローバル変数と呼ばれ、宣言されたページのどの関数でも使用できる。ページが閉じられたときに消滅する。

2008年3月25日

隠居の庭も春めいて:ツバキなど

 枝垂れ梅も春一番の風と強い雨で、一挙に散ってしまった。堺泉北の桜の開花宣言はまだないが、暖かい陽射しに誘われて、家内が育てている庭の花に眼を凝らしてみると春がきているようだ。

クリックすると大きな写真になります。クリックすると大きな写真になります。クリックすると大きな写真になります。 玄関先ステップにおいている鉢植えの黄色「ミニラッパスイセン」は、今がちょうど見頃である。モルタル化粧門壁にかけている寄せ植えのパンジーが色鮮やかである。 立水栓脇の小さなヤブツバキの蕾が開いて、夜来の雨を花弁にたくわえている。
クリックすると大きな写真になります。クリックすると大きな写真になります。 ローズアーチのツルバラもいっせいに芽を吹き出した。5月の開花が待ち遠しい。和室の前に植えている「ヒュウガミズキ」は満開である。背景の御簾もどき垣根に埋没した感があるのが残念だ。


2008年3月24日

隠居のお勉強:JavaScript Basic (6) Google Map link の confirm box を作る

 金曜の夜から、夫婦そろって風邪(?)を引いてしまった。どちらも消化器系をやられたので、一種の食中毒かもしれない。陽春の候というのに、二人揃って床に就いた。こんなことははじめてである。医者からもらった薬を服んで寝ていたら、翌朝は体調が戻った。

 引き続き、W3Schools JavaScript Tutorial で、お勉強である。今日は、[JS Popup Boxes] の項である。
  • JavaScript では、3種のポップアップ・ボックスを作成できる。  Alert: Confirm: Prompt: ボックスである。
    • Alert Box は、ページ閲覧者に確認の情報をポップアップ・ボックスに表示する。
    • Example を参考に、次のような js ファイル(名前はなんでもよいが、AlertBox_h1.js とした)を作って、ページの <head> 部においてみた。MTでは、メインページやエントリーページのテンプレートの <head> 部である。
      //JS Study: 改行付き Alert Box
      function disp_alert()
      {
      alert("Alert Box で改行するには" + '¥n' + "¥¥n¥ を使います。");
      }
       ¥は小文字である。MTやGoogle のサーチボックスや Gmail では、101/102 英語キーボードで小文字 ¥ を打つと、\ となって、小文字の ¥ は表示されない。この場合、HTMLのタグで使う、< > をエントリーで使うとき &lt; &gt; と入力するように、&yen; と入力すると小文字 ¥が表現される。なお、秀丸では小文字の ¥ が表示されるので、 js ファイル作成には問題がない。HTMLで表示されている入力部分に、小文字 ¥ を打つと、\ となるらしい。
    • ずいぶん寄り道をしたが、JavaScript での文字列の改行には、¥n を使う。HTML での < br /> と同じである。このときの ¥ をエスケープ・シーケェンスというらしい。エスケープ・シーケェンスについては、後ほど Tutorial の項目にもでてくるようだ。
    • MTテンプレートの <head> 部においた記述を次に示す。 <$MTBlogURL$> は、MT のテンプレート・タグである。
      <!-- JavaScript Study -->
      <script type="text/javascript" src="<$MTBlogURL$>AlertBox_h1.js"></script>
      

    • そして、 <body> 部に(エントリーに)次のようなHTMLを記述したとき、下のような Example が実行される。実際のブログへの応用については、まだ、思いつかない
      <input type="button" onclick="disp_alert()" value="改行つき Alert Box の例" />

    • Example:右のボタンをクリックしてみてください。
    • 今回初めて、 <head> 部で js ファイルを呼び出し、 <body> 部でそれを実行することを試みた。Expert が提供してくれている JavaScript プラグインの多くはこの方式をとっている。


  • Confirm Box は、ページ閲覧者に「OK」か「キャンセル」かの確認をとるお馴染みのポップアップ・ボックスである。
    • tutorial の Example と Tag <index> というページにある例を参考に、Alert Box のようによく利用する Google Map へのリンクボタンで確認するスクリプトを置いてみた。
    • 外部 js ファイル(名前はなんでもよいが、ConfirmBox_h2.js とした)と<head> 部(テンプレート)に記述したHTMLおよび <body> 部に(エントリーに)に記述したHTMLは次のようなものである。

    • 外部 js ファイル:別 Window に開きたかったので、tutorial にある location.href ではなしに window.open を用いた。 location.href では新しい Window に表示させる方法が分からなかった。
      //JavaScript Study Confirm Box
      function disp_confirm()
      {
      var r=confirm("Google Map を開きますか?");
      if (r==true)
        {
           window.open("http://maps.google.co.jp/","_blank");
         }
      else
        {
       window.alert('キャンセルされました'); 
        }
      }

    • <head> 部(テンプレート)に記述したHTML
      
      <script type="text/javascript" src="<$MTBlogURL$>ConfirmBox_h2.js"></script>
      

    • <body> 部に(エントリーに)に記述したHTML
      
      <input type="button" onclick="disp_confirm()" value="Google Map" />

右のボタンをクリックすると Confirm Box がでる。 
 ブログの右サイドにリンクボタンとして設置してみた。自作 JavaScript 3作目である。

  • Prompt Box は、多くの場合ページの訪問者にページに入る前に、何かの値を求めるときに使われる。
    • Example を参考に学習のために作った外部 js ファイル、<head> 部(テンプレート)に記述したHTMLおよび <body> 部に(エントリーに)記述したHTMLは次のようなものである。
    • 外部 js ファイル。名前はなんでもよいが、PromptBox_h3.js とした
      //JavaScript Study Prompt Box
      function disp_prompt()
      {
      var name=prompt("貴方のお名前を教えてください。","お名前");
      if (name!=null && name!="")
        {
          window.alert("今日は!! " + name + "さん。訪問ありがとうございます。");
        }
      }

    • <head> 部(テンプレート)に記述したHTML
      
      <script type="text/javascript" src="<$MTBlogURL$>PromptBox_h3.js"></script>
      

    • <body> 部に(エントリーに)に記述したHTML
      
      <input type="button" onclick="disp_prompt()" value="あなたのお名前は?" />
      


右のボタンをクリックしてみてください。
今のところ、どのように使うか思案しているが、まあ、隠居のお勉強の成果ということで、大目に見てください。

2008年3月21日

隠居のお勉強:JavaScript Basic (5) switch 構文を使って、本日の曜日を表示する

 前回の学習[JS If...Else] で、JavaScript を自分のブログへいささかの応用ができたので、勇気を得て続けて W3Schools JavaScript Tutorial でのお勉強である。

  • 今回は、条件式 [JS Switch] の学習。
    • 多くの選択肢から、一つの条件式を選んで実行する場合には、switch 構文を使わねばならない。
    • 以下は使用例である。
      <script type="text/javascript">
      //You will receive a different greeting based
      //on what day it is. Note that Sunday=0,
      //Monday=1, Tuesday=2, etc.
      var d=new Date();
      theDay=d.getDay();
      switch (theDay)
      {
      case 5:
        document.write("Finally Friday");
        break;
      case 6:
        document.write("Super Saturday");
        break;
      case 0:
        document.write("Sleepy Sunday");
        break;
      default:
        document.write("I'm looking forward to this weekend!");
      }
      </script>
    • break ステートメンを書くのは次の選択肢が実行されることを阻むためである。

  • これを応用して、自分のブログのタイトル下にある横長カレンダー横に、本日の曜日を表示することを試みた。横長カレンダーでは、曜日が分からない。
    • 上の example を参考に、次のような外部 js ファイルを秀丸で作成した。ファイル名は何でもいいが、TheDay.js として FFTP でブログサーバーにアップした。
      
      //今日は何曜日かを表示する js ファイル
      var d = new Date();
      theDay=d.getDay();
      switch (theDay)
      {
      case 0:
        document.write("<span id='js-text-red'><b>本日:日曜日</b></span>");
        break;
      case 1:
        document.write("<span id='js-text-grey'><b>本日:月曜</b></span>");
        break;
      case 2:
        document.write("<span id='js-text-grey'><b>本日:火曜</b></span>");
        break;
      case 3:
        document.write("<span id='js-text-grey'><b>本日:水曜</b></span>");
      break;
      case 4:
        document.write("<span id='js-text-grey'><b>本日:木曜</b></span>"); 
      break;
      case 5:
        document.write("<span id='js-text-grey'><b>本日:金曜</b></span>"); 
      break;
      case 6:
        document.write("<span id='js-text-blue'><b>本日:土曜</b></span>");
       break;
      }
      

    • スタイルシートに、次のスタイルを追加した。日曜日は、文字色を赤に、土曜日は水色にした。
      /* JS TheDay text */
      #js-text-grey { color: #408080; font-size: 10px; }
      #js-text-red { color: #ff0000; font-size: 10px; }
      #js-text-blue { color: #8888ff; font-size: 10px; }

    • MT テンプレート(メイン・エントリー)の<body> 部のカレンダー表示部分に、次のステートメントを追加した。
      <script src="http://n-shuhei.net/blog/TheDay.js"></script>
 これで、横長カレンダーの横に、本日:金曜日というように、ブログに訪問していただいた日の曜日が表示されるようになった。自作 JavaScript の2作目である。

2008年3月20日

隠居のお勉強:JavaScript Basic (4) 訪問時刻によって、挨拶文を変える。

 相変わらず、PC 前でRadio Senbokuを聴きながら、JavaScript のお勉強である。

 前回に書いたように、W3Schools JavaScript tutorial での [JS If...Else] のページにある Examples を応用して、私のブログのタイトルへ訪問時刻によって変化するお礼挨拶を表示させることにした。
 この具体例を記す前に、勉強したことを学習ノートにまとめておきたい。

  • [JS If...Else] で学んだこと。
    • デシジョンによって異なるアクションを実行する条件式を記述できる。
    • 条件式には、if statement ; if...else statement ; if...else if....else statement ; switch statement がある。
    • if statement はある特定条件が真(true) のみの場合にコードを実行する。次に例を示す。
      <script type="text/javascript">
      //Write "Lunch-time!" if the time is 11
      var d=new Date();
      var time=d.getHours();
      if (time==11) { document.write("<b>Lunch-time!</b>"); } <script><b>Lunch-time!</b>"); } <script>

    • if...else statementは、ある条件が、true の場合はあるコードを実行し、false の場合は他のコードを実行する。
      以下は事例。
      <script type="text/javascript">
      //If the time is less than 10,
      //you will get a "Good morning" greeting.
      //Otherwise you will get a "Good day" greeting.
      var d = new Date(); var time = d.getHours();
      if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); } </script>

    • if...else if....else statement の記述によって、多くに条件の中から適切な条件に合致するコードを実行させることができる。
      下に example を示す。
      <script type="text/javascript">
      var d = new Date()
      var time = d.getHours()
      if (time<10)
      {
      document.write("<b>>Good morning</b>");
      }
      else if (time>10 && time<16)
      {
      document.write("<b>Good day</b>");
      }
      else
      {
      document.write("<b>Hello World!</b>");
      }
      </script>


 この if...else if....else statement を応用して、下のような外部 js ファイルを秀丸でエンコードを UTF8 として Greeting.js というファイル名(拡張子が js であれば名前は何でも良い)作成し、ブログサーバーに ファイル転送ソフト(FFTP) でアップした。
//ブログ・タイトルに、挨拶を表示する JSファイル
var d = new Date();
var time = d.getHours();
if (time<10)
{
document.write("<span style='color: #ffffe0'><b>おはようございます!! 早くからのご訪問ありがとうございます。</b></span>");
}
else if (time>=10 && time<18)
{
document.write("<span style='color: #ffffe0'><b>こんにちは!! いつもご訪問ありがとうございます。</b></span>");
}
else
{
document.write("<span style='color: #ffffe0'><b>今晩は!! いつもご訪問ありがとうございます。</b></span>");
}
 変数 d time の定義の仕方は、学習を進めると出てくると思うが、今のところ examples の通りに使っている。
 文字色を指定する span タグの間に入れるダブルコーテション( "---")の文字列ははシングルコーテション( '---' )でなければならない。

 この js ファイルをブログ・テンプレートのタイトル表示部分に、下の記述を挿入した。
 朝10時までに訪問していただいた方には、「おはようございます。」、10時から18時までに訪問していただいた方には、「こんにちは」、18時以降24時までの間に訪問していただいた方には、「今晩は」と表示されるはずである。
<script src="http://n-shuhei.net/blog/Greeting.js"></script> 


今まで学習したことを自分のブログのカストマイズに生かせるのはもっと学習が進んでからと思っていたが、この時点でささやかながら応用できた。お勉強の励みになるというものだ。

 

隠居のお勉強:JavaScript Basic (3)

 雨が降り続くので、今日も JavaScript の学習を W3Schools Tutorial ですることにした。いつになったら自分のブログに使えるスクリプトが記述できるか分からないが、気長にやっていこうと思う。残された人生の時間はそんなに多くないが。

  • 今日は、[JS Comparisons] から。
    • Comparison Operators(比較演算子)は、変数あるいは値を比較し真 (true) 偽 (false)を決定する論理式で使用される。
    • 比較演算子の使用例を、下の図に表示する。

    • Logical Operators(論理演算式)は、変数あるいは値の論理の真 (true) 偽 (false)を決定するときに使用される。
    • 論理演算子の使用例を、下の図に表示する。

    • JavaScript は、ある条件下において、ある変数にある値を割り当てる Conditional Operator(条件演算子)も備えている。
    • Conditional Operator(条件演算子)は次のように使用される。


  • 次に、[JS If...Else] の学習。条件式の勉強である。
 Tutorial に例示されている Examples を見ていたら、自分のブログに応用できそうだったので、外部 JS ファイルを記述してタイトル部分に使用してみるとなんとか形になった。
 詳細については、次回のエントリーに掲載したい。

2008年3月19日

隠居のお勉強:JavaScript Basic (2)

 今日は朝から春雨が強く降っている。再開をはじめたDIYは今日はお休みにして、PC 前でRadio Senbokuを聴きながらJavaScript の晩学をした。教材は、W3Shools のものである。
 
  • 今日は、まずコメントの書き方について。
    • 一行に書くときは行頭に //
    • 複数行にまたがるときは、コメントの先頭に /* コメントの終わりを */ とする。
    • もちろん、スクリプトをコメントアウトするときにも使える。
  •  これは、当然のことながらActionScript の記述でも同じである。CSS では、/* -------- */ だけのようである。
     HTMLでは、コメントは一行でも複数行でも、行中でも、コメントの先頭は <!-- で、終わりは --> である。

  • 次に、[JS Variables] の学習 
    • Variables(変数)は、情報を格納するコンテナである。
    • 変数は代数学(Algebra)の x=5, y=6,, z=x+y → z=11 と同じように、x, y, z が変数である。
    • 変数は、carname="VOLVO" のようにテキストも値として持てる。
    • 変数は、大文字・小文字を区分する。また、変数名は、文字で始まらねばならない。JavaScript そのものが大文字と小文字を区分する。

  • 次に、[JS Operators] の学習
    • Operator(演算子) には、Arithmetic operators(算術演算子)や Assignment operators(代入演算子)などがある。
    • Arithmetic operators(算術演算子)には、つぎのようなものがある。

    • Assignment operators(代入演算子)には、つぎのようなものがある。

    • +プラス)演算子は、テキストの連結にも使われる。

 JavaScript Tutorial に使われている英語は、JavaScript Language Specification を参考にさせていただいた。普通の英語辞書には載っていない。

2008年3月18日

隠居のお勉強:JavaScript Basic (1)

 ブログで少し凝ったことを実現させようとすると Web を構成している言語を少しは理解する必要がある。HTML(HyperText Markup Language), CSS(Cascading Style Sheets)についてはある程度理解できるようになり、自分のサイトへの応用に少しはいじれるようになってきた。

 だが、カスタマイズに多用している JavaScript, Adobe Flash を制御する ActionScript については、ネットや参考書などで公開されている example を真似して作っている。それでは、少し自分向けにいじりたい場合には手も足もでなくなる。
 年寄りの冷や水であるが、基本的なことを学習しようかと思い始めた。学習したことをすぐ忘れてしまうので、自分自身への記録のためにブログ上に学習ノートを作ることにした。ブログとは、その語源からして自分のためようだから。

 教材は、W3Schools の tutorial を使うことにした。英語だが平易に書いてあり、頭の硬くなった老人でもなんとかついていけそうであるが、どこまで理解できるかは自信がない。

 W3Schools の Home 左メニューの BrowserScripting から Learn JavaScript を選択すると JavaScript Tutorial が出てくる。学習の仕方は、[JS Home] → [JS Introduction] とページを繰っていくのだが、ページの上下に [previous] [next] があるので、これに従えばよい。もちろん、記述は example とかお試しページや関連ページへのハイパーリンクが設定されている。これらへリンクした後は、最初の内は元のページに戻って、 [next] ボタンで次のページに進んだ方がよさそうだ。

 Tutorial の [JS Introduction] に、
JavaScript's official name is "ECMAScript".
The standard is developed and maintained by the ECMA organisation.
ECMA-262 is the official JavaScript standard. The standard is based on JavaScript (Netscape) and JScript (Microsoft).
 とある。一方、ActionScript のWikipedia による解説では、
ActionScript(アクションスクリプト)とは、アドビシステムズ社の製品であるFlashに使用されるプログラミング言語である。ECMAScript(ECMA-262)を拡張した物である。
 とある。JavaScript の学習は、ActionScript の学習でもあるのをはじめて分かった。お恥ずかしい話である。

 [JS How to] [JS Where to] までは、いままで曲がりなりに、エキスパート達の JavaScript を使ってきたので理解できる。   [JS Where to] で Using an External JavaScript を実験するために、
// これは、外部JSファイルを使う勉強用です。
document.write("<h1>これは、タグ h1 で書いています。</h1><br />");
document.write("<h2>これは、タグ h2 で書いています。</h2>");
document.write("<p>これは、タグ p で書いています。</p>");
 というような外部JSファイルをテキスト作成ソフト秀丸で作成し、サーバーに xxx_1.js というファイルをFTPソフト(私の場合 FFTP )でアップした。ファイルを作成するとき、エンコードは UTF-8 でなければならない。秀丸は、このような機能が備わっているから便利である。

 なお、このエントリーに記述したHTMLは、次のようなものである。
<script src="http://n-shuhei.net/blog/xxx_1.js"></script>


 この外部JSをこのエントリーで実行してると、結果は次の通りとなる。JavaScript のなかに記述した HTML タグは、そのまま実行される。 直接 HTMLでエントリー編集すればできることであるが、外部JSファイルを使う学習するためである。


 これを第1回とし、今後、W3Schools の順序に従って学習したことを記していきたい。

2008年3月14日

枝垂れ梅の満開:昨年よりも遅く

 今年は、2月に入ってから雪が降るなど寒かったので、我が家の枝垂れ梅の満開は昨年より3週間ほど襲い。ブログを見ると、2006年は3月11日2007年は2月18日にエントリーがある。

クリックすると大きな写真になりますクリックすると大きな写真になります 花が咲き出してから寒い日が続いたので、今年ははなもちが良いが、今朝の強い雨で地面が真っ白になるほど花が散ってしまった。毎年、この枝垂れ梅にはウグイス・メジロ・ヒヨドリが訪問する。今年は、この枝垂れ梅を見下ろす二階の部屋のガラス窓越しに、撮影を試みた。

 今朝ほど、ヒヨドリはバッチリと撮ることができたが、メジロはチャンスを逸している。辛抱強く撮りやすい枝への飛来を待つしかない。ウグイスは、来ても滞在時間が短いし、枝の中の方をウロウロしているので、きわめて撮るのは難しい。一度は捕まえたいと思っているが。

2008年3月13日

早春の泉北をブラブラと:泉ヶ丘大蓮公園など

 2008年3月12日、あまりにも天気が良いので家内が近所のどこかに散策しないかと声をかけてきた。この時期、花は少ない。梅見は先日荒山公園に出かけたところだ。

 ハーベストの丘近くに「直売所コスモス館」というのがあって花の苗や農産物を直売している。そのあたりは、畑も広がっていて菜の花畑も残っているかもしれないと出かけることにした。こういうときは、一眼レフとMP3 レコーダーをバックザックに入れていく。

クリックすると大きな写真になります 期待の菜の花は、用水路の土手に残っていた。小さなハチが吸蜜している。菜の花の咲いた土手をブラブラしているとNHK の朝ドラ「ちりとてちん」で草若師匠が得意としていた「愛宕山」の「空にはヒバリがピーチクパーチク 下には蓮華・たんぽぽの花盛り」という語りを思い出した。蓮華・タンポポは見あたらなかったが、ヒバリは「ピーチチュンチュン」と鳴いていた。ちなみに、この「ヒバリがピーチクパーチク」とは実際の噺家は話していないらしい。「遠藤マメ太郎」という人のブログでは、米朝はこの部分は「空にはヒバリがチュンチュンさえずって・・・」と演じているらしい。京都のヒバリは、「チュンチュン」ではないと駄目なんだそうである。

 昼食をチェーンのうどん店で摂ってから、昔住んでいたマンションの裏庭だった泉ヶ丘の大蓮公園に立ち寄った。大蓮公園の前にある駐車場は、なんと3時間まで700円となっている。それが、最小単位である。昼のうどん定食より高い。どうやら、存続が問題になっているビッグバンの駐車場に入らない車高の高い車用らしい。そんな小さな、駐車している車が私のを含めて2台しかない駐車場の管理に管理人が一人いる。よほど退屈なのか、ラジオをずっとならしている。橋下さん、ビッグバンの存続より、そちらの方が問題ですよね。

 30年も前に、休みなると幼児だった子供と遊んだ場所は樹木も大きくなり新しい建物も建っている。公園内には、昔から古代の陶器、須恵器(すえき)を展示・保存する泉北考古資料館もあるが、そのようなことに興味がないものには猫に小判だが、外国人を含めた参観者に館長自らが説明を買って出ていた。このような施設に対する風当たりが強いせいかもしれない。

クリックすると大きな写真になりますクリックすると大きな写真になりますクリックすると大きな写真になります 公園の広い芝生には、ハクセキレイがチョコチョコと歩いている。大蓮池沿いの遊歩道を辿っていくと、近くの桃山公園の遊水池にもいるヒドリガモがたくさん泳いでいる。そんなヒドリガモに混じって、キンクロハジロが、水面から姿を消しては少しはなれた場所に現れる。その池の岸辺に、親子(?)のカメが甲羅を干していた。かたわらの葉が落ちた樹では、名前の分からない小鳥が「ツーピーツーピー」と規則正しくさえずっていた。鳥の名前がさえずりで調べても分からないので、「ことりのさえずり」サイトのPika さんにMP3ファイルを添えて質問のメールを出してみた。まもなく、教えてくれるだろう。

(追記:2008/3/15)Pikaさんから、丁寧な返信をいただいた。かってですが、引用させていただいた。
こんにちは☆「ことりのさえずり」のpikaです。 あたたかくなりましたね!今日の雨は、なんとなくなまあたたかく。暑さ寒さも彼岸までとはよく言ったものだと思います。

さてさて、
>貴サイトの音をいろいろと聴きましたが、判別ができません。
>お暇なときに聴いて頂いて、鳥の名をご教示頂ければありがたいです。
これ、シジュウカラですね。よく、こういう声で鳴いています。

で、「ことりのさえずり」に収録されているシジュウカラのさえずりをきいてみたら、このリズムの声がはいっていませんで!おっと~、これは手落ちです。こんど、このリズムの声も録音できたら追加しなければと気づきました。ありがとうございます!

フィールドでは、ヒガラとの声の区別がむずかしいのですが、n_shuheiさんのこの録音の声は、声の強さからして、シジュウカラで間違いないと思います。

それでは、また!よいお散歩&鳥見&録音を♪


(追記:2008/3/18) 今朝ほどパソコンの前に座っていると「ツーピーツーピー」と鳴くさえずりが聞こえてきた。我が家の近くにもシジュウカラは飛来しているようだ。写真に収めたいものだが。Pika さんのように、Bird Feeder を設置してみようかと思っている。以前作ったものは、設計が悪いようで、小鳥は余り飛来しなかった。ネットに紹介されているものがあるので、参考にしてみたい。
 どんな餌を Bird Feeder に置いたらいいのかとネットでサーチしてみると、伊那西小学校5年生の素晴らしい研究報告を見つけた。この報告によると、縞のはいったヒマワリの種がいいようだ。ネットでなければ、このような報告はとてもお目にかかれなかっただろう。 

泉北近辺私的観光地図に掲載

2008年3月12日

Photo Thumbnail :野鳥の写真集

 今まで、撮り貯めた野鳥のサムネイルを MT用フォトサムネイラーを利用して作ってみた。
 自宅の庭、近所の公園、山小屋などで、鳥の姿を見かけるとできるだけ写真を撮るように心がけてきたが、野鳥を撮るために超望遠・三脚など本格的な体制ではないので、良い写真はあまりない。MP3 レコーダー EDIROL R-1 で録音した野鳥の鳴き声もこれらのエントリーに収録されている。

 野鳥の写真サムネイルを新しく設定いたしました。
 http://n-shuhei.net/atelier/web/birds.php へお越しください。


   

2008年3月11日

MT用フォトサムネイラーのインストール

 このブログに 2005年3月から掲載してきた種々雑多な写真も結構な量になってきた。これらの写真をカテゴリー別にアルバムにしたいと、ブログのタイトルなどで使っている Sothink SWF Quicker という Flash 作成ソフトのテンプレート利用も考えてきたが、日本語対応ができないなど意図したとおりにできないので諦めていた。

 写真のアルバムは、DIY作品集で実現しているが、新しいエントリーをあげるたびに修正しなければならないなど結構面倒な作業である。サムネイルに載せる写真を選択できるのは、いい点であるが。

 Flash カレンダーや Flash 天気予報を利用させていただいている Kinarie&May さん にMT用フォトサムネイラーというエントリーの中の画像ファイルをサムネイルで表示する Flash プラグインがある。前から気になっていたが、トライする機会がないままになっていた。今回、試してみると思い通りのインストールができたので、注意点などを記録として残しておきたい。

 次のサムネイルは、私のブログでカテゴリーを Gardening として分類しているエントリーに掲載されている写真である。下の << Prev ボタンをクリックすると日付を遡って見ることができる。サムネイルをクリックすると該当するエントリーが表示される。サムネイルに戻る場合は、ブラウザーの戻るボタンを使う。

   


 インストールの手順は、Kinarie&May さんのMT用フォトサムネイラー1.20 に親切に書いてある。
 以下は、注意点。
  • サムネイルされる写真は、HTMLに、<"img","src" >で指定される .jpg 写真である。いずれも小文字でなければならない。Picasa2 でエクスポートした写真は、大文字の .JPG となりサムネイルされないので要注意である。
  • テンプレートの新規作成で作成した xml ファイルは、作成した blog のルートフォルダーに保存される。ダウンロードしたphoto_thumbnailer120.zip を解凍してできる photo_thumbnailer120.swf ファイルは、同じフォルダーに置けばよい。
  • カテゴリー別にサムネイルを作る場合は、 xml ファイルの中で、<MTEntries category="004Gardening" lastn="999"> のようにするが、category の名前は、ブログ管理画面のカテゴリー名と一致させる必要がある。なお、サブカテゴリーも指定できる。私の場合、ソートのためにつけていた頭3桁の数字を忘れていたので、当初上手くいかなかった。
  • いくつかのカテゴリーでサムネイル集を作成する場合は、出力名を変えた xml ファイルをいくつか作ればOKである。

 このプラグインを応用して、私のサイトで運営している友達のブログの写真集とかのようなカテゴリー別のサムネイル集を作成していきたいと考えている。
 Kinarie&May さん Thanks a lot !!

(追記:2008/3/12) 私のサイトで運営している Studio YAMAKO はプロ級の腕前の YAMAKO が撮った趣味の蝶の写真が中心である。この蝶の写真のサムネイルを MT用フォトサムネイラー1.20 で作成してみました。右サイドメニューの Studio YAMAKO をクリックしてみてください。素晴らしい写真集がご覧になれます。

(追記:2008/3/13)サムネイルされる写真の拡張子は小文字の jpg でなければならない。ブログに写真を掲載するには Picasa2 でデジカメ写真を整理しエクスポートするのが便利であるが、拡張子が大文字の JPG となる。そのため、MTで写真ファイルをアップする前に該当するフォルダーの写真ファイルを Renamin.exe で拡張子を小文字の jpg としなければならない。ただし、この逆手をとって、サムネイルに載せたい写真だけ、小文字の jpg とする手もあるが、サーバーとエントリーのファイル名を変えねばならない。 

2008年3月10日

晩冬の仁和寺

 娘から頼まれたシューズラックを届けた午後、ようやく空も春めいてきたので仁和寺に行ってみることにした。仁和寺といえば、「徒然草」御室の桜がすぐに思い浮かぶが、この時期広い境内で見た花は書院の庭に咲くピンク色の小さな梅と宸殿の北庭に配された馬酔木の白い花だけであった。

クリックすると大きな写真になりますクリックすると大きな写真になります  双岡を背景とするこの寺は、真言宗御室派総本山というだけあって非常に広大である。中門から金堂への参詣道の左側には、京都で最も晩く咲くという背の低い御室桜がぎっしりと植わっている。蕾はまだまだ固いが、4月の終わりにはきっと素晴らしい花見ができるにちがいない。昨年は醍醐寺に行ったが、今年はもう一度ここを訪ねてみたいものだ。

クリックすると大きな写真になりますクリックすると大きな写真になります 拝観に一人500円とられる「仁和寺御殿」は、宸殿・黒書院・白書院の広い縁で巡っていく。午後の暖かな日差しを浴びて、広い縁に座り込むと心が癒されるようだ。いつの季節でもいいようにつくってあるんですね。拝観券の裏に、仁和寺御殿について以下のような案内がある。

 御殿と呼ばれれているところで、宸殿を中心にして、左側に白書院・黒書院があり、北に池泉の北庭と、南に白砂と杉松の簡素な枯山水の南庭がある。左近の桜、右近の橘も植えられている。仁和寺再興の際(江戸初期)、京都御所の常御殿(おつねごでん)を移築したものであったが、明治20年(1887)火災のため焼失した。その後、明治から大正期にかけて、当時の最高の材と技術をもって建築された。


京都・奈良私的観光地図に掲載   

ファルカタ集成材と桐すのこで作ったアンティーク風シューズラック

 京都で一人住まいしている娘から、玄関の小さなスペースに脱ぎ放しの靴をなんとかしたいので、狭い場所に置けるくつばこを作って欲しいとスケッチとともに依頼してきた。

 まだ外で作業をするのは寒かったが、材料を求めにホームセンターに走った。できるだけ軽く作って欲しいということなので、桐の集成材を求めたいと思ったが適当な大きさのものがなかった。いろいろと物色すると、まだ使ったことのないが、ファルカタ集成材いう材が桐集成材のように軽くて手頃な価格であったので、側板にこれを使うことにした。18x300x910mm の大きさで700円ほどである。これを充電式マルノコで注文の幅280mm に切断した。端材は、横方向の補強として使った。

クリックすると大きな写真になりますクリックすると大きな写真になりますクリックすると大きな写真になります 横仕切り棚板は、押し入れ桐すのこ4枚打ち2枚セットが、298円の特価で売っていたのでこれを3セット購入した。
 すのこは、そのまま使うのではなく打ちつけてある桐板を使うためである。写真のように、ちょっとみには板は桟に打ち付けていないように見える。この板をのみと小型のバールを使って、一枚ずつはがした。接着剤だけで桟に付いているのかと思ったが、木材用のホッチキスで留めてあり、はがすと傷跡が残る。これは水で練ったとのこで埋めた。

クリックすると大きな写真になりますクリックすると大きな写真になります 側板には、施主さんの注文である寸法に棚をつけるために、ルータで溝を掘った。この溝に、幅の狭い板をはめ込んでいく仕様である。実は、この組み立てが最も難しかった。釘を余り使いたくなかったのだが、このときに細い化粧釘を使わざるをえなかった。
 組み立てる前に、注文のオイルスティンで塗ることにした。OSMOカラーが、オイルスティンかどうかよく分からないが、以前から気になっていた塗料なので、今回ネットで取り寄せ使ってみることにした。ホームセンターの割引券があったので奮発して少し高いすじかい刷毛を求めた。やはり、いい塗料といい刷毛を使うと塗りやすい。ただ、乾燥が遅く臭いがいつまでも続くのは欠点である。

クリックすると大きな写真になりますクリックすると大きな写真になります シューズラックの横に、傘をかける金具を取り付けて欲しいとの要望もある。写真のようなソケット金具を買ってきて、以前に100円ショップで手にいれていた径9.5mm のステンレス・パイプを金ノコで切って組み合わせた。太い傘の柄では高さが足らないので、すのこの桟で作った木片を木工ボンド側板に貼り付け、その上に金具についていた木ねじでとりつけた。このあたりが、DIYのいいところかもしれない。

 できあがったので、さっそく京都まで運んだ。雑然としていた玄関のスペースが、すっきり収まったので娘が及第点をくれた。ちょっと出せば体裁いいものが手にはいると思うが、狭いスペースにピッタリなのがいいのかもしれない。ラックの上に、もらったこけ玉を飾っていた。 

2008年3月 9日

MP3GainによるMP3ファイルの音量一括調整

 eMusic などでダウンロードした MP3 ファイルの音量を一括して調整は、SoundEngine というソフトを使ってきた。ダウンロード MP3 曲の音量一括調整(2)でも書いたように、SoundEngineでは、いったん .wav ファイルに変換し、音量一括調整したうえで、再びMP3ファイルに変換しなければならない。

 最近になって、MP3Gain というアメリカ生まれのフリーソフトが、MP3 ファイルの音量一括調整の主流であることを Google Search で知った。このソフトは世界的に支持されているらしく、30近くの言語に翻訳されている。多分、ボランティアであろう。

 このソフトはエンコード・デコードをしないので、音質の劣化がないということである。早速、MP3Gain のサイトから、"This is what most people will want to download."という mp3gain-win-1_2_5.exe ダウンロードし、インストールした。

 インストール・ウィザードの中で、27言語の中から言語を選択する部分があるので、Japanese をチェックすると、MP3Gain(MP3GainGUI.exe) のツールバーに、Language が表示され、ここで Japanese をチェックすると日本語画面となる。このような言語選択方式ははじめてである。

クリックすると大きな画面になります  使い方については、ネットをサーチするとたくさんヒットするのでそちらを参考にする手もあるが、左の screenshot のように、MP3Gain のヘルプの中の "How Do I ?"に親切に書いてあるので、それを参照するのがよい。この部分はまだ日本語に翻訳されていないが、画面もとりいれられてたり、平易な英語で書かれているので抵抗感はあまりない。
(追記:2009/3/10)ヘルプの日本語化を REIKA さんという方がされたようだ。
 方法は、MP3Gain のホームページにある 5 Feb 2009のHelp file into Japaneseをクリックして zip ファイルを保存する。保存した mp3gain-japanese.zip を解凍すると出てくる MP3GainJapanese.chm ファイルを mp3gain-win-1_2_5.exe ファイルと同じフォルダーに置くだけでよい。


 ただ、注意点もあるので、まだ十分に使いきれていないが、自分自身のためへの備忘録として書き留めておきたい。
  • MP3Gain を使って音量一括調整をしたときの log はファイルとして残される。初めに、「オプション」→「ログ」を開くと分析ログ・ファイルが空白となっているので、MP3GainGUI.exe を置いたフォルダーのパスで、MP3GainAnalysis.log というような名前でファイルを作っておく。
  • 音量一括調整には、2つの方式がとれる。全てのファイルを同じ音量にするときには、トラック分析、トラックゲインを使う。アルバムCDなどをMP3録音したときのアルバム全体抑揚を残したまま音量を上げ下げしたいときは、アルバム分析、アルバムゲインをつかう。
  • 音量一括調整するファイルは、同じフォルダーで書き換えられるので、オリジナルを残しておきたい場合は、コピーをとっておいた方がよい。


 このエントリーを書いていて気になったことであるが、MP3Gain と SoundEngine とでは、音量の表現が異なることである。どちらも同じ dB という記号を使っているが、MP3Gain は 90dB という数字になり、同じくらいの音量が SoundEngine では -16dB というような数字で表現される。この違いをネットサーチしてみたが、数学音痴の私ではよく理解できるページにいきあたらなかった。どうやら dB はいろいろな値の表現に使われるらしい。MP3Gain の 90dB とは、dBspl(Sound Pressure Level) らしいと理解したのだが。

 この学習のおかげで、 SoundEngine のほうがマニア向けで、音を編集するための細かい機能を備えていることが分かった。私のような素人でも、音楽をつないだり、切ったり、フェードアウトさせるなどするときには、 SoundEngine を使う必要がある。ただ、ダウンロードしたMP3ファイルの音量一括調整に使うのには、MP3Gain のほうがずっと簡便である。