こんにちわ＆こんばんわ
えこふぃるたぁ＠tuyoです。
前回の続きでWeb拍手設置にチャレンジです。
前回GIFアニメの準備はできたので
次にWeb拍手をどうやって設置するかになるのですが
何も考えずにGIFファイルを作成してしまったので
Web拍手の設置方法はノープラン。
全然わかりませんｗｗ
ということでWeb拍手設置についてを調べていると
「Web拍手公式サイト」というサイトに登録すれば
Web拍手を簡単に設置できるみたいな情報が！
でもこれって自分で作ったファイルも使えるのかな？
とか思っていたところ、このサイトの関連情報に
スクリプトを無料で配布しているとありました。
ナイスです(><)b
これは利用するしかない！
と言うことで無料のスクリプトを使用することに＾＾
なおCGIの知識がある程度必要ですと
書いてありましたが私はCGIは全然わかりません。
でもがんばってみましたｗｗｗ
私のWeb知識レベルは
ホームページビルダー等のアプリを
使わないで純粋にHTMLファイルと
ディレクトリを駆使して自分のHPを作っている
レベルです。
もちろんグーグル先生必須ですｗ
なので知識はかなり乏しいですがCGIも
なんとかなるのでは？
わからなければググレばなんとかなるみたいなのりで
がんばってみることにしましたｗｗｗ
★★★ 注意書きでっす ★★★
この記事は無料のスクリプトを推奨している訳では
ありません。無料スクリプトを利用する場合は
自己責任でお願いします。
不具合がおきても私は一切責任は取れません。
分からなければ「Web拍手公式サイト」へ
登録をした方が安全かと思います。
HTMLタグを適切な場所に貼り付けれるだけで
大丈夫なのはずです。
また、無料スクリプトに対しての質問をされても
私はよく分かっていないので回答はできません！
★★★★★★★★★★★★★★
と注意書きをしたところで
まずはDLしたファイルを解凍して
そのなかのreadme.txtを確認。
その後一通りの解凍したファイルをテキストエディタ
で開き中身を確認。
漠然と分かることはどうやら
このスクリプト、難しい設定を入力しなくても
readme.txtを参照して、かつ.cgiのファイルパスを
ちゃんと指定すれば結構簡単に設置することが
できそうということです！
という事でまずはサーバにファイルをUPする前に
.cgiのファイルパスとその他変更できる箇所を
変更していきます。
１.readme.txtに記載されているperlパスを確認します。
「clap.cgi」と「kaiseki.cgi」の2つのファイルの
perlパスを変更。レンタルサーバによってperlのパスは
異なるので各々確認が必要です
私のレンタルサーバは
#!/usr/bin/perl
でした
２.次に 「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する場所によって各々変わってくるので
例と同じく設定しても上手く指定されているとは
限りません。
あくまで例えなので間違えないように～
ちなみに”./”ってなに？と疑問に思った方は
「絶対パス」「相対パス」で検索すると何かが
見えてくると思います。
３.「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
４.「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
５.readme.txt以外をレンタルサーバの任意の場所へUP
例：
home
|—hogehoge
|—-clap.cgi
|—-clapinit.cgi
|—-kaiseki.cgi
|—-jcode.pl
|—-lock.dat
|—-log.dat
|—-mes.dat
|—-graph1.gif
|—-graph2.gif
６.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タグを貼り付ければ設置完了なのに・・・
貼り付ける場所がわからないｗｗｗ
と数時間分悩みいました。
で解決しました！！
しかしここからの説明はかなりピンポイントで
具体的に言うと私はさくらインターネットから
レンタルサーバのスペースを借りているのですが、
さくらインターネットでかつ、さくらブログ
を使っている方のみの設置方法の説明になりますｗ
さくらブログのブログ設定画面(マイ・ブログ)から
デザイン→コンテンツを開き
コンテンツの中の「自由形式」を画面右に
ドラッグ&ドロップをして「自由形式」を開きます。
自由入力欄があるのでそこにhtmlタグを貼り付ければ
おｋです。
こんなかんじ
という事で無事にWeb拍手設置を完成することが
できました（＞＜ｂ
Web拍手解析画面は以下のURLで確認ができると思います。
http://****/hogehoge/kaiseki.cgi
めでたしめでたし
Web拍手設置とか検索しても一連の流れで
一からこんな風に作って設定して設置しましたみたいな
HPまたはBlogってなかった気がしたのであえて
記事としてつくってみました。
一例として参考になればと思います。
分かりずらくて参考にならなかったらごめんなさいorz
追伸
冬に向けての同人誌のネーム全然できてないですorz
