『教育用G3Xパッチメイカー』（Step 2　使うパーツの巻）
先頭へ１つ前へ次へ

　／　 　 （^） 　（^） ＼　　　

今回はまず基本中の基本のパッチメイカーで使うHTMLの部品パーツから説明だyo
UNIT (1st) (2nd) (3rd) LEVEL
NR そっち こっち 許可する
Contents of patch group file　 

【解説】

いきなりだけど、上の画面のソースを表示するyo　一部簡略化してわかりやすくしてるけどね。
こういう文字列を打ち込んで保存したテキストファイルの拡張子を「.html」にして、ブラウザで開いてやればwebページが
出来上がるってわけさ。それをネット上のサーバーに転送すればだれもが見られるwebサイトになるってわけだyo


<HTML>
<HEAD>
</HEAD>
<BODY>
<form name="edu">
<span class="titlefont">『教育用G3Xパッチメイカー』（Step 2　使うパーツの巻）</span>　　
<table border=0 STYLE="border:4pt solid #aaaaaa;" width=700>
   <tr>
      <td colspan=6 bgcolor="#ffffff">
         <br>　／　 　 （^） 　（^） ＼　　　<button type="button" class="makebtn">まだ中身はカラだyo</button><br><br>
         今回はまず基本中の基本のパッチメイカーで使うHTMLの部品パーツから説明だyo
      </td>
   </tr>
   <tr bgcolor="#ccf4cc" class="line1">
      <td width=40></td>
      <td width=100>UNIT</td>
      <td width=100>(1st)</td>
      <td width=100>(2nd)</td>
      <td width=100>(3rd)</td>
      <td width=100>LEVEL</td>
   </tr>
   <tr bgcolor="#f9f9c0">
      <td>NR</td>
      <td>
         <select name="NRsel">
            <option value=107>(through)</option>
            <option value=27 selected>ZNR</option>
            <option value=28>NoiseGate</option>
            <option value=29>DirtyGate</option>
         </select>
      </td>
      <td> <input type="text" name="hako" size=8 value="nakami"></td>
      <td><input type="radio" name="FM" value=0 checked>そっち</td>
      <td><input type="radio" name="FM" value=1>こっち</td>
      <td><input type="checkbox" name="reten">許可する<input type="hidden" name="ninja"></td>
   </tr>
   <tr>
      <td bgcolor="#f0f4ff" colspan=6>
         Contents of patch group file　
         <button type="button" style="width:auto;height:14pt;">Select all lines</button><br>
         <textarea name="kekka" rows="3" cols="100" wrap="soft" style="font-size:7pt;">
            まだ何も動かないyo
         </textarea>
      </td>
   </tr>
</table>
</form>
</BODY>
</HTML>


見てわかりやすいようにわざわざ段差をつけたけど、たとえば<tr>で始まった括弧が</tr>で閉じられる構造になって
いて、その中にまた<td>の括弧が入っていたりする「入れ子構造」になってるのが基本だよ。括弧を閉じ忘れたりする
と画面の表示がムチャクチャになるのですぐわかると思うよ。では、順に見ていこうかw

まず<HTML>。これは、今からHTML（ハイパーテキストマークアップ言語）でwebページを記述するよ、という合図だね。
一番最後に</HTML>で終了の合図をしているよ。基本は全部こういうパターンだよ。

次は<HEAD>と<BODY>。<HEAD>はそのwebページに関するさまざまな属性情報を記述したりする場所で、<BODY>は
具体的にwebページの中身を記述する場所だよ。今回は<HEAD>には何も書かずにカラッポにしてるよ。

<form>は、今から記述するいろんなパーツの所属を表す住所みたいなものだよ。今回は"edu"という名前をつけて、
すべてのパーツを所属させているよ。JavaScriptでそれぞれのパーツから情報を読み込んだりするときは、必ずこの
formの名前もつけてパーツを指定するので、まさに住所みたいなものだと覚えておいてne

<span>は見出しをつけるときによく使うよ。その部分だけフォントの大きさや色を変えたり、表示する位置を細かく指定
したりするのに便利なのでよく使われるよ。中に書いてるclassっていうのはスタイルシートというやつで書式を指定して
いるものなので、これはややこしいので後日説明するよw

次はいよいよ<table>だね。これはものすごく重要だよ。パッチメイカーのような画面もそうだし、あらゆる四角い形状の
もの、表形式のものをデザインするときに使えるのがこのtableだよ。内部には<tr>というタグがあって各行を表すよ。
さらに<td>というタグは行の中の各列を表すよ。tdタグで挟まれた部分に、そのマス内に表示したい中身を記述するよ。
<td colspan=6>って書いてあるのは、そこは横６マスぶち抜きで連結って意味だよ。

あと、<br>ってのはtable内に限らずどこでも使えるんだけど、改行をさせる記号だよ。これは閉じるタグの</br>って
やつはいらないパターンのタグだよ。

<button>はその名の通り、押しボタンを表示するよ。ここでもclassを使って色指定や影の表示をやってるけど、それは
また後日に説明するよ。

次はずーと飛んで<select>だね。これも名前の通りで、セレクトメニューを表示させるタグだよ。内部に<option>タグで
選択肢の情報を記述するようになってるよ。選ばれてる行のvalue=27とかの値を読み込んで色々な処理ができるよ。

(1st)の下に表示されてるのが<input type="text">だよ。inputタグも閉じるタグは必要ないよ。ここではhakoという名前
をつけたこのテキストボックスの中身にnakamiというテキストを表示させているよ。

(2nd)と(3rd)の下にあるのが<input type="radio">というラジオボタンだよ。この２つはname="FM"という同じ名前なので
どちらかを押せば必ずもう一方は自動的にオフになるよ。この仕組みはボタンをいくつ増やしても有効なので、多数の
中から１つを選ぶ仕組みを作るときに便利だよ。

一番右にあるのが<input type="checkbox">というチェックボックスだよ。これはオプション仕様の有無を選ぶときなん
かによく使われるボタンだよ。

実は画面上では見えないけど、さらに右側に<input type="hidden">という隠しフィールドがあるんだよ。これは一時的
に文字列や数値などを保管しておきたいけど、ユーザーの目にふれさせる必要がない場合に使えるパーツだよ。
ただし、webページを閉じてしまうとその一時保管データは失われてしまうので、隠しフィールドであろうと、表示されてる
テキストボックスであろうと、次に開いたときもデータを継承できるようにしたければ、cookieを使ってデータの読み書き
をしないとダメだよ。cookieはかなり難易度の高い話なので今回の講座ではふれないけど、一応そういうものがあるって
ことは覚えておいてne

最後は<textarea>だよ。これは複数行にわたるテキストを表示できるものなので、パッチデータの生成結果を表示する
のになくてはならないパーツだよ。このテキストエリアの右下をグーーッと引っ張ってやるとサイズを自由に広げることが
できるんだよ。あっ、ブラウザによっては対応してないのかもしれないけどねw（無責任笑）

以上がパッチメイカーで使うパーツだよ。これだけわかっておけば、とりあえずここから先の話についてこられるから
安心していいよ。JavaScriptでこれらのパーツから情報を読み取って、パッチデータを生成していくというわけさw
先頭へ１つ前へ次へ