 |
 |
|
 |
|
||
| Home | First | Prev | Next | Last |
$ sudo su # cpan PDF::Create # cpan Image::Size
print "Set-Cookie: $str_cookie expires=$expires;\n";としたのですが、実際は「クッキー」と「有効期限」の間に、次のように「セミコロン（;）」が必要でした。
print "Set-Cookie: $str_cookie; expires=$expires;\n";
<form enctype="multipart/form-data" action="upload.cgi" method="post"> アップロードする画像 <input type="file" name="myimage" /> <input type="submit" value="Upload" /> <input type="reset" value="Clear" /> </form>
<form enctype="multipart/form-data" action="upload.cgi" method="post"> アップロードする画像 <input type="file" name="myimage" style='width:280px;height:52px;border-radius:8px;border:4px dotted blue;background-color:#eee' /> <input type="submit" value="Upload" /> <input type="reset" value="Clear" /> </form>これは次のように表示されます。 「この枠の中にファイルをドロップしてください」などのコメントをつけておけば、よりわかりやすくなるかと思います。
Script 1 use Encode qw/ from_to /; from_to($from_name, 'utf8', 'iso-2022-jp'); from_to($to_name, 'utf8', 'iso-2022-jp'); from_to($subject, 'utf8', 'iso-2022-jp'); from_to($body, 'utf8', 'iso-2022-jp');メールヘッダーは、jis コードに変換したものをさらに Base64 にエンコードする必要がありました。
Script 2 use MIME::Base64; $from_name = MIME::Base64::encode($from_name); $to_name = MIME::Base64::encode($to_name); $subject = MIME::Base64::encode($subject);
Script 3 $from_line = "=?ISO-2022-JP?B?$from_name?= <$from_address>"; $to_line = "=?ISO-2022-JP?B?$to_name?= <$to_addr>"; $subject_line = "=?ISO-2022-JP?B?$subject?=";としたのですが、それでも文字化けは直りませんでした。調べてみたら、$from_name, $to_name, $subject のそれぞれに改行が入っていて、これらが"=?ISO-2022-JP?B?" と "?=" で挟まれいなかったのです。それで、Script 2 と Script 3 の間に次のスクリプトを入れました。
Script 2-B chomp $from_name; chomp $to_name; chomp $subject;これで文字化けなくメールを受け取ることができるようになりました。
<script language="JavaScript" type="text/javascript">
function WaitDisplay() {
alert('送信中…');
}
</script>
と記述を書き、このファンクションを onclick を使って、送信ボタンに関連させました。
<input type='submit' name='mode' value='send_mail' onclick='WaitDisplay();' />ところが、これだと、alert ボックスが表示された時点で処理が止まり、alert ボックスの OK を押すと処理が進みますが、ボックスも消えてしまうということで失敗しました。
<link rel="stylesheet" type="text/css" href="sweet-alert.css"> <script src="sweet-alert.min.js"></script>WaitDisplay() には
swal('送信中…');
としたらうまくいきました。しかし、ボックスの中の OK ボタンはいらないので、次のようにして OK ボタンを消しました。
swal({title:'送信中',showConfirmButton:false});
swal({title:'送信中です…',text:'送信が終わるまで操作をせずにお待ちください。',imageUrl:'images/spiningwheelanimation.gif',showConfirmButton:false});
<div id='message' class='msgbox'> <img src='images/spiningwheelanimation.gif'><br> <h2>送信中…</h2> <p>完了するまでどんな操作もせずにお待ちください。</p> </div>次に、このメッセージボックスのスタイルを css で次のように定義しました。
.msgbox {
position:fixed; #画面の上部、中央に表示されるようにする
top:20%;
left:50%;
width:440px;
margin-left:-220px;
z-index:100; #画面のトップに表示されるようにする
background-color:white;
border:1px solid gray;
box-shadow:10px 10px 30px rgba(0, 0, 0, 0.5);
padding:2em;
text-align:center;
display:none; #ふつうは表示されないようにする
}
これを表示するには、WaitDisplay(); に
document.getElementById('message').style.display='block';
と定義すれば良いだけです。
.overlay {
position:fixed; #画面いっぱいに表示する
top:0;
left:0;
right:0;
bottom:0;
z-index:10; #表示順序を指定する
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQJDQsIQsMvugAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAoSURBVEjHY/z///9MBhoCJgYag1ELRi0YtWDUglELRi0YtWDUAuoAAHj5A8b3wmPqAAAAAElFTkSuQmCC");
display: none;
}
png 画像のデータは、GIMP で 24 x 24 px 透明色が背景のキャンバスをつくり、それを透明度40%の白で塗りました。これを重ねると、下の文字や背景が薄く見えるようになります。汎用性を考えて画像データを組み込みましたが、url() にファイルを指定しても同じ結果が得られます。<div id='overlay' class='overlay' ></div>JavaScript の全体は次のようになりました。
function WaitDisplay() {
document.getElementById('overlay').style.display='block';
document.getElementById('message').style.display='block';
}
function ShowMsgBox(boxID) {
document.getElementById('overlay').style.display='block';
document.getElementById(boxID).style.display='block';
}
function CloseMsgBox(boxID) {
document.getElementById('overlay').style.display='none';
document.getElementById(boxID).style.display='none';
}
これは HTML の <head> と <head> に書きました。
<div id='message' class='msgbox' >
<h3 align='center'>データを追加しました</h3>
<button onclick='javascript:CloseMsgBox('message');'>とじる</button>
</div>
<div id='question' class='msgbox' >
<h3 align='center'>データを削除してもいいですか</h3>
<form action='data_deleter.cgi' method='post'>
<input type='hidden' name='data_id' value='$data_id' />
<input type='submit' value='は い' />
</form>
<button onclick='javascript:CloseMsgBox('message');'>いいえ</button>
</div>
<div id='help' class='msgbox' >
<p>ここにデータを追加します。</p>
</div>
これを呼び出すのには、
onclick="javascript:ShoeMsgBox('message');"
onclick="javascript:ShoeMsgBox('question');"
<a onmouseover="javascript:ShowMsgBox('help');" onmouseout="javascript:CloseMsgBox('help');">ヘルプ</a>
などとしました。$str = "It isn't true."; print "Content-type: text/html;\n\n"; print "<html>\n"; print "<input type='text' value='$str' />\n"; print "</html>\n";こんな結果になります。 $str の中にあるアポストロフィが $str を囲んでいるシングル・クォートとみなされ、 アポストロフィ以下が削られてしまうのです。
$str = "It isn't true."; print "Content-type: text/html;\n\n"; print "<html>\n"; print "<input type='text' value=\"$str\" />\n"; print "</html>\n";と表示されますが、$str にダブルクォートが含まれる場合、上記と同じ問題が生じます。
$str = "It isn't true."; $str =~ s/'/'/g; print "Content-type: text/html;\n\n"; print "<html>\n"; print "<input type='text' value='$str' />\n"; print "</html>\n";見た目は正しく表示されるのですが、データが改変されていますので、あとで戻してやる必要があります。もっと正しい方法がないかと探しています。
a.tooltip:hover {
background: #ffffff; /* IE6以下で必要 */
text-decoration: none;
}
a.tooltip span {
display: none;
padding: 8px;
font-size: 14px;
margin-left: 8px;
line-height: 1.6;
}
a.tooltip:hover span{
display: inline;
position: absolute;
top: 35%;
left: 0;
right: 0;
margin: auto;
width: 400px;
background-color: #FFF7EE;
border: 1px solid #cccccc;
color: #000000;
/* a.tooltip spanに指定すると、IE6以下でspanの領域でマウスが反応してしまう */
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
/* IE6以下にのみ適用 */
a.tooltip:hover span{
width: 416px;
}
<a href='#' class='tooltip'>?<span>ここには英数文字だけ記入してください</span></a>「?」をマウスオーバーすると、<span></span>に挟まれた文字列「ここには英数文字だけ記入してください」が表示されるしかけになっています。私は CGI でもっと長い文章を文字変数に代入し、それを表示させるようにしています。
print "Content-type: text/html\n\n";次のようにシングルクォートでかこむとエラーになる。
print 'Content-type: text/html\n\n';
print << "EOM";
value="$mymail"
value='$mymail'
value=$mymailその他のタグでも、次のようにクォートの省略ができました。
<table background=$bg_image>
&print_error('メールアドレスが記入されていません', $goback);
$the_name = $name;
変数への代入式の場合、次のように文字列と変数を混ぜるときにはダブルクォートが必要です。
$welcome_line = "ようこそ $the_name さん、どうぞコメントをお残しください。";上記のダブルウォートをシングルクォートにすると、HTML には「ようこそ $the_name さん」と表示されてしまいます。バックスラッシュを使うときも、ダブルクォートにする必要がありました。
$admin_email_address = "admin\@penguin.net";
|
|
|
|
|
||
| Home | First | Prev | Next | Last |