にしし ふぁくとりー:西村文宏 個人サイト

Presented by Nishishi via Movable Type. Last Updated: 2023/10/28. 23:32:10.

てがろぐCGIをローカルPCで動かす方法

てがろぐCGIをローカルのWindows PCで動かす方法

拙作のフリーCGI「てがろぐ」をローカルのWindows PC上で動かす方法はいろいろあります。要は、Windows上でPerlが動作するようにして、何らかのWebサーバ(ソフトウェア)が稼働している状況を用意すれば良いだけですから。

ここでは、てがろぐ作者(=私のこと)が、てがろぐ開発時にローカルで動かしている方法を紹介します。
方法は簡単で、PerlはXAMPPでインストールし、Webサーバは「AN HTTPD」を使います。どちらも無料で使えます。

※XAMPPにはWebサーバとしてApacheが含まれていますからそれを使っても良いのですが、Apacheは規模が大きくて設定や仕組みの把握が大変ですし、ローカルのApache上でてがろぐCGIを稼働させるにはtegalog.cgiのソース1行目を編集する手間も必要ですから、ここでは使いません。代わりに、Windowsで動作する軽量なWebサーバである「AN HTTPD」を使います。

たぶん、目にするほぼ全ステップを記したと思いますので、下記の画面イメージを見つつ操作すれば、おそらく迷い無く進められるのではないかと思います。(^_^;)

※以下では、Windows11を使った画面イメージを掲載していますが、それ以前のWindowsでも(ほぼ)同様の手順でセットアップできます。

必要なソフトをダウンロードする(ファイル3つ)

まず、XAMPPと、AN HTTPDと、てがろぐをダウンロードしておきましょう。それぞれ、以下のページからダウンロードできます。

  • XAMPP(上部のダウンロードボタンからダウンロードできます。)
  • AN HTTPD(ページ中程にある「httpd142p.zip」のリンクからダウンロードできます。)
  • てがろぐ

この記事を書いている現在では、下記のサイズの3ファイルがダウンロードできました。

  • XAMPPインストールファイル(148MB)
  • AN HTTPD ZIPファイル(1.02MB)
  • てがろぐ完全構成ZIP(0.5MB)

動作にはWindowsが必要ですが、Windowsならそこそこ古いバージョンでも大丈夫だと思います。

PerlをインストールするためにXAMPPをインストールする

まずは、XAMPPをインストールしましょう。

ここで必要なのはPerlだけなので、(わざわざXAMPPをインストールしなくても)ActivePerlやStrawberry Perl等を単独でインストールする手もあります。しかし、XAMPPをインストールすれば、「てがろぐCGIが必須としているPerlモジュール」も同時にインストールされるので、手間が省けます。

※てがろぐCGIが必要とするPerlモジュールは Time::Local と CGI.pm です。これらのうち、Time::Localは標準モジュールなのでPerl単体にも含まれているのですが、CGI.pmは(昔は標準モジュールだったものの)今では標準から外されてしまっているためPerl単体には含まれていません。そのため、ActivePerl等のPerlを単独でインストールした場合は、不足しているモジュールを自力で別途インストールする必要があります。一方、XAMPPなら、標準外のモジュールも含んだ状態でインストールしてくれるので楽です。(インストール先の perl\vendor\libディレクトリに多々収録されています。)

▼XAMPPのインストール手順

