Zenn
🔗

複数のリンク集をまとめたWebページ

に公開
Bootstrap
CSS
JavaScript
GAS
Google Sheets
tech

Linktreeとは

複数のリンクをまとめたWebページを簡単に作成することができるサービスです。
プロフィールに1つのURLだけしか貼り付けられないSNS（X,Instagramなど）のために開発されました。
Linktree

目的

URLをまとめたリンク集を2つ以上同じ画面に表示できるWebページを作成します。
現行のリンク集作成サービスの無料アカウントでは、リンク集を2つ以上同じ画面に作成することができません。
私は音楽配信を趣味で行っており、2つの名義を使っています。2つの名義のリンク集を1枚のWebページ（LP）にまとまめたかったため作成しました。

GASについて

  • GASとは
    Google Apps Scriptの略称でGoogleアプリの拡張機能です。Microsoft Officeのマクロ（VBA）のような機能です。
  • GASを使う理由
    GASにはGoogleアカウントがあればHTMLファイルを作成して無料で公開できる機能があります。サーバー構築について考える必要がなく、ドメイン名を取る考えもなかったため使うことにしました。

CSSとJavaScripts

GASでは基本的にHTMLファイルしか作成できませんが、無理やりCSSとJavaScriptsを導入することができます。デザイン性をよくするために以下のHTMLファイルを2つ作成してCSSとJavaScriptsを使えるようにしました。フレームワークのBootstrapを使用するためのコードも記述しています。

css.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </body>
</html>
js.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
    
  </body>
</html>

以下の2つのコードをmain.htmlの<head>~</head>に付け加えれば、CSSとJavaScriptsを使うことができます。

<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>

Spreadsheetとの連携

SpreadsheetにはA列にリンクタイトル、B列にURLを記入しています。

例）

A B
1 Spotify (SpotifyのURL)
2 ... ...
3 ... ...

複数のリンク集をまとめる場合は、リンク集ごとに以下のループ処理記述する必要があります。

<? for(let i = 変数名a; i < 変数名b ; i++){ ?>
      <? let link = links[i]; ?>
      <tr><td><a href="<?= link[0] ?>"><button type="button" class="btn btn-primary rounded-pill w-100"><?= link[1] ?></button></a></td></tr>
      <? } ?>

HTMLファイルを実行するために.gsファイルを用意します。
どの端末で開いてもバランス良いサイズになるように.addMetaTag('viewport', 'width=device-width, initial-scale=1')を記述しています。

doGet.gs
function doGet() {
  let sheet = SpreadsheetApp.getActive().getActiveSheet();
  let values = sheet.getDataRange().getValues();

  let template = HtmlService.createTemplateFromFile("Spreadsheetのタイトル")
  template.links = values;
  const htmlOutput = template.evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setTitle('作りたいWebページのタイトル');
  return htmlOutput;
}

まとめ

CSS,JavaScriptの導入のためのHTMLファイルを作成した上で、CSS,JavaScriptを呼び出す関数やSpreadsheetとの連携などをmain.htmlにまとめると以下のコードになります。

main.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </head>
  
  <body>
    <h1 class="text-center m-4">Title1</h1>
    <? let 変数名a = "先頭セルの番号" ?>
    <? let 変数名b = "先頭セルの番号" ?>
    <a href= "URL" target="_blank"></a>

    <table class="mx-auto col-8">
      <tr><th class="text-center">Title2</th></tr>

    -----ループ処理-----
      
    </table>
    <br>
  </body>
</html>
</html>

以上で説明したGASファイル（.gsファイル）とHTMLファイル（css.html、javascript.html、main.html）の作成ができれば、デプロイを押して公開できるようになります。

完成したリンク集のURL

以下のURLが、私が作成したリンク集です。
Links Collection

お気に入りの音楽配信サービスで私の音楽を楽しんでくださると幸いです。
リンク集作成お疲れ様でした。

Discussion