スプレッドシートのセルに表記されたURLへのリンクがうまくいくようにしたい

GoogleサイトにてHPを作成中。スプレッドシートから表を作成するようなHTML、GASはできるようになった。

上記スプレッドシートのABC列をHTMLとGASを用いた表で
Googleサイト上に表示させたい。
しかし、C列にはD列のURLをリンクさせたい。
D列のリンクは、Googleサイト上のページへのリンクです。

イメージとしては、閲覧者は
①Googleサイトのトップページのこの表を見る
②閲覧したい更新箇所の表のC列をクリックすると、該当のページ(D列のURL)へ飛ぶ
としたいです。

コメントをいただいたため
https://teratail.com/questions/355287
を参考にしてHTMLのコードを入力してみました。
しかし、以下のエラーメッセージが表示されました。

発生している問題・エラーメッセージ

SyntaxError: Unexpected identifier

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <style>
6      table,td,th{border:1px solid black;}
7      td{padding: 10px;}
8    </style>
9  </head>
10  <body>
11    <?
12     var data = getData();
13    ?>
14    <table>
15      <tr>
16        <th><?=data[0][0]?></th>
17        <th><?=data[0][1]?></th>
18        <th><?=data[0][2]?></th>
19      </tr>
20      <?
21      for(var i= 1,j=data.length;i<j;i++){
22        output._=('<tr>')
23        output._=('<td>'+Utilities.formatDate(new Date(data[i][0]),'Asia/Tokyo','yyyy/MM/dd')+'</td>');
24        output._=('<td>'+data[i][1]+'</td>');
25        output._=('<td>'<a href"+{data[i][3]}>+data[i][2]+'</td>');
26        output._=('</tr>')
27      }
28      ?>
29      </table>
30  </body>
31</html>
32
33

GAS
1function doGet() {
2  return HtmlService.createTemplateFromFile("HTML名").evaluate();
3}
4
5function getData() {
6  var ss = SpreadsheetApp.openByUrl("スプレッドシートURL");
7  var values = ss.getSheetByName("シート名").getDataRange().getValues();
8
9  return values;
10}

3_April_2021

2021/08/18 00:01

サイトと呼んでいるページに(project内の)異なるhtmlを表示するリンクを作成したいか、別のページへのリンクを作成したいかによって、話は少し異なるはずです。その点を明確にしたほうがいいと思います。（ちなみに、Googleには「Googleサイト」というサービスがありますのでご注意ください）

yoy_chem

2021/08/23 01:24

ありがとうございます。見逃しておりました。この後修正します。

3_April_2021

2021/08/27 02:20

リンク付けについては、同サイト投稿(355287)のfake_shibeユーザの2件目の回答が役立つと思います。 (この方法自体や細かい書き方の適切性についてはコメントできませんが) とりあえず、上記の情報を参考にして、これで解決できると思うコードを書いてみてください。それでも問題が解決しない場合は、もう一度コメントしてください。

3_April_2021

2021/08/27 06:47

ひとまず、output._=('<td>'<a href"+{data[i][3]}>+data[i][2]+'</td>');だけ見ました。()内の書き方が誤っています。以下を通じて自分で原因を把握できますか？ -https://developer.mozilla.org/ja/docs/Web/HTML/Element/a -https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings 各ページの全ての文章を理解する必要はありません。全くわからないならわからないで構いません。しかし一度目は通してください。

yoy_chem

2021/08/27 07:00

目を通しました。 1つ目について、URLが絶対的なものであるならば... というのは理解できたのですが今回のような場合についてはわかりません。２つ目についてはわかりません。当方教員でして、HTMLもJavaも触ったことがありません。学校HPを作っているのですが、職員に知識がないため、取り掛かりやすいフォームにて更新履歴の管理ができたらなと思っております。ほぼほぼ、ネット上で拾ってきたもので学んでいるので... 知識不足、申し訳ございません。

3_April_2021

2021/08/27 07:20 編集

誤りを見つけたため削除しました。

3_April_2021

2021/08/27 07:18

「'<td>'<a href"+{data[i][3]}>+data[i][2]+'</td>'」と「`<td><a href="${data[i][3]}">${data[i][2]}</td>`」を比較してください。

3_April_2021

2021/08/27 07:27

もしくは「'<td><a href="' + data[i][3] +'">' + data[i][2] + '</a></td>'」。

行動規範の内容に同意します

回答1件

ベストアンサー

コメントの訂正を兼ねて投稿します。コメントで提示した方法を参考にするのなら、

output._=('<td>'<a href"+{data[i][3]}>+data[i][2]+'</td>');

この部分を次のように変更してください。

output._=(`<td><a href="${data[i][3]}">${data[i][2]}</a></td>`);

投稿2021/08/27 12:02

編集2021/08/28 01:21

3_April_2021

総合スコア48

3_April_2021

2021/08/27 12:41

申し訳ありませんが、すべてを検証してはいません。タイトルの「リンク」についてのみ。 sites.google.comのことを言っているのかと思って回答までしてしまったのですが、もう一度読んでみると違う気もしてきました。「リンク」はできたのにうまく機能しない場合は、D列に無関係なもの("https://twitter.com/"など)も加えて表示させて試した結果とともに、もう一度コメントしてください。

yoy_chem

2021/08/30 07:42

駄文を読み取って頂き、ありがとうございます。上で示して頂いた方法で無事に解決いたしました。

行動規範の内容に同意します