Google Apps Script（GAS）でURLから不要なタグや改行を削除した圧縮したテキスト情報を取得する方法について解説します。
圧縮の処理は以下になります。
- imgタグのalt情報の分離
- HTMLタグの削除
- 空白の削除
URLからHTMLを取得して情報を圧縮する
まずは、ソースコード全体を貼ります。こちらは「URLを引数として受け取り、HTML情報を取得し、特定のタグ情報内に含まれる情報を圧縮し、テキストで返答する：返答するサンプルとなります。
function testFunction(url) {
// HTMLを取得
const html = UrlFetchApp.fetch(url)
// HTMLを解析
const document = HtmlService.createHtmlOutput(html).getContent();
var content = '';
// 必要な部分を抽出（この記事の内容が <section class="entry-content"> タグ内にあると仮定します
// 当ブログのコンテンツ部分になります
const regex = /<section class="entry-content"[^>]*>([\\s\\S]*?)<\\/section>/;
const match = regex.exec(document);
if (match && match[1]) {
const temp = match[1];
// プロンプト圧縮用置換プログラム
content = temp.replace(/<img([^>]*?)alt="([^"]+)"([^>]*)>/g, '<img$1$3>$2') //imgのalt属性の抜き出し
.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '') //タグ削除
.replace(/[\\r\\n]+/g, "") //改行削除
.replace(/[\\s\\t\\n]/g, "") //空白削除
.trim(); //文字列の前後の空白削除
}
Logger.log(content)
return content
}
HTML情報の取得には、GASのUrlFetchAppとHtmlServiceを使用して、テキスト情報を取得しています。
UrlFetchApp：GASでfetchリクエストを行うサービス。コードでは、GETリクエストを投げてHTML情報を取得しています。HtmlService：GASでHTMLを扱うサービス。コードでは、UrlFetchAppで取得したHTML情報からテキスト情報としてコンテンツを取得しています。
取得したテキスト情報から特定の領域を取得するために、正規表現を使用しています。今回は、当ブログのコンテンツ領域を取得するタグを指定して、タグ間を抜き出しています。
imgタグのalt情報の分離
正規表現を使用して、imgタグに含まれるalt情報をタグの外側に抽出します。
function testFunctionImg() {
const htmlText = `
<p>imgタグからalt情報を抽出する</p>
<img src="example.jpg" alt="サンプル画像">
<img src="test.png" alt="テスト画像">
`;
const updatedText = htmlText.replace(/<img([^>]*?)alt="([^"]+)"([^>]*)>/g, '<img$1$3>$2');
console.log(updatedText);
}実行した結果は、以下になります。
<p>imgタグからalt情報を抽出する</p>
<img src="example.jpg" >サンプル画像
<img src="test.png" >テスト画像
HTMLタグの削除
正規表現を使用して、HTMLタグ<> を空文字に置換しています。
function testFunctionRemoveTag(){
const htmlText = `
<p>htmlタグを置換して削除する</p>
<img src="example.jpg" >サンプル画像
<img src="test.png" >テスト画像
`
const updatedText = htmlText.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
console.log(updatedText);
}実行した結果は、以下になります。
htmlタグを置換して削除する
サンプル画像
テスト画像
空白の削除
正規表現とJavaScriptのtrimを使用して空白を削除しています。
function testFunctionRemoveBlank(){
const htmlText =`
htmlタグを置換して削除する
サンプル画像
テスト画像
`
const updatedText = htmlText.replace(/[\\s\\t\\n]/g, "").trim();
console.log(updatedText)
}実行した結果は、以下になります。
htmlタグを置換して削除するサンプル画像テスト画像
情報を圧縮するモチベーション
処理自体は正規表現と既存関数の組み合わせで実現しています。ここでは、なぜ情報を圧縮するのかについて解説をしていきます。
「Dify入門ガイド：X投稿を自動生成！10分で作るブログPR効率化ワークフロー」では、URLからPR文の生成を行っていました。内部の処理は、HTMLから情報を取得してLLMに入力しPR文を生成しています。HTML取得の部分はDify製のツールを使用して実装しています。
こちらで作成したプロトタイプを、GASとAOAIを使用したアプリで実現するために本記事を執筆しました。Dify製ツールを使用していた部分を自作しています。HTMLを取得しただけの生の状態では、タグ情報や空白が含まれています。「生成AIの入力時のトークン量を節約」のために不要情報を落として情報を圧縮しています。
アプリ化の検討に関しては、「GASでブログの投稿と連動してAIにPR文を考えてもらう：プロトタイプ」で検討しています。
終わり
本記事では、GASを使用してURLからHTMLを取得し、必要な情報を抽出・圧縮する方法について解説しました。特にAIモデルへの入力を最適化するために、imgタグのalt情報の分離、HTMLタグの削除、空白の削除という3つの処理を実装しました。このアプローチにより、効率的なテキスト処理が可能になります。
今週は狂ったようにブログを書いてた龍ちゃんです。DifyとGASの検証をしていますが、フロントエンドの検証もやりたいなとふつふつと湧き上がるものを感じています。3月はそっちにも取り組みたいですな！！！
