まずはGrid.jsで、横スワイプ可能なtableをつくる

まずは、スマートフォンの画面サイズになった時、
横スワイプする事が可能なtableを、Grid.jsを使って作成してみます。

と言っても、これまでご紹介した基本形と JavaScript 側に大きな変更はありません。

Grid.jsの読み込み → html → JavaScript → cssの順で以下にサンプルを書いておきます。

Grid.jsの読み込み

これは以前の記事でも書きましたので、おさらい程度に。CDNで使うことも、CLIでインストールしてビルドすることも可能です。

CDNで使う場合は次の2行を、組み込みたいhtmlのヘッダ内で読み込みます。

[CDN経由の場合]

<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>

CDNで使う場合は、次を実行してインストールします。

[CLI経由の場合]

npm install gridjs --save

html部分

続いて、html側です。

[html側]

<div class="grid-wrapper">
  <div id="gridContainer" class="grid-container"></div>
</div>

↑いたってシンプルです。
html側は上記要素があれば、今回作成するTableが作れます。

JavaScript部分

続いて、JavaScript側です。

[JavaScript側]

new gridjs.Grid({
  columns: ['名前', 'ジャンル', '素晴らしさ'],
  data: [
    ['Vue', 'Frontend Framework', '★★★★★'],
    ['Vuetify', 'UI Framework', '★★★★★'],
    ['React', 'Frontend Framework', '★★★★★'],
    ['Gatsby', 'Static Site Genarator', '★★★★★'],
    ['Grid', 'Awesome Table Library', '★★★★★']
  ],
  sort: true,
  pagination: {
    enabled: true,
    limit: 3,
    summary: true,
  },
  className: {
    container: 'myContainer',
    table: 'myTable'
  },
  height: '320px',
  width: '90%'
}).render(document.getElementById('gridContainer'));

↑JavaScript側は、このように書きます。
これで、Grid.jsを使ったデータテーブルを生成することができます。

css部分

続いてcss。こちらのcssはサンプルとしての一例で、
ひとまず次のように定義しておきます。大きさ等々はお好みで。

[css側]

.myContainer {
  font-size: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
table.myTable {
  max-width: initial;
  width: 500px;
}
.grid-wrapper {
  margin: 1000px auto 200px;
  position: relative;
}

↑cssは次のセクション以降でさらに追記しますが、ひとまずTable自体にはこんな感じのstyleを記述しておきます。
.grid-wrapper の上部に1000pxという、やたら大きめのmarginがついているのは、
以降のセクションで登場する、IntersectionObserber を試しやすい様に
あえてそうしています。

ここまでの記述で、次の画像のようなTableが表示できます。

…Table自体は表示できましたが、このままでは「横スワイプできる」ということがわかりづらいですよね。そこで、次のセクションから「スワイプできますよ」という表示を作っていく、というわけです。

IntersectionObserver をつかって、上記のtableが「画面内に入った時」という状態を監視します

IntersectionObserver は、その名の通り
交差( Intersection ) を 観察 ( Observe ) することができる
Web API です。

これを JavaScript から呼び出して、
上のセクションで生成したテーブルが「いま見ている画面内に入った時」という状態を監視してみます。

IntersectionObserver に関する詳しい説明は、以前の記事を参照してください。

IntersectionObserver についてご紹介している記事：
[JavaScript]「スクロールして特定の位置をすぎたらふわっと表示」を簡単に実装する方法[IntersectionObserver]
[JavaScript]複数の要素を監視して、Viewportに入ったら表示させる方法[IntersectionObserver]

IntersectionObserver のコード

次のように書きます。

[JavaScript]

const myTarget = document.querySelector('.is-target');
const mySwipeAble = document.querySelector('.swipe-able-container');
const mySwipeAbleIcon = document.querySelector('.swipe-able-icon');

makeObserver();

function makeObserver() {
  let myObserver;
  
  const myOptions = {
    root: null,
    rootMargin: '0px 0px',
    threshold: '0'
  };
  
  myObserver = new IntersectionObserver(myIntersect, myOptions);
  myObserver.observe(myTarget);
}

function myIntersect(entries, myObserver) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      mySwipeAble.classList.add('is-animation');
      mySwipeAbleIcon.classList.add('is-animation-move-icon');
    } else {
      mySwipeAble.classList.remove('is-animation');
      mySwipeAbleIcon.classList.remove('is-animation-move-icon');
    }
  });
}

1〜3行目は、html上の要素を取得して変数に格納する記述です。
5〜18行目は、IntersectionObserver を定義・呼び出している部分になります。
この部分の詳しい説明は、以前のこの記事を参照いただくと、詳しく書いてあります。ぜひ合わせて参照ください。
20行目〜末尾は、定義した IntersectionObserver が条件を満たしたら実行される
関数の部分です。ここで、上のセクションでご紹介した
cssアニメーションのclassを着脱することで、

「Tableが画面内に入った時」
「このTableはスワイプ可能です」という示唆を
「ふわっと表示させる」

ことができます。

完成形は次のようになります。

出現回数を1回にする

ここまでの記述で、上の動画でご紹介したような表示ができるようになります。

ただし、この状態だと
Tableが画面に入ってくるたびに、スワイプ可能を示す表示が
毎回出現します。

これを最初の1回だけにしたい場合は、
JavaScript部分の、次の部分の
else内を、次のように書き換えれば実現できます。

[JavaScript]

...(省略)...

function myIntersect(entries, myObserver) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      mySwipeAble.classList.add('is-animation');
      mySwipeAbleIcon.classList.add('is-animation-move-icon');
    } else {
      return;
    }
  });
}

↑いちばん簡単な方法は、条件を満たすたびに着脱していたcssアニメーションのclassを、
外さずにそのままにする方法です。
これで、1回だけ表示する形に変えることが可能です。
※もちろん他にも、あらかじめJavaScript内で実行回数を定義しておく、それ用のフラグを持っておくなど、様々な方法が考えられます。

この記事のまとめ

今回は、これまでご紹介してきた

・IntersectionObserver
・Grid.js

この2つを使用して、
「対象のTableが画面内に入った時」
「このTableはスワイプ可能です」という示唆を
「ふわっと表示させる」

という方法について、記事を書きました。

なお、Tableの作成部分に Grid.js を使用していますが、
実は普通に作成したTableであっても、もちろん同じことが可能です。

また、IntersectionObserver を使用して
要素がViewportに入った時を検出する方法は、
覚えておくと今回の例以外の用途でも
幅広く応用が効き、きっとWeb制作の幅を広げてくれることと思います。

今年も年末。

今後も皆様のWeb制作が、もっと楽しいものとなるよう、
当サイトでは引き続きWeb制作に関する記事を執筆していきます。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。