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を利用してコードを抜き出す
Parserを利用してOGPデータのある部分をごっそり抜き出しています。
- var tmp = Parser.data(response.getContentText()).from('<![endif]-->').to('<!--[if IE]>').iterate();
31行目～：自分が使いやすいようにコードをカスタマイズ
「ShareHtmlを、もっと綺麗にしたメーカー」をベースに作っています。悪しからず。
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>";
変更点と言えばブログタイトルと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}}
