カメリアの記事

意味があることやないことを綴ります

特定サイトの画像をランダムにスライドショーするウェブアプリを書いた

パソコンの前で手書き作業なんかしている際に、画面に何か気の利いた画像を表示させておきたい。時間がたつと画像が切り替わってほしい。という思いから作りました。そもそも「気の利いた画像」というのを GET するのが困難なのですが「ランダムで画像を取得し表示させることができるサイト「Lorem Picsum」【URLでimg取得】」の記事によると無料で高品質な写真画像を提供してくれるサイトがあるとのこと。早速飛び付きました。

画像を提供してくれるサイトは「 Unsplash 」。そこの画像をランダムに提供する API を提供しているのが「 Lorem Picsum 」です。そもそもはダミー画像を提供する、という趣旨のようです。

ということで、今回作ったウェブアプリ?の HTML は下にあります。

github.com

動いているところはここで見ることができます。

難しかったところ

タイマー云々であるとか、 JavaScript で画像を読み込んで表示するというような機能を利用するのが初めてだったのでググって調べるところから始めました。ちょこちょこ戸惑いながら進めました。一番頭を使ったのはタイマーの組み立てでした。画面サイズが変わったときの処理ではちょっと分からなくなって苦労しました。

楽しかったところ

タイマーです。ありきたりな機能なので「ありふれた最適解」とうようなものがあるのかと思っていたのですが、ググってみると、なんかそうでもないような。自分で開拓していくような気分だったので楽しかったですね。

見どころ

タイマーです。スライドショーで表示している間に次の画像を読み込んでおく、というのを前提にするとちょっとややこしいコードになります。それにタイマーの停止であるとか、再開であるとか、再開したときにタイマーが始めから数え直さないようにするとか、いろいろあります。

総括

とにもかくにもタイマーでした。タイマーでしかない。

追伸

ここにデモの画像を表示したかったのですが、このページでは正常に動作せず諦めました。がっかり。