以下の手順でインストールして下さい。

  1. XAMPPインストールファイル まずは、XAMPP公式サイトからダウンロードしたインストーラを起動します。
  2. Important! Because an activated User Account Control (UAC) on your system some functions of XAMPP are possibly restricted. With UAC please avoid to install XAMPP to C:\Program Files (missing write permisssions). Or deactivate UAC with msconfig after this setup. ※もしかしたら、最初に図のような警告ダイアログが表示されるかも知れません。このメッセージは、「XAMPPを C:\Program Files にはインストールしないで」と注意を促しているだけです。インストール先の指定画面になったときに他の場所を指定すれば良いだけなので、ここでは単に「OK」ボタンを押して閉じれば良いです。
  3. XAMPPセットアップ1 XAMPPのセットアップウィザードが起動したら、図のようなウインドウが出てきます。
    「Next」ボタンを押して下さい。
  4. XAMPPインストール内容の選択 ここでは、インストールする機能を選択できます。
    必要なのはPerl(だけ)なので、「Perl」の項目にチェックが入っていることを確認して下さい。(Perl以外の項目はOFFにしても良いのですが、ここではとりあえず全部選択してあります。グレーアウトしている項目は必須なようなので、何にしてもPerlだけを単独でインストールすることはできません。)
  5. XAMPPインストール先フォルダの指定 次に、XAMPPをインストールするフォルダを指定します。ここでは C:\xampp という浅い場所を指定しています。好きな場所にインストールすれば良いですが、できるだけ浅い場所の方が望ましいと思います。なお、普通のアプリケーションのように C:\Program Files指定しないよう注意して下さい。特に希望が無ければ C:\xampp で良いでしょう。
  6. XAMPPコンパネ言語の指定 次に、XAMPPのコントロールパネルで使う言語を選択します。選択肢に「Japanese」は存在しないので、よほどドイツ語が得意でない限りは、「English」を選んでおきましょう。

    ※ここで紹介している方法で「てがろぐ」をローカルで稼働させるだけなら、XAMPPのコントロールパネルは一切使いません。
  7. XAMPPインストール準備完了 インストールに必要な設定は済んだので、「Next」を押して下さい。
    すると、インストール作業が始まります。
  8. XAMPPインストール先フォルダの指定 たぶん数分くらいかかるのではないかと思いますので、完了まで待ちます。
  9. Windowsセキュリティ警告 for Apache ※もしかしたら途中で図のようなWindows Defenderによる警告ダイアログが出てくるかもしれません(※Windows Defender以外のファイアウォールを使っている場合は、それが警告を出してくるかもしれません)。

    てがろぐを稼働させるだけ(=Perlをインストールするだけ)の目的なら特にチェックを入れなくても良いのですが、ここでキャンセルしてしまうと、もしApacheを使いたくなった場合等で面倒なことになりますから、チェックを入れて「アクセスを許可する」ボタンを押しましょう。
  10. XAMPPインストール完了 図のような画面になれば、XAMPPのインストールは完了です。
    ここに表示されている「Do you want to start the Control Panel now?」のチェックボックスはOFFにしておくことをお勧め致します。
    最後に「Finish」ボタンを押してインストールウィザードを閉じれば完了です。

▼XAMPPを起動する際の注意(起動しなくて良いけども)

先に説明したとおり、今回は(単にPerlを使う目的でXAMPPをインストールしただけなので)XAMPPそのものを起動させる必要はありません。
なので、インストールさえ終わってしまえば、あとはもう放置で良いのですが、(別の目的にXAMPPを活用したいと思っている場合等のために)XAMPPを起動する際の注意点をついでに書いておきます。

※XAMPPを使う予定がないなら、ここは飛ばして次の項目へ進んで下さい。

  1. XAMPP起動(管理者権限なし状態) 先の手順の最後(No.10)で「Do you want to start the Control Panel now?」のチェックボックスをONにしたまま終了した場合や、XAMPPを手動で普通に起動した場合は、このようなウインドウが出てきます。右側に見えるボタン群の中から「Quit」を探して押せば、終了できます。

    ※画面左端のService欄がグレーアウトされている点から、「管理者権限なしで起動した」ことが分かります。
  2. XAMPPのアクセス拒否エラー そのまま「Quit」ボタンで終了させると、図のようなエラーが出てくるかもしれません。これは、XAMPPを「管理者権限なし」で起動してしまったために、INIファイルへの書き込みが失敗して処理を続行できずに出てくるエラーです。

    (※図の下側の方のエラーも出てきた場合は、タスクマネージャからプロセスを終了させないと終了できないかもしれません。)
  3. XAMPPは管理者権限付きで起動 XAMPPのコントロールパネルを起動する際は、ショートカットを右クリックして「管理者として実行」を選択しましょう。
  4. ユーザーアカウント制御の確認ダイアログ すると、図のようなユーザーアカウント制御の確認ダイアログが出てきますので、「はい」を押します。
  5. XAMPP起動(管理者権限あり状態) すると、XAMPPのコントロールパネルが起動しますが、先程と違って左端のService欄がグレーアウトされておらず「×」が付いています。「×」はWindowsにサービスとして登録されていないという意味です(サービスとして登録すると、Windowsの起動と同時に起動させるような設定もできるようになります。その話は本題ではないので省略しますが)。「Quit」ボタンを押せば、先程のようなエラーはなく正常に終了できるハズです。

