プログラミング

【html,css,javascript】写真をランダムで表示していくWEBページを作成しました

  /

カメラやスマホで撮った写真はクラウドに保存している方が多いと思いますが、パソコンや外付けハードディスクに保存している方も多いと思います。

私はどちらにも保存しています。

パソコンに保存している写真を見返すときに、自分で選んで写真を確認するのは手間だなぁと感じていました。

そこで、ランダムに写真を切り替えて表示してくれるWEBページを作成出来たらいいなと思い作ってみました。

Contents
  1. 完成イメージ
  2. プログラミング言語
  3. まとめ

完成イメージ

ブラウザで写真を表示するだけのWEBページなので、クラウドに写真をアップロードしなくてもブラウザで写真を表示できます。

作成イメージはこちらです。

写真が切り替わる機能以外は実装していないのでシンプルすぎますけど。

デザインについてはこれから勉強していきます。

プログラミング言語

使うプログラミング言語は以下です。

  • html
  • css
  • javascript

ローカルPCで使う場合のファイルリスト作成のためにバッチファイルも作成しました。

ディレクトリイメージ

（任意のフォルダ）
├css
│└style.css
├images
│└（表示したい画像ファイル）
├js
│└script.js
├create_json.bat
├file_list.js
└index.html

htmlの実装内容

htmlでは写真を表示するための領域を10個作成しておきます。

この10個の写真がランダムで切り替わります。

【index.html】

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Photo List</title>
  <meta name="description" content="写真を表示します">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript" src="file_list.js"></script>

  <link href="css/style.css" rel="stylesheet">
</head>

<body>

  <div class="wrapper grid">
    <div class="item">
      <img id="img1" src="images/image1.jpg" alt="" class="disp-photo">
    </div>
    <div class="item">
      <img id="img2" src="images/image2.jpg" alt="" class="disp-photo">
    </div>
    <div class="item">
      <img id="img3" src="images/image3.jpg" alt="" class="disp-photo">
    </div>
    <div class="item">
      <img id="img4" src="images/image4.jpg" alt="" class="disp-photo">
    </div>
    <div class="item">
      <img id="img5" src="images/image5.jpg" alt="" class="disp-photo">
    </div>
    <div class="item">
      <img id="img6" src="images/image6.jpg" alt="" class="disp-photo">
    </div>
    <div class="item">
      <img id="img7" src="images/image7.jpg" alt="" class="disp-photo">
    </div>
    <div class="item">
      <img id="img8" src="images/image8.jpg" alt="" class="disp-photo">
    </div>
    <div class="item">
      <img id="img9" src="images/image9.jpg" alt="" class="disp-photo">
    </div>
    <div class="item">
      <img id="img10" src="images/image10.jpg" alt="" class="disp-photo">
    </div>

  </div>
</body>

</html>

cssの実装

gridクラスで「display: grid;」と設定しているのでグリッド表示になります。

「.itemimg」の設定で「opacity: 1;」と設定していますが、javascriptでopacityを変更させて、だんだん画像の透明度を変更させて画像を切り替えるようにしています。
【style.css】
@charset "UTF-8";

/* 共通部分
--------------------------------*/
html {
  font-size: 100%;
}

body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;
  color: #432;
}

img {
  max-width: 100%;
}

.wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 4%;
}

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 1%;
  margin-bottom: 1%;
}

.item img {
  opacity: 1;
  height: 300px;
  width: 300px;
  object-fit: cover;
}

Javascriptの実装

まずはファイルリストの準備。jsファイルに画像のフルパスの配列を作成しておきます。

【file_list.js】

var file_list = [ 
 '' 
 ,'D:/git/prg/web-Photo/images/image1.jpg' 
 ,'D:/git/prg/web-Photo/images/image10.jpg' 
 ,'D:/git/prg/web-Photo/images/image2.jpg' 
 ,'D:/git/prg/web-Photo/images/image3.jpg' 
 ,'D:/git/prg/web-Photo/images/image4.jpg' 
 ,'D:/git/prg/web-Photo/images/image5.jpg' 
 ,'D:/git/prg/web-Photo/images/image6.jpg' 
 ,'D:/git/prg/web-Photo/images/image7.jpg' 
 ,'D:/git/prg/web-Photo/images/image8.jpg' 
 ,'D:/git/prg/web-Photo/images/image9.jpg' 
];

 

