最近夜になると車のフロントガラスが凍ってて驚きまくってるマンノです。
台湾の今の天気は２１度なんだってさ。（2016/12/17現在）
もう本当びっくりしちゃうよね。
昨日義弟から「時間が自動更新される画像を作りたい」と言われまして。
さくさくっと、試しに作ってみました。
要件としては以下の通り
- 現在時間が表示される
- 開いたら今の時間が更新される。
- そんな画像。
そもそもなんで画像である必要があるのかは分からないのですが、やってみました。
目次
とりあえずjavascriptとcanvasで再現してみる。
初めはhtml2canvasを使おうかとも悩んだのですが。
なにもそこまでしなくても良いんじゃないか？とおもいまして、JSをゴリゴリかく。
とりあえず出来上がったのがこちら。
See the Pen RoEBOx by MANNO (@noru_rundy) on CodePen.
DD = new Date();
Year = DD.getFullYear();
Month = DD.getMonth() + 1;
Day = DD.getDate();
Hours = DD.getHours() ;
Minutes = DD.getMinutes() ;
Seconds = DD.getSeconds();
var ctx = document.getElementById("cv").getContext("2d");
// text
var txt = "更新時間: " + Year + "-" + Month + "-" + Day + " " + Hours + ":" + Minutes + ":" + Seconds;
ctx.font = "15px Arial"; // font size ,font tipe
ctx.fillStyle = "black"; // font collor
ctx.fillText(txt,10,25); // position
var canvas = document.getElementById('cv');
とてもシンプル。
- javascriptで時計を生成
- canvasで表示
たったこの２点だけです。
canvasは仕事でも何度か使ったことがあった為、そこまで悩むことなく作れました。
ctx.font = "15px Arial"; // font size ,font tipe
ctx.fillStyle = "black"; // font collor
この部分でフォントのスタイルや色のを好きなように弄ることができます。
もう本当好き勝手いじっちゃって！
せっかくなので自動更新、自動ダウンロード機能を追加してみる。
先程のコードに以下のコードを追加
var data = canvas.toDataURL();
function aaa(){
document.form1.data.value = data ;
setTimeout(function(){
document.form1.submit();
},6000); // 更新的間隔 1秒1000 ,1分 6000
};
一分間に１度自動更新されるようにかつ。
document.form1.data.value = data ;
では後述するPHPにcanvasのbase64URLを代入するように設定します。
そのほかHTMLでhiddenのformを作成し、自動的にsubmitしちゃうというような処理も書いています。
HTML
<body onload="aaa();"> <form action="time-stamp.php" name="form1"> <input type="hidden" size="30" name="data"> </form>
PHP
<?php
$url = $_GET['data'];
$data = file_get_contents($url);
file_put_contents('last-revision.jpg',$data);
?>
全てのコードを一つのファイル内にまとめると、自動で更新し続けるファイルが出来上がります。
しかも自動でjpgファイルがダウンロードされ続けるというおまけ付き。
何に使えるかはわからないけど、、
色々やったけど使い道が分からない。
色々してみた結果。
あまり使いみちが分からないプログラムが出来ました。
でも欲しがってた本人は喜んでくれたので、まぁ良しとしましょう。
base64についてや、canvasについてなど勉強になりました。
次の案件で使えないかなー。
