web拍手登録版を加工・改造・実験・検証

その個性的な理念から、web拍手というシステムに興味を持ちました。このページではweb拍手で思いついたことがどれくらい可能なのかを実験してみます。思い通りに動作しなかったものについても記述しておきます。

下記の実験は2004年8月中旬から9月上旬にかけて、web拍手Ver.3.00当時に行いました。

検証ブラウザはInternet Explorer 5.1.7 for Macintoshです。

記述方法についてはweb拍手公式ページ:web拍手活用講座各種を参照しました。

web拍手について

詳しくはweb拍手公式ページweb拍手って何?web拍手の特徴web拍手Q&Aをご覧ください。

当サイトで導入しているメールフォーム(Future SpiritsFORM MAILER)との違いは以下のようになります。

メールフォーム(FORM MAILER)とweb拍手の違い
比較対象FORM MAILERweb拍手
送受信されるもの文字列拍手(と文字列)
送受信できる文字数無制限制限あり
送信者のIP・使用ブラウザ送信される(基本的に)送信されない
送信後のページ(基本的に)用意できない用意できる

web拍手登録版に登録すると、拍手ボタン設置用タグとして以下のような記述が提供されます。

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post" target="_blank">
  <input type="submit" value="web拍手ボタン">
</form>

拍手を一度送信すると以下のページが表示されます(スキン0の場合)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja"><head>
<title>web拍手送信完了</title>
<meta name="Keywords" content="norobot">
</head>
<body>
<center>

ユーザー定義部分

<br><br><br>
<FORM action=./clap.cgi?【ユーザーID】 method="POST">
<INPUT type="submit" value="もっと送る"><br><br>
  <input type=hidden name=kaisuu value=1>
<font size=2>ついでに一言あればどうぞ(拍手だけでも送れます)<br>
  <input type=text name=hitokoto size=50 maxlength=50><br>
</FORM>
<br>
<a href="http://www.webclap.com/" target="_blank"><font size=2>web拍手CGI公式サイト</font></a><br>
<br>
<script type="text/javascript"><!--
広告用記述
//--></script>
<script type="text/javascript" src="広告用記述">
</script>
</center>

以上の情報から、form要素のname属性には以下のものが設定されていると推察されます。

kaisuu=拍手の回数。10に達すると打ち止め? →実際は「メッセージ1〜5を順番に表示」の際に参照される

hitokoto=一言メッセージ。50文字制限? →実際は制限なし

このような前提を踏まえて、以下の項目が実際に行えるかどうか実験しました。

加工・改造・実験・検証

はじめから一言メッセージ付きで送信できるか

実験内容:通常web拍手は1回目の拍手→ユーザー定義画面&フォームを表示して2回目以降の拍手と一言メッセージを送信、という流れです。これを1回目の拍手の時から一言メッセージを送信できるかどうか試してみました。

拍手設置用タグ+一言メッセージ

実験内容:提供された拍手ボタン設置用タグに一言メッセージの記述を加えて、送信できるかどうか試してみました。

htmlファイルに以下の記述を行い、送信しました。

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post" target="_blank">
  <input type="text" name="hitokoto" size="50" maxlength="50" value=""><br>
  <input type="submit" value="web拍手ボタン">
</form>

結果:拍手と同時に一言メッセージを問題なく送信できました。

拍手設置用タグ+一言メッセージ+回数

実験内容:提供された拍手ボタン設置用タグに一言メッセージと回数の記述を加えて、送信できるかどうか試してみました。

htmlファイルに以下の記述を行い、送信しました。

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post" target="_blank">
  <input type="text" name="hitokoto" size="50" maxlength="50" value="">
  <input type="hidden" name="kaisuu" value="1"><br>
  <input type="submit" value="web拍手ボタン">
</form>

結果:拍手と同時に一言メッセージを問題なく送信できました。kaisuuは送信された値+1から開始されます。

送信先を変更+一言メッセージ

実験内容:提供された拍手ボタン設置用タグの送信先アドレスを2回目以降の拍手の画面に設定して、一言メッセージの記述を加えて、送信できるかどうか試してみました。

htmlファイルに以下の記述を行い、送信しました。

<form action="http://www.webclap3.com/cgi-bin/clap.cgi?【ユーザーID】" method="post" target="_blank">
  <input type="text" name="hitokoto" size="50" maxlength="50" value=""><br>
  <input type="submit" value="web拍手ボタン">
</form>

結果:レンタルサーバ画面に転送され、送信できませんでした。2回目以降の拍手の送信先アドレスは最初の拍手の後からしか動作しないようです。

▲実験目次へ戻る

文字数制限を突破できるか

