レスポンシブ対応を行おう
スマホや PC の普及に伴い、レスポンシブ対応は現代のウェブサイト制作において必須となっています。 画面サイズやコンテンツのレイアウトに応じてメッシュの大きさを変更することは、WebGL を利用する場合、非常に困難です。 そこで、negl では応用編で行ったように DOM 要素のレイアウト情報をメッシュの位置や大きさに利用することで、簡単にメッシュのレスポンシブ対応を実装できるようにしています。
では、実際に試してみましょう。
テキストとスタイルの追加
negl を使ってみよう で追加したメッシュの横に、テキストとスタイルタグを追加して画像とテキストのスタイルを設定します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 省略 -->
</head>
<body>
<div id="global-container">
<div class="page-container">
<img
data-webgl="template"
data-tex-1="/img/dog.jpg"
style="width: 50%;"
/>
<!-- ここにテキストを追加 -->
<div class="text-container">
<p>
雨の音を聴きながら、彼女は日記を書いている。夜だ。<br />
窓からは、納屋のトタン屋根に落ちる雨滴の音が聞こえてくる。ラジオのノイズのような音だ。<br />
しかし、鳴っているラジオの音はクリアだ。ラジオは夜のニュースをやっていた。<br />
難航していた次期総裁選びはいよいよ大詰めを迎え……株価はひさしぶりに一万五千円の大台を回復し……寒冷前線が通過したあとはこのところの暖かさも一時的な冬なみに……耳に入ってはくるが、彼女が聴いているのは、むしろ、夜の雨の音だった。<br />
いつだったか、昔、やはりこのように、雨の音を聴きながら、日記を書いていたことがあった。<br />
</p>
</div>
<!-- スタイルタグを追加 -->
<style>
/* 画像とテキストを横並びにする */
.page-container {
display: flex;
justify-content: space-evenly;
}
/* テキストの文字色と横幅を指定する */
.text-container {
color: #fff;
width: 40vw;
}
</style>
</div>
<canvas id="canvas"></canvas>
</div>
</body>
</html>サイトをパソコンで表示すると、このような状態になっています。
現在の状態で画面サイズを変更すると、画像とテキストが被って視認性が悪くなります。
スマホの時はスタイルを変更する
画面サイズが 600px 以下のデバイスで表示した場合は画像とテキストが縦並びになるように変更してみましょう。 スタイルタグの中に記述を追加します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="./scripts/index.js"></script>
</head>
<body>
<div id="global-container">
<div class="page-container">
<!-- .test-effect クラスを画像に追加 -->
<img
class="test-effect"
data-webgl="template"
data-tex-1="/img/dog.jpg"
/>
<div class="text-container">
<p>
雨の音を聴きながら、彼女は日記を書いている。夜だ。<br />
窓からは、納屋のトタン屋根に落ちる雨滴の音が聞こえてくる。ラジオのノイズのような音だ。<br />
しかし、鳴っているラジオの音はクリアだ。ラジオは夜のニュースをやっていた。<br />
難航していた次期総裁選びはいよいよ大詰めを迎え……株価はひさしぶりに一万五千円の大台を回復し……寒冷前線が通過したあとはこのところの暖かさも一時的な冬なみに……耳に入ってはくるが、彼女が聴いているのは、むしろ、夜の雨の音だった。<br />
いつだったか、昔、やはりこのように、雨の音を聴きながら、日記を書いていたことがあった。<br />
</p>
</div>
<style>
.page-container {
display: flex;
justify-content: space-evenly;
}
.test-effect {
width: 50%;
}
.text-container {
color: #fff;
width: 40vw;
}
/* 画面幅が600px以下のデバイスで表示した時のスタイルを記述する */
@media (max-width: 600px) {
/* 画像とテキストを縦に並べる */
.page-container {
flex-direction: column;
align-items: center;
}
/* 画像のサイズを変更する */
.test-effect {
width: 90%;
height: 50vh;
object-fit: cover;
}
/* テキストの文字色と横幅を変更する */
.text-container {
color: #ff0000;
width: 90%;
}
}
</style>
</div>
<canvas id="canvas"></canvas>
</div>
</body>
</html>ブラウザを確認してみましょう。デザインが崩れることなく表示することができました。
本来画像のサイズを変更した場合はさらに CSS で調整する必要がありますが、negl を使えば CSS の状態に応じて自動的にエフェクトの位置や大きさを最適化することができます。