2013
3
21

リンク先のファビコンを取得してリストマーク代わりに表示する方法

twitterなどでシェアさせて頂いた記事をまとめたときに、jQueryでリストマークの代わりにファビコンを取得して表示してみよう!と思って試行錯誤した経緯です。


きっかけと、構想

こちらの記事を拝見して、なるほどこんなことできるのか、いつか使ってみたいなぁと思っておりました。

で、昨年末。ツイートしたりブクマしたりさせてもらった記事を自分なりに整理しようと思った時に、

  • 記事名|サイト名
  • 記事名|サイト名
  • 記事名|サイト名
  • ・・・

のように書いていったら、文字数が多くてすごく見づらくなってしまったんです。これは、サイト名は省略させて頂いたほうがいいな…、で、例の記事を思い出し、ファビコンをリストマークとして表示しよう!と思って、実装してみました。

実際に実装してある記事はこちらの後半部分です。

実装

html

普通のulだけだとデフォルトで設定したリストマークが出てきてしまうので、リストマークを出さないよ、というのを後でcssに書くためにulにno-mというクラスを与えています。

あとは、jQueryでファビコンを取得するクラスをaタグに付加してあげればいいと思うんですが、このブログの場合、リンク先が外部だった際、自動で別窓+右端にアイコン表示のためのクラスを付加するjQueryを既に実装してあるということと、faviconを表示するところは指定できるようにしたいという気持ちから、spanで括ることにしました。

外部リンクを自動で別窓にするjQueryはこちらをご参照ください。

css

リストマークを消しておきます。.extlinkというのは、先程の記事にて既に実装されている、別窓で開くことを示すアイコンを背景画像にするクラスですが、今回.fvcにも同じ要素を持たせています。

jQuery

先程のセナさんの記事を参考に、このように書いてみました。

私はファビコン実装を特定の記事だけしか使わないつもりなので、1行と14行で指定記事IDのときのみ読み込むようにしています。全記事に適用したい場合はこの行は不要です。あと、WordPressでない場合は4行と12行も不要です。

fvcというクラスに内包されているaタグに、getFaviconというサービスを使ってファビコンを背景画像として指定して、大きさや位置も調整するcssを付加します。

書いてみて思ったんですが、URLが必要なのでファビコンはどうしてもaタグの背景要素になっちゃうんですよね。spanで括ってあっても、その中のaタグの背景を設定するよ、ということであって、spanの背景ではないと。

なので、普通の外部リンクではaタグの背景が別窓アイコンで、faviconをつけたい場合はaタグの背景がfavicon、spanの背景が別窓アイコンになるようにすれば、いいんじゃないかな…。

130321-1

イメージとしてはこんな感じ。もっとうまいやり方をご存知の方は教えて頂けたら…!_(:3 」∠)_

検証

上記のjQueryとcssを実装すると、このように表示されます。(jQueryにより別ウィンドウで開きます)

外部リンク

Google

ファビコンつき外部リンク

Google

ファビコンつき外部リンクリスト

お、いい感じ!と思ったら…

利用するAPIによって精度が異なる

先程のコードで、実際に記事紹介のリストを作ってみたらこんな感じでした。

130321-2

取得できていないfaviconが多く見られます。fc2のブログだと、favicon設定してあるのにfc2デフォルトのfaviconのほうになってしまったり。

こちらの検証などを参考にいろいろ試した結果、わたし個人としては、はてなの非公式APIが一番精度が良く、レスポンスも速く感じました。

jQueryをこちらのように書き換えた結果、

130321-3

全体的な表示精度が上がりました!

万能じゃないし、自己責任で

faviconの取得方法はいろいろあるようですが、どれも一長一短という印象で、全てのfaviconを間違いなく取得できるわけではありません。私が今回選択したのは非公式APIなので、いつか使えなくなる可能性もありますし、クライアントワークには向かないようです。

とはいえ、リストでfaviconが表示されるとなかなか面白く、勉強になりました。では最後に、今回参考にさせて頂いた記事をせっかくなのでfaviconつきでリスト表示させて頂きます!

ありがとうございました!(*´∀`*)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2013/03/21


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top