以上、XAMPPのコントロールパネルを起動させる際にはご注意下さい。(※今回説明する方法では、XAMPPのコントロールパネルを使う必要は全くありません。)

Perlのインストール位置を調べておく

XAMPPをインストールした先が C:\xampp の場合、おそらくPerlのインストール位置は C:\xampp\perl\bin\perl.exe だと思いますが、念のために直接確認しておきましょう。

  1. xamppインストールフォルダ XAMPPのインストール先フォルダから順にサブフォルダをたどって下さい。
    この図は、仮想環境上の実験用Windows11をキャプチャしたものなので(ほぼ)クリーンインストール直後のフォルダ構成しかありませんが、実際にはお使いの環境によってフォルダ構成は異なります。
    ちなみに、XAMPPの全選択肢を選択した状態でインストールすると、全部で753MBになっていました。結構ありますね……。(Perl部分だけだと130MBくらいなんですが。^^;)
  2. Perlインストールフォルダ サブフォルダを Perl → bin とたどって(※緑色矢印参照)、perl.exe というファイルを見つけて下さい(※黄色矢印参照)。それがPerlの実行ファイルです。
  3. Perl.exeパスのコピー Windows11の場合は、perl.exeファイルを右クリックして「パスをコピー」を選択すると、perl.exeへのフルパスがコピーできます。後で使いますので、どこかに保存(メモ帳にペーストして保存するとか)しておいて下さい。

    ※Windows10の場合は、[Shift]キーを押しながら右クリックすると「パスのコピー」というメニュー項目が出てきます。(※Windows Vista以降のすべてのWindowsにあります。)

ウェブサーバ「AN HTTPD」をセットアップする

さて、次に簡易ウェブサーバ「AN HTTPD」をセットアップしましょう。
AN HTTPDにはインストーラはありませんので、どこでもお好きな場所にZIPファイルの中身を展開すれば、インストールは完了します。

AN HTTPD ZIPファイル

ここでは例として、C:\Softwares\anhttpd という位置に展開しました。
最初にセットアップ(設定)が必要ですので、下記の手順で操作してみて下さい。

