<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">&lt;bird-menu&gt;
    &lt;div id="wrapper"&gt;
        &lt;div id="sidebar-wrapper"&gt;
            &lt;ul class="sidebar-nav"&gt;
                &lt;bird-menu-title&gt;&lt;/bird-menu-title&gt;
                &lt;bird-menu-search&gt;&lt;/bird-menu-search&gt;
                &lt;bird-menu-info&gt;&lt;/bird-menu-info&gt;
                &lt;bird-menu-legend&gt;&lt;/bird-menu-legend&gt;
                &lt;bird-menu-modal&gt;&lt;/bird-menu-modal&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;style scoped&gt;
        #sidebar-wrapper {
            z-index: 1040;
            position: fixed;
            right: 315px;
            width: 340px;
            height: 100%;
            margin-right: -315px;
            overflow-y: scroll;
            background: rgba(0,0,0,0.7);
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }
        .sidebar-nav li {
            line-height: 0px;
            padding: 0px 30px 0px 30px;
            list-style: none;
        }
        .sidebar-nav .row {
            padding: 0px 0px 0px 0px;
        }
        .sidebar-nav li a {
            display: block;
            text-decoration: none;
            color: #FFFFFF;
            font-weight: normal;
        }
        .sidebar-nav h3 {
            font-size: 16px;
            color: #FFFFFF;
            font-weight: normal;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
        }
        .sidebar-nav h4 {
            font-size: 14px;
            color: #FFFFFF;
            font-weight: normal;
            margin: 8px 0px 0px 0px;
        }
        .sidebar-nav p {
            font-size: 12px;
            color: #FFFFFF;
            font-weight: normal;
            margin-top: 25px;
        }
        .sidebar-nav span {
            color: rgba(251,168,72,1);
            font-weight: normal;
            margin-top: 5px;
        }
        .sidebar-nav select,
        .sidebar-nav input {
            font-size: 12px;
            color: #FFFFFF;
            font-weight: normal;
        }
        .sidebar-nav li a:hover {
            text-decoration: none;
            color: #FFFFFF;
            background: rgba(255,255,255,0.2);
        }
        .sidebar-nav li a:active,
        .sidebar-nav li a:focus {
            text-decoration: none;
        }
        .sidebar-nav li a {
            color: rgba(251,168,72,1);
        }
        .sidebar-nav .form-group {
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
        }
        _::-webkit-full-page-media, .sidebar-nav .fa-lg {
            vertical-align: initial;
        }
        _::-webkit-full-page-media, #sidebar-wrapper {
            width: 320px;
            overflow-y: initial;
        }
        .divicon {
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '貂ｸ繧ｴ繧ｷ繝�け Medium', meiryo, sans-serif;
            font-size:  12px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            text-align: center;
            padding: 16px 0px 0px 0px;
        }
    &lt;/style&gt;
    &lt;script&gt;
        this.on('mount', function() {
            var swWidth = $('#sidebar-wrapper').prop('clientWidth');
            if (swWidth === 340) {
                $('#sidebar-wrapper').hide();
                $('#sidebar-wrapper').css('width', '315px');
            }else {
            }
            $('#sidebar-wrapper').hide();
            $.material.init();
            $(function () {
                $('[data-toggle="tooltip"]').tooltip();
            });
            $("#menu-toggle").click(function(e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });
            $('#sidebar-wrapper').show();
        })
    &lt;/script&gt;
&lt;/bird-menu&gt;
&lt;bird-menu-title&gt;
    &lt;div class="bird-title"&gt;
        &lt;li class="sidebar-brand"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-43"&gt;
                    &lt;a href="./index.html"&gt;KIKI-TORI Map&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 table-link05"&gt;
                    &lt;a href="#div-modal02" role="button" class="btn" data-toggle="modal"&gt;&lt;span class="fa fa-info-circle fa-2x" data-container="body" data-toggle="tooltip" data-placement="left" title="MAP縺ｮ菴ｿ縺�婿縺ｨ隗｣隱ｬ"&gt;&lt;/span&gt;&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/div&gt;
    &lt;style scoped&gt;
        .bird-title .sidebar-brand {
            font-size: 28px;
            color: #FFFFFF;
            font-weight: normal;
            margin: 20px 0px 27px 0px;
        }
        .bird-title .table-link05 {
            margin: -20px 0px 0px 11px;
            padding: 0px 0px 0px 0px;
        }
        .bird-title .table-link05 a {
            margin: 0px -20px 0px -2px;
            padding: 0px 0px 5px 0px;
        }
    &lt;/style&gt;
