デジタルサイネージを作る2025/11/27（木）
ある事情で、デジタルサイネージ（っぽいもの）を作ることになりました。複数の画像を準備しておいて、自動で切り替えながら表示します。こんな感じです。（何を表示しているかは、ご想像にお任せします）
さくっと作れるだろう、と思っていたのですが、ファイルの内容を表示するところでつまづきました。掲示内容は PDF で用意してあるのですが、PDF の表示がどうも微妙です。ブラウザの中でいろいろ複雑なことをやっているようで、周りに枠がついたり、表示が少し遅れたりします。
今回の目的には、PDFの「文書」としての機能は不要です。そうすると、画像に変換して表示する方がよさそうです。そこで、ImageMagick を使って、288 dpi の PNG ファイルに変換しました。１個 150 KB ぐらいのサイズになってしまいますが、まあ今どきこの程度のサイズは許容範囲でしょう。ついでに、PDF ファイルの周りの空白も削除しました。
$ for i in *.pdf; do magick -density 288 $i -trim ${i/pdf/png}; done
表示の自動切り替えは、JavaScript の setTimeout 関数を使って実装します。このとき、CSS の transition 属性を使うと、「フェードアウト→フェードイン」という機能も実現できます。<html> の背景色を黒、<body> の背景色を白に設定して、通常は <body> が見えるようにしておきます。切り替えの時は、<body> の opacity を 0 にすると、<body> が消えて <html> の真っ黒な背景に変わりますが、このとき <body> に transition: 0.5s を指定しているため、0.5 秒かけて徐々に変化します。その後、表示内容を切り替えて、opacity を元に戻すと、また 0.5 秒かけて <body> の表示が復活します。
/* JavaScript */
/* スライドショー */
function onTimer() {
/* 次の画像 */
let v = nextImage();
/* body を徐々に消す */
body.classList.add("hide");
timerID = setTimeout(() => { /* 1.5秒後に呼び出す */
/* 表示する画像を切り替える */
let img = document.getElementById("img");
img.src = "images/" + encodeURIComponent(v) + ".png";
/* body を徐々に表示する */
body.classList.remove("hide");
timerID = setTimeout(onTimer, 30000);
}, 1500);
}
/* CSS */
html {
background-color:black;
}
body {
background-color:white;
margin:0;
padding:0;
transition: 0.5s;
}
body.hide {
opacity:0%;
}
今どきの学生さんなら、AI を使ったら一発でできるのかもしれません。私はAIコーディングを全く使えないので、すべて手書きです。AIコーディング覚えた方がいいのかなあ……それを勉強している間に手書きで書けてしまう気がするので、なかなか意欲が湧かないんですよね。本業とはまったく関係ないし（苦笑）