ogp.inc.php

サマリOGPを取得してブログカードを表示する
リビジョン1.3
対応バージョン1.5.1
投稿者m0370
投稿日2019-09-14 (土) 07:28:03

はてなブログのようなブログカードを実装するプラグインを探していましたがなかったようなので、自分のサイト用に自分で作ってみました。プラグインの自作は初めてでしたが、いちおう使える水準になったので、こちらでも公開します。

本体

下記のスクリプトをogp.inc.phpと名前を付けて保存し、pluginフォルダにアップロードします。スタイルシートは別で設定します。

<?php

// 'ogp' plugin for PukiWiki
// author: m0370
// Twitter: @m0370

// ver1.0 (2019.9.10)
// ひとまずOGPを取得して表示する機能を実装しました。

// ver1.1 (2019.9.17)
// Cache機能を実装しました。CACHE.DIRのogpというサブフォルダにキャッシュを配置します。しかし古いキャッシュを破棄する機能はまだ実装していません。また画像の拡張子を判断するステップを省略しているため、jpegもPNGも'.img'としています。主要ブラウザでは問題なく表示されるようですが、いずれ修正しなければならない。

// ver1.2 (2019.11.10)
// 第2引数にampを入れることでimgタグをamp-imgに変更
 
// ver1.3 (2020.5.2)
// ファイル形式(GIF・PNGなど)を反映したキャッシュファイル名になるようにしました。従来のキャッシュも利用できます。
 
function plugin_ogp_convert()
{
$ogpurl = func_get_args();
$uri = get_script_uri();
$ogpurlsp = (explode('://', $ogpurl[0]));
$ogpurlmd = md5($ogpurlsp[1]);
$datcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.dat';
$gifcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.gif';
$jpgcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.jpg';
$pngcache = CACHE_DIR . 'ogp/' . $ogpurlmd . '.png';

if(file_exists($pngcache)) { $imgcache = $pngcache ; }
else if(file_exists($gifcache)) { $imgcache = $gifcache ; }
else { $imgcache = $jpgcache ; }

if(file_exists($datcache) && file_exists($imgcache)) {
	$ogpcache = file_get_contents($datcache);
	$ogpcachearray = explode("<>", $ogpcache);
	$title = $ogpcachearray[0];
	$description = $ogpcachearray[1];
	$src = $imgcache ;
} else {
    require_once(PLUGIN_DIR.'opengraph.php');
    $graph = OpenGraph::fetch($ogpurl[0]);    
    if ($graph) {
        $title = $graph->title;
        $url = $graph->url;
        $description = $graph->description;
        $src = $graph->image;
    
    $title_check = utf8_decode($title);
    $description_check = utf8_decode($description);
    if(mb_detect_encoding($title_check) == 'UTF-8'){
        $title = $title_check; // 文字化け解消
    }
    if(mb_detect_encoding($description_check) == 'UTF-8'){
        $description = $description_check; // 文字化け解消
    }
    
    $detects = array('ASCII','EUC-JP','SJIS','JIS','CP51932','UTF-16','ISO-8859-1');
    
    // 上記以外でもUTF-8以外の文字コードが渡ってきてた場合、UTF-8に変換する
    if(mb_detect_encoding($title) != 'UTF-8'){
        $title = mb_convert_encoding($title, 'UTF-8', mb_detect_encoding($title, $detects, true));
    }
    if(mb_detect_encoding($description) != 'UTF-8'){
        $description = mb_convert_encoding($description, 'UTF-8', mb_detect_encoding($description, $detects, true));
    }
    
	$imgfile = file_get_contents($src);
	$imginfo = getimagesize($src);
	file_put_contents($datcache, $title . '<>' . $description . '<>' . $ogpurl[0]);
	$filetype = $imginfo[2];
	if( $filetype == 1 ){
		file_put_contents($gifcache, $imgfile) ;
	} else if ( $filetype == 3 ){
		file_put_contents($pngcache, $imgfile) ;
	} else {
		file_put_contents($jpgcache, $imgfile) ;
	}
}
}

if($ogpurl[1] == "amp"){
    $imgtag = 'amp-img class="ogp-img" layout="fill"' ;
} else {
    $imgtag = 'img class="ogp-img"' ;
}

return <<<EOD
<div class="ogp">
<div class="ogp-img-box"><$imgtag src="$src" alt="$title" /></div>
<div class="ogp-title">$title</div>
<div class="ogp-description">$description</div>
<div class="ogp-url">$ogpurl[0]</div>
<a class ="ogp-link" href="$ogpurl[0]"></a>
</div>
EOD;
}

?>

スタイルシート

/*OGP スタイルシート*/
.ogp {
    position: relative;
    z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
    word-wrap: break-word;
	word-break: break-all;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 4px;
	padding: 10px;
	margin:20px 2px;
	min-height: 100px;
	max-height: 280px;
	max-width: 480px; 
	overflow: hidden;
}
.ogp-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.ogp-title{
	font-size: 100%;
	font-weight:bold;
	margin: 0 0 2px;
	line-height: 1.3em;
	color: #000;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; 
}
.ogp-description{
	line-height: 1.5em;
	font-size: 80%;
	color: #000;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical; 
}
.ogp-url{
	line-height: 1.8em;
	font-size: 80%;
	color: #7b8387;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical; 
}
.ogp-img-box{
	float: right;
	position: relative;
	width: 100px;
	height: 100px;
	margin-left:10px;
}
.ogp-img img{object-fit: cover;}
img.ogp-img{width: 100px;height: 100px;object-fit: cover;}

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-05-05 (火) 09:28:16
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 1.795 sec.

OSDN