PlusOne Blog

「JavaScript」に関する記事

【JavaScript】要素の座標位置を取得する

特定の要素の座標を取得するには、次のとおり getBoundingClientRect() を使用する。
 

  let {left,top} = document.querySelector(element_selector).getBoundingClientRect()

 
これは、特定の要素の位置をブラウザの表示領域の左上を(0, 0)として、そこからの相対位置で示されています。
特定の要素の位置を取得したいとき、html の領域がブラウザの表示領域と一致していない場合などがあり、正確な値を取得できないケースがたまにある。
そういった場合も含めて、次のとおりに取得するのが良い。
 

  function getAbsolutePosition(elm) {
       const {left,top} = elm.getBoundingClientRect();
       const {left: bleft,top: btop} = document.body.getBoundingClientRect();
       return {left: left - bleft,top: top - btop,};
    }

  let myelmposition; 
  myelmposition = getAbsolutePosition(elm);
  console.log myelmposition.left;
  console.log myelmposition.top;

 

 

この記事を読む

【JavaScript】Vue.router についての備忘録

Vue.router使用時に、ヘッダー/ナビメニュー/背景画像の処理をおこなったときの備忘録
 

Routerインスタンス

router.jsで生成したRouterインスタンスはthis.$routerで参照することができます。

■router.push

■router.replace

指定したパスに遷移します。
両者の違いは、遷移するのに履歴を上書きするかどうかです。「push」は履歴を上書しません。一方、「replace」は履歴を上書きします。

  this.$router.push('/test1');
  this.$router.replace('/test1');

■router.go

指定したページ分、進みます。マイナスの数字を指定すると、その分ページが戻ります。

  this.$router.go(2);

■router.back

ページを戻します。

  this.$router.back();

■router.foward

ページを勧めます。

  this.$router.foward();

  methods: {
            forward () {
                // test1へ遷移
                this.$router.push('/test1')
            },
            replace () {
                // test1へ遷移
                this.$router.replace('/test1')
            },
            forwardDouble () {
                // 2つ先へ
                this.$router.go(2)
            },
            backDouble () {
                // 2つ前へ
                this.$router.go(-2)
            },
            forward () {
                // 1つ前へ
                this.$router.forward()
            },
            back () {
                // 1つ先へ
                this.$router.back()
            }
        }           
  <button @click="forward">/test1へ遷移</button>
  <button @click="replace">/test1へ遷移</button>
  <button @click="forwardDouble">2ページ先へ移動</button>
  <button @click="backDouble">2ページ前へ移動</button>
  <button @click="forward">1ページ先へ移動</button>
  <button @click="back">1ページ前へ移動</button>

 

router-link

指定したページを表示する場合は、router-linkコンポーネントを使用します。

■router-link

  <router-link to="/test">TESTページ</router-link>

 ↓HTMLに展開すると a タグで展開されます。

  <a heref="/test" ....>TESTページ</a>

 
aタグではなく別のタグとして展開したい場合はtagプロパティを使用します。

  <router-link to="/test" tag="li">TESTページ</router-link>

■#router-link-active

toでバインドしたパスが、現在のパスに含まれている場合に付与されます。例えば/detailを指定したリンクは、/detail, /detail/001, /detail/002のときは付与されます。

■#router-link-exact-active

toでバインドしたパスと現在のパスが完全に一致した場合に付与されます。同じ例で考えたときに、/detail/001, /detail/002ではrouter-link-exact-activeは付与されません。
 

exactプロパティを指定すると、パスが完全一致の場合にのみrouter-link-activeクラスが付与されるようになります。

  <router-link to="/" exact>TESTページ</router-link> 

 

active-class, exact-active-class に、特定にクラス名を付与できます。active-class, exact-active-classプロパティにクラス名を指定します。

  <router-link to="/" active-class="active-link" exact-active-class="exact-active-link">TESTページ</router-link> 

 

