<초보자> vue.js에서 링크의 동적 생성 및 라우팅. 덤으로 Python에 의한 자주 쓰는 단어 픽업.

했던 일



이전에 만든 웹 서비스에 기능을 추가했습니다.

서비스에 대한 자세한 내용은 여기를 참조하십시오. 「 <초보자> 레퍼런스 협동 데이터베이스의 기사를 무작위로 표시하는 WEB 서비스를 vue.js에서 만들었습니다.

기사의 상세 페이지에 키워드의 항목을 마련해, 클릭하면 검색 화면에 날아가게 했습니다.



왜 할까



현재의 문제점



전회 기사( css의 애니메이션으로 검색 박스 상단에 추천 사례 소개 기능을 탑재해 보았다. [2019/07/13 추가 ※3회] )와 같이, 「레퍼런스 서비스 이용 경험자가 적기 때문에, 어떤 사례가 있는지 알기 어렵다.」라고 하는 단점이 있습니다.

이번 채용하는 개선 방법



그래서 하나의 기사를 읽은 후에 관련 기사를 볼 수 있도록 키워드 태그를 작성. 태그에 의해 새로운 검색 행동을 촉구하는 것으로, 사이트내에서의 회유율 업에 연결합니다.

키워드는 참조 협동 데이터베이스의 각 기사의 아마 절반 가까이에 설정되어 있기 때문에 이것을 이용합니다. 설정되지 않은 기사도 많기 때문에 플러스 α로서 Python에 의한 빈출 단어의 픽업도 실시했습니다. 하지만 파이썬에 대해서는 아직 구현하지 않았습니다.

구현 방법



간단합니다.

상세 페이지의 다른 항목과 마찬가지로 xml에서 키워드를 검색합니다.

Detail.vue
const keywords = result.getElementsByTagName("reference")[0].getElementsByTagName("keyword")||

페이지에 반영할 때 링크를 설정합니다.

Detail.vue
      <h3 id="keyword">キーワード</h3>
      <span v-for="keyword in refqa.keywords" class="tag" v-bind:key=keyword>
        <a v-bind:href="'https://testreftika.web.app/keyword/' + keyword">{{keyword}}</a>
      </span>

링크는 라우터에서 톱 페이지로 날아갑니다.

router.js
{
  path: '/keyword/:keyword',
  component: Home
},

톱 페이지에서는 링크를 해석합니다./keyword/hoge이면 hoge를 검색 상자에 입력합니다.

Home.vue
created: function() {
    省略
    if(this.path.match(/\/keyword\/./) ){this.keyword=this.$route.params.keyword}
}

위의 경로 (this.path)는 javascript로 얻습니다.