【script.js】

やっていることは

  1. 画像をだんだん透明にしていく
  2. 透明になったら画像を変更する
  3. 画像の透明度をだんだん戻していく
/***************************************
 * 変数
 **************************************/
let photoCount = 0;
let minSleep = 100;
let maxSleep = 100;
let fadeInterval = 10;
let opacityInterval = 0.01;
let photoList = [];

/***************************************
 * 初期表示
 **************************************/
$(document).ready(function(){
  
  // 写真の数を取得
  photoCount = file_list.length;

  // photo配列作成
  photoList.push($("#img1"));
  photoList.push($("#img2"));
  photoList.push($("#img3"));
  photoList.push($("#img4"));
  photoList.push($("#img5"));
  photoList.push($("#img6"));
  photoList.push($("#img7"));
  photoList.push($("#img8"));
  photoList.push($("#img9"));
  photoList.push($("#img10"));

  // 写真リスト初期化
  initPhoto();

  // 写真切り替え
  photoChange(photoList[getRandomInt(0,10)]);

});

/***************************************
 * 写真リスト初期化
 **************************************/
 function initPhoto() {

  for(let i=0; i < photoList.length; i++) {
    photoList[i].attr('src',file_list[getRandomInt(1,photoCount-1)])
  }
}

/***************************************
 * 写真変更
 **************************************/
const photoChange = (tgt) => {

  let obj = tgt;

  if(obj.css('opacity') >= 1) {
    obj.removeClass('disp-photo').addClass('change-photo');

    // ここでスリープ
    sleep(getRandomInt(minSleep, maxSleep));

    // 対象の画像を変更
    obj = photoList[getRandomInt(0,10)];
  } 
  if(obj.css('opacity') <= 0) {
    obj.removeClass('change-photo').addClass('disp-photo');

    // ここで画像切り替え
    obj.attr('src',file_list[getRandomInt(1,photoCount-1)]);
  }

  var opa = obj.css('opacity');

  if(obj.hasClass('change-photo')) {
    obj.css('opacity', Number(opa) - opacityInterval);
    
    setTimeout(function(){photoChange(obj)},fadeInterval);
  } else {
    obj.css('opacity', Number(opa) + opacityInterval);
    
    setTimeout(function(){photoChange(obj)},fadeInterval);
  }
};

/***************************************
 * スリープ
 * @param {スリープ時間} waitMsec 
 **************************************/
function sleep(waitMsec) {
  var startMsec = new Date();
 
  // 指定ミリ秒間だけループさせる（CPUは常にビジー状態）
  while (new Date() - startMsec < waitMsec);
}

/***************************************
 * ランダム値取得
 * @param {*} max 
 * @returns 
 **************************************/
function getRandomInt(min, max) {
  return Math.floor(Math.random() * max + min);
}

batファイル

最後に「file_list.js」を作成するバッチファイルです。
このバッチを任意のディレクトリで実行すると、そのディレクトリ配下の画像ファイル（jpg）の一覧を取得できます。
この一覧をjavascriptで読み込んで、htmlで表示します。
@echo off

@rem UTF-8
chcp 65001

rem ==================================================
rem 現在のディレクトリ配下にあるjpgファイルを取得して
rem javascript配列データを作成する
rem ==================================================

rem 「file.list」ファイルが存在する場合には削除する
if exist file_list.js del file_list.js

rem ファイルリスト配列の作成
rem 最初のデータはダミー
echo var file_list = [ > file_list.js
echo  '' >> file_list.js

rem jpgファイルを一つずつ%%aに代入してループを回す
setlocal enabledelayedexpansion
for /r %%a in (*.jpg) do (

  rem %%aに代入されたファイル名をファイルに書き出す
  set line=%%a
  rem \を/に置換する
  echo  ,'!line:\=/!' >> file_list.js
)

rem 最後に配列の閉じカッコを出力
echo ]; >> file_list.js

 

まとめ

背景が殺風景だったり、画像の大きさによっては画像が見切れたりするので、改善の余地は大いにありますね。

今後も工夫していきたいと思います。

RELATED POST

COMMENT

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA