小説サイトのJavaScript Chips

第３回　ページの最後に一言感想フォーム

　ページの最後に一言感想フォームをつけます。
　こういうのですね（cssで右寄せにしています）。

　これもやっぱり前回までと同じ。基本は　document.write()　です。
　では、このスクリプトで書き出すhtmlを、まずは書いてみましょう。 

<form method="post" action="mail.cgi*1">
    <select name="impressions">
        <option selected value="読んだよ">読んだよ</option>
        <option value="誤字あるし">誤字あるし</option>
        <option value="いつも来てるよ">いつも来てるよ</option>
        <option value="面白かった">面白かった</option>
        <option value="もっと頑張れ">もっと頑張れ</option>
        <option value="書き直せ〜！">書き直せ〜！</option>
        <option value="早く続きを">早く続きを</option>
    </select>
    <input type="submit" value="送信" />
</form>

*1　フォームのデータを受けとるcgiの場所を記します

　このままhtmlですべてのページに設置しても目的は達成されますが、それって、面倒ですよね。
　それに、項目に変更を加えるときも、全部のページを書き直し、です。
　じゃあ、そういう面倒な作業はJavaScriptにやらせましょう、ということで、こう直します。 

var imprs = "<form method=\"post\" action=\"mail.cgi\">"
          + "<select name=\"impressions\">"
          + "<option selected value=\"読んだよ\">読んだよ</option>"
          + "<option value=\"誤字あるし\">誤字あるし</option>"
          + "<option value=\"いつも来てるよ\">いつも来てるよ</option>"
          + "<option value=\"面白かった\">面白かった</option>"
          + "<option value=\"もっと頑張れ\">もっと頑張れ</option>"
          + "<option value=\"書き直せ〜！\">書き直せ〜！</option>"
          + "<option value=\"早く続きを\">早く続きを</option>"
          + "</select>"
          + "<input type=\"submit\" value=\"送信\" />"
          + "</form>";

document.write(imprs);

　見比べていただけばおわかりかと思いますが、

  1. まず、値を括る「"（ダブルクォート）」の前に「\」をつけます
  2. 次に、一行ごとに「"」で囲みます
  3. 一行目に「var imprs = 」で変数宣言をします
  4. その後の行は「+」記号で繋ぎます
  5. htmlの終わりの行には「;（セミコロン）」をつけます
  6. 最後は「document」に「imprs」を「write」する、と書き足して終了

　とっても簡単です。
　これを「impression.js」と名付ければ外部jsの出来上がり。
　あとはhtmlにこれを埋め込むだけです。
　埋め込む方法は 

<script type="text/javascript" src="impression.js"></script>

　です。
　が。
　あれ、でも、ちょっと待ってください。
　このままだと、どのページから送信された感想なのか、わからないですよね。
「誤字あるし」
　うれしい、ありがとーｖ　でも、どこ？
　これではせっかくいただいたメッセージが生かせません。
　そこで、「ページタイトルを取得して、メッセージと一緒に送信させる」ことにしましょう。 

f_name = new Object(document.title);

var imprs = "<form method=\"post\" action=\"mail.cgi\">"
          + "<input type=\"hidden\" name=\"file_name\" value=\""
          + f_name
          + "\">"
          + "<select name=\"impressions\">"
          + "<option selected value=\"読んだよ\">読んだよ</option>"
          + "<option value=\"誤字あるし\">誤字あるし</option>"
          + "<option value=\"いつも来てるよ\">いつも来てるよ</option>"
          + "<option value=\"面白かった\">面白かった</option>"
          + "<option value=\"もっと頑張れ\">もっと頑張れ</option>"
          + "<option value=\"書き直せ〜！\">書き直せ〜！</option>"
          + "<option value=\"早く続きを\">早く続きを</option>"
          + "</select>"
          + "<input type=\"submit\" value=\"送信\">"
          + "</form>";

document.write(imprs);

　ボールド体の箇所をご覧ください。
「document」の「title」を「f_name」と名付けます、というのが最初の行の意味です。
　取得した「title」をフォームに組み入れるためのhtmlが「<input type=\"hidden\"〜」からの３行です。
　分割されていてわかりにくいので、htmlで書いてみます。 

<input type="hidden" name="file_name" value="f_name">

　このデータは表に見える必要はないので、input type　は「hidden（隠れている状態）」
　このデータの名前は「file_name」で、その中身は「f_name」　先ほど取得した「document」の「title」ですね。
　つまり、「f_name」の値（documentのtitle）を「file_name」とし、「hidden（隠したまま）」でデータを送信します、ということです。
　これでどのページからの送信された情報なのか、わかります。

　さらに、この感想フォームに一言メッセージ欄を設けたものがこちら。
　一時小説ページで使用していたものです。（まだご利用いただけます/笑）

f_name = new Object(document.title);

