[Pz-LkC][1.0.3]リンクをカードにするプラグイン更新。不具合修正、効果追加など

リンクをカード形式で表示するWordPressプラグイン「Pz-LinkCard」を公式プラグインディレクトリにて公開中です。

このプラグインはなんだ?Σ(゚ロ゚)o゙

「Pz-LinkCard」は、リンクをカード形式で表示するWordPress用プラグインです!Σ(゚ロ゚)o゙

インストール方法や使い方は下記ページに用意させていただいています。

ショートコード方式のメリットってなんだ?Σ(゚ロ゚)o゙

テキストにリンクを設定するだけのテキストリンクは、文章中にもリンクをいれられるので、読み手の邪魔にならずにリンクができます。

でも、強調したいときは、文字サイズを変えたり、枠を付けたりすることになります。

「文字だけじゃさみしいなぁΣ(゚ロ゚)o゙」と思ったら、キャプチャ画像を取得するAPIとかを利用して画像を貼りつけたりするかも知れません。

HTML書いたり、画像を取るAPIのURLを取って、貼って…と、手間になってくると、ブックマークレットとかを使うようになると思います。

通常はこの辺りまでやると、満足できると思います。

そして、とりあえずそれで良いと思います。

でも、たとえば、「テーマを変えたらブログカードのレイアウトが崩れた!Σ(゚ロ゚)o゙」といった場合、過去記事に貼られているHTMLタグを編集することになります。(そんなことにはならないかもしれません。可能性の話です(^-^;)

まず、「Search Regex」といった文字列置き換えプラグインを使うことを考えますが、ブログカードをつくるHTMLはだいたい一律で置き換えができるほどシンプルではありません。

では、1件ずつ記事を手作業で修正となるのですが、まずはブログカードが埋め込まれている記事を検索することになります。

どんなキーワードで探しましょうか。

HTMLタグの一部かな?(^-^;

http://」ってキーワードだと、画像を貼っている記事が全部検索されてくるので、「<div>」とかが良いのでしょうか。

そもそも、数百件くらいあったらうんざりしますね…(^-^;

「テーマが適用できるか否か」というほどではなくても、「過去記事のカードも含めて、色とかレイアウトを変えたいなぁ!(^-^)o」と、「軽く気分転換したい」場合でも、同じくらい大変だと思います。

さて、ショートコードで記述されている場合、「せいぜい記事中のショートコードを置き換えるだけで乗り換えができる」メリットがあります。

たとえば、「ショートコードとして [blogcard url=”xxx”] を使うプラグインから、ショートコード [linkcard url=”xxx”] を使うプラグインに乗り換えよう!Σ(゚ロ゚)o゙」と思うとします。

Search Regex」などの文字列置き換えプラグインを使って、こんな感じで置き換えれば、乗り換え完了です。

置換元
[blogcard
置換先
[linkcard 

最初の角括弧と、最後のスペースを1個も「一緒に食べさせる」のをお忘れなく。

url=”という部分まで「食わせて」置き換えするのが本当のお勧めです。)

ショートコードが同じだったら、そのまま新しい方を有効化したら古い方を停止しておくだけです。

そこで Pz-LinkCard ?Σ(゚ロ゚)o゙

前に、外部リンクを「はてなブログカード」で表示する「Pz-HatenaBlogCard」というのを公開しています。

自前でブログカードを作成する「Pz-LinkCard」の構想はあったものの、公開するほどのクオリティに届かず、「まずはショートコードをカード形式で表示される」を実現できるプラグインを公開した形です。

前項の話は複線でして。そうです。そうです。

「Pz-HatenaBlogCard」から、「Pz-LinkCard」への乗り換えはそのままできる設計になっているのですΣ(゚ロ゚)o゙

そして、ショートコードを変更する機能があるので、たとえば「Browser Shots」を使っている場合だったら、 browser-shot とかに設定することで、「ちょっとお試し」ができます。

そして、「Pz-LinkCard…たいしたことなかったゼ!Σ(゚ロ゚)o゙」と思った場合は、Pz-LinkCardをそうっと停止するだけです。

「どっちにしようか悩んでる!Σ(゚ロ゚)o゙」というプラグインがあったら、ショートコードそのものはそっちのを使うように設定しておいて、どっちも試すことができます。(もし、Pz-LinkCard を選んでいただけたとしても、使うショートコードはそのままでも大丈夫です)

そして、url を指定するだけのシンプルなショートコードなので、「今度は Pz-LinkCard から、他のプラグインへも乗り換えやすい!Σ(゚ロ゚)o゙」というのも当プラグインのメリットとして挙げておきます。

「乗り換え易さ」はこの辺にしておいて…。

Pz-LinkCard は、

  • 設定画面によって、外観を変更できます。(カードの背景色、背景画像、サイト名称の表示位置を上か下か非表示、キャプチャ画像(外部APIを利用)を右か左か非表示か、文字の色とサイズ など)
  • 1回目に表示する際に、リンク先のタイトルと抜粋文を取得してデータベースへ保存(キャッシュ)します。(このため、初回表示は一般的なブログカードに比べて遅いです。)
  • 2回目以降の表示は、キャッシュから読み込むので高速です。
  • ソーシャルカウントの表示を有効にした場合、ソーシャルカウントも一定期間キャッシュします。
  • キャッシュするので、リンク先が誤字訂正をしても内容が変更されません。(これはメリットかデメリットかは、使用者によると思います)
  • 管理画面によって、タイトルと抜粋文をリンク先から再取得することが出来ます。また、手入力による編集も出来ます。

といった特徴があります。

要約すると、カンタンに、見栄え良く、リンクがカード形式になるプラグインです。

詳しくはPz-LinkCardのページをご覧ください。

変更点など

そういえば、更新のお知らせ記事でした。

ええっと、昨晩、ver1.0.3を公式プラグインディレクトリへアップしました。

もう24時間以上経っているので、告知記事要らない気もしてきました…(^-^;

定型書式に「紙めくれ」が実装!Σ(゚ロ゚)o゙

告知記事は24時間以上経ってしまいましたが、「紙めくれ」についてはver1.0.3公開直前に投稿したとおりです。

今まで、「紙めくれ(ほとんどのテーマで正しく表示されません)」と表示されていた定型書式です。

本当にめくれているような効果では無いのですが、「右下にナナメの影」を入れることで、錯覚効果で紙がめくれたように見えます。

スタイルシートは奥が深くて…と、「掛ける」わけでは無いですが、「奥行き」の指定がうまくいかなくて、「影が背景の下に表示されてしまい、結果見えない」という状態だったのですが、今回、うまく実装できました。

ただし、この定型書式を指定すると、テーマのスタイルを一部追加するので、テーマ側の表示が崩れる可能性があります。

具体的に言うと、「article」と、「article blockquote」に「position: relative; z-index: 0;」を付与します。

見た目が楽しい効果ですが、テーマと相性が悪かったら、あきらめてください…。

定型書式に「テープ&紙めくれ」が実装!Σ(゚ロ゚)o゙

「左上にテープを貼って、無造作に貼ったものだから、右下がちょっと浮いている」

というシチュエーションです。

上の「紙めくれ」もそうですが、個人的には背景色はなるべく白、枠線は「黒/1px」か「薄/1px」、「なし」あたりが合うと思います。

この記事投稿時は、「フリーテクスチャ素材館」さんの「Craft紙・フリーテクスチャ(PHOTO) 」を横幅1600px→800pxに縮小したものを使用しています。
(加工や使用に関しては「ご利用規約|フリーテクスチャ素材館」を確認してください。)

ところで、「紙めくれ」が「舐めくれ」に見えてくるのをゲシュタルト崩壊というのでしょうか。(きっと違う)

キャッシュ時の不具合修正

カード管理で編集を行うと、内部IDが0になったり、次に記事を表示すると新たにキャッシュされてしまったり、解消したつもりで解消されていない不具合がありました。

カード管理画面を頑張って直していたのですが、キャッシュする仕組みをつくりなおしたときに、つくりこみが甘かったことが判明しました(^-^;

URLを「SHA256」という方式で64ビットのハッシュ値を算出しています。

その値を重複チェックに使うことで、同時アクセスされたときに同じURLの記事が複数キャッシュされてしまうのを防いでいます。

このハッシュ値が計算されないパターンがあり、空欄のままとなっていることで不具合が発生していました。

「編集」や「記事内容の再取得」、「ソーシャルカウントの再取得」を行うときに、ハッシュ値が空欄の場合は計算しなおすように修正しました。

そもそも何で重複防止にハッシュしているのかという話ですが。

MySQLで重複を防止してくれる「UNIQUE KEY」が指定できるのが「767バイトまで」となっています。

URLはエンティティ化されていたりすると、767バイトを超えることもあるかと思うので、URLそのものは重複キーにせず、ハッシュ値を使用しています。

767バイトというのはストレージエンジンが「InnoDB」のときの制約のようで、「MyISAM」だと1,000バイトだったりもするようなのですが、「DBをバージョンアップしたら動かなくなった」というのを避けたいため、文字数がしばられるハッシュ値を取ったという経緯です。

「SHA256」なのは、64バイトと長め(きっと重複しない)なのと、計算速度がそんなに遅くない(計算コストが低い)というところから選択しました。

なお、シノニムを考慮していないため、たまたま同じハッシュ値になるURLはキャッシュされない仕様となっています。

むしろSHA256ハッシュしたときに重複するURLの組み合わせを見てみたいので、そういうのがあったら教えていただけると喜びます。

そして、せっかくハッシュ値をDBに保存しているのに、検索は URL そのもので行っていたりします。

「ハッシュ計算って重そう(CPU使いそう)」という勝手な思いだったのですが、インデックスしてないURLをだらーっと検索に行く方が「重そう」な気もしてきました。

ところで、「ストレージエンジン」(Storage engine)を「ストレートエンジン」(Straight engine)と表記されているのをよく見かけます。

記事によっては行によって呼称が混在しているので、正しく知っている方がミスタイプ(typo)して、それを見た人が「ストレージ」よりも馴染みやすい「ストレート」という単語を使って→それを見た人が引用→それを見た人が引用…という流れなのでしょうか。

その他、細かい修正

管理画面でドメイン選択していても、編集などをすると解除されていたのを改善しました。

「ドメイン選択して、どんどん編集してサイト名称を入力していく」なんて作業もし易くなりました。

その他、細かい修正あれこれ。

今後の予定など

SNSキャッシュまわりの改善をしたい

できたら、表示時には取得しないで、スケジュールして wp-cron に実行させる感じにしたです。

でも、スケジュールに手を出すと、不具合出たときに面倒なことになりそうで悩んでいます。

心身ともに余裕があるときに手を出すかも知れません。

管理画面で横幅を狭めたときの表示を改善したい

実は管理画面のレイアウトはほとんど、WordPressの投稿一覧のクラス名を付けちゃうことで、勝手に色々やってくれています。

チェックボックスの処理とかも、自分では何も作ってなかったりします(^-^;

そして、ある程度狭くなったら抜粋文の列とか非表示にしたいのですが…。

投稿一覧だと、狭くなるとタイトルより右側の列に display:none; が適用されているようなので、クラス名とか付けると上手く行くのかな…?

(そもそもあまりお行儀は良くないんだなぁ…(^-^;)

管理画面の表示される件数を変更したい

現在、1ページに10件まで表示されます。

カードが沢山あるとページを変えるのが面倒なので、件数を変更できるようにしたいと思いました。

が、試しに100件くらいにして、「すべてチェック」をして、「キャッシュしなおす」とかを選んだところ、そもそも1件取得に3~4秒はかかるわけで、数分戻ってきませんでした。

もちろん、サイト側も重くなっているので、閲覧に来た方もなかなか表示されない状態になります。

これは危険なので、10件固定で行こうと思っています。

それでもどうしても、という方は、

この2行にある「10」を両方とも、「20」とか「50」とかに直してみると良いかも知れません。

管理画面にテキスト検索が欲しい

「Pz カード管理」の画面に、テキスト検索欲しいですよね。ぼくは欲しいです。

管理画面にカード表示を付けたいような、そうでもないような

管理画面は文字で表示されていますが、カード表示させるのも面白そうだな、と思います。

「投稿一覧」にあるボタンは、左が「タイトルのみ」、右が「抜粋文あり」と表示が切り替えられますが、

select-list-card

こんな感じでカード表示に…なったら楽しいなぁ!Σ(゚ロ゚)o゙

pz-lkc_manage_card

見てて面白いのと、「こんな感じで表示されているのかー」というのを一覧できるのは良さそうです。

ただし、「リンク」されてしまうので、クリックしてしまうとリファラーにパラメータが「載って」しまう可能性があるので、実装は厳しいかも知れません。

その他

はじめての公式プラグインディレクトリにプラグインを公開してから2か月くらいしか経っていないプラグイン初級者なので、「インストールしてみたよ!」とかコメントとかツイートあると嬉しいです(^-^)o

そして、不具合などはコメントかツイッター(@popozure)で教えていただけると助かります。

まだ開発途上なので、仕様なのか不具合なのか微妙なところも聞いていただければお答えしますし、仕様だった場合でも要望であれば取り入れることも検討したいと思います。

では(^-^)o

広告