Web拍手設置方法

こんにちわ&こんばんわ

えこふぃるたぁ@tuyoです。

前回の続きでWeb拍手設置にチャレンジです。

前回GIFアニメの準備はできたので
次にWeb拍手をどうやって設置するかになるのですが
何も考えずにGIFファイルを作成してしまったので
Web拍手の設置方法はノープラン。
全然わかりませんww

ということでWeb拍手設置についてを調べていると

「Web拍手公式サイト」というサイトに登録すれば
Web拍手を簡単に設置できるみたいな情報が!
でもこれって自分で作ったファイルも使えるのかな?
とか思っていたところ、このサイトの関連情報に
スクリプトを無料で配布しているとありました。

ナイスです(><)b
これは利用するしかない!
と言うことで無料のスクリプトを使用することに^^

なおCGIの知識がある程度必要ですと
書いてありましたが私はCGIは全然わかりません。
でもがんばってみましたwww

私のWeb知識レベルは
ホームページビルダー等のアプリを
使わないで純粋にHTMLファイルと
ディレクトリを駆使して自分のHPを作っている
レベルです。
もちろんグーグル先生必須ですw

なので知識はかなり乏しいですがCGIも
なんとかなるのでは?
わからなければググレばなんとかなるみたいなのりで
がんばってみることにしましたwww

★★★ 注意書きでっす ★★★
この記事は無料のスクリプトを推奨している訳では
ありません。無料スクリプトを利用する場合は
自己責任でお願いします。
不具合がおきても私は一切責任は取れません。
分からなければ「Web拍手公式サイト」へ
登録をした方が安全かと思います。
HTMLタグを適切な場所に貼り付けれるだけで
大丈夫なのはずです。
また、無料スクリプトに対しての質問をされても
私はよく分かっていないので回答はできません!
★★★★★★★★★★★★★★

と注意書きをしたところで

まずはDLしたファイルを解凍して
そのなかのreadme.txtを確認。

その後一通りの解凍したファイルをテキストエディタ
で開き中身を確認。

漠然と分かることはどうやら
このスクリプト、難しい設定を入力しなくても
readme.txtを参照して、かつ.cgiのファイルパスを
ちゃんと指定すれば結構簡単に設置することが
できそうということです!

という事でまずはサーバにファイルをUPする前に
.cgiのファイルパスとその他変更できる箇所を
変更していきます。

1.readme.txtに記載されているperlパスを確認します。
 「clap.cgi」と「kaiseki.cgi」の2つのファイルの
 perlパスを変更。レンタルサーバによってperlのパスは
異なるので各々確認が必要です

 私のレンタルサーバは
 #!/usr/bin/perl
 でした

2.次に 「clap.cgi」をテキストエディタで開き
 文の上の方にある以下3つの文を後ほどサーバにUPする
 CGI用ファイルのファイルパスに変更

 $base = “./clap.cgi”;
 require ‘./jcode.pl’;
 require ‘./clapinit.cgi’;

 下記はCGI用ファイルのディレクトリ名(フォルダ名)
 を[hogehoge]にした場合の例です。以降例のディレクトリは
 [hogehoge]として表示します~

 例:
 $base = “./hogehoge/clap.cgi”;
 require ‘./hogehoge/jcode.pl’;
 require ‘./hogehoge/clapinit.cgi’;

 パスに関してはcgiのディレクトリまたはファイルを
 サーバにUPする場所によって各々変わってくるので
 例と同じく設定しても上手く指定されているとは
 限りません。
 あくまで例えなので間違えないように~

 ちなみに”./”ってなに?と疑問に思った方は
 「絶対パス」「相対パス」で検索すると何かが
 見えてくると思います。