ルートオブジェクト

ルートオブジェクトには現在アクティブなルートの情報となり、this.$routeとして利用することができます。

■$route.path

現在表示しているパスを返します。

  $route.path

パスが特定のときに、特定の class を付けるときは、次のように記述すればよい。
(表示中のパスが「/」のとき、class 「toppage」を付ける)

  <nav class="dtnavi" :class="{'toppage': $route.path === '/'}">

 

■$route.name

現在表示しているパスのnameを返します。

  $route.name

■$route.params

動的なルーティングで設定したパラメータオブジェクトを返します。

  $route.param

■$route.query

現在表示しているパスのクエリ(?の後に続くテキスト)を返します。

  $route.query

■$route.fullPath

現在表示しているパスのフルパスを返します(クエリを含む)

  $route.fullPath

 

 

この記事を読む

【HTML/JS】iphoneでvideoが自動再生されない

HTMLのvideoタグで動画を自動再生するとき、iphoneのsafariでは自動再生されなかったので、その時の対応の備忘録
 

 
videoタグのvideoを自動再生するとき、autoplay属性を付与する。

  <video id="myvideo" src="●●●/×××.mp4" autoplay></video>

 
ただし、これではiphoneでは自動再生されない。
次の2つの属性を付与する必要がある
・playsinline
 ビデオをインラインで再生する。昔は、iOSではインラインで再生されなかったが、インラインで再生できるようになった。自動再生するには、インラインで再生が必須。
・muted
 ページ遷移でいきなり音が出るのはユーザビリティが非常に悪いので、音がでないようにしておかなければ自動再生できない仕様となっているらしい。
 
★→autoplay、playsinline、muted属性3つセットで次のように記述しないと、自動再生されない。

  <video id="myvideo" src="●●●/×××.mp4"  autoplay muted playsinline></video>

 
ただし、上記記述をしてもiphoneで自動再生されなかった。
何かしらの影響で、muted属性がうまく認識されなかった可能性があるので、jsで強制的にmuteにしてみたら、自動再生されるようになった。

  $(function() {
    var video = $('video').get(0);
   (または
     var video = $('#myvideo'))
    video.muted = true;
    }

 
今回は、php を使って場合分けを行い、videoタグをつけていたため、
タイミング的にvideoタグのmuted属性をうまく読み込めなかった可能性がある。
こういった場合は、jsで読み込み完了時に強制的にmutedを付与すれば解決した。
 

 

この記事を読む

【JavaScript】fadeIn()のとき、displayをflexにする方法

fadeIn で、要素を表示すると、display が block になってしまい、
flex 等にしている要素だと不都合なので、この解決方法を調べたので備忘録として
 

 
非常に単純で、fadeIn の後に css()を続けて記載してやれば良い。

  $(element).fadeIn().css('display','flex');

jQueryは、こんな風に繋げて記載できるので楽。やはり、DOM要素を操作するにはjQueryは秀悦!
 
ちなみに、こういう書きかたもある。

 $(element).next(element).slideDown({
   start: function () {
         $(this).css({display: "flex"})
            }
 });

 

 

この記事を読む

【JavaScript】Intersection Observer API

画像の遅延ロードを作成しているとき、
Intersection Observer API について、調べてみたので、備忘録として。
 
Intersection Observer API とは、交差監視APIと言われ、任意の要素が表示画面内に現れるかどうかを監視・判定する API です。
引用:https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API
 

Intersection obserer の作成

コンストラクターを呼び出して Intersection observer を作成し、閾値が一方向また他の方向に交差する度に実行されるコールバック関数を渡します。

  let options = {
    root: document.querySelector('#scrollArea'),
    rootMargin: '0px',
    threshold: 1.0
  }

  let observer = new IntersectionObserver(callback, options);

■Intersection observer のオプション
コンストラクタに渡された options オブジェクトは、オブザーバーのコールバックが呼び出される状況を制御し、以下のフィールドがあります:
 
root:ターゲットが見えるかどうかを確認するためのビューポートとして使用される要素です。指定されなかった場合、もしくは null の場合はデフォルトでブラウザーのビューポートが使用されます。
 
rootMargin:root の周りのマージンです。CSS margin プロパティに似た値を持つことができます。例えば、”10px 20px 30px 40px” (top, right, bottom, left) のようなものです。この値はパーセント値にすることができます。この一連の値は、交差を計算する前にルート要素の範囲のボックスの各辺を拡大または縮小させることができます。既定ではすべてゼロです。
 
threshold:単一の数値もしくは数値の配列で、オブザーバーのコールバックを実行するターゲットがどのくらいの割合で見えているかを示します。 50% 通過したときのみ検出する場合は値 0.5 を使用します。 25% を超える度にコールバックを実行する場合は、 [0, 0.25, 0.5, 0.75, 1] という配列を指定します。既定値は 0 です (つまり、1ピクセルでも表示されるとコールバックが実行されます)。1.0 の値は全てのピクセルが見えるようになるまで、閾値をまたいだとみなされないことを意味します。
 

監視される要素をターゲットにする

  var target = document.querySelector('#listItem');
  observer.observe(target);

ターゲットが IntersectionObserver に指定された閾値を満たす度にコールバックが呼び出されます。コールバックは IntersectionObserverEntry オブジェクトのリストとオブザーバーを受け取ります。
 

交差しているかどうかの判定

変更の通知を受ける時にコールバック関数に渡された IntersectionObserverEntry の isIntersecting プロパティの値をチェックすることで、変更が感知された方向 (つまり要素が見えたかどうかを) 判断することが出来ます。
isIntersecting が true であれば、ターゲットは閾値を超えて少なくとも見るようになったということですし、false であればターゲットは指定した閾値では表示されなくなったということです。

 intersectionCallback(entries) => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
       let elem = entry.isIntersecting;
   }
  });
 }

 

