リンクカード形式で表示するプラグイン「HatenaBlogCard」を公開していますが、設定画面とかを付けたバージョンを作り直し中。
※まだ公開版では無いので、ダウンロードのリンクはありません。
[2015/08/09追記]設定画面も付いた「Pz-HatenaBlogCard」を公式プラグインディレクトリで公開中です。
つくる動機など
リンク先を紹介するときに、はてなブログの「はてなブログカード」みたいなので表示させたいと思いました。
あれこれ試して、行きついたのが「プラグインつくってはてなブログカードをそのまま利用しよう(^-^)o」というところ。
同じようなものを探している方もいらっしゃっていて、実際に使っていただいている方もいらっしゃるようです。
最初は内部リンクでも「はてなブログカード」で表示していたので、「新しいウィンドウで開いて不便！」ということなので、内部リンクはオリジナル形式で表示するように修正。
「横幅やセンタリング表示なんかをしたい」というコメントがあったので、細かい不具合修正と書式対応できるようにスタイルシートを一部修正。
何か所かで使っていただいたり、紹介もしていただいているようでありがたいことです(^-^)o
設定あれこれ
今のところ、設定画面でできることは、
- 「ショートコード」を4個まで指定できる。
「blogcard」「BLOGCARD」の他に「link」とか。ブックマークレットとかでショートコードを生成するようなのと併用しているならば、そういうのに合わせることもできます。
- 「リンク先URLの表示」
「ぽぽづれ。」に使っているブログカードは、リンク先URLが表示されていたりします。公開版でもこれを選択できるように。 - 「枠線の太さ」「角まる」「影つけ」
「ぽぽづれ。」版のように、太枠、角まる、影つきを指定できるようにできます。
- 「カードの幅」「センタリング」
前回記事のコメントであったみたいに、カード幅の指定と、センタリングも設定画面でなおせるようにします。 - 「外部」「内部」「この記事」でカードの色指定
背景色をカラーピッカーで指定します。
- 自分で用意したCSSに切り替え
あれもこれもオプションでやるのといくら設定があっても足りないので、分かる人用。
- 「DIV」じゃなくて「BLOCKQUOTEを使う」
BLOCKQUOTEで囲むことで「引用」扱いになるので、検索エンジンによってはキーワードに含まなくなります。自分の記事じゃないのに、検索エンジンに拾われてしまうのが嫌な人用。ただし、テーマによってはBLOCKQUOTEに書式が付いているので…。
とりあえず、取り急ぎ作ってみた設定画面。
ちゃんと設定も反映されて動いているようです。（WordPressプラグインのプログラムとしてお行儀がいいかどうかはよく分かりません(^-^;）
標準の書式だとこんな感じ。
太枠、影つき、角まるめ、サムネイル左。
ずいぶん印象が違いますねΣ(ﾟロﾟ)oﾞ
でも、まだ「はてぶ」。そして、課題。
外部リンクは相変わらず「はてなブログカード」をそのまま表示しています。
OpenGraphに対応しているサイトだと、Facebook向けに「画像」「タイトル」「概要」がソース内にあるので、それらを取得するOGP取得する「OprnGraph.php」を利用させていただくのも良さそうです。
OGP取得が出来なかったら、TITLE取得する流れが良さそうです。
とはいえ、ブログカードを表示するたびにそのサイトさんにアクセスして画像やらタイトルやらを持ってくるのは、アクセスの負担をかけてしまう気がします。
とりあえず、思いつくのが、
- DBにテーブルをつくってキャッシュ。
DBを作成して、取得したタイトルと概要を保存します。取得日を持っておいて、ある程度したら更新。一覧画面からメンテができるといいのですが、それは無理…(^-^; - カスタム投稿タイプを使う。
取得した内容を投稿として保存する…なんてことはできるのでしょうか？(^-^;
これができるなら、メンテ画面はWordPressだのみ、ということもできそう？
「カスタム投稿タイプ」は、「タイプだけつくったらWordPress頼み」だと思ったものの、そんな簡単じゃなさそうですね(^-^;
DBにテーブルをつくった方が簡単そうです。
そして、サムネイル画像。
URLをエンコードしてファイル名を生成（urlencode()）
↓
既に取得してあるかチェック（is_file()）
↓
無かったらリンク先のOGPから画像を取得（OpenGraph.php利用）
↓
画像サイズ取得と計算（getimagesize()）
↓
100×100のキャンパス用意（imagecreatetruecolor()）
↓
比率保持したまま100×100に縮小（imagecopyresampled()）
↓
保存（file_put_contents()）
↓
既にあったら読み込み（fopen(),fwrite()）
↓
画像として用意（imagecreatehuromstring()）
↓
PNGのヘッダ出力（header()）
↓
画像部分出力
こんな感じで、自分のサイトのサムネイルを取って、保存したりすることは出来ました。
「出来るノカナーΣ(ﾟロﾟ)oﾞ」って思いながら作ったら、何とか動いたので楽しかったです。
とはいえ、課題はあります。
いつまで保存するのか、いつ更新するのかというキャッシュ管理、画像が取得できなかったときどうするか、など。
サーバー内のディレクトリをアクセスしてファイルを取得しているので、こういうのを付け焼きで作ると、どこかに「ぜい弱性」が残ってしまいそうでこわいです。
一元管理という意味では、BLOB型（？）にして、DBにバイナリ保存してしまうのも良さそうなのですが…DBに画像ファイル保存って嫌われそう…？
しかし、それよりも、この動きって、「画像を無断コピー→加工→保管→それを自前のように表示」という流れなんですよね(^-^;
検索サイトに縮小された絵が保管されているのを許容しているように、引用の範囲なら許される？とも一瞬考えるのですが、なかなか難しい問題です。
FAVICONも、画像データではあるのですが、16×16ということもあるので、毎回アクセスして負担をかけるよりも、キャッシュしてしまっても問題無いと考えるのですが、どうなんでしょうか(^-^;
個人レベルでどうこう考えるよりは、画像とFAVICONに関しては、ウェブ上にあるAPIサービスを利用するのが無難なんだろうと考えています。
表題と抜粋文についても、同じ問題は無くは無いのですが、こちらは引用として問題無い範囲だと思います。
はてなブックマーク数は表示
「はてなブックマーク数」は表示したかったものなので、今後もサイト名の隣に表示させる予定です。
ちなみに「はてなスター画像API」なんていうのもあるようです。
表示させない設定もあった方がいいのかな？
その内、facebook「いいね！」とかも表示させたい気もします。
キャッシュする？しない？
外部リンクのタイトルと抜粋文は、取得してキャッシュする仕組みを考えています。
普通にリンクをするときにも、紹介するサイトの抜粋文を記事内に引用することはあるので、「引用」に留まると思われます。
さて、内部リンクの記事については、get_post()して、タイトルと抜粋文を取得しています。
記事については、全文取得したあとに余分なコードを外してから、130文字で切っています。（130文字以下ならそのまま。131文字以上なら128文字の抜粋文と「…」を付けています。）
内部リンクの記事も、DBにキャッシュした方がいいのかとも思いましたが、容量が無駄なだけな気がしてきました(^-^;
公開は未定。予定は未定。
需要がありそうならば適当に公開しようか迷い中。
まずは外部リンクをどうにかしたいなぁ…。
コメント