#author("2020-05-04T05:59:04+09:00","","")
#author("2021-12-24T21:30:38+09:00","","")
** ogp.inc.php [#h2f1c3f1]
|RIGHT:100|LEFT:360|c
|~サマリ|OGPを取得してブログカードを表示する|
|~リビジョン|1.3|
|~対応バージョン|1.5.1|
|~リビジョン|1.6|
|~対応バージョン|1.5.1〜1.5.4|
|~投稿者|[[m0370]]|
|~投稿日|&new{2019-09-14 (土) 07:28:03};|
はてなブログのようなブログカードを実装するプラグインを探していましたがなかったようなので、自分のサイト用に自分で作ってみました。プラグインの自作は初めてでしたが、いちおう使える水準になったので、こちらでも公開します。

*本体 [#vb43c87b]
外部のサイトのHTMLに記載されたmetaタグからOGP情報を取得して、そのタイトル・description・URLおよびアイキャッチ画像のサムネイルをコンパクトなブログカードの体裁にして掲載するプラグインです。

下記のスクリプトをogp.inc.phpと名前を付けて保存し、pluginフォルダにアップロードします。スタイルシートは別で設定します。
**ver1.6 [#d3c8a89a]
2021/12から [[GitHub>github.com:m0370/pukiwiki_ogp.inc.php]] に公開することにしました。

 <?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;
 }
 
 ?>

*スタイルシート [#wf91838c]
- Pukiwiki 1.5.3および1.5.4RC、PHP 7.4およびPHP 8.0で動作確認しています。
- プラグイン本体はGPL v3です。

 /*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;}
**使い方 [#w76a3235]


+ まず、[[opengraph.php>github.com:m0370/pukiwiki_ogp.inc.php/raw/main/opengraph.php]] を入手してpluginフォルダに設置します。
+ [[ogp.inc.php>github.com:m0370/pukiwiki_ogp.inc.php/raw/main/ogp.inc.php]] をpluginフォルダに設置します。
+ cacheフォルダにogpのフォルダを作成し、書込み可能なパーミッションを与えます(666など)。
+ スタイルシートは適宜調整して見栄えを良くします。参考までに、[[スタイルシートの一例>github.com:m0370/pukiwiki_ogp.inc.php/raw/main/ogp.css]]も示しています。
+ #ogp(取得したいURL) を行頭に記載します。
+ 第2引数以降にnoimgを入れることで画像を非表示にできます。(ver1.5以降)

詳しくは https ://oncologynote.com/?pukiwiki%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E7%AE%87%E6%89%80/%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/ogp.inc.php もご覧ください。


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Site admin: PukiWiki Development Team

PukiWiki 1.5.4+ © 2001-2022 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.111 sec.

OSDN