im@sparqlの情報を使って、アイドルのインクリメンタルサーチ

README.md

環境の作成手順

Vue.jsアプリのひな形を作る

$ vue init webpack idolsearchapp

ファイルを配置する

• src/components/IdolSearch.vue
• src/main.js

開発環境を実行する

npm run dev

IdolSearch.vue

<template>
  <div class="hello">
    <input type="text" v-model="searchText"></input>
    <ul>
      <li v-for="item in candidates">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'IdolSearch',
  data () {
    return {
      searchText: '',
      idolList: []
    }
  },
  created: function () {
    var endpoint = 'https://sparql.crssnky.xyz/spql/imas/query?output=json&force-accept=text%2Fplain&query='
    var query = `
      PREFIX schema: <http://schema.org/>
      PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
      PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
      PREFIX imas: <https://sparql.crssnky.xyz/imasrdf/URIs/imas-schema.ttl#>
      SELECT ?l ?k ?e
      WHERE {
        ?s rdfs:label ?l;
          imas:nameKana ?k;
          schema:name ?e;
          rdf:type imas:Idol.
        FILTER (lang(?e) = 'en')
      } order by(?k)
    `
    var url = endpoint + encodeURIComponent(query)
    axios
      .get(url)
      .then(response => {
        var lst = []
        response.data.results.bindings.forEach( v => { lst.push({'text':v.l.value, 'match': v.l.value + ' ' + v.k.value + ' ' + v.e.value.toLowerCase() })} )
        this.idolList = lst
      })
  },
  computed: {
    candidates() {
      if (this.searchText.trim() == '') return []
      return this.idolList.filter(function(i){ return i.match.indexOf(this.searchText.toLowerCase()) > -1}, this)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})