実験内容:web拍手公式ページ:web拍手Q&Aに以下の記述があります。


web拍手の一言メッセージ機能では、
何文字までの文を送ることができるのでしょうか?



現在のところ、50文字の制限をかけています。
将来的にはもっと増やすかもしれません。

この50文字制限は以下の記述で行われているようです。

<input type=text name=hitokoto size=50 maxlength=50>

では、ユーザーが独自にテキストを入力する要素を記述してmaxlength属性を省いたら50文字制限を突破できるのではないかと考え、試してみました。

htmlファイルに以下の記述を行い、送信しました。

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post" target="_blank">
  <textarea name="hitokoto" cols="50" rows="5">
  50文字以上の文字
  </textarea><br>
  <input type="submit" value="web拍手ボタン">
</form>

結果:すべて送信されました。改行は削除されます。

実際に送られてきたメッセージのログ

Mac De Nazcaこんにちは。林檎人といいます。	ナスカ無料レンタルHPスペース	女の子向けの無料ホームページスペース「イースター」	成人向けレンタルHPスペース-アルテミス-その他多くのwebスペース作成に使えるMacintoshのフリーソフトを紹介しています。紹介するソフトはMacOS9.2.2以前の環境で使えるもののみとなっています。他に複数のページにメールフォームを設置するための説明もあります。

以下は個人的な意見です。

文字数制限がないとログが莫大な量となってしまう恐れがあるので、この項目はプログラム側で制限をかけて頂きたいと考えます。と同時に、ユーザー側も制限以上の送受信は行うべきではないと考えます。

長文を送受信する必要のある場合はメールフォームを利用することを強くお勧めします。

▲実験目次へ戻る

はじめから11回目として送信できるか

実験内容:web拍手配布版で1時間以内に同一IPから10回以上拍手を送信しようとすると制限がかかり、送信できません。その制限はform要素のname属性kaisuuの値を基として行われていると推察しました。それを確かめるため、2回目以降の送信フォームのkaisuuの値を10にして、実際の送信回数が10回に達していないのに送信を制限できるかどうか試してみました。

htmlファイルに以下の記述を行い、送信しました。

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post" target="_blank">
  <input type="hidden" name="kaisuu" value="10">
  <input type="submit" value="web拍手ボタン">
</form>

結果:問題なく送信できてしまいました。kaisuuの値が10を超えても、同一IPによる送信が10回を超えない限り送信できるようです。

▲実験目次へ戻る

連続送信制限を回避できるか

実験内容:上の実験とは逆に、送信回数が10回を超えていてもkaisuuの値を10以下に設定することで連続送信制限を回避できるかどうか、試してみました。

ユーザー定義部分に以下の記述を行い、連続して送信しました。

始めから表示されるフォームを無効にするため、ユーザー定義部分の最初に一言メッセージを送信できないようにできるかの記述を加えます。


<style type=text/css>
<!--
form, br {
  display : none ;
}
.userform {
  display : block ;
}
-->
</style>

<form action=./clap.cgi?【ユーザーID】 method=post class=userform>
  <input type=hidden name=kaisuu value=1>
  <input type=submit value=もっと送る>
</form>

結果:10回以上送信できませんでした。kaisuuの値が10以下でも、同一IPによる送信が10回に達すると送信できなくなるようです。これらの結果から、web拍手登録版は連続送信制限にkaisuuの値ではない、別の情報を利用してると推察されます。

ではkaisuuの値を参照している項目はなにかと考えて、思いついたのが次の実験です。

▲実験目次へ戻る

「メッセージ1〜5を順番に表示」はkaisuuの値を参照している?

実験内容:登録内容変更:ユーザー定義部分の表示方法で「メッセージ1〜5を順番に表示」を選択すると、拍手を送るごとにお礼画面がメッセージ1→2→3→4→5の順番で表示されます。これを最初からkaisuuの値を送信することでメッセージ1以外から表示できるかどうか、試してみました。

登録内容変更:ユーザー定義部分の表示方法で「メッセージ1〜5を順番に表示」を選択した上でhtmlファイルに以下の記述を行い、送信しました。

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post" target="_blank">
  <input type="hidden" name="kaisuu" value="3">
  <input type="submit" value="web拍手ボタン">
</form>

結果:メッセージ4(kaisuuの値+1)が表示されました。値が4以上だとメッセージ5が表示されます。

▲実験目次へ戻る

外部呼び出しを制限しているサーバを利用して画像を表示できるか

実験内容:web拍手公式ページ:web拍手活用講座 送信後画面をアレンジの“1、画像を表示させる”に以下のような記述がありました。

