--- title: Mustacheを使用して検索のHTMLの出力を改善する! author: Hue Team type: post date: 2015-08-11T02:33:56+00:00 url: /enhance-search-results-2/ sf_thumbnail_type: - none sf_thumbnail_link_type: - link_to_post sf_detail_type: - none sf_page_title: - 1 sf_page_title_style: - standard sf_no_breadcrumbs: - 1 sf_page_title_bg: - none sf_page_title_text_style: - light sf_background_image_size: - cover sf_custom_excerpt: - HueのSearch(検索)アプリはどんどんよくなっています !Hueの次のリリース(または既にGithubのマスター にある)では、あなたは、HueのMustacheのバージョンに追加機能を加えることができるようになり、HTMLの表示で直接関数を呼び出すことができます。どのように使用するのかを見てみましょう! sf_social_sharing: - 1 sf_sidebar_config: - left-sidebar sf_left_sidebar: - Sidebar-2 sf_right_sidebar: - Sidebar-1 sf_caption_position: - caption-right sf_remove_promo_bar: - 1 categories: - Hue 3.9 - Programming - Search - Tutorial --- HueのSearch(検索)アプリは[どんどんよくなっています][1] !Hueの次のリリース(または既に[Githubのマスター][2] にある)では、あなたは、Hueの[Mustache][3]のバージョンに追加機能を加えることができるようになり、HTMLの表示で直接関数を呼び出すことができます。どのように使用するのかを見てみましょう!以下のように、この例ではHTMLの結果ウィジェットでYelpのデモデータを使用したダッシュボードを追加します [Screenshot 2015-07-27 15.29.47][4] 私たちは見た目を良くするため、それぞれのレビューにグラフィカルな星の評価とレストランの[静的なGoogle Map][5]を作りたいと思っています。CSS/JSタブで、私たちは新しいMustacheの機能である ‘hue\_fn\_renderStars’ と ‘hue\_fn\_renderMap’ を指定することができます’:
<script>
  viewModel.additionalMustache = function (item) {
    if (Mustache == "undefined") {
      return;
    }
 
    item.hue_fn_renderStars = function () {
      return function (val) {
        var stars = parseInt(Mustache.render(val, item));
        var html = '';
        for (var i=0;i<stars;i++){
          html += '<i class="fa fa-star"></i>';
        }
        return html; 
      }
    };
   
    item.hue_fn_renderMap = function () {
      return function (val) {
        var coords = Mustache.render(val, item);
        return '<img src="https://maps.googleapis.com/maps/api/staticmap?center=' + coords + '&zoom=14&size=300x300&markers=color:red%7C' + coords + '">';
      }
    };
  }
</script>
追加のMustache関数の名前に ‘fue\_fn\_’ をプレフィックスにすることが非常に重要で、これでHueがピックアップして処理できるようになります。HTMLタブではこのように記述します:
<div class="row-fluid">
        <div class="row-fluid">
         <div class="span10">
           <h4>{{name}} {{#renderStars}}{{stars}}{{/renderStars}}</h4>
           <span class="muted">{{text}}</span>
         </div>
        <div class="span2">{{#renderMap}}{{latitude}},{{longitude}}{{/renderMap}}<br/>{{full_address}}</div>
        </div>
        <br>
       </div>
ご覧いただいているように、新しく追加された機能は{{#renderStars}} {{/ renderStars}} と {{#renderMap}} {{/ renderMap}}を用いて呼び出すことができます。そしてたったこれらのコード数行で結果の表示ははるかに良くなりました! [Screenshot 2015-07-27 15.51.21][6] HTMLテンプレート内の関数宣言の間にある文字列にアクセスするには **Mustache.render(val, item)**を参照する必要があります。 例えば、’if’ のような条件関数を行ってその中で変数を評価したい場合、このようにすることができます
<script>
  viewModel.additionalMustache = function (item) {
    if (Mustache == "undefined") {
      return;
    }
 
    item.hue_fn_if = function () {
      return function (val) {
        var isTrue = $.trim(Mustache.render(val, item)) == 'true';
        return  isTrue ? "The condition is true!" : "No, it's false";
      }
    };
  }
</script>
そして、HTMLタブで使用します
{{#if}}{{field_to_test}}{{/if}}
HTMLの結果ウィジェットで可能性は無限大です!:)いつものように、コメントとフィードバックは [hue-user][7] メーリングリストや[@gethue][8]までお気軽に! [1]: https://gethue.com/build-a-real-time-analytic-dashboard-with-solr-search-and-spark-streaming/ [2]: https://github.com/cloudera/hue [3]: https://github.com/janl/mustache.js/ [4]: https://cdn.gethue.com/uploads/2015/07/Screenshot-2015-07-27-15.29.47.png [5]: https://developers.google.com/maps/documentation/staticmaps/intro [6]: https://cdn.gethue.com/uploads/2015/07/Screenshot-2015-07-27-15.51.21.png [7]: http://groups.google.com/a/cloudera.org/group/hue-user [8]: https://twitter.com/gethue