質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

Google フォーム

Google フォームは、 Google社が提供しているアンケートフォーム作成および集計ができる無料のツール。Googleアカウントがあれば利用が可能です。集計データは、スプレッドシートに収集され、データ分析もできます。

Google サイト

Google サイトは、Google社が提供する無料のホームページ作成ツールです。プログラミングやデザインなどの知識がなくても、ブラウザから容易にWebページを作成することが可能。新たなページの追加も簡単でページ数には制限がありません。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Q&A

解決済

1回答

745閲覧

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

yoy_chem

総合スコア3

Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

Google フォーム

Google フォームは、 Google社が提供しているアンケートフォーム作成および集計ができる無料のツール。Googleアカウントがあれば利用が可能です。集計データは、スプレッドシートに収集され、データ分析もできます。

Google サイト

Google サイトは、Google社が提供する無料のホームページ作成ツールです。プログラミングやデザインなどの知識がなくても、ブラウザから容易にWebページを作成することが可能。新たなページの追加も簡単でページ数には制限がありません。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

0グッド

0クリップ

投稿2021/08/17 00:39

編集2021/08/27 06:10

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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が絶対的なものであるならば... というのは理解できたのですが 今回のような場合についてはわかりません。 2つ目についてはわかりません。 当方教員でして、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>'」。
guest

回答1

0

ベストアンサー

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

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問