アプリ版:「スタンプのみでお礼する」機能のリリースについて

たびたびの質問で恐縮です。

HTMLページにラジオボタンを設置し、
これを選んだらこの答え、これを選んだらこの答え、
と、ページを移動させるようCGIを記述しました。

いくつもの質問に回答した結果、
最終ページにひとことコメントを入れたいです。

たとえば
Q2でA、Q5でCを選んだ場合は
最終ページで”よくできました”などです。

それを、CGIで表示するのではなく、
HTMLページに代入して表示させたいです。

私のイメージでは、

if ($q1 eq "A" && $q5 eq "C")
$ans eq "よくできました";

などと、CGIなどで変数を設定して
それをHTMLに埋め込むようなコードを記述すればいいのではないかとか考えて
色々やってみたのですがうまくいきません。
ほかのサイト等色々見ていると、以下のような感じで代入できそうな気がしています。

<p>!ans!</p>

どのようにしたらいいのでしょうか?
参考サイト等ありましたら教えてください!

A 回答 (4件)

前にも説明しましたが・・


CGIであることと、それがHTMLであることは、全く無関係です。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 頭がWindowsに汚染されていると、よく間違われます。CGIはHTMLを出力します。拡張子は.cgiであろうが.plであろうが、.htmlであろうが、.jpgであろうが一切関係なく、サーバーの応答ヘッダにcontent-type="text/html"とあれば、HTMLとしてブラウザは受け取ります。

 単純にテンプレートとなるHTMLを用意して、該当する部分だけ書き換えては次に進めば簡単です。HTMLがたとえいくつあろうと・・

極簡単な例です。
1) 一行目のPerlへのパスは適当に書き換えてください。
2) 質問や回答の文字列を直接記述していますが、変更部分だけのHTMLを記述したテキストファイルをopenしてprintで出力すれば良いでしょう。
 テキストファイルのファイル名を、送信された回答から算出できる文字列にしておくと分かりやすいでしょう。
★文字コードはutf-8です。
★タブは_に置換してあるので戻すこと。
★エラー処理も何もしていない本体だけです。このままでは実用にはなりません。

#!/usr/local/bin/perl

my $ANS = "";
my $Que = "<form action=\"$ENV{'SCRIPT_NAME'}\">";
my $HIDDEN = "";

