- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-09-14T06:58:18+09:00","default:tgoto","tgoto")
#author("2019-09-14T10:03:56+09:00;2019-09-14T08:39:06+09:00","default:tgoto","tgoto")
Pukiwikiに様々なカスタマイズを加えてきたが、一般のブログサイトに似せたデザインにはできてもOGPの実装がなかなか難しいと感じていた。このPukiwikiのほかに「はてなブログ」を使っていたので、はてなブログの「ブログカード」は魅力的だと感じていた。また、このPukiwikiのURLをTwitterなどのSNSに貼ってもらった場合にもOGP情報を利用してもらえるとクリック数が増えてよいのではないかと考えていた。
Pukiwikiにブログカードを表示するプラグインがないか調べてみたが、簡単に実装できるものはなかなかなさそうだった。一方でWordpressにブログカードを実装する方法に関する記事はたくさんある。またOGPの取得を容易にするPHPライブラリ（opengraph.php）も提供されている。これを利用すればPukiwikiにもブログカードを表示することができるようになりそうだと考えた。
Pukiwikiにブログカードを表示するプラグインがないか調べてみたが、簡単に実装できるものはなかなかなさそうだった。一方でWordpressにブログカードを実装する方法に関する記事はたくさんある。またOGPの取得を容易にするPHPライブラリ（[[opengraph.php:https://github.com/scottmac/opengraph/]]）も提供されている。これを利用すればPukiwikiにもブログカードを表示することができるようになりそうだと考えた。
*pukiwikiから外部にOGP情報を発信する
*外部のOGPを取得してブログカードとして表示するプラグイン ogp.inc.php
この方法については [[pukiwikiカスタマイズ箇所/2019]] を参照してください。
外部のサイトのHTMLに記載されたmetaタグからOGP情報を取得して、そのタイトル・description・URLおよびアイキャッチ画像のサムネイルをコンパクトなブログカードの体裁にして掲載するプラグインです。プラグイン本体（ogp.inc.php）のほかに、opengraph.phpをインストール（ダウンロードしてプラグインフォルダに設置）しておく必要があります。また、スタイルシートでデザインを自由に変えられるようにプラグイン本体はclass付きのdivタグを吐くだけにしています。別途、スタイルシートに必要なデザインを記述してください。
*外部のOGPを取得してブログカードとして表示するプラグイン ogp.inc.php
**プラグイン
***PHPファイル（pluginフォルダにインストールしてください）
#ref(ogp.inc.php)
#ref(opengraph.php)
***スタイルシート（ご自由にカスタマイズしてご利用ください）
#ref(ogp.css)
**使い方
+ まず、opengraph.php を入手してpluginフォルダに設置します。
+ まず、[[opengraph.php:https://github.com/scottmac/opengraph/]] を入手してpluginフォルダに設置します。
+ ogp.inc.phpをpluginフォルダに設置します。
+ スタイルシートは適宜調整して見栄えを良くします。参考までに、スタイルシートの一例も添付しています。
+ #OGP(取得したいURL) を行頭に記載します。
**サンプル
#OGP(https://oncology.uvs.jp/)
**opengraph.phpの参考サイト
#ogp(http://www.kaasan.info/archives/1982)
**文字化け解消のために参考になったサイト
#OGP(http://evita.hatenablog.com/entry/2017/07/19/222312)
**今後の課題
***キャッシュの問題
現状ではPukiwikiにアクセスがあるたびに参照先サイトのOGPを取得しに行っている。アクセス数がそれほど多くない場合は負荷も無視できる程度であるが、もしアクセス数が非常に多いPukiwikiの場合はいちいち参照先にデータを取得しにゆくのは効率が悪い。何らかの方法でOGPデータや画像をキャッシュすることができればと思うが、現状では荷が重い（PHP技術的に）。
***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化されていないサイトへのリンクを張った場合には安全ではないというアラートが出てしまう。はてなブログなど大手では一旦SSL化されたキャッシュを置いて、そのSSL範囲下で画像を表示しているようであるが、簡単に実装するのはできなさそうで、現時点では対応予定なし。
***HTML5とCSS3の問題
現状ではCSS 2.1以上対応のスタイルシートでデザインを整えているが、HTML5とCSS3でレイアウトすればよりブラウザによる表示のばらつきは減らせそう。とくにCSS3のflexレイアウトができればスタイルシートはより簡単に置き換えられそう。
***pukiwiki公式へのアップロード
現状ではpukiwiki公式サイトにアップロードしようとすると500エラーが起きてうまくいかないのだが、このプラグインに限らず全般に起こっているようなのでpukiwiki公式サイト全体の問題だろうか。
#tweet_inc(https://twitter.com/m0370/status/1172655768731930624)