Google スプレッドシートのセルから HTML Tag を生成したい
背景
クライアントから依頼を受けた案件を GAS/HTMLService + スプレッドシートで開発中に、クライアントがスプレッドシートに入力した文字列を書式付きで HTML に出す必要がでてきました。
流石に HTML やマークアップを知らない人に、「タグ書いてね」とは言えず、なにか手がないかと考えた結果、Google のセル内のリッチテキストを変換する方法を思いついたので、メモとして残します。
やったこと
Google スプレッドシートシートは、セル内でリンクを貼ったり、一部の文字に色を付けたりでき、セル内でそれなりにリッチな表現ができます。GAS から セル内のリッチな書式を解析できるので、RichText -> HTML Tag コンバータを作成してみました。
今回は手抜きで、リンクと文字色しかサポートしていません。
- セルアドレスを指定して セルのレンジオブジェクトを取得
- セルの RichTextValue() を取得
- 書式の異なる文字列ごとに配列分解
- color , link , text 情報を取得し、HTML Tag を連結していく。
あまりスピードが速くないので多用はできないですがメッセージ変換程度には使えるかと。
スクリーンショット
コード
function genHTMLfromCell(celladdress) {
// celladdress から Range オブジェクトを取得
var r=SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(celladdress)
// cell の リッチテキスト情報を取得
var rt=r.getRichTextValue()
var tag="" // 生成した html 用の 変数
// リッチテキストを配列分割し繰り返す。
var rn =rt.getRuns().forEach(
run => {
// ##LINKSTART##, ##LINLEND##, ##COLORSTART##, ##COLOREND##, ##TEXT## をトークンとして初期値を tag に連結し、配列の要素ごとに LINK, COLOR, TEXT を設定する。
tag=tag+"##LINKSTART####COLORSTART####TEXT####COLOREND####LINKEND##"
const url=run.getLinkUrl()
const text = run.getText() ;
const style = run.getTextStyle();
if (style==null || style.getForegroundColor()=="#000000"){
tag=tag.replace('##COLORSTART##','')
tag=tag.replace('##COLOREND##','')
} else {
tag=tag.replace('##COLORSTART##','<span style="color:'+style.getForegroundColor()+'">')
tag=tag.replace('##COLOREND##','</span>')
}
if (url==null ){
tag=tag.replace('##LINKSTART##','')
tag=tag.replace('##LINKEND##','')
} else {
tag=tag.replace('##LINKSTART##','<a href="'+url+'" target="_new">')
tag=tag.replace('##LINKEND##','</a>')
}
// ##TEXT## に関してだけ、entity 変換
tag=tag.replace('##TEXT##',text.replace(/[&]/g,'&').replace(/[>]/g,'<').replace(/[<]/g,'>'))
Logger.log(text )
Logger.log(style.getForegroundColor())
Logger.log(url)
});
return tag
}