明けましておめでとうございます。
先ほど(2015年、年明け前)このブログのメンツであれこれ喋っていたら、急にSkypeが落ちてビックリした。
慌てて起動しなおすとアップデートが始まる。そもそもSkypeなんて好きじゃないが、Microsoft買収以降のSkypeはホント酷い。
で、アップデート後にSkypeのバージョンが「7.17.0.105」になったんだけど、例えば以前は画像を貼ったらサムネイルのようなものが表示されたと思うんだけど、それがウェブサイトでも表示されるようになってるんだね。
例えばうちのブログの記事ページだとこんな感じ。
これを見て一番最初に思ったのは「うわっウザい」だったんだけど、二番目に浮かんだのは、どういう風に取得・表示してるか知らないけど、これって任意に変更できるんじゃね？って事だった。
(発想的には何か仕込めるんじゃね？だったけど･･･。実行ファイルをダウンロードさせるのはできなかった)
今回はSkypeで仮に自分のブログのURLが表示された際に、こちらが用意した任意の画像を表示する方法を暫定的に書いていきたいと思う。
でも書いてるうちに全く違うわりと実用的な記事になってしまった。特にfavicon周りなど･･･。
環境は Windows7 Pro 64bit Skype Ver7.17.0.105
それぞれどのように取得・表示しているか
SkypeにURLを貼った際に表示されるようになったサマリーのそれぞれの要素がどのように取得・表示されているか。
タイトル
タイトルの取得方法は<title>タグのパターンによって異なる。
- <title>タグのみの場合、<title>内の文字列が表示される。
- og:titleのみ存在する場合、og:title内の文字列が表示される。
- <title>タグとog:titleの両方が存在する場合、順番に関わらずog:titleが優先して取得・表示される
- 両方存在しない場合タイトルは表示されない
全角12文字まで表示され、残りは…になりマウスオーバーで全文表示される。
画像直リンクの場合タイトルは表示されない。
URL
URLにはドメインが表示され、マウスオーバーで全て表示される。
画像の場合も同様。
画像
画像は og:image から取得される。
リンク先が画像の場合は画像が表示されるが、gifには対応していない。
LINEでも似たような機能が追加されたと聞くし、OGP設定がいかに重要かが判る。
何気なく貼られたURLでも見栄えが格段に違うのは以下の差を見れば判るだろう。
favicon
faviconを取得して表示しているような挙動は確認したが、例えば自分の持ってる別のサイトなどで <link rel=”shortcut icon” href=”favicon.ico” /> のようにヘッダ内に指定があっても引っ張ってくれない。大半のサイトがそうなっていた。
Youtubeなどはちゃんと表示されるのでソースを見てみると、type指定があって image/x-icon となっていた。
それに基づいてhtml側にtype指定を追加するもうまくいかず、サーバ側での設定が異なっていたので /etc/mime.types を開き image/vnd.microsoft.icon から image/x-icon に変えるもダメ。
色々なサイトで表示されたりされなかったりというのがあるが、表示されるものはpngで作成されていたり、拡張子がicoでも中身がpngだったりする事がわかった。
もしhtml内でfaviconの指定がなければ /favicon.ico をちゃんと取りに行っている。
画像直リンクの場合はそもそもfaviconを取りに行かない事が判った。
従ってfaviconの取得は以下のように行っていると考えられる。
- html内で指定があればそれを、無ければ /favicon.ico を読みにいく
- 以下の表示できる形式が読み込めた場合、取得して表示する
表示できる形式
png bmp ico(png) ico(bmp)
表示できない形式
ico jpg gif アニメーションgif
※アニメーションpngは未検証
jpgがファイル転送ではプレビューされるのにfaviconでは想定されていないのが面白い。
Skypeからのアクセスを判別して振り分ける
Skypeからのアクセス(UserAgent)
自宅サーバにアクセスさせてアクセスログを見たところ、UAは以下のとおりであった。
[bash]
"Mozilla/5.0 (Windows NT 6.1; WOW64) SkypeUriPreview Preview/0.5"
[/bash]
UAがハッキリしているという事は、UAを判別しての振り分けが可能だと思う。
で、試してみた。
.htaccessでSkypeUriPreview専用の画像(ページ)に振り分ける
UAを利用して振り分ける方法は幾つか存在し、主流は「.htaccess」か「php」のどちらかだと思うが、「.htaccess」でテストすることにした。
「SkypeUriPreview」を含むUAでアクセスがあった場合、test.jpg にRewriteされるような.htaccessを書いた。
もちろんURLを指定しても良い。
UAを簡単に変更できるプラグインなどを入れている人は、UAを「SkypeUriPreview」にして確認するとよい。
あるいはSkypeを使用している人はチャット欄に.htaccessを設置したサイトURLを入れて試してみて欲しい。
サマリーには指定した画像ないし指定したページが表示されると思う。
で、このテスト用の.htaccessの中身は以下のとおり。
[bash]
RewriteEngine On
SetEnvIf User-Agent "SkypeUriPreview" UA=skype
RewriteCond %{REQUEST_URI} !^/test.*
RewriteCond %{ENV:UA} ^skype$
RewriteRule ^(.*)$ /test.jpg [R,L]
[/bash]
色々調べる
UAで振り分けるテストが成功したところで、その他色々のチェックを行った。
キャッシュと保存場所
例えば先のテストの画像を差し替えてSkypeに貼りなおすと、差し替え前の画像が表示される。
どこかにキャッシュされているのだが、Windows7では以下のフォルダに ^[0-9a-f]{50}^tfile_urlpv で保存される。
C:\Users\OSのログインユーザ名\AppData\Roaming\Skype\スカイプのID\media_messaging\media_cache_v2
ローカルキャッシュとは別に、Skype(というかMS)のサーバ側でもキャッシュされているようだ。
ファイル転送とメディアプレビューの違い
Skypeのファイル転送では拡張子を信用するようだ。
例えば、bmp,jpg,pngなどの画像は転送時にプレビュー表示されるが、hoge.bmp を hoge.bmp.jpg にリネームしたら表示されない。
一方、URLを貼った際のプレビュー表示では、ちゃんと中身を検査している。
拡張子がない場合もあるので検査をしているのだろう。
なお、転送もメディアプレビューもgifに対応していない。
エラーページやCSSなどの処理
403,404などのエラーページは取得に行かない事がわかった。
cssやjsなどのファイルも取得に行かない。
よってHTTPヘッダもチェックしている可能性がある。
実行ファイルをダウンロードさせる
Rewrite先にexeを指定してドライブバイダウンロードさせられるか検証したが流石にダメだった。
実体は実行ファイルだが拡張子を変えて読ませるのもダメだった。
こちらはgifと違ってキャッシュフォルダ内にも保存されない。
バイナリヘッダをチェックしている可能性がある。
同じサイトでキャッシュを読ませず検証する
テスト段階で何度もキャッシュが表示されて非常に邪魔だったが、末尾に ?未使用の文字列 をつける事で再取得が確認された。
http://example.com/?hoge
Skypeにリンクを貼ってもSkypeのサーバにアクセスさせない方法
URLの後ろに?をつける(?の後に文字列は入れない)とリンクは貼られるがアクセスは来ない。
当然メディアプレビューも出ない。
http://example.com/?
検証の結果判ったこと
結局OGP設定は超重要
Skypeのメディアプレビューに表示される画像は og:image から取得されることは書いたとおり。
つまり、OGP用の画像に判りやすい画像に加えて適切な文字が入ったものは、TwitterやFacebookなど従来のSNSだけでなく、SkypeやLINEなどでも重要な要素になってきたという事だ。
画像の取得方法によってはSkypeプレビュー対策プラグインのようなものを検討していたが不要になってしまった。
プレビューにfaviconが表示されない場合はpngで
メディアプレビューで表示できるfaviconの形式はpng,bmp,ico(png),ico(bmp)の通り。
ごくごく普通のicoを使っていると正しく指定していても表示されない。
デメリットが存在するのであれば教えて欲しいが、基本的に今後faviconは32×32のpngで良いのではないだろうか？
今後似たような事が起こりうるのでfaviconはpngで統一しようと思う。
そもそもicoなんて滅びれば良いんだ。
表示させる画像を変更できる
例えば、こういったブログでは出来る限りの興味を持ってもらいたいけど、うちでは表示させたくないよ！っていう場合。
考えづらいけど.htaccessやPHPなどで「SkypeUriPreview」のアクセスを決まった画像に飛ばすようにすれば良い。
コメント