Home.vue
  data() {
    return {
      省略
      path:location.pathname,
    }

검색 박스에 입력어는 자동으로 검색되도록 구현하고 있다. 지난번 기사 「 css의 애니메이션으로 검색 박스 상단에 추천 사례 소개 기능을 탑재해 보았다. [2019/07/13 추가 ※3회] 」참조.

Home.vue
クリックしたときに、検索ボックスにキーワードを入力するメソッド
setInputBox(searchtext){
      document.getElementById( "searchbox" ).value = searchtext;
      this.keyword=searchtext;   ←この後、this.keywordを監視しているメソッドが検索を実行する
    },


플러스 α: 파이썬에 의한 빈출어 픽업



거친 흐름



①xml로 데이터 취득
② mecab에서 명사·형용사만 픽업&stopword를 제외하고 단어를 리스트화
③Counter에서 리스트의 각 요소의 출현 개수를 카운트, 출력

전문입니다.
import MeCab
from collections import Counter
import urllib.request
import xml.etree.ElementTree as ET

#②mecabで名詞・形容詞のみピックアップ&stopwordを除外して単語をリスト化する関数
def get_dokuritsugo_by_mecab(text):
    tagger = MeCab.Tagger('/usr/local/lib/mecab/dic/mecab-ipadic-neologd/')
    tagger.parse('') 
    node = tagger.parseToNode(text)
    word_list = []
    while node:
        pos = node.feature.split(",")[0]
        if pos in ["名詞", "形容詞"]:
            word = node.surface
            if not word in stoplist:
                word_list.append(word)
        node = node.next
    return(word_list)

#ストップワードについては下記
with open('stopword.txt', 'r', encoding='utf-8') as file:
    stoplines = file.readlines()
    stoplist = []
    for l in stoplines:
        stoplist.extend(l)

#①xmlでデータ取得。「。」で区切り一文ずつmecabを呼び出している。
url = 'http://crd.ndl.go.jp/api/refsearch?type=reference&query=sys-id=1000161493'    ←apiの呼び出し
req = urllib.request.Request(url)

with urllib.request.urlopen(req) as response:
    XmlData = response.read()
    root = ET.fromstring(XmlData)
    QAtext = root[4][0][0].text + root[4][0][2].text
    #※レスポンスのxmlの仕様です。
    #※root[4][0][0]に質問、root[4][0][2]に回答が入っています。
    print(QAtext)

    texts = QAtext.split('。')
    list = []
    sentences = []
    for text in texts:
        list.extend(get_dokuritsugo_by_mecab(text))
        c = Counter(list)
    #③Counterでリストの各要素の出現個数をカウント、出力
    print(list)
    print(c.most_common()[0])
    print(c.most_common()[1])
    print(c.most_common()[2])


스톱워드는
영어는 sklearn.feature_extraction , 일본어는 slothlib 를 사용했습니다. 2개를 로컬로 txt 파일에 긁힌 다음 기호를 덧붙여 이용하고 있습니다.

출력 결과



재채기 횟수로 의미가 다르다는 미신을 친구와 이야기하고 있다고 해석이 달랐습니다. 몇 가지 종류가 있습니까? (기타큐슈 시립 중앙 도서관)에서는,
('くしゃみ', 23)
('噂', 5)
('風邪', 5)

인도의 교육 사정과 교육에 관한 사회 문제에 대해 알 수있는 자료 (일본무역진흥기구 아시아경제연구소 도서관)
('教育', 8)
('インド', 7)
('請求', 5)

※「청구」는 도서의 「청구 기호」라는 문언이 다수 사용되고 있기 때문에 많아지고 있다.

「이 길을 가면 어떻게 되는 것인가」로 시작되는 말의 전문이 알고 싶다. 좋은 관의 말인 것 같다. (후쿠이 현립 도서관)
('言葉', 7)
('詩', 5)
('一休宗純', 5)

기사와의 우연한 만남을 만드는 서비스로서는, 적당히 충분한 결과일까 생각됩니다.

"청구 기호""국립 국회 도서관"등 도서관에서 자주 사용되는 단어는 제외하도록 조정하면 사용할 수 있습니다. 응답 속도 등을 보면서 향후 시도해 갈 것입니다.

참고:
◆ mecab 설치 (Windows)
Python과 MeCab에서 형태소 분석 (on Windows)
◆ mecab 사용법
B'z의 가사를 Python과 기계 학습으로 분석해 보았다 ~LDA편~
◆NEologd 사전 설치
Windows에서 NEologd 사전을 비교적 쉽게 넣는 방법

◆Python의 카운터
파이썬 카운터에서 목록의 각 요소의 출현 수를 계산합니다.
◆Python과 XML
파이썬으로 XML 구문 분석

이번은 단순한 빈출어로 했지만, 조사하는 동안 TF-IDF에 의한 가중치나 Jaccard 계수를 사용한 공기 네트워크도 신경이 쓰였다.
검색 기능에 사용되는 특징 용어와 그 다양한 추출 방법
세계의라면 스타일을 NetworkX로 시각화
Python을 사용하여 문장에서 공동 네트워크를 만듭니다.

reftika 꼭 들여다 보세요.

좋은 웹페이지 즐겨찾기