自作プラグイン/ogp.inc.php の履歴ソース(No.4)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• 自作プラグイン/ogp.inc.php へ行く。
  • 1 (2019-09-14 (土) 07:28:03)
  • 2 (2019-09-14 (土) 07:28:03)
  • 3 (2020-05-03 (日) 17:28:26)
  • 4 (2020-05-04 (月) 05:59:04)
  • 5 (2020-05-05 (火) 09:28:16)
  • 6 (2020-07-18 (土) 06:55:54)
  • 7 (2021-12-24 (金) 21:30:38)

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

*本体 [#vb43c87b]

下記のスクリプトを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;
 }
 
 ?>

*スタイルシート [#wf91838c]

 /*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;}