2019年01月

ブログカードの実装

WordPress にはプラグインが豊富に合って「あれできないかな?」ということが大抵あるので便利は便利なんだけど、そのうちの一つに「ブログカード」がある。

まさしくこのようなやつで、はてなブログではリンクを挿入する際にブログカード形式が選べてこれが OGP を取得表示してくれて便利なわけです。そして WordPress にはこのようなブログカードを実装するプラグインとして、Pz-LinkCard というまさしくなプラグインがあり簡単に利用できる。

しかし Freo にはこのような機能はないので、今のところ他のエントリーでは HTMLでそれっぽいものを書いたり、上記のはてなブログカードを呼び出して使っています。

これでも別にいいのですがもっと便利にしようと思うと、リンクを自動的にブログカードに変換する機能を実装するということになる。

先の PZ-Link のような動作にするには各テンプレートが DBを呼び出して表示するときに特定の文字列があればそれを変換して表示するというフローになると思うのですが、そうすると Smarty修飾子プラグインで実装するのが一番早いのかしら? と考えました。

例えば

[blogcard url="http://801.std201.com/index.php/view/410"]

と書けば

こうなるようにする。

エントリーを解析して、上記の blogcard で始まる文字列を取得して、URLから OGPを取得して HTMLに展開するというフローなのでそれほど難しくはなさそう。

OGP を取得するためには自分でルーチンを書くという手もありますが、あるものは使うべきだと思うので opengraphライブラリを使うことにしてテストしてみたら日本語の文字化け。

調べてみるとHTML解析しているところが問題のようで下記の通り修正したら直りました。日本語を使っていると常に文字化けと隣り合わせなので辛いですよね。もう日本語を廃止すれば? と思う瞬間でもあります。

(追記)HTML-ENTITIES だけでは shift_JIS とかで書かれているサイトに対応できなかったので更に文字コード変換を追加した。

	static private function _parse($HTML) {
		$old_libxml_error = libxml_use_internal_errors(true);

		/* 日本語文字列処理 */
		$HTML = mb_convert_encoding($HTML, "UTF-8", "auto");
		$HTML = mb_convert_encoding($HTML,"HTML-ENTITIES","UTF-8");

で、一応このページはそのルーチンを使っているので先の [blogcard url=""] でブログカードに変換されます。

問題点

  1. pixiv 等の特定 IPからの呼び出しを遮断しているサイトの場合、Smarty修飾子プラグインは PHPが実行しているサーバから実行されそのページにアクセスされるため、サーバがその特定 IPに該当すると OGPが取得できない。
  2. Freo のフィルター機能を使用していると、フィルターしているページの OGPには当然アクセスできない。

以上2点になるが、1については何らかの事情で OGPが取得できなかったときははてなブログパーツ APIを呼び出してそれを使用することにする。これも何の問題解決にもなっていないが、はてなブログパーツ API が公開を停止しない限りはうまくいくので次善策としては問題ないかと思う。そもそもブログカードプラグインも favicon の取得にはてなブログAPIを使っているので……。
2については OGPを取得するルーチンを Cookie対応にすればいけるのかもしれないが、それも面倒なのでそういうブログカードを貼りたい場合は、フィルター機能について に書かれている通り、「フィルター適用時のタイトル」と「フィルター適用時の本文」にそれぞれ [$title] と [$text] 入れてしまえばいいのではないかと思う。直接リンクされない限りフィルタは機能するわけだしそれでいいような気もする。

現在のところ、modifier.blogcard をこのサイトには適用しているのでブログカードを貼るのがものすごく楽になった。

寝間着の出茂鹿

20190117001231.jpg

ノートにいつスケッチしたのかわからない出茂鹿をぺんてる筆でトレースしてみた。

はじめはスケッチに直接ぺんてる筆で描こうかと思ったんですが、構図を変えたかったのでトレースを考えるが、トレース台を去年捨ててしまったのでトレースする方法を模索……。発光体があればいいわけで、タブレットはバックライト液晶なわけでこれは発光体だよなぁ……と思い「タブレット トレース台」で検索したらドンピシャなアプリを発見しました。

20190117001822.jpg

これがトレース前のスケッチ。この線嫌いじゃない。

サイト更新

このサイトは下記のテンプレートを使わせていただいているのですが、Tumblr でギャラリーを展示していたときと同じように、ギャラリーでタグクラウドを表示できないかとフッターのテンプレートを触ってできるようになりました。

ギャラリーモード以外ではタグクラウドは通常の表示モードでタグを表示しますが、ギャラリーでのタグクラウドからはタグによるギャラリーの表示をします。Tumblr で使ってたテンプレートにはこの機能があって便利だったので実装したかったんです。

あと、一覧表示状態でエントリーにカテゴリとタグを表示させたかったのでこれもデフォルトのテンプレートを触って可能にしました。
このテンプレートはレスポンシブに対応しているので、スマートフォンなどではそれ用の表示になるのですが、そちらでこれらを表示すると文字が多くなりすぎるので表示しないようにしています。

もう一つ細かい動作で、エントリーの Twitter共有が「エントリー名 URL」なんですが、「エントリー名 | サイト名 URL」になるようにテンプレートを触りました。サイト名に「+」が入っているので URLエンコードしないと Twitterに渡せないので PHPで普通に URLエンコードできるのかな? と思ったらできなくて、Smartyの変数の修飾子で可能なことが色々調べているうちにわかりすんなり解決しました。変数の修飾子はかなり便利で色々カスタマイズできるなぁ……と思いました。

とりあえず Tumblrテンプレートでできていたことはできてるかな? と思っているのでひとまずカスタマイズは終了。
本当に Tumblr があんなことにならなければこんなことをせずに済んだのに……と思いますが、CMSで稼働する自サーバで動くサイトを一つ作れたのでよしとします。

ぺんてる筆一発書き出茂鹿

20190113233709.jpg

憂いのある出茂鹿いいですな……。
64巻のあとだと憂いのある出茂鹿も全然ありというかむしろありになるので積極的に推していきたい。
最近、アニメと原作が混ざったような感じで描いてしまいがちだけど二次創作的にはそれくらいのバランスのほうがいいかもしれない。

ぺんてる筆を使い始めるとそればかりで描きたくなってしまう。

ぺんてる筆って結構種類があって、全種類集めたいなぁ……とか思うけど、今のところ 中字、つみ穂、極細、うす墨しか持ってない。いつも使っているのは極細。ラインナップに薄墨がないんだけどなくなってしまったのか? と思ったら ぺんてる筆うす墨 は別の商品らしい。

どちらにしても商品紹介に絵を書く用途として想定されているので、ぺんてる筆で描いてる人って思いのほか多いのだろうと思う。