akira風ブログカードを非SSLサイトへのリンクでもサムネイル表示できるようにしちゃいました。

グランクレスト戦記 シルーカ・メレテス 収束魔法 20180106-Silka-Meretes_s.jpg

 この世界は混沌に満ち、秩序は失われ、自然律は乱れている。
 それ故ありうべからざる現象が起きている。
 その一つが、非SSLサイトへのオブジェクトリンク干渉によるGoogle Chromeでの『保護されていません』警告表示。
 それがこの世界に影を落としている…… 





今回はakira風ブログカードの改良です。


 昨年11月頃に、こちらの記事でも紹介しておりますakira風ブログカードを導入してからは、ブログやサイト紹介によく使うようになっております。


記事中のブログ・サイトリンクにブログカードを導入してみました。【ピン抜き動作を追加しました】 | 富士宮で貯蓄と資産運用

溢れる煩悩はヌースでも吸い取れきれないみたいね。<2017.11.10 ピン抜き動作のCSSを追記しました> 押しピンのところにマウスを持っていくとピンが抜かれる動作を加えてみました...



 でもこのブログカード、僕としては2点ほど難点がありまして。

(1)非SSLサイト(HTTPアドレスサイト)へ向けて使うと『保護されていません』警告表示が出てしまう。
 これはサムネイル画像を表示するための<img src="">で、HTTPアドレスに格納されている画像データを取得しようとしてエラーになっちゃうからなんですよね。

 なので、<img src="">タグ部分を削除してサムネイル画像を表示させなければOKですし、また現在のFC2ブログであればブログ自体が非SSL状態であっても、画像自体はHTTPSサーバーに保存されているので問題なく表示できたりします。

 僕のブログでは、アイキャッチ画像の紹介説明でアニメ公式サイトへのリンクを貼っているんですけど、アニメ公式サイトはほぼ非SSLサイトになっていてブログカードを使おうとするとこんな感じで殺風景な状態になってしまうんですよね。



 チープな内容の記事概要も相まって、これじゃあチョットね…といった感じで、アニメ公式サイトへのブログカードは使ってこなかったんです。



(2)OGPでアイキャッチ画像が設定されていない時に、サムネイル画像表示がされない。
 これはまぁ設定されていないんだから当たり前なんですけどね。
 上と同じ理由で殺風景な状態をなんとかできないかな?って思っちゃったりするわけです。


 別にカードに問題があるわけじゃなくて、できるだけAPIを使わないという思想で作られていることもあって、仕様として仕方がない…
 というか、コレは僕たちユーザー側で、使いやすいように自由にカスタマイズできる余地を残してくれてあるんだと思うんですよね。
 だったら僕としては、不満を述べるよりも前に、とにかくチャレンジしてみるしかないじゃん!! なわけです。


非SSLサイトの画像データを『保護された通信』のまま持ってきちゃう。


 akira風ブログカードをよく見てみると、同じ<img src="">タグを使っているのに、なぜかファビコン画像はちゃんと持ってこれているんですよ。

 ファビコン部分は"https://www.google.com/s2/favicons?domain=リンク先URL"といった感じで、Googleのファビコン取得APIを介して取得しているようです。

 これは一旦SSL化されたサイトを経由してあげれば、非SSLサイトのデータでも『保護された通信』のまま持ってこれるんじゃないかと考えまして、ファビコン同様に画像に対しても同じようにもってこれるサービスがあるんじゃないかと思い探してみました。

 そして比較的簡単に見つけられたのが、こちらのサイトで詳しく紹介されていた「HeartRails Capture」とwordpressの「mshots」
 サイトのスクリーンキャプチャ画像を取得するサービスです。


サイトのキャプチャ画像を取得できるWebAPIを使ってみる | ぽぽづれ。

今回はサムネイル画像を取得します。OGPの画像はでっかいOGPから画像URLを取得できたものの、OGPで使用する画像サイズは「1200px × 630px 以上」が推奨です。(Facebookの場合。)サムネイル画像として使うには大きすぎる


 ちょっと試してみましたが、サイトアドレスだけでなくURLに画像ファイルを指定してあげれば結果的に画像部分を持ってこれるみたいです。
 一番最初にアクセスした時に「Now Capturing」と表示されますが、しばらくするとちゃんと表示されます。

