月別: 2018年3月

(41) JavaScriptで要素の幅と高さを取得

(1) やりたいこと

ブロック要素などの幅と高さを JavaScriptで取得したい。

(2) 実験

幅の取得を以下の三通りで試してみる。
{要素}.innerWidth()
{要素}.outerWidth()
{要素}.width()

高さの取得を以下の三通りで試してみる。
{要素}.innerHeight()
{要素}.outerHeight()
{要素}.height()

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

<style>
*{
  margin: 0;
  padding: 0;
}
.box1{
  border: 20px #000 solid;
  padding: 10px;
  width:  300px;
  height: 400px;
}
.box1-1{
  background-color: #888;
  width: 100%;
  height: 100%;
}
</style>

</head>
<body>

<div class="box1">
  <div class="box1-1">
  </div>
</div>

<div id="output"></div>

<script>
$(document).ready(function(){
  var cont = '';
  cont += 'w_in : '  + $('.box1').innerWidth() + '<br />';
  cont += 'w_out : ' + $('.box1').outerWidth() + '<br />';
  cont += 'w_css : ' + $('.box1').width() + '<br />';
  cont += 'h_in : '  + $('.box1').innerHeight() + '<br />';
  cont += 'h_out : ' + $('.box1').outerHeight() + '<br />';
  cont += 'h_css : ' + $('.box1').height() + '<br />';

  $('#output').html(cont);

});
</script>

</body>
</html>

実行サンプルはこちら。
https://hp.dogrow.net/sample/00041/

(3) 結果

outerWidth, outerHeight : 要素の外郭のサイズ(borderの外側)
innerWidth, innerHeight : 要素の内郭のサイズ(borderの内側)
width, height : 要素の更に内郭のサイズ(paddingの内側)
※外郭・内郭とか用語が正しくないが自己納得できているのでよいか…


(40) CC0ライセンスとは?

CC0ライセンスとは、
「著作権を放棄するから自由に使ってくれ!」
という意思表示された作品に付与するライセンスのことらしい。

使いたい人はパブリックドメイン(=権利が消滅した著作物)と同様に扱えるのだそうだ。

こちらを参照のこと。
https://creativecommons.jp/sciencecommons/cc0-faq/

画像や映像を自由に使えるのはありがたいことです。

CC0素材提供サイト

https://www.pexels.com/
https://pixabay.com/
https://unsplash.com/


(39) reCAPTCHAで認証を実装

(1) やりたいこと

投稿フォームを botから守りたい。

(2) 実現方法

HTTP refererのチェックや、onetime tokenなどはよく使っているが、今回は Googleが提供している reCAPTCHAを使ってみる。

https://developers.google.com/recaptcha/

https://www.google.com/recaptcha/intro/

1. APIキーを取得

手順1: 上記二つ目のサイトにアクセスし [Get reCAPTCHA] ボタンを押す。

手順2: 認証を使用するドメインの情報を入力する。

手順3: 発行された Site-key と Secret-key を控えておく。

2. 投稿フォームを作成

投稿フォームを表示するだけのページを作る。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>

<form id="myForm" method="post" action="index.php">
<div class="g-recaptcha" data-callback="enbButton" data-sitekey="xxxxxxxxx"></div>
<input type="submit" name="myButton" value="送信" disabled>
</form>

<script>
function enbButton(code){
  if(code !== ""){
    $('#myForm input:submit').removeAttr('disabled');
  }
}
</script>

</body>
</html>

3. 認証処理を作成

PHPで書く。

if(isset($_POST['myButton'])){
  $gresp = $_POST['g-recaptcha-response'];
  if(isset($gresp)){
    $secret_key = 'yyyyyyyyyyyyyyyyyyyyyy';
    $resp = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret_key}&response={$gresp}");
    $rslt = json_decode($resp, true);
    if($rslt['success'] == TRUE){
      // 認証成功!
    }
  }
}

出来上がったサンプルページはこちら。
https://hp.dogrow.net/sample/00039/


(38) コンテンツの存在を示す縦型Indicator

(1) やりたいこと

ページ内で縦にコンテンツを並べた場合に、
「全体でどれだけのコンテンツがあるの?」
「今どの辺を見ているの?」
を知らせてあげるための情報を表示したい。

実装サンプル

(2) 実現方法

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./script.js"></script>
<link rel="stylesheet" href="./style.css" />

</head>
<body>

<div class="vertIndicator">
	<ul class="vertIndicator">
		<li>
			<a href="#content1"><div class="vertIndLabel">content1</div></a>
		</li>
		<li>
			<a href="#content2"><div class="vertIndLabel">content2</div></a>
		</li>
		<li>
			<a href="#content3"><div class="vertIndLabel">content3</div></a>
		</li>
		<li>
			<a href="#content4"><div class="vertIndLabel">content4</div></a>
		</li>
		<li>
			<a href="#content5"><div class="vertIndLabel">content5</div></a>
		</li>
	</ul>