&lt;/bird-menu-title&gt;
&lt;bird-menu-search&gt;
    &lt;div class="bird-search"&gt;
        &lt;li&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-48"&gt;
                    &lt;h4&gt;&lt;span class="bird-bird"&gt;&lt;/span&gt;遞ｮ蜷阪ｒ驕ｸ縺ｶ&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-29 ccc" id="birdnamechange"&gt;
                    &lt;input type="text" value="繧ｭ繝薙ち繧ｭ" ref="birdname" class="form-control" id="birdnamedata"&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-8 table-link01"&gt;
                    &lt;a href="#div-modal" role="button" class="btn" data-toggle="modal"&gt;&lt;span class="fa fa-list-alt fa-lg" data-container="body" data-toggle="tooltip" title="遞ｮ驕ｸ謚樒判髱｢陦ｨ遉ｺ" &gt;&lt;/span&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-11"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-48"&gt;
                    &lt;h4&gt;&lt;span class="fa fa-calendar"&gt;&lt;/span&gt;隱ｿ譟ｻ蟷ｴ繧帝∈縺ｶ&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-16"&gt;
                    &lt;select ref="yearstart" class="form-control"&gt;
                        &lt;option selected="selected"&gt;譛ｪ驕ｸ謚�&lt;/option&gt;
                        &lt;option each={list, count in lists} value={list}&gt;{list}蟷ｴ&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-8 ddd"&gt;
                    &lt;p&gt;縲�&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-16"&gt;
                    &lt;select ref="yearend" class="form-control"&gt;
                        &lt;option selected="selected"&gt;譛ｪ驕ｸ謚�&lt;/option&gt;
                        &lt;option each={list, count in lists} value={list}&gt;{list}蟷ｴ&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-8"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-48 table-link99"&gt;
                    &lt;h4&gt;
                        &lt;a href="#div-modal03" role="button" class="btn" data-toggle="modal"&gt;
                            &lt;span class="fa fa-exclamation-triangle" data-container="body" data-toggle="tooltip" title="蜃｡萓玖｡ｨ遉ｺ"&gt;&lt;/span&gt;
                        &lt;/a&gt;
                        驕ｿ髮｣謖�､ｺ蛹ｺ蝓溘き繝�ざ繝ｪ繧定｡ｨ遉ｺ
                    &lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-16"&gt;
                    &lt;select ref="yearzone" class="form-control"&gt;
                        &lt;option each={list, count in lists} value={list}&gt;{list}蟷ｴ&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-12"&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-10 table-link22"&gt;
                    &lt;p&gt;讀懃ｴ｢&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-8 table-link02" data-toggle="tooltip" data-placement="left" title="讀懃ｴ｢螳溯｡�"&gt;
                    &lt;a onclick={click}&gt;&lt;span class="icon-binoculars"&gt;&lt;/span&gt;&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/div&gt;
    &lt;style scoped&gt;
        .bird-search {
            border: solid 1px #FFFFFF;
            margin: -17px 30px 0px 30px;
            border-radius: 3px;
        }
        .bird-search li {
            padding: 0px 0px 0px 15px;
        }
        .bird-search p {
            margin-top: 19px;
        }
        .bird-search span {
            color: #FFFFFF;
            padding: 0px 5px 0px 0px;
        }
        .bird-search .ccc {
            margin: 0px -10px 0px 0px;
        }
        .bird-search .ddd {
            margin: 0px -15px 0px -15px;
        }
        .bird-search .form-control {
            background-image: linear-gradient(rgba(251,168,72,1), rgba(251,168,72,1)), linear-gradient(rgba(251,168,72,1), rgba(251,168,72,1));
            background-size: 0 2px, 100% 2px;
        }
        .bird-search .form-group.is-focused .form-control {
            background-image: linear-gradient(rgba(251,168,72,1), rgba(251,168,72,1)), linear-gradient(rgba(251,168,72,0.5), rgba(251,168,72,0.5));
        }
        .bird-search .table-link01 {
            margin: 10px 0px 0px 0px;
            padding: 0px 0px 5px 0px;
        }
        .bird-search .table-link01 a {
            margin: 1px 14px 0px 1px;
            padding: 0px 0px 4px 4px;
        }
        .bird-search .table-link02 {
            margin: 9px 0px 0px -21px;
            padding: 0px 0px 0px 0px;
        }
        .bird-search .table-link02 a {
            margin: 0px 14px 0px -3px;
            padding: 14px 0px 12px 6px;
            border: solid 1px #FFFFFF;
            border-radius: 2px;
        }
        .bird-search .table-link22 {
            margin: 5px 0px 0px 25px;
            padding: 0px 0px 0px 0px;
        }
        .bird-search .table-link99 {
            margin: 0px 0px 0px 15px;
            padding: 0px 0px 0px 0px;
        }
        .bird-search .table-link99 a {
            margin: 0px 3px 0px 0px;
            padding: 0px 0px 0px 0px;
            display: inline;
        }
        .bird-search .table-link99 span {
            margin: 0px -3px 0px 0px;
            padding: 0px 0px 0px 0px;
            vertical-align: text-top;
        }
        .bird-search option {
            color: rgba(70,70,70,1);
        }
    &lt;/style&gt;
    &lt;script&gt;
        fetch('./vecter/birddata.json')
            .then( function(data) {
                return data.json();
            })
            .then( function(json) {
                var year = _.map(_.uniqBy(json, "year"), 'year');
                this.lists = year;
                this.update();
            }.bind(this))
            .catch(function(error) {
                console.log('request failed', error)
            });
        this.click = function(e) {
            var inputval = [];
            inputval[0] = this.refs.birdname.value;
            inputval[1] = this.refs.yearstart.value;
            inputval[2] = this.refs.yearend.value;
            inputval[3] = this.refs.yearzone.value;
            fetch('./vecter/birdlist.json')
                .then( function(data) {
                    return data.json();
                })
                .then( function(json) {
                    var length = Object.keys(_.uniqBy(json, "birdname01")).length;
                    length = length - 1;
                    var i;
                    var flag = 0;
                    for (i = 0; i &lt;= length; i++) {
                        if (inputval[0] !== json[i].birdname01) {
                            flag = flag + 1;
                        }else {
                        }
                    }
                    if (flag !== length &amp;&amp; inputval[0] !== "") {
                        alert("魑･蜷阪′繝ｪ繧ｹ繝医↓蟄伜惠縺励∪縺帙ｓ!!");
                        return;
                    }else {
                        var yearall = inputval[2] - inputval[1];
                        if (inputval[1] === "譛ｪ驕ｸ謚�" &amp;&amp; inputval[2] !== "譛ｪ驕ｸ謚�") {
                            alert("隱ｿ譟ｻ蟷ｴ縺ｮ驕ｸ謚槭′荳肴ｭ｣縺ｧ縺呻ｼ�ｼ�");
                        }else if (yearall &lt; 0) {
                            alert("隱ｿ譟ｻ蟷ｴ縺ｮ驕ｸ謚槭′荳肴ｭ｣縺ｧ縺呻ｼ�ｼ�");
                        }else{
                            obs.trigger("infoEvent", inputval);
                            obs.trigger("infoinfoEvent", inputval);
                            obs.trigger("mapEvent", inputval);
                            obs.trigger("mapmapEvent", inputval);
                        }
                    }
                    this.update();
                }.bind(this))
                .catch(function(error) {
                    console.log('request failed', error)
                });
        }.bind(this);
        obs.on("searchEvent", function(data) {
            this.refs.birdname.value = data;
            this.update();
        }.bind(this));
        this.on('mount', function() {
            $('#birdnamedata').autoComplete({
                minChars: 1,
                source: function(term, suggest){
                    $.getJSON('./vecter/birdlist.json', function(json){
                        term = term.toLowerCase();
                        var choices = json;
                        var suggestions = [];
                        for (i=0;i&lt;choices.length;i++)
                            if (~choices[i].birdname01.toLowerCase().indexOf(term)) suggestions.push(choices[i].birdname01);
                        suggest(suggestions);
                    });
                }
            });
        })
    &lt;/script&gt;