例)画像が画面に表示された時にロードする の作成

  document.addEventListener("DOMContentLoaded", function() {

    //Intersection obserer の作成
   let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
   }
   imageobserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) =>  {
     if (entry.isIntersecting) {
      let image = entry.target;
      image.src = image.dataset.src;
      imageobserver.unobserve(image);
     }
    });
   },options);

   //監視される要素をターゲットにする
   let images = [].slice.call(document.querySelectorAll('.lazyload'));
   images.forEach(function(image) {
    imageobserver.observe(image);
   });
  
  });

 
 

 

この記事を読む

【JavaScript】[].slice.call() による配列変換について

画像遅延読み込みについて調べていると、

  let images = [].slice.call(document.querySelectorAll('.lazyload'));

のような、「[].slice.call() 」という構文がでてきたので、調べてみた。
 
MDNの解説では、
========================
”slice メソッドを呼び出すことで、配列風オブジェクトやコレクションを新しい配列に変換することができます。
メソッドをオブジェクトに繋げるだけです。配列風オブジェクトの一例として、 arguments が挙げられます。以下に例を示します。”
========================
引用:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

  function list() {
     return Array.prototype.slice.call(arguments);
   }

   var list1 = list(1, 2, 3); // [1, 2, 3]

この「Array.prototype.slice」を短縮する書き方が「[ ].slice」です。
 
ここで、配列風オブジェクトとは何か?
まず、javascripでは、数値、文字列、真偽値、null、undefined 以外の全てはオブジェクトであり、配列もオブジェクトです。その中で配列は、一般的なオブジェクトより高機能なオブジェクトなだけです。また、このオブジェクトはプロパティを持つことができます。
配列風オブジェクトとは、配列のよう要素的なものを持ち、lengthも持っているが、配列のような slice や sort などの配列特有のメゾットを持たないオブジェクトです。また、forEach などの配列の各要素を順に処理していくメゾットも利用できません。
 
