こんにちは！ケイマエです！
久しぶりにブログ書きます（笑）今回はプログラミングに関してです。
最近仕事でスライド再生するような開発をやってまして、そこで使ったコードを紹介します。
具体的に何かというと、JavaScriptで画面サイズの変化に合わせて再生画面を最適化するコードになります。
かなりニッチな内容になりますが、JavaScriptを勉強中の方は読んでみると少し役立つかもしれません。
さっそくコードを貼っていきたいと思います！
【JavaScript】1920X1080のアスペクト比で画面サイズに合わせてリサイズするコード
ユースケースとしては、ユーザーが画面サイズを変更したり、スマホを傾けて縦と横の画面が変わったりしたときに使えるかなと思います。
下のコードは1920px X 1080pxですが、このサイズを変えることで状況に合わせて再利用していただけると思います。
各コードの意味を解説していますので分からないとこがあれば解説をご覧ください。
const resizeFix = function () {
const checkHeight = window.innerWidth / 1920 * 1080;
const marginTop = window.innerHeight - checkHeight;
const checkWidth = window.innerHeight / 1080 * 1920;
const marginLeft = window.innerWidth - checkWidth;
if (window.innerWidth >= 1920 && window.innerHeight >= 1080) {
document.getElementsByClassName('wrap')[0].style.transform = 'scale( 1.0 )';
document.getElementsByClassName('wrap')[0].style.marginLeft = ( window.innerWidth - 1920 ) / 2 + 'px';
document.getElementsByClassName('wrap')[0].style.marginTop = ( window.innerHeight - 1080 ) / 2 + 'px';
} else {
if (checkHeight > window.innerHeight) { //
document.getElementsByClassName('wrap')[0].style.transform = 'scale(' + window.innerHeight / 1080 + ')';
document.getElementsByClassName('wrap')[0].style.marginLeft = marginLeft / 2 + 'px';
document.getElementsByClassName('wrap')[0].style.marginTop = 0 + 'px';
} else {
document.getElementsByClassName('wrap')[0].style.transform = 'scale(' + window.innerWidth / 1920 + ')';
document.getElementsByClassName('wrap')[0].style.marginLeft = 0 + 'px';
document.getElementsByClassName('wrap')[0].style.marginTop = marginTop / 2 + 'px';
}
}
}
window.addEventListener('resize', function () {
resizeFix();
});
上から順に見ていきたいと思います。
const checkHeight = window.innerWidth / 1920 * 1080;
const marginTop = window.innerHeight - checkHeight;
const checkWidth = window.innerHeight / 1080 * 1920;
const marginLeft = window.innerWidth - checkWidth;window.innerWidth / innerHeight で端末の画面の幅と高さが取得できます。
１行目の checkHeight が何をしているかというと、表示したい高さ1080pxに対して、端末画面幅と表示したい幅1920pxの倍率を掛けることで、端末画面に表示する高さを出しています。（言葉で伝わるかなぁ・・・笑）
２行目の marginTop は表示する画面を中央寄せするためのもので、画面高さからcheckHeight(実際に画面に表示する高さ)を引くことで、端末画面上下からどれくらい開けるかのマージンを求めています。
３、４行目も同じ感じなので省きます。
if (window.innerWidth >= 1920 && window.innerHeight >= 1080) {
document.getElementsByClassName('wrap')[0].style.transform = 'scale( 1.0 )';
document.getElementsByClassName('wrap')[0].style.marginLeft = ( window.innerWidth - 1920 ) / 2 + 'px';
document.getElementsByClassName('wrap')[0].style.marginTop = ( window.innerHeight - 1080 ) / 2 + 'px';
} else {
端末画面の幅と高さが表示したいサイズより大きい時（if文）の処理を見ていきます。
document.getElementsByClassName(‘wrap’)[0] はwrapクラスの一番目の要素を取得しています。getElementsByClassNameは返り値がHTMLCollectionで配列のため、[0]のオフセットが必要になります。（ちなみにgetElementByIdは単体の要素が取得できるのでオフセットは不要です。）
要素に対して.style でその要素のCSSを操作できます。今の場合、{ transform: ‘scale(1.0)’ } というCSSを取得した要素に追加しています。
transform: ‘scale(1.0)’ はscaleの値が一つの時は幅・高さ(x.y)に対してその値を変倍するもので、今の場合１倍するので変わりはないですね。他の条件と対比するために書いただけになります。
marginは、今回の場合、端末画面の幅と高さが表示したいサイズより大きい時なので、上のように求められます。
} else {
if (checkHeight > window.innerHeight) { //
document.getElementsByClassName('wrap')[0].style.transform = 'scale(' + window.innerHeight / 1080 + ')';
document.getElementsByClassName('wrap')[0].style.marginLeft = marginLeft / 2 + 'px';
document.getElementsByClassName('wrap')[0].style.marginTop = 0 + 'px';
} else {端末画面の幅と高さのどちらかが表示したいサイズより小さい時（さっきのifのelse文）で、端末画面に表示する高さ(checkHeight)が端末画面高さより大きい時（if文）の処理を見ていきます。
checkHeightが端末画面高さを超えてしまっているので、端末画面高さになるように縮める必要があります。それをtransform: ‘scale(‘ + window.innerHeight / 1080 + ‘)’ で行なっています。一見ややこしく見えますが、+で文字列をくっつけているだけです。
この場合のマージン上下方向は、表示高さはフルになっているので0px。マージン左右方向は最初に求めた marginLeft の半分をCSSのmarginLeft に設定します。（最初に求めたmarginLeftの変数名がややこしいですね・・・。マージン左右方向という意味なのでmarginHorizontal とかの方が良かったかも。）
} else {
document.getElementsByClassName('wrap')[0].style.transform = 'scale(' + window.innerWidth / 1920 + ')';
document.getElementsByClassName('wrap')[0].style.marginLeft = 0 + 'px';
document.getElementsByClassName('wrap')[0].style.marginTop = marginTop / 2 + 'px';
}端末画面に表示する高さ(checkHeight)が端末画面高さより小さい時（言い換えると、端末画面に表示する幅(checkWidth)が端末画面幅より大きい時）の処理を見ていきます。
checkWidthが端末画面幅を超えてしまっているので、端末画面幅になるように縮める必要があります。それをtransform: ‘scale(‘ + window.innerWidth / 1920 + ‘)’ で行なっています。
この場合のマージン左右方向は、表示幅はフルになっているので0px。マージン上下方向は最初に求めた marginTop の半分をCSSのmarginTop に設定します。
以上が resizeFix()関数のやっていることになります。次にこの関数を呼び出している処理を見ていきます。
window.addEventListener('resize', function () {
resizeFix();
});addEventListenerはイベントをキャッチしたら処理を実行するものです。
上のコードの意味は、画面のresizeイベントを検知したらresizeFix()関数を呼び出すということです。
これで完成になります。
参考にjQueryに変換したコードも貼っておきます。
$(window).on('resize', function () {
this.resizeFix();
});
function resizeFix(){
const imgWidth = 1920;
const imgHeight = 1080;
const checkHeight = window.innerWidth / imgWidth * imgHeight;
const marginTop = window.innerHeight - checkHeight;
const checkWidth = window.innerHeight / imgHeight * imgWidth;
const marginLeft = window.innerWidth - checkWidth;
if (window.innerWidth >= imgWidth && window.innerHeight >= imgHeight) {
$('.wrap').css({
'transform': 'scale( 1.0 )',
'marginLeft': ( window.innerWidth - imgWidth ) / 2 + 'px',
'marginTop': ( window.innerHeight - imgHeight ) / 2 + 'px',
});
} else {
if (checkHeight > window.innerHeight) {
$('.wrap').css({
'transform': 'scale(' + window.innerHeight / imgHeight + ')',
'marginLeft': marginLeft / 2 + 'px',
'marginTop': 0 + 'px',
});
} else {
$('.wrap').css({
'transform': 'scale(' + window.innerWidth / imgWidth + ')',
'marginLeft': 0 + 'px',
'marginTop': marginTop / 2 + 'px',
});
}
}
};
最後まで見ていただいてありがとうございます！
プログラミング頑張っていきましょ〜（＾ω＾）
それではまたの記事でノシ
