1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Google スプレッドシートのセルから HTML Tag を生成したい

Last updated at Posted at 2022-07-22

Google スプレッドシートのセルから HTML Tag を生成したい

背景

クライアントから依頼を受けた案件を GAS/HTMLService + スプレッドシートで開発中に、クライアントがスプレッドシートに入力した文字列を書式付きで HTML に出す必要がでてきました。
流石に HTML やマークアップを知らない人に、「タグ書いてね」とは言えず、なにか手がないかと考えた結果、Google のセル内のリッチテキストを変換する方法を思いついたので、メモとして残します。

やったこと

Google スプレッドシートシートは、セル内でリンクを貼ったり、一部の文字に色を付けたりでき、セル内でそれなりにリッチな表現ができます。GAS から セル内のリッチな書式を解析できるので、RichText -> HTML Tag コンバータを作成してみました。
今回は手抜きで、リンクと文字色しかサポートしていません。

  1. セルアドレスを指定して セルのレンジオブジェクトを取得
  2. セルの RichTextValue() を取得
  3. 書式の異なる文字列ごとに配列分解
  4. color , link , text 情報を取得し、HTML Tag を連結していく。

あまりスピードが速くないので多用はできないですがメッセージ変換程度には使えるかと。

スクリーンショット

スクリーンショット 2022-07-22 23.32.42.png

コード

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,'&amp;').replace(/[>]/g,'&lt;').replace(/[<]/g,'&gt;'))

      Logger.log(text )
      Logger.log(style.getForegroundColor())
      Logger.log(url)
    });
    return tag  
}

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?