IconFinderのAPIでプロトタイピングで使えるアイコンのプレイスホルダーを作って遊んでみる

無料のアイコンを探せるサイト、IconFinder がAPIを提供しているようなので、アイコンを表示するプレイスホルダーを作ってあそんでみます。

API仕様

ＡＰＩの利用には、sign upからユーザー登録しAPIキーを入手する必要があります。API仕様はこのページで確認できます。レスポンス形式は、JSONおよびXMLを選択できます。

http://www.iconfinder.com/json/search/?q=user&c=1&p=0&min=1&max=48&api_key=APIキー&callback=? (JSON）
http://www.iconfinder.com/xml/search/?q=user&c=1&p=0&min=1&max=48&api_key=APIキー&callback=? (XML）

レスポンス仕様

JSON版では、こんな感じのJSONが帰ります。

{
    "searchresults": {
        "searchTerms": "user",
        "startPage": 0,
        "totalResults": 424,
        "startIndex": 0,
        "itemsPerPage": 2,
        "icons": [
            {
                "id": "1447",
                "size": "32",
                "image": "http:\/\/icons3.iconfinder.comdna-cdn.com\/data\/icons\/nuvola2\/32x32\/apps\/personal.png"
            },
            {
                "id": "36090",
                "size": "32",
                "image": "http:\/\/icons3.iconfinder.comdna-cdn.com\/data\/icons\/fatcow\/32x32_0460\/group.png"
            }
        ]
    }
}

プレイスホルダーを作ってみる

キーワードだけ設定しておいたら、適当なアイコンをAPIで取得して差し込んでくれるプレイスホルダーをjQueryとIconFinderのAPIを使って作ってみようと思います。プロトタイピングでとりあえずアイコンがほしい時とかにつかえると思います。

<html>
<body>
<h1>Icon menu</h1>
<ul class="menu">
 <li><img data-icon="user" width="20" height="20"> <a href="#">ユーザー登録</a>
 <li><img data-icon="login" width="20" height="20"> <a href="#">ログイン</a>
 <li><img data-icon="setting" width="20" height="20"> <a href="#">設定</a>
</ul>
<p>※ アイコンをクリックすると、アイコンが切り替わります。</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
    var API_KEY = "cdc6a2bf37c54be4b14e33ebd6dee9a5";
 $('[data-icon]').each(function() {
  var $this = $(this);
  var count = 30;
  // APIコール
  var url = 'http://www.iconfinder.com/json/search/?q='
        +encodeURI($this.data('icon'))
        +'&c='+count+'&p=0&min=20&api_key='
        +API_KEY
        +'&callback=?';
     var icons, index = 0;
  $.getJSON(url, function(json) {
   if (json.searchresults.totalResults > 0) {
    icons = json.searchresults.icons;
    $this.attr({ src: icons[index].image });
   }
  });
  $this.click(function() {
   if (icons) {
    index++;
    if (icons.length - 1 < index)
     index = 0;
    $this.attr({ src: icons[index].image });
   }
  });
    });
});
</script>
</body>

上記のスクリプトは、HTMLにこんな感じで data-icon 属性にキーワードを入れておけば、勝手にアイコンを探してきてくれて、表示します。ちなみにIconFinderの仕様上、キーワードは英語の方がいいです。

<img data-icon="setting" width="20" height="20">

以下デモです。アイコンをクリックすると、他のアイコンに切り替わります。これなら、実際にサイトで表示してみて、全体のバランスなどを確認できるので便利ですね。これであと、クッキーとかLocal Strageとかで選択した画像を覚えておけば完璧ですね。

Icon menu demo

まとめ

サンプルで作ったつもりでしたが、これ結構便利かもしれませんね。IconFinderは便利なんですけど、プロトタイピングの段階で、画像ファイルを検索してダウンロードしてという流れを、とりあえず表示してみて、いいのがあったらダウンロードするという感じで、ワークフローが逆転するので、アイコン設定がスムーズにできます。プラグイン化して、プレイスホルダーツールとして提供してもいいかもしれませんね。

2013/04/22