3.「clapinit.cgi」をテキストエディタで開き
 $passlock = ‘0’; を$passlock = ‘1’; に変更します。
 0のままだと解析ページが誰にでも見られてしまいます。

 $password = ‘****’; ←任意の番号4桁を入力

 以下4つを後ほどサーバにUPする
 CGI用ファイルのファイルパスに変更

 $logfile = ‘./log.dat’;
 $mesfile = ‘./mes.dat’;
 $graph1 = ‘./graph1.gif’; #横
 $graph2 = ‘./graph2.gif’; #縦

 例:
 $logfile = ‘./hogehoge/log.dat’;
 $mesfile = ‘./hogehoge/mes.dat’;
 $graph1 = ‘./hogehoge/graph1.gif’; #横
 $graph2 = ‘./hogehoge/graph2.gif’; #縦

 パスに関してはcgiのディレクトリまたはファイルを
 サーバにUPする場所によって各々変わってくるので(ry

4.「kaiseki.cgi」をテキストエディタで開き
 以下3つを後ほどサーバにUPする
 CGI用ファイルのファイルパスに変更

 $base = “./clap.cgi”;
 require ‘./jcode.pl’;
 require ‘./clapinit.cgi’;

 例:
 $base = “./hogehoge/clap.cgi”;
 require ‘./hogehoge/jcode.pl’;
 require ‘./hogehoge/clapinit.cgi’;

 パスに関してはcgiのディレクトリまたはファイルを
 サーバにUPする場所によって各々変わってくるので(ry

5.readme.txt以外をレンタルサーバの任意の場所へUP

例:
  home
   |—hogehoge
        |—-clap.cgi
        |—-clapinit.cgi
        |—-kaiseki.cgi
        |—-jcode.pl
        |—-lock.dat
        |—-log.dat
        |—-mes.dat
        |—-graph1.gif
        |—-graph2.gif

6.UPしたファイルのパーミッション(アクセス権)を変更。
 変更しないとエラー500とかでます

とここまでで簡単な設定とCGIのファイルをサーバにUP
できました。
ではどうやってhtmlでCGIを呼び出すのか?

その方法は以下のようなHTMLタグを設置したい場所に
貼り付ければ解決です。

★action=のパスをサーバにUPしたclap.cgiに指定する
必要があります。

 例:
<form action=./hogehoge/clap.cgi method=post target=_blank><input type=submit value=web拍手ボタン></form>

上記例のままだと↓のような規定のフォームになるので

フォームタグにgifファイルを呼び出しかつ
画像にカーソルを重ねた時に画面が切り替わる
ようにHTMLタグを以下のように変更

 例:homeにgifファイルを「a.gif」「b.gif」として
   サーバにupしている場合

<form action=./hogehoge/clap.cgi method=post target=_blank><input type=”hidden” name=”submit” value=”送信”><input type=”image” src=”./a.gif” onmouseover=”this.src=’./b.gif‘” onmouseout=”this.src=’./a.gif‘” alt=”Web拍手”></form>

これでカーソルを重ねたときに画面が切り替わるように
なったはずです。

さて、このHTMLタグを試しにえこふぃるたぁのHPの方で
試したところばっちり切り替わりました(><)b

では次にblogに設置をと思いきや・・・

Blogって自作HPとちがって簡単に作れるけど
構成がどうなってるのか全然わからない!?

HTMLタグを貼り付ければ設置完了なのに・・・
貼り付ける場所がわからないwww

と数時間分悩みいました。

で解決しました!!

しかしここからの説明はかなりピンポイントで
具体的に言うと私はさくらインターネットから
レンタルサーバのスペースを借りているのですが、

さくらインターネットでかつ、さくらブログ
を使っている方のみの設置方法の説明になりますw

さくらブログのブログ設定画面(マイ・ブログ)から
デザイン→コンテンツを開き
コンテンツの中の「自由形式」を画面右に
ドラッグ&ドロップをして「自由形式」を開きます。

自由入力欄があるのでそこにhtmlタグを貼り付ければ
おkです。
こんなかんじ
20090830_1

という事で無事にWeb拍手設置を完成することが
できました(><b

Web拍手解析画面は以下のURLで確認ができると思います。

http://****/hogehoge/kaiseki.cgi

めでたしめでたし

Web拍手設置とか検索しても一連の流れで
一からこんな風に作って設定して設置しましたみたいな
HPまたはBlogってなかった気がしたのであえて
記事としてつくってみました。

一例として参考になればと思います。
分かりずらくて参考にならなかったらごめんなさいorz

追伸
冬に向けての同人誌のネーム全然できてないですorz


web拍手

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です