動画背景のHTML・CSSを作る

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hpscript</title>
	<meta name="description" content="Hpscript provides comprehensive software services of full commitment to help you achieve your goals at any stage.">
	<link rel="stylesheet" type="text/css" href="css/video-styles.css">
	<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
	<header id="header">
		<h1>Hpscript</h1>
		<div id="video-area">
			<video id="video" src="audio/video.mp4" webkit-playsinline playsinline muted autoplay loop></video>
		</div>
	</header>
</body>
</html>
@charset "utf-8";

#header {
	position: relative;
	height: 100vh;
}

#video-area {
	position: fixed;
	z-index: -1;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
}

#video {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 177.77777778vh;
	height: 56.25vw;
	min-height: 100%;
	min-width: 100%;
}
h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	color: #fff;
	text-shadow: 0 0 15px #666;
}
a {
	color: #fff;
}

よっしゃあ、次はreactやな

[AWS] cloudfrontとS3で静的サイトを構築する

1. ドメイン取得
2. Certified Managerでrequest(リージョンをus-east-1で取得する)
      ※regionがTokyoだとCloudfrontでCertified Managerの設定ができない
3. ドメイン管理画面のDNS設定でAWS Certified Managerで取得したCNAMEを設定する
4. S3にbucketを作成し、HTML, JS, img, cssファイルなどを保存
5. CloudFrontでcreate distribution
 L origin domainにS3を設定
 L Alternate domain name (CNAME) にドメインを指定

cloudfrontでルーティングも実装できるのね。

marguee.jsを使わずCSSで文字を動かす

HTML

<div class="video">
      <div class="narrate">
        <p class="ticker" data-duplicated='false'>The Boston Celtics have signed center Robert Williams III to a contract extension, the team announced today. </p>
      </div>
    </div>

CSS

html {
	height: 100%;
}
body {
	height: 100%;	
}
.video {
	height: 100%;
	background: url(../img/nba.jpg) no-repeat;
	background-size: 80% auto;
	background-position: center;

}
.narrate {
	position: absolute;
	bottom: 10px;	
	overflow:hidden;
}
p {
	display: inline-block;
  	color: #ffffff;
  	font-size: 36pt;
  	letter-spacing: 4px;
  	text-shadow: 
       2px  2px 0px #003366,
      -2px  2px 0px #003366,
       2px -2px 0px #003366,
      -2px -2px 0px #003366,
       2px  0px 0px #003366,
       0px  2px 0px #003366,
      -2px  0px 0px #003366,
       0px -2px 0px #003366; 
	font-size: 15px;
	animation: flowing 15s linear 1;  
	transform:translateX(100%);  
}