▼AN HTTPDのセットアップ手順

  1. httpd.exeが本体 「AN HTTPD」は、httpd.exeという実行ファイルが本体です。ただし、ダブルクリックして起動させてはいけません。(その場合でも起動はできますが、設定変更が保存されずにエラーになります。)
  2. httpd.exeを管理者として実行 実行ファイル httpd.exe は右クリックして、「管理者として実行」をクリックして下さい。設定を変更する際には常にこの方法で起動させる必要があります。
  3. ユーザーアカウント制御の警告 おそらくユーザアカウント制御の警告が表示されますので、「はい」をクリックして許可します。
  4. Windows Defenderによるブロック もしかしたら図のようなWindows Defenderによる警告ダイアログが出てくるかもしれません(※Windows Defender以外のファイアウォールを使っている場合は、それが警告を出してくるかもしれません)。図のようにチェックを入れてから「アクセスを許可する」ボタンを押して下さい。(IPアドレスを指定することで、LAN内の他の端末からアクセスできるようにもなります。)
  5. AN HTTPDの初期状態だとタスクトレイにだけ入る 問題がなければこれで「AN HTTPD」が起動します。
    ……が、AN HTTPDの初期設定では、ウインドウは表示されずに、タスクトレイにアイコンだけが格納されます。なので、まずは図のようにタスクトレイに格納されているアイコンを表示させて、図の黄色矢印の先に見えている「AN HTTPD」のアイコンをクリックして下さい。(お使いの環境によって、ここで見えるアイコンは様々です。また、もしかしたら隠されずに最初からタスクバー上のタスクトレイにアイコンが見えているかも知れません。図を参考にしてAN HTTPDのアイコンを探して下さい。)
  6. AN HTTPDのウインドウ これでようやく「AN HTTPD」のウインドウが見えました。
    この図が、初期状態のウインドウです。ここから、まずは初期設定を済ませましょう。
  7. AN HTTPDの一般設定画面 まずは、図の黄色矢印の先のように、メニューの「オプション」→「一般」をクリックして下さい。
  8. AN HTTPDのオプション設定画面 すると、図のような設定画面が開きます。黄色矢印の先に示したドキュメントルート欄は、Webデータを置くフォルダです。標準では「AN HTTPD」のインストール先フォルダがそのまま指定されていますから、そのままの設定で使うわけにはいきません。(Web用のファイルを置く専用の)どこか任意のフォルダに変更しておきましょう。

    この時点で、「Web用のデータを置く専用のフォルダ」をどこでも適当な場所に用意しておいて下さい。これ以降では、C:\Users\Sakura\Web というフォルダを用意したとして話を進めます。(※Cドライブ以外の場所でも構いません。)
  9. AN HTTPDのオプション設定 ここで設定するのは、➊ドキュメントルート、➋無意味な設定の無効化、➌CGIを実行するPerlの位置 ……の3点です。

    ➊【黄色矢印の先】ドキュメントルートは、ここでは例として C:\Users\Sakura\Web にしてあります。このとき、終わりに \ 記号を打たないように注意して下さい。終わりに \ 記号を書いてしまうと、保存時に「そんなフォルダはない」と言われて設定が取り消されてしまう仕様ですので。(^_^;)

    ➋【緑色矢印の先】不要なのでOFFにしておきます。(まあONのままでも困るわけではないですが。)

    ➌【橙色矢印の先】この「.pl,.cgi」欄を1回クリックして下さい。すると紫色矢印の先に示した「編集」ボタンが押せるようになりますので、そこを押して下さい。
  10. Perl実行ファイルの設定画面 すると、図のような画面がさらに開きます。ここでは「ファイル拡張子が .pl や .cgi のファイル」を何で実行するのかを指定します。最初から perl と書かれていますが、(perl.exeに対してPATHが通っていない限り)このままではPerlは実行されません。なので、実際にPerlが存在する位置に書き換える必要があります。

    ※なお、perl.exeにPATHが通っていれば、初期状態の perl のままでPerlを実行できます(お勧め)。
  11. Perl実行ファイルの設定画面 そこで、先程メモしておいた perl.exe へのフルパスをここに転記します。
    例えば C:\xampp\perl\bin\perl.exe のように入力します。

    ※このように、AN HTTPDではファイル拡張子に応じて実行ファイルを指定できるので、スクリプトの1行目にある #! で始まる行(シェバン行)の情報は無視してくれます。そのため、tegalog.cgiの1行目を書き換える必要なく動作させられます。
  12. Perl実行ファイルの設定画面 先程の画面を[OK]ボタンで閉じると、図の画面に戻ります。
    橙色矢印の先で示したように、perl.exeの位置が修正されていることが分かります。

    これで最小限の設定は完了ですが、以下でもう少しだけ便利な設定をしておきましょう。
  13. エイリアス設定 図の赤丸で示した位置にあるタブの「エイリアス」をクリックすると、図のような画面になります。

    ここでは、水色矢印の先に示した位置にチェックマークが2つ入っています。この2つを両方クリックして、チェックを消して下さい。(※そうせずにこのまま放置していると、ルートディレクトリのファイル一覧を表示させたときに、「cgi-bin」と「scripts」という2つの仮想フォルダが見えてしまって紛らわしいですから。)
  14. エイリアス設定 OFFにすると、こんな感じになります。
  15. 表示/インデックス画面 次に、タブの「表示/インデックス」をクリックすると、図のような画面になります。ここでは、➊起動時のウインドウの表示形態、➋フォルダ内のファイル一覧の表示設定 をしておきます。

    ➊【緑色矢印の先】ここでは、AN HTTPDを起動した直後にウインドウをどのように表示するかを選択できます。デフォルトでは「トレイ上」になっているのですが、タスクトレイに格納されると分かりにくいので(本格的に常駐させてWebサーバとして使うなら別ですが)、「ウインドウ」に切り替えておくことをお勧めします。そうすれば、AN HTTPDを起動すればウインドウが毎回現れますので分かりやすいです。もし、ウインドウが毎回現れるのが邪魔な場合は「タスクバー上」の方にしておけば、ウインドウが最小化された状態で起動します。

    ➋【水色矢印の先】ここはチェックを外して(OFFにして)下さい。すると、index.html 等のファイルが存在しないフォルダにアクセスしたときに、「そのフォルダ内のファイル一覧」が表示されるようになります。ローカルPC上で使うなら、その方が便利です。
  16. サーバ再起動ダイアログ 上記ですべての設定は完了しましたので、[OK]ボタンを押して画面を閉じて下さい。
    すると、図のように「サーバを再起動します」等の案内が(場合によっては複数個)表示されますので、すべてに「OK」を押して下さい。(※ソフトウェアとしてのWebサーバが再起動されるだけであって、Windowsが再起動されるわけではありません。)
  17. 初期の画面に戻る これで最初の画面に戻ってきました。
    表示されているドキュメントルートが、正しく「自分の設定したフォルダ」になっていることを確認して下さい。(なっていない場合は、設定をやり直す必要があります。)

