ITエンジニア/デザイナ向けにオープンソースを毎日紹介

確かに良くある処理ですね。

最近、外部のWeb APIを叩いてその結果をHTMLに埋め込んで表示といった処理が多くなっています。JavaScriptで行うならばJSONPを使うでしょう。jQueryでやるならば$.ajaxでとってきて、successでテンプレートエンジンに値を当てはめて実行といった具合です。

しかし同じような処理を毎回書くのは面倒です。一連の流れをラッピングしてくれるライブラリがDug.jsです。

Dug.jsの使い方

まずはコードを見るのが早いでしょう。

<div id="photos">Loading...</div>
<script>
  dug({
    endpoint: 'https://api.500px.com/v1/photos.jsonp?feature=user&username=garand&image_size=3&rpp=6&_method=get&sdk_key=3cece886f943df26ab3e852b15a6dfdc5d8d8ff9',
    target: 'photos',
    template: '<h1>\
          <span>500px</span> \
        </h1>\
        <ul class="photos">\
          {{#photos}}\
            <li>\
              <a href="http://500px.com/photo/{{id}}">\
                <h3>{{name}}</h3>\
                <img src="{{image_url}}"/>\
              </a>\
            </li>\
          {{/photos}}\
        </ul>'
  });
</script>

サンプル。500pxのデータを表示。
サンプル。500pxのデータを表示。

Dribbble。
Dribbble。

Flickr。
Flickr。

endpointで指定したURLからデータを取得し、その結果から指定したDOMのID(上記の場合はphotos)にtemplateで指定したHTMLを処理して表示するといった具合です。テンプレートエンジンは独自になっています。文法的にはHandlebarsに似ています。

概念としてはYahoo! Japanの開発した爆速JSONPに近いのではないでしょうか。あちらはdata要素に全てを記述する形でしたので、好みによって選べば良いかと思います。

Dug.jsはJavaScript製のソフトウェア(ライセンスはWTFPL)です。

Dug.js — A JSONP to HTML Script — Rog.ie

rogie/Dug.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2