名所と名言、動的に変化させ表示させる(JavaScript)

はじめに

絶景と名言が好きなので、まとめて表示してみようと思います。（"絶景を見ながら偉人の名言を"、という本は、たくさん出版されていますが、それと同類のものです）

内容

• Webサイトに写真を表示し、そこに文字を入れる（写真＝自分で撮影した世界の名所、文字＝名言集）
• アクセスする度に、写真も文字も動的に変化させる
• 写真のリスト、名言のリストはGoogleスプレッドシートに用意してAPI連携する

使用する技術

• Javascript / GoogleスプレッドシートAPI連携
• bootstrap(v5)のimage-overlays
  https://getbootstrap.jp/docs/5.0/components/card/#image-overlays

サイト

作成したサイトはこちら　

用意したデータ

Googleスプレッドシート

• 写真リスト
  

• 名言リスト
  

コードのポイント

• Googleスプレッドシートの読み込み
  こちらの記事を参照

• HTMLの表示部分

sample.html

  <div class="container">
    <h3>世界の名所と名言と</h3>
    <div class="container">
      <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-2">
        <div class="col"><div id="set0" class="card text-white fs-4"></div></div>
        <div class="col"><div id="set1" class="card text-white fs-4"></div></div>
        <div class="col"><div id="set2" class="card text-white fs-4"></div></div>
        <div class="col"><div id="set3" class="card text-white fs-4"></div></div>
        <div class="col"><div id="set4" class="card text-white fs-4"></div></div>
        <div class="col"><div id="set5" class="card text-white fs-4"></div></div>
        <div class="col"><div id="set6" class="card text-white fs-4"></div></div>
        <div class="col"><div id="set7" class="card text-white fs-4"></div></div>
      </div>
    </div>
  </div>

• 読み込んだリストのシャッフル
  配列のシャッフルには、JavaScriptでシャッフルする(Qiita)を参照させていただきました（感謝）

sample.html

<script>
  //シャッフルアルゴリズム
  function shuffleData(data) {
    for (i = data.length; 1 < i; i--) {
      var k = Math.floor(Math.random() * i);
      [data[k], data[i - 1]] = [data[i - 1], data[k]];
    }
    return data;
  };
</script>

※コメントをいただき追記

今回はリストにあるデータすべてを表示するわけではないので（作成したサイトでは8個）、全データをシャッフルするのは無駄であるため、全データ中のランダムな位置のデータを取り出すように修正。（取り出し方法は、コメントを参照）

• 文字数の確認（多すぎる文字数は表示しない）
  名言の中には文字数が多すぎるものがあり、写真からはみ出してしまうケースがあるので、文字数は85までとしました。除去は、filterを使用しました。

sample.html

<script>
  // 85文字以下のものは除去
  var result = shuffleTexts.filter((shuffleText) => {
    return (Number(shuffleText.len) < 85);
  });
</script>

まとめ

• Bootstrap、データリスト(Googleスレッドシート)との連携で簡単にデータをシャッフルしてWEB表示することができました。