URLにパラメータを指定するとアイコンフォントの画像をSVGで返すWebサービスがあると便利かも

Tags: webdev

昨今のブログでは、記事の冒頭にいわゆる「アイキャッチ画像」を置いていることが多い。そういうの、自分でもやってみたいなー、と思わなくはないものの、素材を用意したり管理したりするのが面倒そうなのと、画像のせいで無駄に転送量が多くなるのは(特にモバイル向けで)いかがなものか、という思いがあり、さしあたりこのブログは文字ばかりという状態。

そういったことを考えている際にふと思いついたのが、タイトルにある「URLにパラメータを指定すると、(Font Awesome等の)アイコンフォントの画像をSVG形式で返すサービス」というもの。例えば、以下のようにパラメータ付きのURLを<img>タグのsrc属性に指定するだけで上にあるようなSVG画像が表示されるサービスがあれば、HTML一行だけでシンプルなアイキャッチ画像が埋め込めて便利そうな気がする。1

<img src="http://iconfont2img.example.com/?name=fa-file-image-o&size=640x400&region=96x96&background=#287d1a">

これくらいなら、実装だけなら簡単にできそう。今どきは、Font Awesomeのような高品質でオープンソースライセンスのアイコンフォントがいろいろあるし。とりあえずメモとして、頭の中に思いついた仕様をメモしておく。なお、パラメータの体系はImageMagickのオプションを意識している。

parameter example description
name fa-file-image 表示したいアイコン名 (例えばFont Awesomeで指定するクラス名とか)
size 640x400 出力するSVG画像の全体のサイズ
region 96x96 表示するアイコン画像のサイズ (96x96+20+20みたいな感じで、基準位置からのオフセットも指定できる)
gravity Center アイコン画像の表示位置 (NorthWest, North, NorthEast, West, etc…)
fill #ffffff アイコン画像の色
background #287d1a 背景色

  1. はたして本来の意味の「“アイキャッチ”画像」として成立しているかどうかは微妙なところですが。それとこれ、Windowsの「Metro UI」のタイルに似ていますな。