my @pairs = split(/&/,$ENV{'QUERY_STRING'});
foreach $pair (@pairs) {
_my ($name, $value) = split(/=/, $pair);
_$value =~ tr/+/ /;
_$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
_$name =~ tr/+/ /;
_$name =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
_if ($value =~ /\r\n/) { $value =~ s/\r//g; }
_elsif ($value =~ /\r/) { $value =~ s/\r/\n/g; }
_$FORM{$name}=$value;
}
my @keylist = keys(%FORM);
my $keycount = keys(%FORM);
my $inData = "<dl><dt>要素数は $keycount です。</dt>";
for (my $i = 0; $i < $keycount; $i++){
$inData .="<dd>$keylist[$i]:$FORM{$keylist[$i]}</dd>";
}
$inData .="</dt>";

if($FORM{'Q3'} ne ""){
_$MESSAGE="質問です。";
}
elsif($FORM{'Q2'} ne ""){
_$MESSAGE="質問です。";
}
elsif($FORM{'Q1'} ne ""){
_$MESSAGE="質問です。";
}
else{
_$MESSAGE="回答です";
}
if($FORM{'Q3'} eq "W"){
_if($FORM{'Q2'} eq "M"){$ANS =qq^<p>あなたは西日本生まれの既婚男性です。</p>^;}
_else{$ANS =qq^<p>あなたは西日本生まれの未婚男性です。</p>^;}
}
elsif($FORM{'Q3'} eq "E"){
_if($FORM{'Q2'} eq "M"){$ANS =qq^<p>あなたは東日本生まれの既婚男性です。</p>^;}
_else{$ANS =qq^<p>あなたは東日本生まれの未婚男性です。</p>^;}
}
elsif($FORM{'Q3'} eq "F"){
_if($FORM{'Q2'} eq "M"){$ANS =qq^<p>あなたは太った既婚女性です。</p>^;}
_else{$ANS =qq^<p>あなたは太った未婚女性です。</p>^;}
}
elsif($FORM{'Q3'} eq "S"){
_if($FORM{'Q2'} eq "M"){$ANS =qq^<p>あなたは痩せた既婚女性です。</p>^;}
_else{$ANS =qq^<p>あなたは痩せた未婚女性です。</p>^;}
}
else{
_if($FORM{'Q2'} eq "M"){
__$Que .= qq~\t\t\t<p>あなたは西日本出身?それとも東日本出身?</p>\n\t\t\t<p>西日本:<input type="radio" name="Q3" value="W"></p>\n\t\t\t<p>東日本:<input type="radio" name="Q3" value="E">\n\t\t\t</p>~;
__$HIDDEN .="<input type=\"hidden\" name=\"Q2\" value=\"$FORM{'Q2'}\"><input type=\"hidden\" name=\"Q1\" value=\"$FORM{'Q1'}\">";
_}
_elsif($FORM{'Q2'} eq "N"){
__$Que .= qq~\t\t\t<p>あなたは太っている?それとも痩せてる?</p>\n\t\t\t<p>太っている:<input type="radio" name="Q3" value="F"></p>\n\t\t\t<p>痩せている:<input type="radio" name="Q3" value="S">\n\t\t\t</p>~;
__$HIDDEN .="<input type=\"hidden\" name=\"Q2\" value=\"$FORM{'Q2'}\"><input type=\"hidden\" name=\"Q1\" value=\"$FORM{'Q1'}\">";
_}
_else{
__if($FORM{'Q1'} eq "M" || $FORM{'Q1'} eq "F"){
___$Que .= qq~\t\t\t<p>あなたは未婚?それとも既婚?</p>\n\t\t\t<p>未婚:<input type="radio" name="Q2" value="M"></p>\n\t\t\t<p>未婚:<input type="radio" name="Q2" value="N">\n\t\t\t</p>~;
___$HIDDEN .="<input type=\"hidden\" name=\"Q1\" value=\"$FORM{'Q1'}\">";
__}
__else{
___$Que .= qq~\t\t\t<p>あなたは男?それとも女?</p>\n\t\t\t<p>男:<input type="radio" name="Q1" value="M"></p>\n\t\t\t<p>女:<input type="radio" name="Q1" value="F">\n\t\t\t</p>~;
__}
_}
}
$Que .= "$HIDDEN <input type=\"submit\" value=\"送信\">";
$COMMENT = qq~<div class="section">$ANS</div>~;
print "content-type:text/html\n\n";
while(<DATA>){
_s/<!--Message-->/$MESSAGE/;
_s/<!--inData!-->/$inData/;
_if($ANS ne ""){
__s/<!--Comment-->/$COMMENT/;
_}
_else{
__s/<!--Question-->/$Que/;
_}
_print;
}
__END__
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style media="screen">
<!--
-->
</style>
</head>
<body>
_<header>
__<h1 id="title">Your title</h1>
__<p><!--Message--></p>
_</header>
_<section>
<!--inData!-->
<!--Question-->
__</form>
_</section>
<!--Comment-->
_<footer>
__<h3>A nice footer</h3>
_</footer>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございます!
頭がかたくて申し訳ないです。

>単純にテンプレートとなるHTMLを用意して、該当する部分だけ書き換えて

このやり方を、CGIを使ってHTMLのなかに言葉を書き込んでいると
勘違いしていました。
皆さんが前々から教えてくださってるのに申し訳ない気持ちです。

コード有難うございます!大変助かります!
利用させていただきます!

ありがとうございました!

お礼日時:2013/08/16 09:45

スクリプトのソースコードが無いので、正確なことはわかりませんが。


10年前ということ、CGIを使っているということ、htmlのソース中のコメント等から考えるに
・雛形(テンプレート)をCGiで加工して、文字列を埋め込んだものを出力している
と考えるのが妥当だと思います。
    • good
    • 0
この回答へのお礼

何度もありがとうございます!
いただいたお返事を参考にさせていただき勉強してみます。
ありがとうございました!

お礼日時:2013/08/15 09:56

外部CSSファイルを用意して、それを使うように指定するか、HTML中にstyleタグで組込みます。


このあたりは、CGIだろうと、HTMLファイルだろうと同じです。

繰り返しますが、ブラウザが見るのは、最終的なデータだけです。元がファイルだとかCGIだとかは関係ありません。


前の回答では省略して書いただけで、実際に使用するなら、END_OF_HTMLまでの間には、HTMLとして完全な物を記述します。
CSSが使いたければ、その様に記述します。
$html=<< 'END_OF_HTML';
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="answer">
<p>!ans!</p>
</div>
</body>
END_OF_HTML
# これでも不完全ですが、あくまで例として。


> 私が参考に見たのは、メールフォームの確認画面です。
> 確認画面がhtmlファイルで作成されていて、
> そこに、入力された情報を表示させるようになっていました。

これは、上記のヒアドキュメントの代わりに、ファイルから読み込むだけです。
    • good
    • 0
この回答へのお礼

たびたびありがとうございます!
しつこく質問してすみません。
イメージとしては以下のような感じです。
http://www.octalserve.gr.jp/html/gyoumu/hp/cgi/s …
一言コメント欄の表示文字だけを変えたい場合でも、
最終ページのすべてのソースをCGIに書き込んでいるということでしょうか?

私が作成しているものの場合、
回答パターンが10通り以上あり、
最終ページも12ページあり、それぞれのページのソースが50行以上あります。
javascriptを使用していたりボタンも多数配置していたりして、
これをすべてCGIに書き込むとなるとかなり膨大な量になります。

ページの全てのソースをCGIに書き込むのでなく、
htmlファイルは12個作成しておいて、
その一部に言葉を代入するようなことはできないでしょうか?

お礼日時:2013/08/14 11:10

> CGIで表示するのではなく、HTMLページに代入して表示させたいです。



この意味がわかりません。
ブラウザにとって、相手がHTMLファイルか、CGIからの出力かは関係ありません。
受け取ったものがどんなデータ形式か、だけです。

おそらく、テンプレートと呼ばれるものを想定しているのだと思います。
ですが、これも、「テンプレートを加工してHTMlに変換するCGI」での表示となります。
テンプレートをCGIに内蔵してしまえば、テンプレートファイルを別途用意する必要はありません。

原理は単純で、「テンプレート中の文字列を置換する」ものです。
$html=<< 'END_OF_HTML'; # ヒアドキュメントを使えば、htmlファイルに書くような感じでスクリプト中に記述できる
<html>
...
<p>!ans!</p>
...
END_OF_HTML
$html =~ s/!ans!/${ans}/g ; #置換

「テンプレートエンジン」と呼ばれるものを使うと、簡単に記述できたり、高度な機能が使えたりします。
例) http://perldoc.jp/docs/modules/HTML-Template-2.6 …

