うずらインフォのアニメ一覧画像にURLリンクを貼りたい

思いつき

UMA
UMA
Aug 26, 2017 · 2 min read

うずらインフォという神サイトを閲覧したことがあるでしょうか?
サイトを閲覧したことがなくても転載された画像を閲覧したことがある人は多いはず。。。
私はかれこれ5年くらいお世話になってます。

このうずらインフォ、
四半期ごとに放送開始されるアニメたちをいい感じにまとめて画像にしてくれています。
いつもチェックするときはうずらインフォを片手間にgoogle先生でアニメのHPを閲覧する儀式を行います。
ただ、URLリンクが貼ってないので自分で検索する手間があります。
サムネイルで気になったりしたアニメはすぐチェックしたいと思うので、リンクの需要はかなり高いと思うのですが。。。
なかなか実装されないみたいなので、じゃあ私やります、って感じでちょっとやってみました。

その結果がこれです

aki17
aki17

この画面で画像縮小しているのでちょっとマップにずれがありますが、そこはテキトー。

実装

画像にリンクを複数貼るという方法はHTMLのイメージマップという機能を利用しています。
指定した座標にリンク領域を割り当てるという割と渋いことをしています。

リンクのつくりかたですが、座標の指定がかなり面倒なので
ExcelVBAでURLを記入して自動的にイメージマップタグを生成するプログラムを書きました。
最初にパッと思いついた実装方法はURLをcsvファイルとかにしてサーバーにアップすると
HTMLに自動的にタグを挿入するという方法だと思うのですが。
どうやらサーバー側でPHP等が動かないっぽいので動的な実装は廃案となりました。
ですのでExcelでタグを生成してもらって既存のHTMLファイルに埋め込んでもらうという形を思いつきました。
(採用されるかどうかわかりませんが。。。) 採用されました。ありがとうございます。
HTMLの知識がなくてもExcelにURLを記入するだけでタグの生成ができるので便利かとおもいます。
レスポンシブ対応は考慮してないので悪しからず。

おわり

もっといいアニメライフのために。

)
UMA

Written by

UMA

return true

To be determine

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade