#author("2020-06-03T08:18:46+09:00;2020-05-05T15:10:16+09:00","default:tgoto","tgoto")
#ref(https://oncologynote.com/img/12173bf026.png,nolink)
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対応のスタイルシートを使用してください。
***ver1.3 (2020.5.2)
ファイル形式(GIF・PNGなど)を反映したキャッシュファイル名になるようにしました。従来のキャッシュも利用できます。なお、ファイル形式を取得するために[[getimagesize()>https://www.php.net/manual/ja/book.image.php]]を使用しているため、PHPでGDがサポートされている必要があります。お使いのサーバーのPHPの設定をご確認ください。
***ver1.31 (2020.5.5)
キャッシュ関連のバグを修正。
**サンプル
#ogp(https://oncologynote.com/)
**opengraph.phpの参考サイト
#ogp(http://www.kaasan.info/archives/1982)
**文字化け解消のために参考になったサイト
#ogp(http://evita.hatenablog.com/entry/2017/07/19/222312)
**今後の課題
***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公式サイト全体の問題だろうか。
***ファイル名にドットがあるとキャッシュが生成できない問題
ファイル名に.(ドット)があるとキャッシュが再生できないようです。urlencodeしてみたりドットを%2Eにエンコードしてみたり色々と試してみてもダメなようです。ドットを含むファイル名に対してはfile()やfile_get_contents()が働かないのか…。
***OGPループの問題
OGPプラグインに限りませんが、pukiwikiで他のページを読みにいくプラグインを使用する場合はループの問題に気をつけなければなりません。
#ref(https://oncologynote.com/img/12173bf026-loop.png,nolink,40%)
pukiwikiもヘッダーにOGP情報を付ければ外部にサイト情報を発信することができますし
、ogp.inc.phpを使えば自サイトのOGP情報を取得することもできます。これで画像情報などを盛り込んだpukiwikiを作ることができます。
ただし、自サイト内でOGPリンクを貼る場合はループに注意する必要があります。たとえばAというページからBというページにOGPリンクを張り、BというページからAというページにもOGPリンクを張ろうとする状況を考えてみましょう。ページAの編集を確定しようとするとogp.inc.phpはページBへOGP情報を取得にゆきますが、このときページBのread.inc.phpが読み込まれようとします。しかしページBを読み込むときにページBのogp.inc.phpはページAのOGP情報を取得しにゆき、ページAを読み込もうとします。
結果的に、ページAの編集を確定しようとするとページBがページAを読みにゆく動きが働くので編集が確定できず、PHPエラーが出てしまうのです。これは3ページ(A→B、B→C、C→A)でも発生することがあります。
ver1.1以降の場合は、キャッシュがすでに生成されている場合はページBはページAに読み込みにゆかずにキャッシュを読むので、まずページBのキャッシュを生成させておいてからページAにページBへのリンクを書き込むという順序を追った作業で解決できます。逆に言うと、すでにリンクが複雑に張り巡らされているpukiwikiでcache/ogpフォルダを空にするとこのループが発生することがあります。
***OGP画像がog:imageではなくog:image:secure_urlで提供されるサイトへの対応
#ogpi(https://oncologynote.com/?a195b71bfb)
#norelated