@keyframes flowing {
100% {
transform:translateX(-100%); 
}

jQueryのmarquee.jsを使う場合

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script src="js/marquee.js"></script>
    <script>
       $(function(){
         var $mq = $('p.ticker').marquee();

       });
    </script>

これでもmarqueeの動きはするが、margueeの文字がループ処理されるので、結局CSSを採用することに。
.bind(‘finished’, function(){} と $*.marquee(‘destroy’);で色々書いてみたんだが、どうやってもループになってしまう。

うーん 難しいね

jQueryとmarquee.jsで流れる文字を実装

githubからmarquee.jsを取得します。
jquery.marquee.js

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
    <div>
      <p class="ticker">This demonstration shows 3 jQuerified marquees and 3 standard marquees.</p>
    </div>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script src="js/marquee.js"></script>
    <script>
      $(function(){
        $('p.ticker').marquee();
      });
    </script>
</body>
</html>

非常に簡単です。ajaxでjsonからテキストを取得したタイミングで実行すれば良さそうです。

Pythonでjson出力

import json

print('********** JSON **********')
data = dict()
data['message'] = 'Python json test'
data['members'] = [
	{'name': 'momo', 'color': '#FA3E05' },
	{'name': 'dubai', 'color': '#FFFFAA'}
]

print(json.dumps(data, ensure_ascii=False, indent=2))

$ python3 app.py
********** JSON **********
{
“message”: “Python json test”,
“members”: [
{
“name”: “momo”,
“color”: “#FA3E05”
},
{
“name”: “dubai”,
“color”: “#FFFFAA”
}
]
}

json.dumpsで出力できる
問題ありませんね

fetchAPI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
  <select id="sel">
      <option> --場所を選ぶ-- </option>
      <option value="kyoto">京都</option>
      <option value="osaka">大阪</option>
      <option value="kobe">神戸</option>
  </select>

  <div id="mes">
    集合場所は<span id="pos"></span>
    集合時刻は<span id="time"></span>
  </div>
    <script>
      const url = "ajax_getData.php";
      let selid = document.getElementById('sel');

      selid.addEventListener('change', function(){
        let optval = selid.options[selid.selectedIndex].value;
        let param = new URLSearchParams();
        param.append("opt",optval);

        fetch(url, {
          method: "post",
          body: param,
        }).then(response => {
            if(response.ok){
              let promise = response.json();
              promise.then(data =>{
                document.getElementById('pos').innerHTML = data.position;
                document.getElementById('time').innerHTML = data.ap_time;
              })
            } else {
              alert("request failed");
            }
        })
      })
    </script>
</body>
</html>

なるほど。。。
ajaxの取得をtime intervalで数秒ごとに取るようにして表示すれば良いのか。
ほぼほぼロジックも出来たので背景処理のところだな

ubuntu20.04にmysql8.0をインストール

$ sudo apt update
$ sudo apt install mysql-server
$ sudo mysql –defaults-file=/etc/mysql/debian.cnf
mysql> SET GLOBAL validate_password.length=6;
mysql> SET GLOBAL validate_password.policy=LOW;
mysql> ALTER USER ‘root’@’localhost’ IDENTIFIED WITH mysql_native_password BY ‘${new password}’;
$ mysql -u root -p

create database test;
use test;
create table master_zip (
zip_code char(7) primary key,
pref_name char(5),
city_name char(10),
town_name char(20),
area_name char(20)
);
insert into master_zip values
(“1690075″,”東京都”,”新宿区”,””,”高田馬場”),
(“2130001″,”神奈川県”,”川崎市”,”高津区”,”溝の口”),
(“2470056″,”神奈川県”,”鎌倉市”,””,”大船”),
(“2500408″,”神奈川県”,”足柄下郡”,”箱根町”,”強羅”)
;
mysql> select * from master_zip;
+———-+————–+————–+———–+————–+
| zip_code | pref_name | city_name | town_name | area_name |
+———-+————–+————–+———–+————–+
| 1690075 | 東京都 | 新宿区 | | 高田馬場 |
| 2130001 | 神奈川県 | 川崎市 | 高津区 | 溝の口 |
| 2470056 | 神奈川県 | 鎌倉市 | | 大船 |
| 2500408 | 神奈川県 | 足柄下郡 | 箱根町 | 強羅 |
+———-+————–+————–+———–+————–+
4 rows in set (0.00 sec)

$ php -v
PHP 7.4.3 (cli) (built: Jul 5 2021 15:13:35) ( NTS )
$ sudo apt install php7.4-mysql
$ php -m
$ sudo vi /etc/php/7.4/cli/php.ini
$ php -S 192.168.34.10:8000

<body>
  <label>郵便番号</label>
  <input type="text" id="code">
  <div id="mes">住所:<span id="place"></span></div>

  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <script>
      $(function(){
        let area;
        $('#code').on("mouseleave input",function(){
            code = $(this).val();
            $.post({
               url: 'ajax_getDBData.php',
               data: {
                  'code': code
               },
               dataType: 'json',
            }).done(function(data){
              console.log(data);
              $.each(data, function(key, item){
                area = isValue(item.pref_name) + isValue(item.city_name) + isValue(item.town_name) + isValue(item.area_name);
              })
              $("#place").text(area);
            }).fail(function(XMLHttpRequest, textStatus, errorThrown){
              alert(errorThrown);
            })
        })
        isValue = function(val){
          if(val == undefined){
            val = "";
          }
          return val;
        }
      })
    </script>
</body>

php

header("Content-Type: application/json; charset=UTF-8");
$row = array();
$data = array();
$code = func_escape(filter_input(INPUT_POST, "code"));

$dsn = "mysql:dbname=test;host=localhost";
$user = "root";
$password = "hogehoge";
try {
    $dbh = new PDO($dsn, $user, $password);
    // echo "接続";
} catch (PDOException $e){
    print('connection failed:'.$e->getMessage());
}
$sql = "select zip_code, pref_name, city_name, town_name, area_name from master_zip where zip_code = ?";
$sth = $dbh->prepare($sql);
$sth->bindValue(1,$code,PDO::PARAM_STR);
$sth->execute();
$data = $sth->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data);
exit;

function func_escape($word){
	return htmlspecialchars($word, ENT_QUOTES);
}

パスワードの変更の箇所が躓きやすいかも

Ajaxでjsonファイルの値を取得

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
  

  <button type="button" id="btn_display">表示</button>
  <article class="list">
    <div class="mes">京都の集合場所は<span class="pos"></span>、集合時間は<span class="time"></span>です。</div>
    <div class="mes">大阪の集合場所は<span class="pos"></span>、集合時間は<span class="time"></span>です。</div>
    <div class="mes">神戸の集合場所は<span class="pos"></span>、集合時間は<span class="time"></span>です。</div>
  </article>
	<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  	<script>
      let optval;
      $(function(){
        $('.list').css("display", "none");
        $('#btn_display').on("click",function(){
            $.post({
               url: 'ajax_getLists.php',
            }).done(function(datas){
              $('.list').css("display", "block");

              var i = 0;
              $.each(datas, function(key, item){
                $(".pos").eq(i).text(item.position);
                $(".time").eq(i).text(item.ap_time);
                i++;
              })
            }).fail(function(XMLHttpRequest, textStatus, errorThrown){
              alert(errorThrown);
            })
        })
      })
  	</script>
</body>
</html>

$.postだけで全部取得できるのね。OK、使いやすそうです。

Ajaxで指定した変数の値をjsonファイルから取得する

html&jquery

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body>
  <select id="sel">
      <option> --場所を選ぶ-- </option>
      <option value="kyoto">京都</option>
      <option value="osaka">大阪</option>
      <option value="kobe">神戸</option>
  </select>

  <div id="mes">
    集合場所は<span id="pos"></span>
    集合時刻は<span id="time"></span>
  </div>
	<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  	<script>
      let optval;
      $(function(){
        $('#sel').on("change",function(){
            optval = $(this).val();
            $.post({
               url: 'ajax_getData.php',
               data: {
                  'opt': optval
               },
               dataType: 'json',
            }).done(function(data){
              $("#pos").text(data.position);
              $("#time").text(data.ap_time);
            }).fail(function(XMLHttpRequest, textStatus, errorThrown){
              alert(errorThrown);
            })
        })
      })
  	</script>
</body>
</html>

ajax_getData.php

header("Content-Type: application/json; charset=UTF-8");
$ary_sel_obj = [];
$opt = filter_input(INPUT_POST, "opt");

$ary_lists = [
	"kyoto" => [
		"position" => "三条",
		"ap_time" => "12:00",
	],
	"osaka" => [
		"position" => "難波",
		"ap_time" => "12:30",
	],
	"kobe" => [
		"position" => "西宮",
		"ap_time" => "13:00",
	],
];

if(isset($ary_lists)) $ary_sel_obj = $ary_lists[$opt];
echo json_encode($ary_sel_obj);
exit;

jsonデータが変わった時の処理としては、js側でデータを保持しておいて、jsonデータが変わったら、値を変えれば良さそう
うん、ある程度イメージは出来てきたかな🥰

jQueryで流れる文字

html & js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div id="flowing-text">
		<h2>Flowing Text</h2>
		<div class="fix-box">
			<div class="flowing-box">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
	</div>
	<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  	<script>
  		$(function(){
  			var $flowText = $('#flowing-text'),         
        		$fixBox = $flowText.find('.fix-box'),
        		$flowBox = $fixBox.find('.flowing-box'),

  				flowbox_width = $flowBox.width(),
  				flowTime=30000,
  				easing = 'linear',
  				right_start,
  				right_running,
  				timer;

    $flowBox.css({left:'100%'});
    right_start = $flowBox.offset().left+flowbox_width;

    function flowingStart (){
        if(!$flowBox.hasClass('stop')){ 
            $flowBox.animate(
                {left: -flowbox_width}, 
                flowTime, 
                easing,
                function(){     
                    $flowBox.css({left: '100%'});
                }
            );
            flowTime=30000;
        } else {    
            $flowBox.stop(true, false);
            right_running=$flowBox.offset().left+flowbox_width;
            flowTime=Math.floor(((right_running)/right_start)*10000);
        }
    }

    function flowingMonitor(){
        timer = setInterval(function(){
            flowingStart();
        },300);
    }

    $fixBox.on('mouseover',function(){
        $flowBox.addClass('stop');
    })
    .on('mouseout',function(){
        $flowBox.removeClass('stop');
    })
    
    flowingMonitor();

});
  	</script>
</body>
</html>
#flowing-text {
	margin:100px;
}
h2 {
	text-align:center;
	margin-bottom: 20px;
}
.fix-box {
	position: relative;
	height: 35px;
	box-shadow: 0px 0px 8px 3px #ccc inset;
	overflow: hidden;
}
.flowing-box {
	position: absolute;
	top: 5px;
	transform: translateY(-50%);
}
p {
	white-space: pre;
}

OK 大体のイメージは掴めた
テキストをajaxでPOST&GETで取得して表示できるようにしたい