2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

【Nuxt.js + COTOHA API + microCMS】COTOHAチックなフラッシュカード作ってみた

0. はじめに

タイトルの通りですが、【Nuxt.js + COTOHA API + microCMS】を使ってCOTOHAチックなフラッシュカードを作ってみました!

以下の参加記事になります!

COTOHA APIを使ってこんなのも作ってます!

ちなみに息子(2歳)へのクリスマスプレゼントを華麗に失敗した私が狙うのは「作ろうきのこの山」です。:santa:

1. 概要

こんな感じで動作しています\(^o^)/

①microCMSにて、テキストエリアに以下のような文章を登録。

NTTコミュニケーションズ提供の自然言語解析APIはcotoha apiである。

②フラッシュカードを起動したタイミングで、①のデータを取得。

③COTOHA APIのキーワード抽出を使って、②の文章から最も重要度の高いキーワードを抽出。

④抽出したキーワードを\(^o^)/に変換し、問題文とする。

2. 環境

  • Nuxt.js
  • COTOHA API
  • microCMS

3. プログラム

index.vue
<template>
  <div class="container">
    <b-card tag="article" style="width: 30rem;" class="mb-2">
      <h2><b-badge variant="success">COTOHA FLASH CARD</b-badge></h2>
      <br/>
      <b-card-text>{{ question }}</b-card-text>
      <br/>
      <b-dropdown variant="success" id="dropdown-1" text="答え" class="m-md-2">
        <b-dropdown-item>{{ answer }}</b-dropdown-item>
      </b-dropdown>
      <b-button variant="success" v-on:click="nextQuestion">次の問題</b-button>
    </b-card>
  </div>
</template>

<script>

import CotohaApi from './cotoha'
import FlashCard from './flashcard'

const MICRO_CMS_API_KEY = "**********"
const DEVELOPER_API_CRIENT_ID = "**********"
const DEVELOPER_API_CRIENT_SECRET = "**********"

const cotohaApi = new CotohaApi(DEVELOPER_API_CRIENT_ID, DEVELOPER_API_CRIENT_SECRET)
const flashCard = new FlashCard(MICRO_CMS_API_KEY)

export default {

  async asyncData () {
    const questions = await flashCard.getAllQuestions()
    const question = flashCard.getQuestionAtRandom(questions)
    const answer = await cotohaApi.getKeyword(question)
    const emoticonQuestion = flashCard.convertEmoticonQuestion(question, answer)

    return {
      questions : questions,
      question : emoticonQuestion,
      answer : answer
    }
  },

  methods: {
    nextQuestion: async function() {
      const question = flashCard.getQuestionAtRandom(this.questions)
      const answer = await cotohaApi.getKeyword(question)
      const emoticonQuestion = flashCard.convertEmoticonQuestion(question, answer)

      this.question = emoticonQuestion
      this.answer = answer
    }
  }
}

</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

cotoha.js
import axios from 'axios'

export default class CotohaApi {

  DEVELOPER_API_KEYWORD_URL = "https://api.ce-cotoha.com/api/dev/nlp/v1/keyword"
  ACCESS_TOKEN_PUBLISH_URL = "https://api.ce-cotoha.com/v1/oauth/accesstokens"

  constructor(crientId, crientSecret) {
    this.crientId = crientId
    this.crientSecret = crientSecret
  }

  async getAccessToken() {
    const tokenHeaders = {
      headers:{
        "Content-Type": "application/json"
      }
    }

    const tokenData = {
      "grantType": "client_credentials",
      "clientId": this.crientId,
      "clientSecret": this.crientSecret
    }

    const tokenResult = await axios.post(this.ACCESS_TOKEN_PUBLISH_URL, tokenData, tokenHeaders)
    const accessToken = tokenResult.data.access_token
    return accessToken
  }

  async getKeyword(document, keywordNum = 1) {
    const token = await this.getAccessToken()

    const parseHeaders = {
      headers:{
        "Content-Type": "application/json",
        "Authorization": "Bearer " + token
      }
    }

    const parseData = {
      "document": document,
      "max_keyword_num": keywordNum
    }

    const parseResult = await axios.post(this.DEVELOPER_API_KEYWORD_URL, parseData, parseHeaders)
    const keyword = parseResult.data.result[0].form
    return keyword
  } 
}
flashcard.js
import axios from 'axios'
import Enumerable from 'linq'

export default class FlashCard {

  MICRO_CMS_QUESTION_URL = "https://cotoha-flash-card.microcms.io/api/v1/question"

  constructor(microCmsKey) {
    this.microCmsKey = microCmsKey
  }

  async getAllQuestions() {
    const apiHeaders = {
      headers:{
        "X-API-KEY": this.microCmsKey
      }
    }

    const questionResult = await axios.get(this.MICRO_CMS_QUESTION_URL, apiHeaders)
    const contents = Enumerable.from(questionResult.data.contents)
    const questions = contents.select(c => c.question).toArray()
    return questions
  }

  getQuestionAtRandom(questions) {
    const index = Math.floor(Math.random() * questions.length)
    return questions[index]
  }

  convertEmoticonQuestion(question, answer) {
    const emoticonQuestion = question.replace(answer, "\(^o^)/")
    return emoticonQuestion
  }
}

4. デモ

card.gif

5. 参考

microCMSについては、@ohnaka0410さんの記事を参考にさせて頂きました\(^o^)/

6. おわりに

QiitaのCOTOHA記事を見てると、みなさん面白いアイデア出しまくりで、とても勉強になります!

COTOHA楽しい\(^o^)/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?