&lt;/bird-menu-search&gt;
&lt;bird-menu-info&gt;
    &lt;div class="bird-info"&gt;
        &lt;bird-menu-info-first if={answerfirst}&gt;&lt;/bird-menu-info-first&gt;
        &lt;bird-menu-info-one if={answerone}&gt;&lt;/bird-menu-info-one&gt;
        &lt;bird-menu-info-yearone if={answeryearone}&gt;&lt;/bird-menu-info-yearone&gt;
        &lt;bird-menu-info-all if={answerall}&gt;&lt;/bird-menu-info-all&gt;
    &lt;/div&gt;
    &lt;style scoped&gt;
        .bird-info {
            height: 357px;
        }
        .bird-info .panel {
            margin: 10px 30px 10px 30px;
            padding: 0px 0px 0px 0px;
        }
        .bird-info .panel .panel-body {
            padding: 10px 0px 15px 0px;
            height: 306px;
        }
        .bird-info .panel.panel-default .panel-heading  {
            background-color: rgba(251,168,72,0.9);
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
            height: 37px;
        }
        .bird-info .panel-heading span {
            padding: 0px 10px 0px 0px;
            margin-top: 0px;
        }
        .bird-info .panel-body span {
            color: rgba(70,70,70,1);
            margin-top: 8px;
            padding: 0px 0px 0px 8px;
        }
        .bird-info .panel-body .eee span {
            color: rgba(70,70,70,1);
            margin-top: 0px;
            padding: 0px 0px 0px 8px;
        }
        .bird-info .imgsize img {
            margin-right: 95px;
            margin-bottom: 10px;
            height: 100%;
            width: 100%;
        }
        .bird-info h3 {
            color: rgba(70,70,70,1);
        }
        .bird-info  h4 {
            margin: 1px 0px 0px 0px;
            font-weight: bold;/*add*/
        }
        .bird-info p {
            color: rgba(70,70,70,1);
            margin-top: 15px;
        }
        .bird-info h2 {
            color: rgba(70,70,70,1);
            font-size: 14px;
            font-weight: normal;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
        }
        .bird-info span {
            color: #FFFFFF;
            font-weight: normal;
            margin-top: 5px;
        }
        .bird-info .aaa {
            margin: 7px 83px 33px -2px;
        }
        .bird-info .bbb {
            margin: 0px -5px 0px 0px;
        }
        .bird-info .eee {
            margin: 5px 0px 0px 0px;
        }
        .bird-info .fff {
            margin: 0px 0px 0px -15px;
        }
        .bird-info .data-table {
            overflow-y: scroll;
            height: 275px;
            padding: 15px 20px 0px 20px;
        }
        .bird-info .data-table table th {
            padding-top: 0px;
            font-size:  14px;
            font-weight: normal;
            color: rgba(70,70,70,1);
        }
        .bird-info .data-table table td {
            padding-top: 10px;
            font-size:  12px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            border: solid 1px rgba(221,221,221,1);
        }
        .bird-info .bird-info-table .panel-body {
            padding: 5px 0px 0px 0px;
        }
        .bird-info .bird-info-table li {
            padding: 0px 15px 0px 15px;
        }
        .bird-info .table-link04 {
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
        }
        .bird-info .brbr{
            margin: 5px -60px 0px -20px;
        }
    &lt;/style&gt;
    &lt;script&gt;
        this.answerfirst = true;
        obs.on("infoEvent", function(inputval) {
            if (inputval[1] === "譛ｪ驕ｸ謚�" &amp;&amp; inputval[0] !== "") {
                this.answerone = true;
                this.answeryearone = false;
                this.answerall = false;
                this.answerfirst = false;
            }else if (inputval[1] !== "譛ｪ驕ｸ謚�" &amp;&amp; inputval[0] !== "") {
                this.answerone = false;
                this.answeryearone = true;
                this.answerall = false;
                this.answerfirst = false;
            }else if (inputval[1] !== "譛ｪ驕ｸ謚�" &amp;&amp; inputval[0] === "") {
                this.answerone = false;
                this.answeryearone = false;
                this.answerall = true;
                this.answerfirst = false;
            }else {
            }
            this.update();
        }.bind(this));
    &lt;/script&gt;