var imprs = "<form method=\"post\" action=\"mail.cgi\">"
          + "<input type=\"hidden\" name=\"file_name\" value=\""
          + f_name
          + "\">"
          + "<input type=\"text\" name=\"comment\" size=\"80\">"
          + "<select name=\"impressions\">"
          + "<option selected value=\"読んだよ\">読んだよ</option>"
          + "<option value=\"誤字あるし\">誤字あるし</option>"
          + "<option value=\"いつも来てるよ\">いつも来てるよ</option>"
          + "<option value=\"面白かった\">面白かった</option>"
          + "<option value=\"もっと頑張れ\">もっと頑張れ</option>"
          + "<option value=\"書き直せ〜！\">書き直せ〜！</option>"
          + "<option value=\"早く続きを\">早く続きを</option>"
          + "</select>"
          + "<input type=\"submit\" value=\"送信\">"
          + "</form>";

document.write(imprs);

　変更箇所はボールド体の一行です。
　そしてさらに応用編（笑）
　コメント欄未入力で送信するのは申し訳ないし、やめようかな、と躊躇ってしまう（わたしのような）方にもお薦め。
　ちなみに誤字脱字のご連絡にはもってこい、です。
「コメント」をクリックしてください。 

function display(id){
    if(document.all)OBJ = document.all(id).style;
    else if(document.getElementById)OBJ = document.getElementById(id).style;
         if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}

f_name = new Object(document.title);

var imprs= "<form class=\"imprs\" method=\"post\" action=\"mail.cgi\">"
     + "<input type=\"hidden\" id=\"file_name\" name=\"file_name\" value=\""
     + f_name
     + "\" />"
     + "<a id=\"msgbox\" href=\"javascript:void(0)\" onclick=\"display('message')\">
                                                                         コメント</a>"
     + "<input style=\"display:none\" type=\"text\" id=\"message\" name=\"message\"
                                                                         size=\"70\">"
     + "<select name=\"impressions\">"
     + "<option selected value=\"読んだよ\">読んだよ</option>"
     + "<option value=\"誤字あるし\">誤字あるし</option>"
     + "<option value=\"いつも来てるよ\">いつも来てるよ</option>"
     + "<option value=\"面白かった\">面白かった</option>"
     + "<option value=\"もっと頑張れ\">もっと頑張れ</option>"
     + "<option value=\"書き直せ〜！\">書き直せ〜！</option>"
     + "<option value=\"早く続きを\">早く続きを</option>"
     + "</select>"
     + "<input type=\"submit\" value=\"送信\" /></form>";

document.write(imprs);

　いかがでしょうか。
　意外と簡単に設置できるでしょう？
　もちろん前述のようにhtmlでも書けます。書けますが、ちょっとした変更を試みるたびにすべてのページを書きかえなくてはならないのは、正直、辛いです。
　では最新の１ページにだけ設置する。それも悪くはないのですけれど、連載が長くなればなるほど最新ページに至るまでの時間も長くかかります。
　仮に現在４０ページ公開されている長編小説があったとしましょう。毎月２ページずつ更新されます。ひと月５ページで読むとして、フォームのあるページに辿りつくのは何ヵ月後でしょう。
　１３ヵ月後なんです。
　その間、読んでくださる方は、「誤字あるし」と思っても「いつも来てるよ」と思っても「読んだよ」と思っても、それを筆者に伝える術がありません。
　新作ではないからBBSに感想が書きにくい、とか、今さらかもと思うとメールでも感想を書きにくい、とか……
　わたしはいつもそれで悩んであきらめてしまうので、そういうことからも、全ページにあるほうがコミュニケーションにストレスはないのでは、と思います。
　送信ボタンを押すだけで気軽にコミュニケーションがとれるツールなのですから、気軽に、送りたいと思ったときに利用できるところにあってほしいのが、読者としてのわたしの気持ちです。

　さて、わたしが利用しているフォームメールCGIは、futomi's CGI Cafeさんの「MP Form Mail CGI」です。詳しいご紹介はリンク先をご覧いただくことにして、メールテンプレートの設定を参考までに公開いたします。

【一言】
$file_name$
$impressions$
$message$

------------------------------------------------------------
【送信者情報】
・ブラウザー      : $USERAGENT$
・送信日時        : $DATE$
------------------------------------------------------------

　そして、いただくメールはこんな感じです。
　例）風紋　第四夜　三「天を掴む」　早く続きを　一行コメントがあった場合

【一言】
風紋　第四夜　三「天を掴む」
早く続きを
なるたけコンスタントに更新してくれたまへ

------------------------------------------------------------
【送信者情報】
・ブラウザー      : Mozilla/4.0 (compatible; MSIE 
6.0; Windows 98; Win 9x 4.90)
・送信日時        : 2004年06月09日（水） 21:10:17
------------------------------------------------------------

注：万が一文字化けなどのエラーが発生したときのため、ブラウザ情報を取得しています。

　そういうことで、第３回「ページの最後に一言感想フォーム」でした。
　次回は「小説ページのリンクナビゲーション」です。