もし、このやり方で表示されなかった場合、
ユーザーさんのサイトを置いているサーバーが
外部からの画像の呼び出しを禁止している可能性があります(geocities等)

こうなるともう手の施しようがありません。
サイトを移転するか、諦めましょう(おいおい)

諦めきれずに試してみました。といってもインラインフレーム<iframe>もしくは汎用埋め込みオブジェクト<object>を利用しただけです。

ユーザー定義部分に以下の記述を行いました。

<style type=text/css>
<!--
iframe {
  width : 100% ;
  height : 320px ;
  border : 0 none ;
}
-->
</style>
<iframe src=iframeへの絶対アドレス name=picture title=お礼画像iframe>
<a href=iframeアドレス target=picture>iframeへのリンク</a></iframe>

iframeで呼び出されるhtmlファイルに以下の記述を行いました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
#image {
  text-align : center ;
}
-->
</style>
<meta http-equiv="content-script-type" content="text/javascript">
<title>iframe</title>
</head>
<body>
<p id="image"><img src="画像への相対アドレス" width="400" height="300" alt="お礼画像"></p>
</body>
</html>

結果:問題なく表示できました。しかし、注意しなければならない点が2つあります。

サーバ広告について

一括して外部からの画像の呼び出しを禁止しているサーバは、当サイトでお借りしているナスカ無料レンタルHPスペースなどの無料レンタルスペースがほとんどだと推察されます。無料レンタルスペースの多くは広告を掲載することで運営されています。例えばナスカの場合はページ下部にテキスト広告が挿入されています。これらを隠したり消したりすると規約違反となるので注意するべきだと考えます。具体的にはフレームのスクロールを問題なく行えるようにしておけばよいのではないでしょうか。

隠しページについて

無料レンタルスペースの多くで、トップディレクトリのindex.htmlからリンクされていないページ=“隠しページ”は規約違反となってしまいます。web拍手のお礼画面がこの規約に抵触する可能性があります。もし問題のあるサーバの場合は、サイトのどこかからこっそりリンクを張っておくとよいと考えます。

▲実験目次へ戻る

送信元ファイルの題名を一言メッセージで送信できるか

実験内容:たくさんのページにweb拍手が設置されていると、どのページから送られた拍手なのか解らなくなってしまいます。その回避策として、送信元htmlファイルの題名をname="hitokoto"の値として送信できるかどうか試してみました。

htmlファイルに以下の記述を行い、送信しました。

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post" target="_blank">
  <input type="hidden" name="hitokoto" value="題名">
  <p>「送信元ファイルの題名」はweb拍手の一言メッセージとして管理人に送信されます。</p>
  <input type="submit" value="web拍手ボタン">
</form>

結果:拍手と同時にname属性が"hitokoto"である部品の値が一言メッセージとして送信されました。

拍手を送って下さる閲覧者の方に、題名が一言メッセージで送信されることを伝えるとよいと考えます。

▲実験目次へ戻る

送信元ファイルの題名を一言メッセージで送信できるか その2

実験内容:上記の方法だと、web拍手の設置されたページの題名を1つ1つ部品の値として書き込まなくてはなりません。その手間を省くことができるのが以下の方法です。

この記述はJavaScriptを利用しています。JavaScriptが無効である環境から送信された場合、送信元ファイルの題名は送信されません。

htmlファイルに以下の記述を行い、送信しました。

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post" target="_blank"
 name="documenttitle" onsubmit="this.hitokoto.value=document.title;">
  <input type="hidden" name="hitokoto" value="JavaScript無効">
  <script type="text/javascript">
  <!--
  document.write(
  '<p>“'+document.title+'”から送信されます。<br>'+
  '「送信元ファイルの題名」はweb拍手の一言メッセージとして管理人に送信されます。<\/p>'
  );
  //-->
  </script>
  <input type="submit" value="web拍手ボタン">
</form>

結果:拍手と同時に各々のページの題名が一言メッセージとして送信されました。

拍手を送って下さる閲覧者の方に、題名が一言メッセージで送信されることを伝えるとよいと考えます。

▲実験目次へ戻る

アンケート結果を送信できるか

実験内容:閲覧者に選択して貰った評価をname="hitokoto"の値として送信できるかどうか試してみました。

htmlファイルに以下の記述を行い、送信しました。

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post" target="_blank">
  <select name="hitokoto">
    <option value="undefined" selected>▼評価してください</option>
    <option value="good">良い</option>
    <option value="average">普通</option>
    <option value="bad">悪い</option>
  </select>
  <p>「評価内容」はweb拍手を通じて管理人に送信されます。</p>
  <input type="submit" value="web拍手ボタン">