&lt;/bird-menu-info&gt;
&lt;bird-menu-info-first&gt;
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span class="bird-bird"&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span class="fa fa-arrow-right"&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-32"&gt;
                    &lt;h4&gt;蜈ｨ譛滄俣縺ｮ蜃ｺ迴ｾ邇� (%)&lt;/h4&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;li&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-xs-29 imgsize" id="tooltipadd" data-toggle="tooltip" data-placement="top" data-container="body" title=""&gt;
                        &lt;img src={imgadd} class="img-responsive center-block"&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-19"&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="col-xs-48 table-link04" data-toggle="tooltip" data-placement="bottom" data-container="body" title="縺輔∴縺壹ｊ繝翫ン(NPO豕穂ｺｺ繝舌�繝峨Μ繧ｵ繝ｼ繝∵署萓�)"&gt;
                                &lt;a href={saezuriadd} target="_blank"&gt;&lt;span class="fa fa-external-link  fa-lg"&gt;&lt;/span&gt;&lt;/a&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-48"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-48"&gt;
                        &lt;div class="row brbr"&gt;
                            &lt;div class="aaa"&gt;
                                &lt;div class="col-xs-4"&gt;
                                    &lt;span class="bird-bird"&gt;&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;div class="col-xs-40"&gt;
                                    &lt;h3&gt;{birdadd01}&lt;/h3&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-tag"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd02}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-tag"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd03}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-tag"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd04}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-language"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd05}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-flask"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd06}&lt;/p&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/li&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var byadd;
        fetch('./vecter/birdlist.json')
            .then( function(data) {
                return data.json();
            })
            .then( function(json) {
                var length = Object.keys(_.uniqBy(json, "birdname01")).length;
                var i;
                for (i = 0; i &lt; length; i++) {
                    if ("繧ｭ繝薙ち繧ｭ" === json[i].birdname01) {
                        this.birdadd01 = json[i].birdname01;
                        this.birdadd02 = json[i].birdname02;
                        this.birdadd03 = json[i].birdname03;
                        this.birdadd04 = json[i].birdname04;
                        this.birdadd05 = json[i].birdname05;
                        this.birdadd06 = json[i].birdname06;
                        this.imgadd = json[i].img;
                        this.saezuriadd = json[i].link;
                        byadd = "by " + json[i].credit + " - " + json[i].licence;
                    }else {
                    }
                }
                this.update();
                $(function () {
                    $('[data-toggle="tooltip"]').tooltip();
                    $('#tooltipadd').attr('title', byadd).tooltip('fixTitle').tooltip();
                });
            }.bind(this))
            .catch(function(error) {
                console.log('request failed', error)
            });
    &lt;/script&gt;
&lt;/bird-menu-info-first&gt;
&lt;bird-menu-info-one&gt;
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span class="bird-bird"&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span class="fa fa-arrow-right"&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-32"&gt;
                    &lt;h4&gt;蜈ｨ譛滄俣縺ｮ蜃ｺ迴ｾ邇� (%)&lt;/h4&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;li&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-xs-29 imgsize" id="tooltipadd" data-toggle="tooltip" data-placement="top" data-container="body" title=""&gt;
                        &lt;img src={imgadd} class="img-responsive center-block"&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-19"&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="col-xs-48 table-link04" data-toggle="tooltip" data-placement="bottom" data-container="body" title="縺輔∴縺壹ｊ繝翫ン(NPO豕穂ｺｺ繝舌�繝峨Μ繧ｵ繝ｼ繝∵署萓�)"&gt;
                                &lt;a href={saezuriadd} target="_blank"&gt;&lt;span class="fa fa-external-link  fa-lg"&gt;&lt;/span&gt;&lt;/a&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-48"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-48"&gt;
                        &lt;div class="row brbr"&gt;
                            &lt;div class="aaa"&gt;
                                &lt;div class="col-xs-4"&gt;
                                    &lt;span class="bird-bird"&gt;&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;div class="col-xs-40"&gt;
                                    &lt;h3&gt;{birdadd01}&lt;/h3&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-tag"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd02}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-tag"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd03}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-tag"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd04}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-language"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd05}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-flask"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd06}&lt;/p&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/li&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        obs.on("infoinfoEvent", function(inputval) {
            var byadd;
            fetch('./vecter/birdlist.json')
                .then( function(data) {
                    return data.json();
                })
                .then( function(json) {
                    var length = Object.keys(_.uniqBy(json, "birdname01")).length;
                    var i;
                    for (i = 0; i &lt; length; i++) {
                        if (inputval[0] === json[i].birdname01) {
                            this.birdadd01 = json[i].birdname01;
                            this.birdadd02 = json[i].birdname02;
                            this.birdadd03 = json[i].birdname03;
                            this.birdadd04 = json[i].birdname04;
                            this.birdadd05 = json[i].birdname05;
                            this.birdadd06 = json[i].birdname06;
                            this.imgadd = json[i].img;
                            this.saezuriadd = json[i].link;
                            byadd = "by " + json[i].credit + " - " + json[i].licence;
                        }else {
                        }
                    }
                    this.update();
                    $(function () {
                        $('[data-toggle="tooltip"]').tooltip();
                        $('#tooltipadd').attr('title', byadd).tooltip('fixTitle').tooltip();
                    });
                }.bind(this))
                .catch(function(error) {
                    console.log('request failed', error)
            });
        }.bind(this));
    &lt;/script&gt;