https://capture.heartrails.com/300x157?http://grancrest-anime.jp/ogp.jpg


 『https://capture.heartrails.com/』が画像取得APIのアドレス。
 続く『300×157』が画像サイズ。
 『?』の後に続いて画像URLを指定。

 やってみた感じとしては、サイズ指定制限において「HeartRails Capture」の方がまだ柔軟で使い勝手が良さそうです。
 これで課題となっていた問題が一挙に解決できそうな感じです。



 ただ、300×157といったサイズ指定を、実画像サイズの縦横比率に合わせてあげないと、こんな感じに余分な空白部分が入っちゃいます。

https://capture.heartrails.com/300x157?https://blog-imgs-116.fc2.com/m/o/c/mochi1999/20171101-Lykos_s.jpg


 結局はスクリーンキャプチャーなので仕方がないのかもしれません。

 ちなみにFacebookで推奨されているOGP画像サイズは縦630px×横1200pxで、縦:横の比率は1:1.91とされているようです。
 アニメ公式サイトのOGP画像もだいたいこれに基づいて作られているので、これでも良いっていえば良いのですが…
 ブログカードの機能としては、ちょっと汎用的ではありませんよね。


やっぱりスクリーンキャプチャじゃなくて画像自体を持ってきたい。


 というわけで、更なるサービスもしくは手法を求めてネットの海をさまよい歩きましたが、なかなか良いモノが見つかりません。

 Photonというwordpress用のAPIもあったんだけど、wordpress以外じゃ使っちゃダメと公式に書かれているらしく、また画像キャッシュがいつまでも残ってしまうということで、とりあえず今回は保留。

Photon API を使って WordPress で画像処理 ? プログラミング生放送

WordPress.com と WordPress のプラグイン Jetpack で提供されている Photo…


 自分で専用にサーバーを立ち上げればなんとかなりそうな資料もありましたが…いやさすがにムリだろソレって感じで。



 そこで趣向を少し変えて、ぼっちんさんのブログでも紹介されていたEmbedlyというブログカードサービスを参考にしてみようと思いました。
 Embedlyは『保護された通信』のままで、非SSLサイトのサムネイル画像を持ってこれるみたいなんですよね。
 だからそこの部分をパクっちゃえないかなぁ…って。

Embedlyで登録なしでCSSでカラフルなブログカードを作ってみました

