複数の画像の中からランダムで1つを返して表示する

例えば画像が1000枚用意してあって、ページにアクセスするたびに別の画像をランダムで表示するようなWEBサイトを作りたいとする。

具体的にはこれが作りたくて調べた↓

Deep Yu-Gi-Oh! 完成する

Deep Yu-Gi-Oh!「Deep Yu-Gi-Oh!」はおよそ1万枚存在する遊戯王カードを学習して作られた、存在しない遊戯王カードを無から生成して表示する…

画像枚数が10枚程度ならファイル名を全部書いてランダムで選択してもいいが1000枚となると厳しい、また画像を変更・追加するたびにスクリプトを変更するのもスマートじゃない。
色々と方法は考えられるが「Firebase Storage」を利用する方法が、

• 作成が簡単
• 管理・修正が楽
• 無料

と都合が良かったためこれを採用した。

hexo-related-popular-posts

ブログによくある「この記事に関連する記事」みたいなやつを出したい。
このブログはHexoにより生成されており、Hexoには良い感じのプラグインが多数存在する。

ここでhexo-related-popular-postsというHexo用の素晴らしいプラグインを使うことで関連記事を生成する。

hexo-related-popular-postsのGitHubリポジトリで実験する。

公式ドキュメント通りにやればおおよそうまくいくが環境の問題か一部詰まった所がある。

• 環境

実装方法を以下に記す。

Windoes 10 でHexoの環境構築

Hexoは高速、シンプル、パワフルなブログフレームワークらしい。私はWindows 10の環境下でHexoを用いてブログを構築する。

Hexoを使うために必要な①Node.jsと②Gitに加えて、必須ではない③VS Codeも便利なのでインストールする。