&lt;/bird-menu-info-one&gt;
&lt;bird-menu-info-yearone&gt;
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span class="bird-bird"&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span class="fa fa-calendar"&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span class="fa fa-arrow-right"&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-30"&gt;
                    &lt;h4&gt;譛滄俣蛻･縺ｮ蜃ｺ迴ｾ邇� (%)&lt;/h4&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;li&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-xs-29 imgsize" id="tooltipadd" data-toggle="tooltip" data-placement="top" data-container="body" title=""&gt;
                        &lt;img src={imgadd} class="img-responsive center-block"&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-19"&gt;
                        &lt;div class="row"&gt;
                            &lt;div class="col-xs-48 table-link04" data-toggle="tooltip" data-placement="bottom" data-container="body" title="縺輔∴縺壹ｊ繝翫ン(NPO豕穂ｺｺ繝舌�繝峨Μ繧ｵ繝ｼ繝∵署萓�)"&gt;
                                &lt;a href={saezuriadd} target="_blank"&gt;&lt;span class="fa fa-external-link  fa-lg"&gt;&lt;/span&gt;&lt;/a&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-48"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-xs-48"&gt;
                        &lt;div class="row brbr"&gt;
                            &lt;div class="aaa"&gt;
                                &lt;div class="col-xs-4"&gt;
                                    &lt;span class="bird-bird"&gt;&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;div class="col-xs-40"&gt;
                                    &lt;h3&gt;{birdadd01}&lt;/h3&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-tag"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd02}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-tag"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd03}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-tag"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd04}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-language"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd05}&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-4"&gt;
                                &lt;span class="fa fa-flask"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40"&gt;
                                &lt;p&gt;{birdadd06}&lt;/p&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/li&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        this.on('mount', function() {
            $(function () {
                $('[data-toggle="tooltip"]').tooltip();
            });
        })
        obs.on("infoinfoEvent", function(inputval) {
            var byadd;
            fetch('./vecter/birdlist.json')
                .then( function(data) {
                    return data.json();
                })
                .then( function(json) {
                    var length = Object.keys(_.uniqBy(json, "birdname01")).length;
                    var i;
                    for (i = 0; i &lt; length; i++) {
                        if (inputval[0] === json[i].birdname01) {
                            this.birdadd01 = json[i].birdname01;
                            this.birdadd02 = json[i].birdname02;
                            this.birdadd03 = json[i].birdname03;
                            this.birdadd04 = json[i].birdname04;
                            this.birdadd05 = json[i].birdname05;
                            this.birdadd06 = json[i].birdname06;
                            this.imgadd = json[i].img;
                            this.saezuriadd = json[i].link;
                            byadd = "by " + json[i].credit + " - " + json[i].licence;
                        }else {
                        }
                    }
                    this.update();
                    $(function () {
                        $('[data-toggle="tooltip"]').tooltip();
                        $('#tooltipadd').attr('title', byadd).tooltip('fixTitle').tooltip();
                    });
                }.bind(this))
                .catch(function(error) {
                    console.log('request failed', error)
                });
        }.bind(this));
    &lt;/script&gt;
&lt;/bird-menu-info-yearone&gt;
&lt;bird-menu-info-all&gt;
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span class="fa fa-calendar"&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-4 bbb"&gt;
                    &lt;span class="fa fa-arrow-right"&gt;&lt;/span&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-32"&gt;
                    &lt;h4&gt;譛滄俣蛻･縺ｮ蜃ｺ迴ｾ遞ｮ鬘樊焚&lt;/h4&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="bird-info-table"&gt;
            &lt;div class="panel-body"&gt;
                &lt;li&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="eee"&gt;
                            &lt;div class="col-xs-8"&gt;
                                &lt;span class="fa fa-map-pin"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-40 fff"&gt;
                                &lt;h2&gt;{schooladd}&lt;/h2&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="col-xs-48 data-table"&gt;
                            &lt;table class="table table-striped table-hover "&gt;
                                &lt;tbody&gt;
                                &lt;tr each={list, count in lists}&gt;
                                    &lt;td&gt;{count + 1}&lt;/td&gt;
                                    &lt;td&gt;{list}&lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;/tbody&gt;
                            &lt;/table&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
        this.schooladd = "蝨ｰ轤ｹ蜷咲ｧｰ";
        this.lists = ["蜷咲ｧｰ陦ｨ遉ｺ","","","","","",""];
        obs.on("mapmoveEvent", function(data) {
            this.lists = data;
            this.update();
        }.bind(this));
        obs.on("mapmovemoveEvent", function(data) {
            this.schooladd = data;
            this.update();
        }.bind(this));
    &lt;/script&gt;