ここで、具体的な例をあげてみます。

  var object = {
      name: 'plusone',
      age: 22
    },        //配列風オブジェクト
    array = [1, 2, 3];     //配列

  console.log(object['name']);// output 'plusone'
  console.log(array[1]); // output 2

 
今回実際に、使用した querySelectorAll() の戻り値は、Nodelist になり、まさに上記で説明した「配列風オブジェクト」になります。
そのため、querySelectorAll() で取り出した要素に順に処理を与えようと forEach をそのまま使用してもエラーになります。
そこで、冒頭に出した「[].slice.call() 」で、「配列風オブジェクト」(Nodelist) を配列に変換してあげるわけです。

  let images = [].slice.call(document.querySelectorAll('.lazyload'));

 なお、ES2015では、「配列風オブジェクト」(Nodelist) を配列に変換するのには、以下の構文も使用できます。

  // Array.from()
  var args = Array.from(arguments);
  // スプレッド構文
  var args = [...arguments];

 
 

 

この記事を読む

【JavaScript】スクロールで背景をフェードアウト

スクールすると背景をフェードアウトさせる方法を紹介します。
ホームページに使うと、動的な変化でアクセントになり、なかなかクールな雰囲気になります。
 

 
 
まず、CSSでbody要素に背景画像を設定します。

  body {
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./img/src/image.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100%;
        background-position: center top;
        color: #fff;
    }
  • 「background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./img/src/image.png);」で、画像の上に色のフィルターを重ねることができます。(この色のフィルターは、グラデーションをかけることもできますが、今回はグラデーションはなしにしています。) フィルターの透明度は0にします。
  • 「background-attachment: fixed;」で、背景画像を固定します。
  • 「background-size」「background-position」で、背景画像の大きさ、位置を設定します。

 
次にJSで、この背景画像の上の色フィルターの透明度を、スクロールにあわせて上げていきます。

  var nystories = document.querySelector("p").offsetTop;
    window.onscroll = function() {
        if (window.pageYOffset > 0) {
            var opac = (window.pageYOffset / nystories);
            document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opac + "), rgba(255, 255, 255, " + opac + ")), url(./img/src/image.png) no-repeat";
        }
    }
  • ここでは、一番最初のp要素がウインドウの一番上にきた時に背景画像が消えるように(画像の上の色フィルターの透明度が1になるように)しています。

 
 
これで、クールなサイトを作ってみてはいかがでしょうか?
 

 

この記事を読む

【JavaScript】!! ビックリマーク2つ

サイトで、色々と人のコードを見ていたら勉強になるなぁ~。

 
そんな中、ある記述に「何だこれは?」というのがありました。
それは「!」(ビックリマーク)2つ並んで使われているものでした。

  const isIEieVersion = !!ieVersion

 
興味津々で、調べてみました。
 
「!」は通常よく使いますが、否定の論理演算子です。

  var boo = true
  console.log !boo

とすれば、コンソールには false が表示されます。
 
では、「!!」は、否定の否定になります。すなわち二重否定の論理演算子なのです。

  var boo = true
  console.log !!boo

とすれば、コンソールには true が表示されます。
 
それなら、最初から「!!」なんて書かなきゃいいと思ったのですが、
値が undefined(未定義)のものを、falseに変換するために使用するようです。
(実際、ほとんどのブラウザはundefined(未定義)を false として扱ってくれるみたいですが)
否定演算子を使うと true か false のどちらかで値が返ってくるので、それを更に否定演算子にかけると true か false で返してくるということです。
 
if文などでは、true か false でないと判定できないため、「!!」を使って二重否定で変換する必要があるみたいですね。

この記事を読む

【JavaScript】3Dテキストを表現するJavaScriptライブラリ

HPを作成していく上で、テキストを装飾して印象付けることは大事です。
そういったテキスト装飾で、おもしろいものを見つけたので紹介します。
 