</form>

結果:拍手と同時に閲覧者の評価が一言メッセージとして送信されました。

拍手を送って下さる閲覧者の方に、評価が一言メッセージで送信されることを伝えるとよいと考えます。

▲実験目次へ戻る

お礼画面を振り分けられないか

実験内容:アンケート結果を送信できるかの評価によってお礼画面を変化させられないかと思ったのがきっかけです。思いついた以下の方法を試してみました。

window.nameを利用する

実験内容:windowの名前によって処理を振り分けられるかどうか試してみました。

この記述はJavaScriptを利用しています。JavaScriptが無効である環境から送信された場合、表示画面は1種類だけとなります。

htmlファイル・ユーザー定義部分に以下の記述を行い、送信しました。

htmlファイル

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】"
 method="post" target="_blank" name="windowname">
  <select name="hitokoto"
   onchange="this.form.target=this.options[this.selectedIndex].value;">
    <option value="undefined" selected>▼評価してください</option>
    <option value="good">良い</option>
    <option value="average">普通</option>
    <option value="bad">悪い</option>
  </select>
  <p>「評価内容」はweb拍手を通じて管理人に送信されます。</p>
  <input type="submit" value="web拍手ボタン">
</form>

ユーザー定義部分

<script type=text/javascript>
var good=
'<p>よい評価をありがとうございました!</p>';
var bad=
'<p>お役に立てず、申し訳ありません……<br>'+
'もしよろしければ、悪かった点をお聞かせください。</p>';
var average=
'<p>拍手ありがとうございました。</p>';

document.write(window.name || average);
</script>
<noscript>
<p>拍手ありがとうございました。</p>
</noscript>

結果:拍手と同時に評価が一言メッセージとして送信されました。そして評価によって違う画面表示が行われました。

JavaScriptが無効である場合、ユーザー定義画面は<noscript>に記述した1種類のみです。

▲実験目次へ戻る

location.hashを利用する

実験内容:送信アドレスの末尾にhashを加えて、その値によって処理を振り分けられるかどうか試してみました。

この記述はJavaScriptを利用しています。JavaScriptが無効である環境から送信された場合、送信元ファイルの題名は送信されず、表示画面は1種類だけとなります。

htmlファイル・ユーザー定義部分に以下の記述を行い、送信しました。

htmlファイル

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】"
 method="post" target="_blank" name="locationhash">
  <select name="hitokoto" 
   onchange="if(typeof _action=="undefined") _action=this.form.action; 
   this.form.action=_action+'#'+this.options[this.selectedIndex].value;">
    <option value="undefined" selected>▼評価してください</option>
    <option value="good">良い</option>
    <option value="average">普通</option>
    <option value="bad">悪い</option>
  </select>
  <p>「評価内容」はweb拍手を通じて管理人に送信されます。</p>
  <input type="submit" value="web拍手ボタン">
</form>

ユーザー定義部分

<script type=text/javascript>
var good=
'<p>よい評価をありがとうございました!</p>';
var bad=
'<p>お役に立てず、申し訳ありません……<br>'+
'もしよろしければ、悪かった点をお聞かせください。</p>';
var average=
'<p>拍手ありがとうございました。</p>';

document.write(location.hash || average);
</script>
<noscript>
<p>拍手ありがとうございました。</p>
</noscript>

結果:拍手と同時に評価が一言メッセージとして送信されました。そして評価によって違う画面表示が行われました。

JavaScriptが無効である場合、ユーザー定義画面は<noscript>に記述した1種類のみです。

▲実験目次へ戻る

JavaScriptが無効である環境でもお礼画面を振り分けられないか

実験内容:JavaScript以外の値を用いて処理を振り分けるられるかどうか、試してみました。

登録内容変更:ユーザー定義部分の表示方法で「メッセージ1〜5を順番に表示」を選択した上でhtmlファイル・ユーザー定義部分に以下の記述を行い、送信しました。

htmlファイル

<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post" target="_blank">
  <select name="kaisuu">
    <option value="0" selected>▼評価してください</option>
    <option value="1">良い</option>
    <option value="0">普通</option>
    <option value="2">悪い</option>
  </select>
  <input type="submit" value="web拍手ボタン">
</form>

ユーザー定義部分

始めから表示されるフォームを無効にするため、ユーザー定義部分の各項目の最初に一言メッセージを送信できないようにできるかの記述を加えます。

メッセージ1

<style type=text/css>
<!--
form, br {
  display : none ;
}
.userform {
  display : block ;
}
-->
</style>

