「美描時計」サンプルコード kitten-clock.cgi
#!/usr/bin/perl --
# Windows の場合は1行目を以下のように変更
#!C:\strawberry\perl\bin\perl.exe --
use strict;
use warnings;
use utf8;
binmode STDOUT, ':encoding(utf8)'; #Windows でもutf8
# 表示するHTMLコード(別途HTMLファイルを作り表示確認済のもの)をコピー&ペースト。
# 表示の度に時刻を変えるので、その部分は「00:00」という表記にしてある。
my $template = qq{
<!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=UTF-8">
<title>00:00</title>
<!-- 時刻 00:00 は後でプログラムで求めた時刻と置換 -->
<style type="text/css">
p, div, img {margin: 0;padding: 0;}
#main-container {width: 95%;max-width: 600px;margin: 20px auto;font-family: sans-serif;}
#main-container span{display: inline-block;}
.left {float: left;}
.right {float: right;}
.clearfix {clear: both;}
#clock {font-size: 4em;line-height: 0.8;width: 100%;margin: 20px auto;text-align: center;}
#main-container img {width: 100%;}
</style>
<body>
<div id="main-container">
<p><span id="clock" class="clearfix">00:00</span><span class="right"> だにゃん。</span></p>
<!-- 時刻 00:00 は後でプログラムで求めた時刻と置換 -->
<img src="http://placekitten.com/600/400">
</div>
</body>
</html>
};
# HTMLのテンプレート(ひな形)指定ここまで
# 時刻を求めて、「00:00」の形式で準備
my @temp = localtime();
my $time = sprintf('%02d:%02d', $temp[2], $temp[1]);
# $template 内の「00:00」の部分と置換
$template =~ s/00:00/$time/g;
# 出力
print "Content-Type:text/html;charset=utf-8\r\n";
print "\r\n";
print $template;
保存した後、Mac環境の方はパーミッションを設定してから保存したファイル名 kitten-clock.cgi でアクセスして下さい。
うまく表示されましたか？
HTMLテンプレートの部分が長過ぎて少し見にくいかもしれませんが、プログラム上の処理はさほど多くありません。余力のある方は、午前2時から4時の間は「もう寝た方がいいんだにゃー」と表示させてみて下さい。
参考リンク
qq{ } を使った文字列の指定
my $template = qq{ ... };
という、他のプログラミング言語ではちょっと見慣れない書き方が出てきましたね。この書き方については、「Perl での文字出力方法」をご参照下さい。
sprintfを使った桁数の調整
時刻の表示では、以下のように sprintf という関数を使って「12:03」等の時刻表示を構成しています。
my $time = sprintf('%02d:%02d', $temp[2], $temp[1]);
この関数を使わないと、9時代以下と9分までは桁がつぶれて、例えば「12:3」という表示になってしまいます。
sprintf 関数の役割については、上と同じく「Perl での文字出力方法」に簡単な解説がありますのでご覧下さい。
Perlの正規表現によるマッチ
以下の1行で、テンプレート内にある「00:00」という部分を検索して、現在時刻の $time に置き換えています。この検索の仕組みを「正規表現」と呼びます。
$template =~ s/00:00/$time/g;
正規表現について詳しくは、「Perl の正規表現で文字検索」をご覧下さい。