テキストを3Dで表示するJavaScriptライブライ「ztext.js」です。
テキストを3D表示させるのはもちろん、マウスの動きにあわせて動かすこともできるユニークなライブラリです。

使い方はいたって簡単なライブラリになり、見た目がおっと思うものなので、ぜひ使ってみたくなるライブラリになります。また、バニラjsなのも嬉しいところです。
 
 
まず、公式サイトより「ztext.min.js」をダウンロードします。
ztext.js
 
HTMLで「ztext.min.js」を読み込みます。
【HTML】

<script src="ztext.min.js"></script>

 
HTMLで3Dにする要素を作成します。
【HTML】

<p class="demo">3D TEXT</p>

 
scriptを記述します。
【Script】

<script>
  var ztxt = new Ztextify(".demo", {
    depth: "100px",
    layers: 30,
    fade: true,
    direction: "both",
    event: "none",
    eventRotation: "35deg",
    perspective: "500px"
  });
</script>


Optionとして、下記パラメーターを設定できます。
・depth:z軸への深さ。%を除くすべての有効なCSS長の値を受け入れます。デフォルト:”1rem”
・layers:エフェクトを構成するレイヤーの数。デフォルト:10
・perspective:視点の距離を設定します。デフォルト:500px
・fade:テキストをフェードアウトさせます。デフォルト:false
・direction:効果が適用される方向。デフォルト:”both”
・event:JavaScriptでテキストの回転を制御します。デフォルト:”none”
・eventRotation:eventオプションが有効の場合、最大回転を設定します。デフォルト:”30deg”
・eventDirection:eventオプションが有効の場合、回転の方向を設定します。デフォルト:”default”


Option:eventでは、次のようなイベントを設定できます。このイベントにあわせてテキストを動かすことができます。
“pointer”mousemoveandtouchmoveイベントに応じてテキストを回転します。
“scroll” ウインドウのスクロールにあわせて回転させます。
“scrollX” ウインドウのX軸のスクロールにあわせて回転させます。
“scrollY” ウインドウのy軸スクロールにあわせて回転させます。

 
cssでテキストの傾きなどと設定します。
【CSS】

<style>
.demo{
  width: 100%;
  text-align: center;
  font-size:50px;
  color:#a3ffa3;
}
.demo .z-text {
  transform: rotateX(15deg) rotateY(-30deg);
}
.demo .z-layer:not(:first-child) {
  color: #000;
}
</style>
この記事を読む

【JavaScript】IE判定

先日、IEの記事を書いたので、ついでにJavaScriptでのIE判定について

 
今まで、IE判定も含めてjsでのブラウザ判定には、useragentを使っていたが
IE判定だけなら、次の記述でもいけるようだ。
シンプルでとても使いやすいので、おススメです。

  const ieVersion = document.documentMode
  const isIEieVersion = !!ieVersion

 
ieVersion は、IEだと true を、それ以外だと false を返します。
document.documentMode で、IEのバージョンを返します。

この記事を読む

【Microsoftから Internet Explorer 11 サポート終了までのスケジュールが発表】

Microsoftから、IE11(Internet Explorer 11)サポート終了までのスケジュールが発表されました。
https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666

===================================
2020年11月30日、Microsoft TeamsのWebアプリはIE11をサポートしなくなります。
2021年3月9日、Microsoft Edge Legacy(Windows10のデフォルトブラウザ)をサポートしなくなります。
2021年8月17日、Microsoft 365のアプリとサービスはIE11をサポートしなくなります。
===================================

 

 

★→弊社は、従来よりWEBアプリ、ホームページともにモダンブラウザ(chrome,safari等)を推奨しており、
Internet Explorer 11やMicrosoft Edge Legacyは推奨しておりませんが
今回のMicrosoftからの発表により、より積極的にモダンブラウザへの切り替えを勧めて参ります。

この記事を読む
記事一覧に戻る