<p>拍手ありがとうございました。</p>
<form action=./clap.cgi?【ユーザーID】 method=post class=userform>
  <input type=text name=hitokoto size=50 maxlength=50>
  <input type=hidden name=kaisuu value=0>
  <input type=submit value=もっと送る>
</form>

メッセージ2

<style type=text/css>
<!--
form, br {
  display : none ;
}
.userform {
  display : block ;
}
-->
</style>

<p>よい評価をありがとうございました!</p>
<form action=./clap.cgi?【ユーザーID】 method=post class=userform>
  <input type=text name=hitokoto size=50 maxlength=50>
  <input type=hidden name=kaisuu value=1>
  <input type=submit value=もっと送る>
</form>

メッセージ3

<style type=text/css>
<!--
form, br {
  display : none ;
}
.userform {
  display : block ;
}
-->
</style>

<p>お役に立てず、申し訳ありません……</p>
<p>もしよろしければ、悪かった点をお聞かせください。</p>
<form action=./clap.cgi?【ユーザーID】 method=post class=userform>
  <input type=text name=hitokoto size=50 maxlength=50>
  <input type=hidden name=kaisuu value=2>
  <input type=submit value=もっと送る>
</form>

結果:画面の振り分けに成功しました。

ユーザー定義画面を振り分けると同時に評価を送信させようとした場合のhtmlファイルの記述は以下になります。評価はJavaScript有効時のみ送信されます。

htmlファイル


<form action="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?【ユーザーID】" method="post"
 target="_blank" name="kaisuuhitokoto">
  <select name="kaisuu"
   onchange="this.form.hitokoto.value=this.options[this.selectedIndex].text;">
    <option value="0" selected>▼評価してください</option>
    <option value="1">良い</option>
    <option value="0">普通</option>
    <option value="2">悪い</option>
  </select>
  <input type="hidden" name="hitokoto" value="JavaScript無効">
  <script type="text/javascript">
  <!--
  document.kaisuuhitokoto.hitokoto.value='▼評価してください';
  document.write(
  '<p>「評価内容」はweb拍手の一言メッセージとして管理人に送信されます。<\/p>'
  );
  //-->
  </script>
  <input type="submit" value="web拍手ボタン">
</form>

▲実験目次へ戻る

一言メッセージを送信できないようにできるか

実験内容:web拍手では1度拍手の送信を行った後、再度拍手を送ってもらう画面で一言メッセージ欄が表示されます。これは設定で表示されないようにすることができません。そこで、拍手は欲しいけれど一言メッセージは送ってほしくない・独自のフォームを利用したい等の場合に、一言メッセージ欄を無効にすることが出来るかどうか試してみました。

この記述はスタイルシートを利用しています。スタイルシートが無効である環境から送信された場合、一言メッセージ欄が表示されてしまいます。

ユーザー定義部分に以下の記述を行いました。

<style type=text/css>
<!--
form, br {
  display : none ;
}
.userform {
  display : block ;
}
-->
</style>
<form action=./clap.cgi?【ユーザーID】 method=post class=userform>
  <input type=submit value=もっと送る>
</form>

結果:フォームを不可視にすることができました。

2回目以降の拍手を送ってもらう必要がなければformの記述は必要ありません。

▲実験目次へ戻る

その他

スタイルシートの書き方

ユーザー定義部分に書き込んでしまいます。文法的には正しくありませんが、多くのブラウザで記述が反映されました。

念のためmeta要素で基準言語も併せて書き込んでおくとよいと考えます。通常の記述からダブルクォーテーションを取り除いてあります。

スタイルシート使用時

<meta http-equiv=content-style-type content=text/css>

JavaScriptの書き方

ユーザー定義部分に書き込んでしまいます。文法的には正しくありませんが、多くのブラウザで記述が反映されました。web拍手公式ページ:web拍手送信後画面用素材によると、コメントアウトやダブルクォーテーション(")を使用しない方がよいそうです。シングルクォーテーション(')は問題なく使用できるようです。

念のためmeta要素で基準言語も併せて書き込んでおくとよいと考えます。通常の記述からダブルクォーテーションを取り除いてあります。

JavaScript使用時

<meta http-equiv=content-script-type content=text/javascript>

文字化けの防ぎ方

送信後の画面で、iCabというブラウザだと文字化けが起こってしまう場合がありました。理由は<head>内で文字コードが指定されていないからだと考えます。文法的には正しくありませんが、ユーザー定義部分で以下の文字コード指定を行ったところ、iCabでの文字化けが解消されました。

通常の記述からダブルクォーテーションを取り除いてあります。

<meta http-equiv=content-type content=text/html; charset=shift_jis>

▲実験目次へ戻る

無料レンタル無料ホームページ無料オンラインストレージ