FC2ブログの訪問者コメントで、自動で訪問者ごとにユーザーアイコンを表示してみました。
クロスドメインの向こう側には、どんな情報が何が待っているのかしら？
訪問者判別とクロスドメイン問題。
現状FC2ブログの一般的なテンプレートにおいて、訪問者コメントのユーザーアイコンは誰が書き込んでも同じデザイン画像を表示させています。
同じFC2ブロガーがログイン状態でコメントを書き込んでくれたとしても、管理者以外のコメント者を判別するようなシステムとなってはおらず、テンプレート変数などによってユーザーごとにアイコンを切り替えて表示するようなことはできません。
そこで、Webプログラムをかじったことがある人だったら、コメント欄で記入されたサイトURLを手掛かりにコメント訪問者のサイトへアクセスして、OGPなどの画像URLを取得するようなJSプログラムを考えようとするかもしれません。
でもその試みの多くは「クロスドメインの壁」に阻まれて失敗することになります。Webブラウザはセキュリティ上の観点から、閲覧サイト内のJSが他サイトのデータを取得するような動作を許可していません。ただし自サイト内であればその制限を受けることはなく、他ページのアイキャッチ画像URLを取得して、サムネイル画像を表示させたりすることができます。
また、相手サイトのサーバー側処理で、他サイトからのアクセスを許可している場合も、クロスドメインの制約を受けることはありません。しかしながら他サイトからのアクセス利用を前提として作られたAPIなどのWebサービスを除き、一般的なサイトやブログでは他サイトからのアクセスを禁止しているのが通常です。
他サイトのデータを取得することができないと言っても、<img src="" >などで他サイト画像を表示させたりできるじゃないか？…と疑問に感じる方もいらっしゃると思います。でもこの場合はブラウザを通じて画像を表示しているだけであって、自サイト内に画像データ自体を取り込んできているわけではありません。CSSによってブラウザを介して拡大・縮小などはできても、その画像自体をJSによって加工したりすることはできません。
今回はそんな「クロスドメインの壁」をぶち破り、コメント訪問者のサイト・ブログからOGP画像URLを取得して表示させる手法について紹介していきます。
Embedly APIを利用してクロスドメイン解消。
このブログではAkira風ブログカードを使っておりますが、有名なブログカード作成サービスに「Embedly」というのがあります。
Embedly makes your content more engaging and easier to share | Embedly
Embedly delivers the ultra-fast, easy to use products and tools for richer sites and apps.
embed.ly普通にブログカードを作成する場合は統合プログラムが使用されるため、一般に認識されてはいませんが、「Embedly」ではブログカードを構成するために、内部的にいくつかのAPI群が用意されています。
以前、Akira風ブログカードを非SSLサイト対応させる記事を書いたことがありますが、それもこのAPI群の一つである画像リサイズAPIを利用しています。
このAPI群の中にサイトOGP情報をJSOPで返してくれるAPIがあります。これらAPIは誰もが利用できる解放されたサービスなので、このAPIにアクセスする分にはクロスドメインにはなりません。従ってクロスドメインの制約を受けることなく、他サイトのOGP情報を取得することができるようになります。
「クロスドメインの壁をぶち破る」とか大仰なことを言っておりましたが、結果から言えば単にこのAPIを使うようにしただけです。というか、このAPIを探してきたことが今回の一番の成果なんですけどね。
訪問者ごとの自動ユーザーアイコン表示のプログラム。
では。訪問者ごとに自動でユーザーアイコンを表示するプログラムを紹介していきます。このプログラムの使用にあたって注意点として４つあります。
- 事前にjQueryが組み込まれている必要があります。
- 事前にLazysizesが組み込まれている必要があります。
- テンプレートとの連動性が高いです。多くの場合プログラム内のカスタマイズが必要です。
- APIの気まぐれでアイコン画像が表示されないこともあります。
※2019/10/22 管理人コメントでURL記入されていると、二重にアイコン表示されてしまう不具合を修正しました。
そしてこちらがJSコードになります。挿入位置は</body>直前でOKです。
<script>
document.addEventListener('scroll', function(a) {
$(function(){
$('.border-container').each(function() {
var visitor_url = $('.visitor-name',this).children('a').attr('href');
var visitor_icon = $('.user-icon',this).children('img').attr('src');
if (visitor_url && !visitor_icon){
$.ajax({
type: 'GET',
url: 'https://api-cdn.embedly.com/1/extract?key=fd92ebbc52fc43fb98f69e50e7893c13&url=' + visitor_url,
dataType: 'json',
cache: false,
crossDomain: true,
context: this,
timeout: 5000,
success: function(data) {
var visitor_name = "";
if (data['authors'][0]['name'] !== undefined){
visitor_name = data['authors'][0]['name'];
}
if (data['images'][0]['url'] !== undefined){
$('.user-icon',this).append("<img class='lazyload author-icon' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' data-src='https://i-cdn.embed.ly/1/display/resize?width=64&compresspng=true&quality=60&key=fd92ebbc52fc43fb98f69e50e7893c13&url="+data['images'][0]['url']+"' alt='"+visitor_name+"' data-sizes='auto'>");
}
}
});
}
});
});
a.target.removeEventListener(a.type,arguments.callee);
});
</script>
赤・青・緑でマーキングしてあるところが、それぞれクラス名となっており、テンプレートに応じて変更する必要があります。それぞれが示している領域を下図に表してみます。
仕組みとしては、border-container領域内において、visitor-name内のリンク先サイトのOGP情報を取得して、user-icon内にOGP画像を表示させています。
Akiraさんが製作したテンプレートであれば、おそらく変更なしでいける可能性が高いと思います。なおAkiraさんを含むテンプレート作者さんは本件とは全く無関係ですので、うまく動かないからといってテンプレート作者さんに質問したりしないでください。ちなみに僕も知らない人からの質問に答えるつもりはありませんのであしからず (笑)
ブログ表示速度対策として、本スクリプトはスクロール操作で起動し、アイコン画像はLazysizesで遅延ローディングしています。
ブログカードと違って、コメントの場合は基本的に相手を選ぶことができません。コメントしてくれた方に悪気がなかったとしても、非SSLサイトであればアイコン画像が混在コンテンツの要因となりますし、画像容量が大きければ通信量に影響が出てきます。
そこでこのブログで使用しているブログカード同様に、アイコン画像をEmbedlyの画像リサイズAPIを介して表示させることで、非SSLサイト・大容量画像対策を行っています。
今日のアイキャッチ画像は。
「アサシンズプライド」から、メリダ=アンジェルちゃんです。
マナという能力を持つ貴族が、人類を守る責務を負う世界。能力者の養成校に通う貴族でありながら、マナを持たない特異な少女メリダ=アンジェル。彼女の才能を見出すため、家庭教師としてクーファ=ヴァンピールが派遣される。 『彼女に才なき場合、暗殺する』という任務を背負い－－。「オレに命を預けてみませんか」暗殺者でもなく教師でもない暗殺教師の矜持（プライド）にかけて、少女の価値を世界に示せ！
assassinspride-anime.comとにかくメリダちゃんが健気で可愛くてそれだけで継続視聴できる作品です。マナ覚醒時のメイドさん達の喜び方を見ていると、彼女が近しい人たちに愛されているのがよく分かります。そこからは彼女の性格の良さと諦めない心で頑張ってきたことが読み取れます。
作画も良いですし、特に彼女と主人公のツーショット場面での瞳の動きによる感情表現など、細やかで丁寧な演出も好印象です。EDも心に染み入ってくるような穏やかで優しい曲調が良いです。
マナ覚醒から初回戦闘にかけての物語の流れがざっくりとしすぎていて、イマイチ状況を掴みかねているところもありますが、メリダちゃんがいつまでもイジメられているのはストレスが溜まるので、これはこれで良かったのかもしれません。
ただ主人公との訓練シーンもなく、いきなり技を繰り出してきたあたりは違和感として残るのも確かです。
登場する女の子は総じて可愛いので基本的に不満はありませんが、せっかく主人公もカッコ良かったりするので、そこらへんも生きてくるような展開も期待したいです。
-
FC2ブログ「comment.js」「blog_res.js」起因のバリデートエラー（ワーニング）を解消しました。【デメリットについての追記あり】2020/04/05 -
CSSアニメーションで画像を回転させてみよう!!2020/03/22 -
FC2ブログの訪問者コメントで、自動で訪問者ごとにユーザーアイコンを表示してみました。【現在閲覧中】2019/10/22 -
FC2ブログの「高速画像表示」の効果とは？そのメリット・デメリットについて考えてみる。2019/10/03 -
FC2ブログ要約テンプレの概要表示をキリ良く句読点でカットしてみました。2019/08/29
-