■ この記事は 2017/06/12 に修正致しました。 弊ブログでは最近 を記事内に表示することがとても多くなりました。私がそのブログカードなるものを初めて知ったのは今年に入ってからなんですけどね (^^ゞポリポリ ブログカードって [ 記事都合によりこれ ↑ は画像にしてありますが実際はテキスト表示です ] ...


 上のヤツが登録なしで貼り付けたEmbedlyのブログカードなんですけど、表示されているアイキャッチ画像のところで何気なしに【右クリック】→【画像アドレスをコピー】で、クリップボードにコピーされた内容を見てみたんですよ。

 それがコレ↓
https://i-cdn.embed.ly/1/display/resize?key=fd92ebbc52fc43fb98f69e50e7893c13&url=https%3A%2F%2Fblog-imgs-114.fc2.comoop%2Foops0011%2F2017-05-26-blogcard.jpg&width=175

 ややや!EmbedlyのAPIらしきものにURLパラメータとして元画像ファイルを指定しているみたい。
 ただ画像URLがエンコードされているのがちょっとヤラシイなぁ。



 試しに画像URLをエンコードなしでアクセスしてみると・・・

https://i-cdn.embed.ly/1/display/resize?key=fd92ebbc52fc43fb98f69e50e7893c13&url=https://blog-imgs-114.fc2.com/o/o/p/oops0011/2017-05-26-blogcard.jpg&width=175



 おぉぉぉ… キタ━━━(゚∀゚).━━━!!!

 『https://i-cdn.embed.ly/1/display/resize』が画像取得APIのアドレス。
 『?』に続く『key=fd92ebbc52fc43fb98f69e50e7893c13』でAPIキーを設定。
 『&url=』に続いて画像URLを指定。
 『&width』で幅175でリサイズ。

 幅もしくは高さのどちらかを指定してあげれば、画像サイズの縦横比率に応じてリサイズしてくれるみたいです。

 でもこれAPIキーを勝手に使っちゃって大丈夫かな?
 とか思わなくもないものの、登録なしで貼り付けれるブログカードに使っているヤツなんだからきっとフリーAPIキーなんだろうと都合よく解釈しました。
 うん。もしかしたらヤバいかもしれない…

 っていうか、ぼっちんさんところのアイキャッチ画像のURL曝しちゃった。
 うん。たぶんこっちは許してもらえると思う。


とりあえずブックマークレットに反映。


 先にブックマークレットだけ紹介しておきますね。
 僕のブログで紹介しているピン留めカード用のものと、装飾変更を加えていないオリジナル版の二つを用意しておきました。

 下の「引用ブログカード改」というテキストを、ドラッグ&ドロップでブラウザのブックマークバーに投げ込んでください。

【ピン留め版】
引用ブログカード改

【オリジナル版】
引用ブログカード改


(上級者向け)スクリプトコードの紹介です。


 じゃあ、ここからは改造したakira風ブログカードのスクリプトコードの内容を紹介していきますね。
 オリジナル版を自分独自にカスタマイズしている人は、コレを参考にしてブックマークレットを編集してください。



javascript: (function() {
(function(d, f, s) {
s = d.createElement("script");
s.src = "//j.mp/1bPoAXq";
s.onload = function() {
f(jQuery.noConflict(!0))
};
d.body.appendChild(s)
})(document, function($) {
var obj = [];
obj.title = $('title').text();
obj.img = $('meta[property="og:image"]').attr('content');
obj.desp = $('meta[property="og:description"]').attr('content');
obj.url = document.URL;
obj.domain = location.host;
var cardText = '<div class="blogcard-text"><p class="blogcard-title"><a href="' + obj.url + '" target="_blank">' + obj.title + '</a></p><blockquote cite="' + obj.url + '"><p class="blogcard-description">' + obj.desp + '</p></blockquote></div>';
var cardFooter = '<div class="blogcard-footer"><a href="' + obj.url + '" target="_blank"><img src="https://www.google.com/s2/favicons?domain=' + obj.url + '" alt="">' + obj.domain + '</a></div>';
if(obj.img == undefined) {
obj.img = 'https://capture.heartrails.com/300x157?' + obj.url;
} else if (obj.url.startsWith('https') == false){
obj.img = 'https://i-cdn.embed.ly/1/display/resize?width=300&key=fd92ebbc52fc43fb98f69e50e7893c13&url=' + obj.img;
}
var cardImg = '<div class="blogcard-image"><div class="blogcard-image-wrapper"><a href="' + obj.url + '" target="_blank"><img src="' + obj.img + '" alt=""></a></div></div>';
var card = '<div class="c-pin-s"><div class="blogcard-gr2"><div class="c-pin-e"></div><div class="blogcard-content">' + cardImg + cardText + '</div>' + cardFooter + '</div></div>';
prompt('%E4%BD%9C%E6%88%90%E3%81%95%E3%82%8C%E3%81%9FHTML%E3%82%92%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84', card);

 18~22行目にかけての処理で、OGP画像が設定されていない時は「HeartRails Capture」でスクリーンキャプチャ画像を取得し、OPG画像が設定されているけどHTTPSアドレスでない時に「Embedly」のAPIを使って画像を取得しています。

 黄色マーキングしてあるところはピン留め処理用に変更してある部分ですね。
 不要な人は削除しちゃってください。



 上のスクリプトを、グーグルが提供する「Closure Compiler」などのjavascript圧縮サービスでギュッと圧縮しちゃいます。
 「Closure Compiler」を使う時は、Optimizationのところで【Whitespace only】を選択しておいてください。
 あと改行が残っちゃったりするところもあるので、そこは手作業で削除してくださいね。

Closure Compiler Service

The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript.


 念の為、現在使っているブックマークレットをコピーしておいてから、ブックマークレットの編集で、圧縮されたスクリプトコードを上書きしちゃってください。


ブログカードを作るとこんな感じになります。


 例:OGP画像が設定されていないサイトの場合



 例:OGP画像が設定されているけどHTTPサイトの場合



 description(記事概要)がショボイ場合は、自分で書き加えてあげる必要はありますね。
 せっかく紹介するのですから、それくらいの愛はあってもいいんじゃないかな?と。

 しかしまぁ。SSL化過渡期とはいえ日本の省庁が非SSLでOGP画像も設定されていない有様だもんね。
 しかも経産省がだよ。
 その一方で自民党のサイトはしっかりSSL化されていたりして…

 日本のSSL化の夜明けはまだまだ遠いみたいです。


今日のアイキャッチ画像は。


 「グランクレスト戦記」から、天才少女魔法師のシルーカちゃんです。


TVアニメ「グランクレスト戦記」公式サイト

魔法都市エーラムで“大講堂の惨劇”が勃発したことから、アトラタン大陸を二分する大工房同盟と幻想詩連合、ふたつの大公家の婚儀は潰えた。
平和への道は打ち砕かれ、大陸はふたたび戦火の時代を迎える。


 いいね いいね いいね
 「3いいね」をあげたいと思います。
 永遠の中二病としてはビビビってきちゃいます。

 ちょっと胸のあたりが寂しい感じもするけど、それを肌色面積多めのコスチュームが見事に補完してくれています。

 って、あの衣装って元々契約するはずだった領主の指定だったっけ。
 恥ずかしがってた割にはそのままの格好でいたりして、結構気に入っているのかな?

 いずれにしてもアニメータ泣かせのコスチュームです。
 僕としてはぬりぬりしがいがあって好きなんですけどね。

スポンサーサイト
ブログツールグランクレスト戦記シルーカ

4 Comments

よつば  

w川・o・川w オォーーー!!

mochiさ~ん ヾ(^∇^)おはよーございまーす♪

すっごいすっごい!またまた大感激!!お見事です(*゚▽゚ノノ゙☆パチパチ
mochiさんって本当にスゴイ人ですね~!ホント出会えて良かった~♪

「Embedly」カードと「Akira」カードの合体版、最強ですね!
難しいことは、良く解らないけど 早速ブックマークバーに
ドラッグ&ドロップでブラウザのブックマークバーに入れました♪

ピン付きまであるなんて、親切な仕様に感動です\(*T▽T*)/ワーイ♪

2018/01/10 (Wed) 11:03 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/01/10 (Wed) 11:17 | REPLY |   

mochi  

おまたせしました。 (* ̄∇ ̄*)エヘヘ

こんばんは。よつばさん。

> 「Embedly」カードと「Akira」カードの合体版、最強ですね!
> 難しいことは、良く解らないけど 早速ブックマークバーに
> ドラッグ&ドロップでブラウザのブックマークバーに入れました♪

 
 こんなに喜んでいただけるとは思いませんでした。
 FC2ブログ仲間内では使うことはないので、
 一般の人はなかなか利用機会がないかもしれませんが。 
  
 コレについては本当に自分の為に作ったものといった感じです。
 おそらく一番活用するのも僕なんじゃないかと… (;^_^A アセアセ・・・ 
 
> ピン付きまであるなんて、親切な仕様に感動です\(*T▽T*)/ワーイ♪


 留めピンのは僕のブログで紹介したやつなんで、
 ブックマークレットを用意した方がいいんじゃないかと思いまして。
 というか、これも自分の為に作ったようなものですなんですけどね。 (*゚.゚)ゞポリポリ

 煩悩の赴くままにやってるだけなんで、
 あんまり褒められてると照れちゃいます。 (///o///)ゞ テレテレ

2018/01/10 (Wed) 20:37 | REPLY |   

mochi  

そんな意味があるとは知りませんでした!!  (ノ゚ρ゚)ノ ォォォ・・ォ・・ォ・・・

こんばんは。鍵コメYさん。

 アレにそんな意味があるなんて初めて知りました。
 教えてくれてありがとうございます。

 ブログ環境設定でアレの表示/非表示なんてあったけかな?と思って調べてみたら、
 テンプレートで表示するようになっていました。 (・・。)ゞ テヘ

 アレの部分を削除してスッキリさせました。 (*^-°)v オッケェー♪

 なんだぁ~Yさんの方が僕よりよっぽど詳しいじゃないですかぁ。
 また気づいたことがあったら教えてくださいね。 (^ー゚)ノ

2018/01/10 (Wed) 20:50 | REPLY |   

Post a comment