以上で、Webサーバ「AN HTTPD」の設定は完了です。
「AN HTTPD」を起動している間は、http://localhost/ にブラウザでアクセスできるようになります。

▼常に管理者として起動されるショートカットを作っておくと便利

AN HTTPDをWebサーバとして稼働させるだけなら、普通にダブルクリックして起動しても問題ありません。
しかし、設定を変更したい場合には、「管理者として実行」を選択して起動する必要があります。

AN HTTPDの実行ファイルである httpd.exe のショートカットをデスクトップ等に作っておくなら、そのショートカットのプロパティを以下のように操作することで、常時「管理者として実行」されるように設定できます。このように設定しておけば、単純にダブルクリックするだけで、管理者権限付きで起動できるようになって便利です。

初期の画面に戻る

ショートカットを右クリックして「プロパティ」を選択すると、上図の真ん中の画面が出てきます。ここで「詳細設定」ボタンを押すと、上図の右端の画面が出てきます。そこにある「管理者として実行」というチェックをONにすれば、常に「管理者として実行」されるようになります。

てがろぐをlocalhostで表示する

さて、ここまで到達したら、もう http://localhost/ でローカルに存在するWebを閲覧可能になっています。
もしドキュメントルート(=Webデータを置くフォルダ)に何らかの index.html ファイルを置いているなら、既にブラウザで http://localhost/ にアクセスすると、それがWebページとして表示されるはずです。

では最後に、てがろぐCGIを表示できるようにしてみましょう。(と言っても、特別な操作は要りません。単に置けば良いだけです。)

▼てがろぐCGIが http://localhost/tegalog/ で見えるように置く

  1. LocalHost まずは、ブラウザで http://localhost/ にアクセスしてみて下さい。設定したドキュメントルートに何もファイルがないなら、図のように空白のIndexが見えます。もし、index.html等のファイルを置いているならそれが見えるハズです。もしエラーが表示されるなら、AN HTTPDが起動できているかどうかを確認して下さい。(なお、80番ポートが使えない等の理由で別のポートを使っている場合は http://localhost:8080/ のように「ポート番号も追記したURL」にアクセスする必要がある点にもご注意下さい。)
  2. てがろぐ一式を展開 ここでは例としてドキュメントルートを C:\Users\Sakura\Web にしましたから、そこに tegalog というサブフォルダを作って、その中に tegalog-full.zip を展開します。

    以下のような構造になるイメージです。
    • ドキュメントルート:C:\Users\Sakura\Web
    • てがろぐフォルダ :C:\Users\Sakura\Web\tegalog
    • てがろぐプログラム:C:\Users\Sakura\Web\tegalog\tegalog.cgi
  3. てがろぐディレクトリ ブラウザで http://localhost/tegalog/ にアクセスすると(黄色矢印参照)、図のように tegalog フォルダ内のファイル一覧が表示されます(※表示されない場合は、設定が足りていません。先の手順No.15で、水色矢印の先のチェックを外したかどうかを確認して下さい。ただ、動作に問題はありませんから、そのまま使い続けても大丈夫ですけども。)
    ここで、緑色矢印の先で示した tegalog.cgi リンクをクリックして下さい(もしファイルの一覧が見えていない場合は、ブラウザのURL欄に手動で tegalog.cgi の文字を足して下さい)。
  4. てがろぐCGIがローカルで稼働 すると、図のように、ローカルで稼働している「てがろぐ」の初期画面が見えるはずです!
    URLは http://localhost/tegalog/tegalog.cgi になっています。

