home WINユーザーも、MACユーザーもこれなら出来る!?
CGI設置・アレンジ講座
Menu
1 はじめに
2 まずはダウンロード
3 次にエディットを
4 そしてアップロード
5 パーミッション設定
6 いよいよCGIアレンジ
7 トラブルの解決
8 Q&A
《Back To CGI Home》


AND OR
● 2 いよいよCGIアレンジ
■ CGIアレンジとは?
  • 自分の個性を出そうとすると、どうしても初期設定だけでは満足できない事も有るでしょう。その時は、直接 スクリプトをアレンジしなくては成りません。
  • 当サイトで配付している殆どのスクリプトの、ヘッダー、入力フォーム、 などのHTML部分は、分かり易くスクリプト上に構成記述されています。
  • 本講座でいう「CGIアレンジ」とは、このスクリプト上の主にHTMLで記述されたデザイン部分を編集することを目的としています。
  • しかし、このことはCGIの改造を意味するものであり、これからの作業は、各本人が責任を持って 行なっていただく必要があります。
  • 以下の項目を参考にステップバイステップで動作を確認しながら作業を進めます。
■ 準備するもの
  • 必要なソフトは既に準備してある、エディター、FTPソフト、スクリプトチェッカー、 などに加えて、至れり尽くせりの機能を装備した 《フォトショップ》が有るとよりハイレベルなデザイン編集が可能になります。
  • CGIスクリプト内に散在する変数の書いてある場所を調べるのに、又、サブルーチンの場所を探す時などに 欠かせない次のテクニックをマスターしましょう。

      TeraPadの場合
    1. メニューバーから[検索(S) → 検索(F)」を実行。
    2. 「検索する文字列(T)」に検索したい文字列を入力
    3. 「先頭から検索(O)」を実行します
    4. 続いて、メニューバーから「検索(S) → 下を検索(D)」を実行すると、 次の文字列を検索します。

      Jeditの場合
    1. 「選択範囲を検索語へ取り込み」のキーコマンド  コマンド+E
    2. 「次を検索」のキーコマンド           コマンド+G
    3. 「次を逆順に検索」のキーコマンド        シフト+コマンド+G

  • Jeditでの「プロの技」

    1. 左手小指でコマンドキーを押さえ、中指を「E」、人さし指を「G」の上でキープする。
    2. 探したい変数の文字をダブルクリック。
    3. 左手でEを押す。(選択範囲を検索語へ取り込み)
    4. 次にGを押すたびに同じ変数が順にハイライトする。
■ CGIスクリプトの基礎知識
変数とは?
何らかの値を保持するための格納場所で、$、@、%、で始まる記号です。
例;$adminpass = "abc";
こうしておくと以後、「$adminpass」 と記述してあるところは、「abc」 と理解するようになります。

サブルーチンって?
何らかの作業をを保持するための格納場所で、sub 名前、で始まる箇所で、&名前 で呼び出せます。

例;

sub titledezine{ここから
 
 
 
}ここまで

がサブルーチンです。
こうしておくと

&titledezine;

と記述してあるところで上記のサブルーチン部分が実行されます。
HTMLはどう記述されているの?
    次のいくつかの方法で書かれています。

  1. print文

      例;

      print "<br><br>";

      ここでは、改行を二つ表示しています。
      表示がややこしくなるので、多用していません。

  2. ヒアドキュメント文〜その壱

      例;

      print <<EOD;ここから
       
       
       
      EODここまで

      この間は、ほとんど普通にHTMLとして理解され、変数も変換されて理解されます。 なお、ここで使われた、EOD、は、好きな文字列に変更してかまいません。

  3. ヒアドキュメント文〜その弐

      例;

      $stylesheet = <<EOD;ここから
       
       
       
      EODここまで

      この間も同じくHTMLとして理解されますが、この記述された場所では表示されずに 代入された変数である、$stylesheet が記述されている所、

      $stylesheet

      で、表示されます。
■ アレンジ例 (全文検索ママズ)
  • 当サイトで配付している掲示板CGIにはそれぞれのマニュアルに アレンジの例が有りますのでそちらをご覧下さい。
  • ここでは全文検索スクリプト「ママズ」のデザインアレンジを例にしてみます。
  • 「mamas.cgi」の初期設定は、茶色系ですので、これをブルー系に変更し、 タイトルも「マニュアル内検索」としてみましょう。
  1. 「ページ背景色」の変更をします。

    73行目のボディータグ
    bgcolor="#560605"

    bgcolor="#212B52"
    と、ダークブルー系にします。

  2. フォトショップの場合カラーピッカーから同系色で少し明るい色「#525C80」 を選択し「検索フォームテーブルと、フォームの背景色」に設定します。

    75行目 検索フォームテーブルと、フォームの背景色
    $tablecolor = "#8F7979";

    $tablecolor = "#525C80";

  3. 次にタイトル部分を変更します。
    まず、「●ヘッダ表示」という文字を検索し、 サブルーチン「sub head」を表示 させておきます。ここは、HTMLでページのヘッダ部分と、タイトル部分が記述されている 所です。

    305行目〜399行目がタイトルのテーブルです。

    <center>
    <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
    <tr>
    <td><font size=6 color=$tablecolor>●</font>
    <font size=6 color=#ffffff>$scriptitle</font>
    <font size=6 color=$tablecolor>●</font>
    <font size=5 color=#9C8686>●</font>
    <font size=4 color=#AB9696>●</font>
    <font size=3 color=#B8A5A5>●</font>
    <font size=2 color=#C7B5B5>●</font>
    <font size=1 color=#D6C7C7>●</font>
    $home</td>
    </tr>
    </TABLE>
    </center>

    これを今回 カラーデザインも背景色に合わせて変更し、 タイトルも「マニュアル内検索」と書き換えます。

    まず47行目でタイトルを変更します。
    $scriptitle = "マニュアル内検索";

    続いて例えば以下のように太字の部分を書き換えます。

    <center>
    <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
    <tr>
    <td><font size=6 color=$tablecolor>●</font>
    <font size=6 color=#ffffff>マニュアル内検索</font>
    <font size=6 color=$tablecolor>●</font>
    <font size=5 color=#707999>●</font>
    <font size=4 color=#8991AB>●</font>
    <font size=3 color=#A1A8BF>●</font>
    <font size=2 color=#C1C5D4>●</font>
    <font size=1 color=#DADDE5>●</font>
    $home</td>
    </tr>
    </TABLE>
    </center>

  4. 一寸凝って、「検索」、ボタンの色を際立たせるために少し暗く(#3D4870)します。

    スタイルシート部分の
    90行目
    .btn {color:#ffffff; background:$tablecolor; }

    .btn {color:#ffffff; background:#3D4870; }

  5. 出来上がりサンプルは本マニュアルの検索CGIとして実働中の これ です。



Copyright (C) p.ink All Rights Reserved.