『教育用G3Xパッチメイカー』(Step 17 スタイルシートの巻)
先頭へ1つ前へProへ

 /    (^)  (^) \   

スタイルシートを使うとパーツや表の色や位置を細かく指定するときにとても便利だyo
とりあえず画面を少し派手な感じに変えてみたyo(微笑)
UNIT (1st Prm) (2nd Prm) (3rd Prm) LEVEL
NR Thrsh
DRIVE Gain1 Tone‏ ‏ ‏
AMP Gain2 Tube‏ ‏ ‏ Cab
CHORUS Rate ‏ ‎ Depth Mix1
DELAY Time ‏ ‎ F.B. ‏ ‏ ‏ Mix2
REVERB Decay Tone2 Mix3
EX-PEDAL  Input Vol  Output Vol  Auto Assign  Off PATCH LEVEL
CTRL-SW   Tap Tempo Bypass/Mute Hold(Delay) InputMute(Delay) InputMute(Reverb) Off
Contents of patch group file 

Just copy this data and paste it to ".g3xa" file of Edit&Share on any text-editing software.

【解説】

まずはEdit&Shareの画面上でパッチ数を100にする方法から説明するyo

   //後方をスルーパッチで100まで埋める
   for(ep=0;ep<20;ep++){
      PGX=PGX+"<PatchData><Module0><Prm1>107</Prm1></Module0><Module1><Prm1>107</Prm1></Module1>
<Module2><Prm1>107</Prm1></Module2><Module3><Prm1>107</Prm1></Module3>
<Module4><Prm1>107</Prm1></Module4><Module5><Prm1>107</Prm1></Module5>
<Module6><Prm0>100</Prm0></Module6></PatchData>";
   }

パッチは80個つくって、20個分を空きエリアにするよ。そうしたほうが何かと整理しやすいからねw そこで、パッチ作りを
80回ループさせた後に上のような各モジュールにthrough(id107)を書き込んだパッチを20個つくってやればいいだけだよ。
これをしないとパッチ枠が80個だけになるし、何かのはずみで100パッチが表示されるんだけど、そのときもM-Filter(id0)
ばっかり表示される奇妙なパッチになるんだよねw(苦笑)

次はスタイルシートだよ。このページではHEADの中に下のような指定を書き込んでるyo

<STYLE TYPE="text/css">
BODY {font-size:11pt;color:#000044;
          font-family:serif;font-weight:100;}
td { font-size:10pt;color:#000044;
          font-family:sans-serif;font-weight:100;}
.titlefont { font-size:11pt;color:#000044;
          font-family:sans-serif;font-weight:100;}
.makebtn { background-color:#339922;color:#ffffff;font-size:9pt;
        width:auto;padding:3pt;margin:0pt;hspace:3pt;border-style:outset;
        border-width:4pt;border-color:#aaaaaa #aaaaaa #999999 #999999;}
.line1 { font-size:9pt;color:#000044;
          font-family:sans-serif;font-weight:100;text-align:center;background-color:#ccf4cc;}
.sel {color:lime;background-color:black;border-style:solid;border-width:2;
       border-color:#888888;font-size:9pt;z-index:3;}
.greenback {background-color:#ccf4cc;}
.whiteback {background-color:#fbffff;}
.blueback {background-color:#f0f4ff;}
.creamback {background-color:#fffffa;}
</STYLE>

BODYとtdの行は、そのタグではさまれた所で他の指定が特にない場合に適用される書式だよ。「.」で始まる行はそれぞれ
「class="◯◯"」というふうに各タグで指定されている場合に適用される書式だよ。たとえば、一番上のパッチをつくる大き
なボタンは

<button type="button" onClick="g3xpm()" class="makebtn">MAKE PATCH DATA!</button>

という風に記述されているので「.makebtn」の行の指定で色や外側の枠線などが細かく設定されているよ。まあ、各パラメ
ータの意味は英語なのでだいたい理解できると思うけど、詳しくはスタイルシート辞典みたいなものを見て自分で理解する
ようにしてよ。ボクも実際、辞典を見ながら書いてるだけだからw(苦笑)

スタイルシートは上のようにHEADに記述する方法もあれば、個別のパーツのタグに直接書き込む方法もとれるよ。たとえ
ば、下のほうにある「Select all lines」のボタンはこんなふうに記述してるよ。

<button type="button" STYLE="width:auto;height:14pt;">Select all lines</button>

buttonタグの中に「STYLE="     "」というふうに書き込んでるでしょ。1個だけのパーツを指定するときならこっちのほうが
手っ取り早いからね。逆にいくつものパーツに同じ書式を適用するときはHEAD内にまとめた方が断然便利だよね。あと、
スタイルシートだけ別ファイルにしておき、複数のページから同じ指定を読み込むという方法もできるよ。ボクはそこまでは
やってないけどねw

というわけで、長々と講座を続けてきたけど、今回で一応終了ということになるyo JavaScriptやHTMLの初歩も含めて解
説という非常に困難な方法をとったけど、こうすることで初心者が覚えなくちゃいけない膨大な事柄で迷子になりにくいん
じゃないかなと思ってるyo 基礎だけ説明、応用だけ紹介、というのはラクだけど、結局どこをどうしたら何が出来るのか
初心者にはサッパリわからないということが多いからne(ありがち笑) G3Xのスペック、Edit&Shareのデータ構造、ボクが
定義しているデータベース関数の仕様、パッチメイカーがやってること、各エフェクトやパラメータの扱い、ペダルやスイッチ
のアサイン方法、G3Xのバグ等々、いろんなことを押さえた上でプログラムが成立してるんだということはわかってもらえた
んじゃないかなと思うyo(微笑)

こいつは「パッチメイカーE for G3X」として本日リリースするyo こいつの機能は「パッチメイカーPro for G3X」を一部凌駕
しているので、Proのほうも負けてられないよね。ここでの新機能なんかもフィードバックして今後Proをテコ入れしてみよう
と思うので、そちらの方で【解説】の続きを随時掲載しようと思うのでよかったらチェックしてne(完了笑)

先頭へ1つ前へProへ