この変換を行うオンライン ツールは多数あるため、Google Apps Script からそのうちの 1 つを利用できます。(たまにこれを行う必要がある場合は、これらのサービスのいずれかを使用してみませんか?)
次のサンプル スクリプトは、Does Google Apps Script has something like getElementById?getElementByVal()の関数に基づいています。.
inline() 関数
/**
* Convert html containing <style> tags to instead have inline css.
*
* This example uses an online service from MailChimp Labs, but
* the same principle could be used to leverage several other
* online providers.
*
* @param {Text} htmlWstyle A block of HTML text including
* <style>..</style> tags.
*
* @returns {Text} Same HTML, converted to inline css.
*/
function inline(htmlWstyle) {
// Generate a POST request to inline css web tool.
var payload =
{
"html" : htmlWstyle,
"strip" : "checked"
};
// Because payload is a JavaScript object, it will be interpreted as
// an HTML form. (We do not need to specify contentType; it will
// automatically default to either 'application/x-www-form-urlencoded'
// or 'multipart/form-data')
var options =
{
"method" : "post",
"payload" : payload,
"muteHttpExceptions" : true
};
var url = "http://beaker.mailchimp.com/inline-css";
var response = UrlFetchApp.fetch(url, options);
// The html from this service is non-compliant, so we need
// to massage it to satisfy the XmlService.
var badlink = new RegExp('<link (.*?)[\/]*>',"igm");
var badmeta = new RegExp('<meta (.*?)[\/]*>',"igm");
var badinput = new RegExp('<input (.*?)[\/]*>',"igm");
var xml = response.getContentText()
.replace(badlink,"<link $1></link>" )
.replace(badinput,"<input $1></input>" )
.replace(badmeta,"<meta $1></meta>" )
.replace(/<br>/g,"<br/>");
// So far, so good! Next, extract converted text from page. <textarea name="text" ...>
// Put the receieved xml response into XMLdocument format
var doc = XmlService.parse(xml);
var inlineHTML = getElementByVal( doc, 'textarea', 'name', 'text' );
return (inlineHTML == null) ? null : inlineHTML.getValue();
}
説明
そこには黒魔術があるように見えるかもしれません。以前の回答では、古い Xml サービスを使用して Web ページの構造を調べ、必要なビットを見つける方法について説明しました。それはまだ良い読み物 (そして投票、ヒント、ヒント!) ですが、そのサービスはなくなり、新しいXmlServiceには同等の探索的サポートがありません。
まず、興味のある機能を実行する Web サービスを見つけ、 UrlFetch サービスを使用して、サービスにコードを貼り付ける人をシミュレートしました。理想的には、それ以上の作業をしなくても使用できる形式で、必要な結果だけを返すものを望んでいます。残念ながら、私たちが持っていたのは完全な Web ページであり、結果を得るにはそれを養殖する必要がありました。基本的な考え方: XmlService を使用してページを解析および調査し、必要な部分だけを抽出します。
選択された Css Inline サービスでは、Chrome の「Inspect Element」機能を使用して、タグ タイプ ( <textarea>) とそれを一意に識別する方法( ) を決定しましたname="text"。その知識を武器にgetElementByVal()、POST リクエストから返された HTML を掘り下げるために必要なものはすべて揃っていました。(または、必要なテキストを検索して抽出するために String メソッドを使用することもできます。)
しかし、すべてをまとめると、XmlService は結果ページの HTML の形式について不平を言い続けました。そのため、JavaScript の String および RegExp メソッドを使用して、不正な形式のタグのバランスを取ってからページを渡しました。
例
関数の使用法を示す簡単な例を次に示しますinline()。スタイル情報は、外部 css リンクとタグ付けされたスタイルの両方から吸収されることに注意してください。
function test_inline() {
var myHtml =
'<html>'
+ '<head>'
+ '<title>Example</title>'
+ '<link rel="stylesheet" href="http://inlinestyler.torchboxapps.com/static/css/example.css" ></link>'
+ '</head>'
+ '<body>'
+ '<style type="text/css">'
+ 'h1{'
+ 'color:yellow'
+ '}'
+ '</style>'
+ '<h1>An example title</h1>'
+ '<p>Paragraph 1</p>'
+ '<p class="p2">Paragraph 2</p>'
+ '</body>'
+ '</html>';
var inlined = inline(myHtml);
debugger; // pause in debugger, have a look at "inlined"
}
結果
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 style="color: yellow;">An example title</h1>
<p style="margin: 0;padding: 0 0 10px 0;">Paragraph 1</p>
<p class="p2" style="margin: 0;padding: 0 0 10px 0;">Paragraph 2</p>
</body>
</html>