また、ヒアドキュメントを使った、こんな書き方もできます。
$html=<< "END_OF_HTML"; # "でくくったときは、ダブルクォートで括った文字と同じように、変数等が展開されます
<html>
...
<p>${ans}</p> # ダブルクォートと同じに$ansの内容が展開されます
...
END_OF_HTML
    • good
    • 0
この回答へのお礼

ありがとうございます!
以下私の考え違いだったらごめんなさい。

<html>
...
<p>!ans!</p>
...
END_OF_HTML

上記のようにCGIに記述すると、
まっしろいページに「よくできました」
とだけ表示される形ではないでしょうか?

そうではなくて、
CSSを読み込んだりdivを使ったり
ほかにもいろんな情報を書き込んだ込み入った?ページを作成していて、
そこにansを表示させたいです。
すべてのソースをCGIに書き込むことは出来ません。
また用意してある複数のhtmlページの一部に
ansを表示させたいと思っているので
”HTMLファイルに代入する”という表現を使いました。

私が参考に見たのは、メールフォームの確認画面です。
確認画面がhtmlファイルで作成されていて、
そこに、入力された情報を表示させるようになっていました。
そのイメージで作りたいと思ったのですが・・・。

見当違いでしたらごめんなさい。
引き続きよろしくお願いいたします!

お礼日時:2013/08/14 09:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!