&lt;/bird-menu-info-all&gt;
&lt;bird-menu-legend&gt;
    &lt;div class="bird-legend"&gt;
        &lt;li&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-39"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="legend01"&gt;
                            &lt;div class="panel panel-default"&gt;
                                &lt;div class="col-xs-6"&gt;
                                    &lt;div class="circle01"&gt;&lt;/div&gt;
                                    &lt;div class="circle02"&gt;&lt;/div&gt;
                                    &lt;div class="circle03"&gt;&lt;/div&gt;
                                    &lt;div class="circle04"&gt;&lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="col-xs-42"&gt;
                                    &lt;p&gt;蟶ｰ驍�峅髮｣蛹ｺ蝓�&lt;/p&gt;
                                    &lt;p&gt;螻�ｽ丞宛髯仙玄蝓�&lt;/p&gt;
                                    &lt;p&gt;驕ｿ髮｣謖�､ｺ隗｣髯､貅門ｙ蛹ｺ蝓�&lt;/p&gt;
                                    &lt;p&gt;驕ｿ髮｣謖�､ｺ縺ｪ縺�&lt;/p&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-39"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="legend02"&gt;
                            &lt;div class="panel panel-default"&gt;
                                &lt;div class="col-xs-48"&gt;
                                    &lt;p&gt;謨ｰ蛟､ : 譛滄俣荳ｭ縺ｮ蜃ｺ迴ｾ邇�(%)&lt;/p&gt;
                                    &lt;p&gt;遞ｮ蜷咲┌謖�ｮ壹�蝣ｴ蜷医�遞ｮ謨ｰ&lt;/p&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-9"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col-xs-48 table-link03" data-toggle="tooltip" data-placement="left" data-container="body" title="繝繧ｦ繝ｳ繝ｭ繝ｼ繝峨Μ繝ｳ繧ｯ"&gt;
                            &lt;a onclick={click}&gt;&lt;span class="fa fa-download fa-lg"&gt;&lt;/span&gt;&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/div&gt;
    &lt;style scoped&gt;
        .bird-legend .legend01 .panel {
            margin: -5px 15px 0px 15px;
            padding: 0px 0px 125px 5px;
        }
        .bird-legend .legend02 .panel {
            margin: 7px 15px 0px 15px;
            padding: 0px 0px 60px 5px;
        }
        .bird-legend .legend02 .panel p {
            margin-top: 20px;
        }
        .bird-legend h3,
        .bird-legend p {
            color: rgba(70,70,70,1);
        }
        .bird-legend .col-xs-6 {
            margin: 7px 0px 0px 0px;
            padding: 0px 0px 0px 10px;
        }
        .bird-legend .circle01 {
            width:15px;
            height:15px;
            border: solid 2px rgba(255,0,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 15px;
            margin: 11px 0px 0px 0px;
        }
        .bird-legend .circle02 {
            width:15px;
            height:15px;
            border: solid 2px rgba(255,190,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 15px;
            margin: 10px 0px 0px 0px;
        }
        .bird-legend .circle03 {
            width:15px;
            height:15px;
            border: solid 2px rgba(60,255,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 15px;
            margin: 10px 0px 0px 0px;
        }
        .bird-legend .circle04 {
            width:15px;
            height:15px;
            border: solid 2px rgba(14,122,196,0.7);
            background:rgba(255,255,255,1);
            border-radius: 15px;
            margin: 10px 0px 0px 0px;
        }
        .bird-legend .table-link03 {
            margin: 37px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
        }
        .bird-legend .table-link03 a {
            margin: 0px 15px 0px 8px;
            padding: 0px 0px 5px 6px;
        }
    &lt;/style&gt;
    &lt;script&gt;
        this.click = function(e) {
        縲縲 window.open("http://db.cger.nies.go.jp/JaLTER/ER_DataPapers/archives/2017/ERDP-2017-05");
        }.bind(this);
	&lt;/script&gt;
&lt;/bird-menu-legend&gt;
&lt;bird-menu-modal&gt;
    &lt;div id="div-modal02" class="modal fade"&gt;
        &lt;div class="modal-dialog modal-lg"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                    &lt;h4 class="modal-title"&gt;KIKI-TORI Map縺ｨ縺ｯ&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col-xs-48"&gt;
                            &lt;p&gt;蝗ｽ遶狗腸蠅��皮ｩｶ謇縺ｧ縺ｯ縲∫ｦ丞ｳｶ隨ｬ荳蜴溽匱莠区腐蠕後↓驕ｿ髮｣謖�､ｺ蛹ｺ蝓溘→縺昴�蜻ｨ霎ｺ縺ｫ縺ｦ骭ｲ髻ｳ隱ｿ譟ｻ縺ｫ繧医ｋ魑･鬘槭Δ繝九ち繝ｪ繝ｳ繧ｰ繧貞ｮ滓命縺励※縺�∪縺吶�&lt;/p&gt;
                            &lt;p&gt;繝｢繝九ち繝ｪ繝ｳ繧ｰ縺ｫ繧医ｊ蠕励ｉ繧後◆繝��繧ｿ繧貞庄隕門喧縺励※蜈ｬ髢九＠縺溘�縺後桑IKI-TORI Map縲阪〒縺吶�&lt;/p&gt;
                            &lt;p&gt;KIKI-TORI Map繧貞茜逕ｨ縺吶ｋ縺薙→縺ｫ繧医ｊ縲�∩髮｣謖�､ｺ蛹ｺ蝓溷�螟悶�驥朱ｳ･縺ｮ迴ｾ豕√ｒ蝨ｰ蝗ｳ荳翫〒隕九ｋ縺薙→縺後〒縺阪∪縺吶ょ推蝨ｰ轤ｹ縺ｫ陦ｨ遉ｺ縺輔ｌ繧区焚蟄励�蜃ｺ迴ｾ鬆ｻ蠎ｦ繧定｡ｨ縺励※縺�∪縺吶ょ�迴ｾ鬆ｻ蠎ｦ縺ｯ縲�浹螢ｰ繝��繧ｿ繧�1蛻�俣縺壹▽縺ｫ蛻�ｊ蛻�￠縺ｦ遞ｮ縺ｮ蜃ｺ迴ｾ縺ｮ譛臥┌繧定ｪｿ縺ｹ縲√◎縺ｮ縺�■菴募牡縺ｧ蜃ｺ迴ｾ縺励◆縺九ｒ遉ｺ縺吝､縺ｧ縺吶�&lt;/p&gt;
                            &lt;p&gt;KIKI-TORI Map縺ｮ蛻ｩ逕ｨ隕冗ｴ��&lt;a href = "../sitepolicy.html" target="_blank"&gt;縺薙■繧�&lt;/a&gt;繧貞盾辣ｧ縺上□縺輔＞縲�&lt;/p&gt;
                            &lt;p&gt;縺ｪ縺翫√ョ繝ｼ繧ｿ縺ｮ荳驛ｨ縺ｯ縲∝ｸよｰ大盾蜉�蝙矩ｳ･鬘樒ｨｮ蛻､蛻･繧､繝吶Φ繝医後ヰ繝ｼ繝峨ョ繝ｼ繧ｿ繝√Ε繝ｬ繝ｳ繧ｸ縲阪ｒ騾壹＠縺ｦ蠕励ｉ繧後∪縺励◆縲ゅヰ繝ｼ繝峨ョ繝ｼ繧ｿ繝√Ε繝ｬ繝ｳ繧ｸ縺ｮ隧ｳ邏ｰ縺ｫ縺､縺�※縺ｯ&lt;a href="../bdc.html" target="_blank"&gt;縺薙■繧�&lt;/a&gt;繧偵＃隕ｧ縺上□縺輔＞縲�&lt;/p&gt;
							&lt;p&gt;豕ｨ�壼嵜縺翫ｈ縺ｳ逵後Ξ繝�ラ繝ｪ繧ｹ繝医�邨ｶ貊�些諠ｧ遞ｮ(繝ｩ繝ｳ繧ｯVU,EN,CR)縺翫ｈ縺ｳ繧ｵ繝ｳ繧ｳ繧ｦ繝√Ι繧ｦ縺ｮ蛻�ｸ�ュ蝣ｱ縺ｯ髱槫�髢九→縺励※縺�∪縺吶�&lt;/p&gt;
							
                            &lt;p style="text-decoration:underline;"&gt;陬ｽ菴懊せ繧ｿ繝�ヵ&lt;/p&gt;
                            &lt;p&gt;蝗ｽ遶狗腸蠅��皮ｩｶ謇
                                &lt;br&gt;荳牙ｳｶ蝠馴寇繝ｻ謌ｸ豢･荵�ｾ主ｭ舌�豺ｱ貔､蝨ｭ螟ｪ繝ｻ鄒ｽ雉豺ｳ繝ｻ蜷牙ｲ｡譏手憶繝ｻ莠悟ｮｮ闍ｱ鄒弱�遶ｹ荳ｭ譏主､ｫ繝ｻ辭顔伐驍｣螟ｮ繝ｻ螟ｧ蠍狗峩蟄�
                            &lt;/p&gt;
                            &lt;p&gt;蜷亥酔莨夂､ｾ MIERUNE
                                &lt;br&gt;譯先悽髱冶ｦ�(髢狗匱諡�ｽ�)繝ｻ譛晄律蟄晁ｼ斐�蜿､蟾晄ｳｰ莠ｺ
                                &lt;br&gt;&lt;a href="http://www.mierune.co.jp/" target="_blank"&gt;http://www.mierune.co.jp/&lt;/a&gt;&lt;/p&gt;
								&lt;p style="text-decoration:underline;"&gt;骭ｲ髻ｳ髻ｳ螢ｰ縺ｫ繧医ｋ遞ｮ蛻､蛻･繝��繧ｿ菴懈�繝√�繝�&lt;/p&gt;
&lt;p&gt;譬ｪ蠑丈ｼ夂､ｾ繧ｨ繧ｳ繝ｪ繧ｹ(http://www.ecoris.co.jp/), 繝舌�繝峨ョ繝ｼ繧ｿ繝√Ε繝ｬ繝ｳ繧ｸ蜿ょ刈閠��逧�ｧ�, 鄒ｽ雉豺ｳ
&lt;br&gt;&lt;br&gt;迴ｾ蝨ｰ隱ｿ譟ｻ諡�ｽ薙♀繧医�蜊泌鴨閠�
&lt;br&gt;&lt;br&gt;邇臥ｽｮ髮�ｴ,蟆冗�螳丈ｹ�,譚ｾ蟲ｶ驥取椌, 譬ｪ蠑丈ｼ夂､ｾ繧ｨ繧ｳ繝ｪ繧ｹ&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;img src="./img/info/info.png" class="img-responsive center-block" alt="菴ｿ縺�婿"&gt;
                    &lt;img src="./img/info/search_01.png" class="img-responsive center-block" alt="蜈ｨ譛滄俣縺ｮ蜃ｺ迴ｾ邇�"&gt;
                    &lt;img src="./img/info/search_02.png" class="img-responsive center-block" alt="譛滄俣蛻･縺ｮ蜃ｺ迴ｾ邇�"&gt;
                    &lt;img src="./img/info/search_03.png" class="img-responsive center-block" alt="譛滄俣蛻･縺ｮ蜃ｺ迴ｾ遞ｮ鬘樊焚"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="div-modal" class="modal fade"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                    &lt;h4 class="modal-title"&gt;&lt;span class="fa fa-search fa-lg"&gt;&lt;/span&gt;讀懃ｴ｢縺励◆縺�ｨｮ蜷阪ｒ驕ｸ謚�&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                    &lt;table class="table table-striped table-hover "&gt;
                        &lt;thead&gt;
                            &lt;tr&gt;
                                &lt;th&gt;No.&lt;/th&gt;
                                &lt;th&gt;遞ｮ蜷�&lt;/th&gt;
                                &lt;th&gt;逶ｮ&lt;/th&gt;
                                &lt;th&gt;遘�&lt;/th&gt;
                            &lt;/tr&gt;
                        &lt;/thead&gt;
                        &lt;tbody&gt;
                            &lt;tr each={list, count in lists}&gt;
                                &lt;td onclick={check}&gt;{count + 1}&lt;/td&gt;
                                &lt;td onclick={check}&gt;{list.birdname01}&lt;/td&gt;
                                &lt;td onclick={check}&gt;{list.birdname02}&lt;/td&gt;
                                &lt;td onclick={check}&gt;{list.birdname03}&lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/tbody&gt;
                    &lt;/table&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="div-modal03" class="modal fade"&gt;
        &lt;div class="modal-dialog modal-sm"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                    &lt;h4 class="modal-title"&gt;驕ｿ髮｣謖�､ｺ蛹ｺ蝓� 蜃｡萓�&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="panel panel-default"&gt;
                            &lt;div class="col-xs-5"&gt;
                                    &lt;div class="circleall"&gt;
                                    &lt;div class="circle01"&gt;&lt;/div&gt;
                                    &lt;div class="circle02"&gt;&lt;/div&gt;
                                    &lt;div class="circle03"&gt;&lt;/div&gt;
                                    &lt;div class="circle04"&gt;&lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="col-xs-42"&gt;
                                &lt;p&gt;蟶ｰ驍�峅髮｣蛹ｺ蝓�&lt;/p&gt;
                                &lt;p&gt;螻�ｽ丞宛髯仙玄蝓�&lt;/p&gt;
                                &lt;p&gt;驕ｿ髮｣謖�､ｺ隗｣髯､貅門ｙ蛹ｺ蝓�&lt;/p&gt;
                                &lt;p&gt;驕ｿ髮｣謖�､ｺ縺ｪ縺�&lt;/p&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;style scoped&gt;
        #div-modal .modal-title {
            font-size:  16px;
            font-weight: normal;
            color: rgba(70,70,70,1);
        }
        #div-modal .modal-body {
            overflow-y: scroll;
            height: 500px;
        }
        #div-modal02 .modal-title {
            font-size:  22px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            margin-bottom: 20px;
            padding: 0px 0px 0px 30px;
        }
        #div-modal03 .modal-title {
            font-size:  20px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            margin-bottom: 20px;
            padding: 0px 0px 0px 10px;
        }
        #div-modal03 .modal-body {
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 50px;
            height: 230px;
        }
        #div-modal03 .modal-body p {
            font-size: 15px;
            color: rgba(70,70,70,1);
            font-weight: normal;
            padding: 0px 0px 0px 0px;
            margin: 12px 0px 24px 15px;
        }
        .modal-dialog table {
            border: solid 2px rgba(221,221,221,1);
        }
        .modal-dialog table th {
            font-size:  14px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            border: solid 1px rgba(221,221,221,1);
        }
        .modal-dialog table td {
            font-size:  12px;
            font-weight: normal;
            color: rgba(70,70,70,1);
            border: solid 1px rgba(221,221,221,1);
            cursor: pointer;
        }
        .modal-dialog .modal-header .modal-title span {
            padding: 0px 10px 0px 5px;
            margin: 0px 0px 0px 0px;
        }
        .modal-dialog .modal-header .modal-title .fa-lg {
            vertical-align: 0%;
        }
        .modal-body h4 {
            font-size: 16px;
            color: rgba(70,70,70,1);
            font-weight: normal;
            margin-top: 45px;
            margin-bottom: 10px;
            padding: 0px 0px 0px 30px;
        }
        .modal-body p {
            font-size: 14px;
            color: rgba(70,70,70,1);
            font-weight: normal;
            padding: 0px 130px 0px 70px;
        }
        .modal-body a {
            font-size: 14px;
            color: rgba(251,168,72,0.9);
            font-weight: normal;
        }
        .modal-body .circle01 {
            width: 25px;
            height: 25px;
            border: solid 3px rgba(255,0,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 25px;
            margin: 10px 0px 0px 0px;
        }
        .modal-body .circle02 {
            width: 25px;
            height: 25px;
            border: solid 3px rgba(255,190,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 25px;
            margin: 20px 0px 0px 0px;
        }
        .modal-body .circle03 {
            width: 25px;
            height: 25px;
            border: solid 3px rgba(60,255,0,0.7);
            background:rgba(255,255,255,1);
            border-radius: 25px;
            margin: 20px 0px 0px 0px;
        }
        .modal-body .circle04 {
            width: 25px;
            height: 25px;
            border: solid 3px rgba(14,122,196,0.7);
            background:rgba(255,255,255,1);
            border-radius: 25px;
            margin: 20px 0px 0px 0px;
        }
        .modal-content .modal-body {
            padding-top: 10px;
        }
        .modal-backdrop {
            background-color: rgba(0,0,0,1);
            z-index: -1;
            -webkit-transform: translate3d(0,0,0);
        }
        _::-webkit-full-page-media, .modal-dialog .modal-header .modal-title .fa-lg {
            vertical-align: initial;
        }
    &lt;/style&gt;
    &lt;script&gt;
        fetch('./vecter/birdlist.json')
            .then( function(data) {
                return data.json();
            })
            .then( function(json) {
                this.lists = json;
                this.update();
            }.bind(this))
            .catch(function(error) {
                console.log('request failed', error)
            });
        check(e) {
            $('#div-modal').modal('hide');
            obs.trigger("searchEvent", e.item.list.birdname01);
        }
    &lt;/script&gt;
&lt;/bird-menu-modal&gt;
</pre></body></html>