以上で、てがろぐCGIがローカルで動作するようになりました。

▼ファイル名tegalog.cgiを省略してアクセスできるようにする方法

もし、http://localhost/tegalog/tegalog.cgi というURLの tegalog.cgi を省略して http://localhost/tegalog/ でアクセスできるようにしたい場合は、以下のように設定して下さい。

  1. デフォルトインデックス AN HTTPDの設定画面には、図の緑色矢印の先で示したように「デフォルトインデックス」という項目があります。ここを tegalog.cgi に書き換えると、(ファイル名を省略してディレクトリまでのURLでアクセスされた際には)『フォルダの中に tegalog.cgi が存在すればそれを表示する』という動作になります。
  2. ファイル名を省略してアクセス すると、図のように、ファイル名を省略したURLでアクセスできるようになります。(※ただし、この場合は index.html があっても表示には採用されなくなりますが。)
  3. ファイル名を省略してアクセス あとは、ログインして好きなように使って下さい!

「後からWebサーバにアップロードする」前提で何かを作る際は、Windowsが「ファイル名の大文字・小文字を区別しない」仕様のOSだという点にご注意下さい。Windowsローカル環境では Myphoto.JPG というファイルには myphoto.jpg とか MyPhoto.jpg のようなファイル名でも問題なくアクセスできますが、このファイルをそのままWebサーバにアップロードすると、大文字・小文字が完全に一致した Myphoto.JPG という指定でないと表示されません。Windows環境では時々ファイル拡張子が大文字で出力されていることもありますので。

てがろぐCGIをローカルで動かす

以上、てがろぐCGIをローカルPC上で稼働させる方法(の1つ)でした。

あくまでも方法の1つというだけですから、他にも多々あると思います。
一番の正攻法は(せっかくXAMPPをインストールしたわけですから)XAMPPに含まれているWebサーバ「Apache」を使うことでしょうけども。

てがろぐをローカルで稼働させるだけなら上記で全然問題ありませんが、他のWeb製作プロジェクトにも使いたいという場合には、AN HTTPDだと不便な場合もあるかもしれません。そんなときには、「てがろぐをXAMPPで確認したいっ!」等をご覧になって、Apache環境を整えて、てがろぐもローカルApache上で稼働させると良いでしょう。

既にWeb上で稼働しているてがろぐのデータをコピーして使いたい場合は、(Web上で稼働しているてがろぐの)tegalog.xml と tegalog.ini ファイル(※)をダウンロードして上書きすると良いです。(パスワードも共有したい場合は psif.cgi ファイルもダウンロードすると良いですが、Webサーバとローカルとで使えるハッシュ化方式が異なる場合は、ログインに失敗します。その場合は、psif.cgiファイルの中身を一旦カラにして、ローカルだけでパスワードを作り直す必要があります。ローカルでは「パスワードなし」で使う手も良いかもしれませんが。)

※画像投稿をしている場合は images ディレクトリも、カスタム絵文字を使っている場合は emoji ディレクトリもダウンロードする必要があります。
※独自のスキンを使っている場合は、そのスキン構成ファイルもダウンロードする必要があります。

ローカルで稼働させたてがろぐのデータをWebサーバに上書きアップロードする場合は、必ず(Webサーバ側にあるファイルの)バックアップを先に取っておいて下さい。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

--- 当サイト内を検索 ---