- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-11-11T17:09:41+09:00;2019-11-10T23:33:10+09:00","default:tgoto","tgoto")
#author("2019-11-17T08:09:12+09:00;2019-11-10T23:33:10+09:00","default:tgoto","tgoto")
Pukiwikiに様々なカスタマイズを加えてきたが、一般のブログサイトに似せたデザインにはできてもOGPの実装がなかなか難しいと感じていた。このPukiwikiのほかに「はてなブログ」を使っていたので、はてなブログの「ブログカード」は魅力的だと感じていた。また、このPukiwikiのURLをTwitterなどのSNSに貼ってもらった場合にもOGP情報を利用してもらえるとクリック数が増えてよいのではないかと考えていた。
Pukiwikiにブログカードを表示するプラグインがないか調べてみたが、簡単に実装できるものはなかなかなさそうだった。一方でWordpressにブログカードを実装する方法に関する記事はたくさんある。またOGPの取得を容易にするPHPライブラリ（[[opengraph.php:https://github.com/scottmac/opengraph/]]）も提供されている。これを利用すればPukiwikiにもブログカードを表示することができるようになりそうだと考えた。
*外部のOGPを取得してブログカードとして表示するプラグイン ogp.inc.php
外部のサイトのHTMLに記載されたmetaタグからOGP情報を取得して、そのタイトル・description・URLおよびアイキャッチ画像のサムネイルをコンパクトなブログカードの体裁にして掲載するプラグインです。プラグイン本体（ogp.inc.php）のほかに、opengraph.phpをインストール（ダウンロードしてプラグインフォルダに設置）しておく必要があります。また、スタイルシートでデザインを自由に変えられるようにプラグイン本体はclass付きのdivタグを吐くだけにしています。別途、スタイルシートに必要なデザインを記述してください。
**プラグイン
***PHPファイル（pluginフォルダにインストールしてください）
#ref(ogp.inc.php)
#ref(opengraph.php)
***スタイルシート（ご自由にカスタマイズしてご利用ください）
#ref(ogp.css)
**使い方
+ まず、[[opengraph.php:https://github.com/scottmac/opengraph/]] を入手してpluginフォルダに設置します。
+ ogp.inc.phpをpluginフォルダに設置します。
+ cacheフォルダにogpのフォルダを作成し、書込み可能なパーミッションを与えます（666など）。
+ スタイルシートは適宜調整して見栄えを良くします。参考までに、スタイルシートの一例も添付しています。
+ #ogp(取得したいURL) を行頭に記載します。
+ AMP対応のサイトで使用したい場合は、#ogp(取得したいURL,amp)とすることでamp-img対応のHTMLを出すようになります。（ver 1.2以降）
**更新履歴
***ver1.0（2019.9.10）
ひとまずOGPを取得して表示する機能を実装しました。
%%現状ではPukiwikiにアクセスがあるたびに参照先サイトのOGPを取得しに行っている。アクセス数がそれほど多くない場合は負荷も無視できる程度であるが、もしアクセス数が非常に多いPukiwikiの場合はいちいち参照先にデータを取得しにゆくのは効率が悪い。何らかの方法でOGPデータや画像をキャッシュすることができればと思うが、現状では荷が重い（PHP技術的に）。%%
***ver1.1（2019.9.17）
キャッシュ機能を実装しました。CACHE.DIRのogpというサブフォルダにキャッシュを配置します。またキャッシュ機能を実装したことでHTTPS外へのリンクを張った際に「安全でないサイト」と表示される問題も初回キャッシュ作成時以降は表示されなくなり、（ほぼ）解決しました。
しかし古いキャッシュを破棄する機能はまだ実装していません。また画像の拡張子を判断するステップを省略しているため、jpegもPNGも'.img'としています。主要ブラウザでは問題なく表示されるようですが、いずれ修正しなければならない。
また、URLを省略したOGPを提供するサイト（NCBI Pubmedなど）へのリンクを貼れるようにしました。
***ver1.2（2019.11.10）
第2引数にampを入れることでimgタグをamp-imgに変更できるようにしました。
AMP対応したサイトの場合はimgタグを使用することができません。そのためOGPプラグインが書き出すタグもimgではなくamp-imgタグを使用するようにしています。これにともなってスタイルシートも若干複雑になります。ver1.2対応のスタイルシートを使用してください。
**サンプル
#ogp(https://oncology.uvs.jp/,amp)
**opengraph.phpの参考サイト
#ogp(http://www.kaasan.info/archives/1982,amp)
**文字化け解消のために参考になったサイト
#ogp(http://evita.hatenablog.com/entry/2017/07/19/222312,amp)
**今後の課題
***Lazy Loadの問題
PHPのレベルで参照先サイトにデータを取得しにゆく関係で、このプラグインを使用するとページの表示がわずかに遅くなるという問題がある。PHPのほかにjavascriptで実装してブラウザ側でOGPを取得してもらうという方法もあるが、これはopengraph.phpを使えないほか、ブラウザと参照先OGPに依存してブログカードの高さ（height）が決まらないのでアンカーリンクがずれるという問題が生じるかもしれない。なんとかしてブログカードのLazy Load（遅延読み込み）を実装すればページの表示そのものの速度は維持できるのではないかと思われる。
***faviconの問題
はてなブログのブログカードではURLの前に参照先サイトのfaviconを表示する機能がある。しかしopengraph.phpでは参照先サイトのfaviconを取得できない。opengraph.phpに依存しない方法でOGPを取得できれば、faviconの表示も可能になると思う。
***OGPを提供していないURLを指定した場合に動作が非常に重くなる問題
おそらくopengraph.phpが、参照先URLの存在しないOGPを探しに行ってその処理がtimeoutになるのを待っているのだと思われる。ogp.inc.phpを使用しているページ全体の動きが悪くなってしまうので、なんとかしたい。
***HTTPSでないサイトへのブログカードを設置した場合に「安全ではない」となる問題
%%SSL化（HTTPS化）しているサイトの場合は、サイト内でHTTPS化されていないURLへリンクを張ったりすると安全ではないというアラートが表示されてしまう。ブログカードでも同様で、HTTPS化されていないサイトへのリンクを張った場合には安全ではないというアラートが出てしまう。%% →上記のとおり、キャッシュ機能を実装したver1.1でほぼ解決しました。
***HTML5とCSS3の問題
現状ではCSS 2.1以上対応のスタイルシートでデザインを整えているが、HTML5とCSS3でレイアウトすればよりブラウザによる表示のばらつきは減らせそう。とくにCSS3のflexレイアウトができればスタイルシートはより簡単に置き換えられそう。
***pukiwiki公式へのアップロード
現状ではpukiwiki公式サイトにアップロードしようとすると500エラーが起きてうまくいかないのだが、このプラグインに限らず全般に起こっているようなのでpukiwiki公式サイト全体の問題だろうか。
#tweet_inc(https://twitter.com/m0370/status/1172655768731930624)
#norelated