OGPのなんちゃってデータ取得方法の解説とか。
システム要件・完成目標とイメージ
※「ShareHtmlを、もっと綺麗にしたメーカー」というブログカードが簡単に作れる便利なサイトがありまして、自分でできないかなーと作ってみたのがこれです。- 個人的に利用する事を目的とする
- GASのみで指定URLのOGPデータを取り出す
- 取り出したデータをもとにブログカードのタグコードを自動生成する
- ブログタイトルやurlなどの付加情報もつけられるようにする
スプレッドシートの準備
まずはスプレッドシートを準備します。コンバートボタン、解析するURL、ブログカードに含めておきたい情報欄を作成します。
manageシート
ソースコード
Parserライブラリを利用しています。↓で解説してます。
// -----------------------------------------------------------------------------
// 【テスト】自動タグ作成：ブログカード.
// -----------------------------------------------------------------------------
// mngシート定数.
var MngOutput = "E7"; // 結果出力先.
var MngTarget = "E2"; // 解析元URL.
var MngBlogCardTitle = "E3"; // ブログタイトル.
var MngBlogCardURL = "E4"; // ブログURL.
// -----------------------------------------------------------------------------
// myFunction
// 外部から呼び出される関数.
// -----------------------------------------------------------------------------
function myFunction() {
var mngSheet = SpreadsheetApp.getActive().getSheetByName( "manage" );
var out = "";
var options = {muteHttpExceptions : true};
var response = UrlFetchApp.fetch( mngSheet.getRange(MngTarget).getValue(), options );
// 簡易エラーチェック.
if ( (400 <= response.getResponseCode()) && (response.getResponseCode() < 600)) {
mngSheet.getRange( MngOutput ).setValue( "エラー：" + response.getResponseCode() );
return;
}
var tmp = Parser.data(response.getContentText()).from('<![endif]-->').to('<!--[if IE]>').iterate();
out += "<div class=\"link-box\">";
out += "<div class=\"img-box\">";
out += "<a href=\"" + getURL(tmp[0]) + "\" style=\"text-decoration: none;\"><div style=\"background-image: url('" + getImage(tmp[0]) + "');\"></div></a></div>";
out += "<div class=\"text-box\">";
out += "<a href=\"" + getURL(tmp[0]) + "\" style=\"text-decoration: none;\"><p class=\"title\">" + getTitle(tmp[0]) + "</p></a>";
out += "<a href=\"" + getURL(tmp[0]) + "\" style=\"text-decoration: none;\"><p class=\"description\">" + getDiscripton(tmp[0]) + "</p></a>"
out += "<a href=\""+ mngSheet.getRange(MngBlogCardURL).getValue() + "\"><p class=\"bloginfo\">" + mngSheet.getRange(MngBlogCardTitle).getValue() + "</p></a></div>";
out += "</div>";
// 結果表示.
mngSheet.getRange( MngOutput ).setValue( out );
return;
}
// -----------------------------------------------------------------------------
// get
// OGPデータの取り出し.
// -----------------------------------------------------------------------------
function getURL( str ) {
var tmp = str.match(/content='.*?' property='og:url'/gi);
if ( tmp === null ) { return ""; }
return tmp[0].substr(9, tmp[0].length-28);
}
function getTitle( str ) {
var tmp = str.match(/content='.*?' property='og:title'/gi);
if ( tmp === null ) { return ""; }
return tmp[0].substr(9, tmp[0].length-30);
}
function getDiscripton( str ) {
var tmp = str.match(/content='.*?' property='og:description'/gi);
if ( tmp === null ) { return ""; }
return tmp[0].substr(9, tmp[0].length-36);
}
function getImage( str ) {
var tmp = str.match(/content='.*?' property='og:image'/gi);
if ( tmp === null ) { return ""; }
return tmp[0].substr(9, tmp[0].length-30);
}
実行結果
解説
29行目：Parserを利用してコードを抜き出す
var tmp = Parser.data(response.getContentText()).from('<![endif]-->').to('<!--[if IE]>').iterate();
Parserを利用してOGPデータのある部分をごっそり抜き出しています。
31行目～：自分が使いやすいようにコードをカスタマイズ
out += "<div class=\"link-box\">";
out += "<div class=\"img-box\">";
out += "<a href=\"" + getURL(tmp[0]) + "\" style=\"text-decoration: none;\"><div style=\"background-image: url('" + getImage(tmp[0]) + "');\"></div></a></div>";
out += "<div class=\"text-box\">";
out += "<a href=\"" + getURL(tmp[0]) + "\" style=\"text-decoration: none;\"><p class=\"title\">" + getTitle(tmp[0]) + "</p></a>";
out += "<a href=\"" + getURL(tmp[0]) + "\" style=\"text-decoration: none;\"><p class=\"description\">" + getDiscripton(tmp[0]) + "</p></a>"
out += "<a href=\""+ mngSheet.getRange(MngBlogCardURL).getValue() + "\"><p class=\"bloginfo\">" + mngSheet.getRange(MngBlogCardTitle).getValue() + "</p></a></div>";
out += "</div>";
「ShareHtmlを、もっと綺麗にしたメーカー」をベースに作っています。悪しからず。変更点と言えばブログタイトルとURLをくっつけたところくらいです。
自分の好きなように組んでOK。
53行目～：OGPデータの抜き出し
function getURL( str ) {
var tmp = str.match(/content='.*?' property='og:url'/gi);
if ( tmp === null ) { return ""; }
return tmp[0].substr(9, tmp[0].length-28);
}
function getTitle( str ) {
var tmp = str.match(/content='.*?' property='og:title'/gi);
if ( tmp === null ) { return ""; }
return tmp[0].substr(9, tmp[0].length-30);
}
function getDiscripton( str ) {
var tmp = str.match(/content='.*?' property='og:description'/gi);
if ( tmp === null ) { return ""; }
return tmp[0].substr(9, tmp[0].length-36);
}
function getImage( str ) {
var tmp = str.match(/content='.*?' property='og:image'/gi);
if ( tmp === null ) { return ""; }
return tmp[0].substr(9, tmp[0].length-30);
}
ここがなんちゃって抜き出し部分です。見るからにやっつけ感があります。なにかいい方法があるかもしれません。
CSS
ここも自分の好きなようにしてください。
#single-content .link-box {
border:1px solid #e1e1e1;
padding:10px;
display:flex;
margin:30px
}
#single-content .link-box:hover {
background-color:#f3f3f3;
-webkit-transition:background-color .35s;
transition:background-color .35s
}
#single-content .img-box {
width:25%;
float:left
}
#single-content .img-box div {
min-height:170px;
background-size:cover;
background-position:center center
}
#single-content .text-box {
width:75%;
float:left;
padding-left:20px;
line-height:1.7;
margin:0
}
#single-content .text-box .title {
font-size:18px;
font-weight:600;
color:#428bca;
padding:0;
margin:0
}
#single-content .text-box .description {
font-size:15px;
color:#333;
padding:0
}
#single-content .text-box .bloginfo {
font-size:13px;
color:#333;
padding:0
}
@media only screen and (max-width:479px) {
#single-content .img-box div {
min-height:80px
}
#single-content .text-box {
margin-left:10px;
line-height:1.5
}
#single-content .text-box .title {
font-size:13px;
margin:0
}
#single-content .text-box .description {
font-size:11px;
margin-top:5px
}
#single-content .text-box .description {
font-size:9px;
margin-top:5px
}
}