</div>

<div id="content1" class="vertIndBlock" style="background-color:#ffe;height:500px">Contents#1</div>
<div id="content2" class="vertIndBlock" style="background-color:#fef;height:500px">Contents#2</div>
<div id="content3" class="vertIndBlock" style="background-color:#eff;height:600px">Contents#3</div>
<div id="content4" class="vertIndBlock" style="background-color:#ffe;height:500px">Contents#4</div>
<div id="content5" class="vertIndBlock" style="background-color:#fef;height:600px">Contents#5</div>

</body>
</html>

CSS

.vertIndicator {
	position: fixed;
	top: 50%;
	right: 30px;
	z-index: 10;
}

.vertIndicator ul {
	position: relative;
	list-style-type: none;
}

.vertIndicator ul li{
	position: relative;
	padding-bottom: 10px;
}

.vertIndicator a{
	display: block;
	width: 10px;
	height: 10px;
	text-indent: -1000px;
	border-radius: 50%;
	border: 2px solid #888;
	text-decoration: none;
}
.vertIndicator a.indActive{
	background-color: #000;
}
.vertIndicator a.indHover{
	background-color: #aaa;
}

.vertIndLabel {
	position: relative;
	top: -60%;
	left: -200%;
	text-align: right;
	vertical-align: middle;
	color: #888;
	display: none;
}

JavaScript

$(document).ready(function($){
	var catLocate = [];
	$('.vertIndBlock').each(function() {
		catLocate.push($(this).offset().top);
	});

	function setActive(){
		var position = $(document).scrollTop();
		var index;
		for(var i=0 ; i < catLocate.length ; i++){
			if (position <= catLocate[i]) {
				index = i; break;
			}
		}
		$('.vertIndicator ul li a').removeClass('indActive');
		$('.vertIndicator ul li a').removeClass('indHover');
		$('.vertIndicator ul li a:eq('+index+')').addClass('indActive');
	}
	setActive();

	$('a').click(function(){
		$('html, body').animate({
			scrollTop: $($.attr(this, 'href')).offset().top
		}, 1000);
		return false;
	});

	$('.vertIndicator ul li a').click(function () {
		$('.vertIndicator ul li a').removeClass('indActive');
		$(this).addClass('indActive');
	}); 

	$('.vertIndicator a').hover(function() {
		$(this).find('.vertIndLabel').show();
		$(this).addClass('indHover');
	}, function() {
		$(this).find('.vertIndLabel').hide();
		$(this).removeClass('indHover');
	});

	$(document).scroll(function(){
		setActive();
	});

	$('.vertIndicator ul li a').click(function () {
		$('.vertIndicator ul li a').removeClass('indActive');
		$('.vertIndicator ul li a').removeClass('indHover');
		$(this).addClass('indActive');
	});   
});

(37) position absoluteの中寄せ

(1) やりたいこと

「position:absolute」を指定した要素を中寄で表示したい。

(2) 実現方法

1. 左右方向の中寄せ

.xxxxx{
    left: 0;
    right: 0;
    margin: auto;
}

2. 上下方向の中寄せ

.xxxxx{
    top: 0;
    bottom: 0;
    margin: auto;
}

実装したサンプルはこちら。
https://hp.dogrow.net/sample/00037/


(36) 背景にYoutube動画を貼る

(1) やりたいこと

ページの背景(=任意の要素の背景)にYouTube動画を貼り付けたい。

(2) 実現方法

GitHubで公開されているこちらのスクリプトを使わせていただく。
jquery.mb.YTPlayer

出来上がったサンプルはこちら。
https://hp.dogrow.net/sample/00036

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./jquery.mb.YTPlayer.min.js"></script>
<link rel="stylesheet" href="./css/jquery.mb.YTPlayer.min.css" />

<script>
$(document).ready(function(){
    $("#bgYT").YTPlayer();
});
</script>

</head>
<body>

<div id="bgYT" data-property="{
  videoURL: 'joZmOrknpRE',
  containment: 'body',
  autoPlay: true,
  loop: true,
  mute: true,
  startAt: 0,
  opacity: 1,
  showControls: false,
  showYTLogo: false
}"></div>

</body>
</html>

(3) オプション指定

videoURL

Youtube動画のURL(IDだけでも可)

startAt

Youtube動画の再生開始位置を秒単位で指定する。

containment

動画を貼り付ける要素を指定する。
1) self: 自分自身
2) body: bodyタグ
3) その他セレクタ: 任意のブロック要素

参考情報

jquery.mb.YTPlayer