Gatsby製ブログにWordCloudを導入

/** HTML形式の記事本文からHTMLタグを削除するために使う */
const striptags = require('striptags')

/** 仮想DOM d3.js D3-CloudはDOMがある前提なのでNode.js実行時でも正常動作するように仮想Canvasを使う */
const { createCanvas } = require('canvas')
/** 仮想DOM d3.js D3-CloudはDOMがある前提なのでNode.js実行時でも正常動作するように仮想DOMを使う */
const { JSDOM } = require('jsdom')

/** 形態素解析のために使う */
const kuromoji = require('kuromoji')

/** WordCloudのSVG文字列作成用 */
const d3 = require('d3')

/** WordCloudのSVG文字列作成用 */
const cloud = require('d3-cloud')

/** createPageにてWordCloud生成処理を実装する */
exports.createPages = ({ graphql, { createPage } }) => {

  return new Promise((resolve, reject) => {

    /** (略)ページコンポーネント呼び出し */

    graphql(/** (略)記事情報呼び出しクエリ */).then(result => {

      /** (略)もろもろのページ作成 */


      // WordCloud用データ加工処理

      /** (略)resultから記事全文の配列(allPostHtmlTexts)を取得する処理 */

      // 記事全文文字列取得
      const allPostTexts = allPostHtmlTexts
        .map(allHtmlTexts => {
          // HTML文字列からタグを除外
          // ただしpreタグは、中身をWordCloud解析対象外とするためここではあえて残している
          const stripedAllText = striptags(allHtmlTexts, '<pre>')

          // そのためpreタグとその中身を除外する。
          // preタグの中見はソースコード。
          // キーワードはソースコード外の文章中に記述していることを想定して
          // WordCloudの対象から外す。
          return replace(/<pre[\s\S]+?>[\s\S]+?<\/pre>/g, '').trim()
        })
        // 改行でつなぐ
        .join('\n')
      

      /** (略)resultから記事全タグの配列(allPostTags)を取得する処理 */

      // 記事タグ取得
      const tagDatas = []

      // 記事全タグ情報からどのタグが何回出現するか算出
      allPostTags.forEach(tags => {
        tags.forEach(t => {

          const targetData = tagDatas.find(data => data.text === t)
          if (targetData) {
            targetData.size = targetData.size + 1
          } else {
            tagDatas.push({
              text: t,
              size: 1,
            })
          }
        })
      })


      // タグ出現回数をインプットにWordCloud生成
      // タグ情報の場合形態素解析せずとも単語ごとの出現回数が算出できるので
      // 形態素解析はスキップしている
      createWordCloud({
        words: tagDatas,
        w: 1200,
        h: 630,
        fontSizePow: 0.8,
        fontSizeZoom: 18,
        padding: 2,
      }).then(tagSvg => { // タグをインプットにしたSVGが出来上がる

        // 記事全文文字列をインプットに単語出現回数を算出
        createWordCount(alltext)
          .then(data => {

            // 記事全文の単語出現回数をインプットにWordCloud生成
            return createWordCloud({
              words: data,
              w: 1200,
              h: 630,
              fontSizePow: 0.6,
              fontSizeZoom: 3.1,
              padding: 0.2,
            })
          })
          .then(textSvg => { // 記事全文をインプットにしたSVGが出来上がる

            // ページ生成時にSVGをContextのプロパティとして渡す
            createPage({
              path: '/map/',
              component: postRelationMapPage,
              context: {
                allPostRelations,
                wordCloudText : textSvg,
                wordCloudTag: tagSvg,
              },
            })

            // すべてのcreatePageを呼び終わったあとにresolveを呼んで処理終了
            resolve('OK')
          })
      })
    })

  })
}

/**
 * ２つの単語の大文字小文字の違いをカウントする
 */
function countDiff(a, b) {
  return a
    .split('')
    .map((charA, i) => charA === b[i] ? 0 :1)
    .reduce((a, b) => a + b, 0)
}


/**
 * 指定した文字列を形態素解析して単語ごとの出現回数を返す
 */
function createWordCount(text) {

  // よく出る言い回しでWordCloudから除外したい単語を列挙  
  const excludeWords = [
    '指定',
    '時',
    '追加',
    /** (略)除外したい単語 */
  ]


  /** kuromoji.jsにバンドルされている辞書の格納場所 */
  const DIC_URL = 'node_modules/kuromoji/dict'

  /** WordCloudでカウントする品詞（助詞・助動詞などは省く） */
  const TARGET_POS = ['名詞']

  /** kuromoji.jsで該当プロパティの値が存在しない場合に設定されている値 */
  const NO_CONTENT = '*'

  // kuromoji.jsで形態素解析
  // 単語ごとの出現回数を出力
  return new Promise((resolve, reject) => {

    kuromoji.builder({ dicPath: DIC_URL }).build((err, tokenizer) => {
      if(err){
        return reject(err)
      }

      // 単語ごとの出現回数を出力
      const words = tokenizer.tokenize(text)
        .filter(t => TARGET_POS.includes(t.pos))
        .map(t => t.basic_form === NO_CONTENT ? t.surface_form : t.basic_form)
        .reduce((data, text) => {
          // 大文字と小文字を区別せず出現回数をカウントする
          const upperText = text.toUpperCase()
          if (excludeWords.includes(upperText)) {
            return data
          }

          const target = data.find(c => c.text === upperText)

          // 出現回数は大文字小文字を区別しないが、実際の生の単語は後の処理で使うためとっておく
          if(target) {
            target.size = target.size + 1
            if(!target.rawTexts.includes(text)) {
              target.rawTexts.push(text)
            }
          } else {
            data.push({
              text: upperText,
              rawTexts: [ text ],
              size: 1,
            })
          }
          return data
        }, [])
        .map(data => {

          // 上記処理で保持しておいた生の単語をもとに、一番大文字が多い単語をWordCloudの単語として採用する
          // 例えばGatsbyとgatsbyであればGatsbyを採用
          const almostSameText = data.rawTexts.map(text => {
              return {
                text,
                diff: countDiff(text, data.text),
              }
            })
            .reduce((a, b) => a.diff <= b.diff ? a : b) // 大文字に近いほうを採用する
            .text
          
          return {
            text: almostSameText,
            size: data.size,
          }
        })

      resolve(words)
    })
  })
}

/**
 * 単語出現回数をもとにWordCloudのSVG文字列を返す
 */
function createWordCloud({
  words, // 単語出現回数
  w, // SVGの幅(単位px)
  h, // SVGの高さ(単位px)
  fontSizePow, // WordCloudの文字の大きさの比率調整用係数
  fontSizeZoom, // WordCloudの文字の大きさの係数
  padding, // WordCloudの文字間の隙間
}) {

  // D3-Cloudによる解析
  return new Promise((resolve, reject) => {
    cloud().size([w, h])
      .canvas(() => createCanvas(w, h))
      .words(words)
      .rotate(word => word.size % 2 === 1 ? 0 : 90) // 出現回数に応じて縦か横向きに表示
      .fontWeight(word => Math.pow(word.size, fontSizePow) * fontSizeZoom)
      .fontSize(word => Math.pow(word.size, fontSizePow) * fontSizeZoom)
      .font('meiryo')
      .padding(padding)
      .on('end', wordsForCloud => {

        resolve(wordsForCloud)
      })
      .start()
  })
  // d3.jsによる解析
  .then(wordsForCloud => {
    return new Promise((resolve, reject) => {
      /** 仮想DOM */
      const document = new JSDOM(`<body></body>`).window.document

      d3.select(document.body)
        .append('svg')
          .attr('class', 'ui fluid image')
          .attr('viewBox', `0 0 ${w} ${h}`)
          .attr('width', '100%')
          .attr('height', '100%')
        .append('g')
          .attr('transform', `translate(${w/2},${h/2})`)
        .selectAll('text')
          .data(wordsForCloud)
        .enter().append('text')
          .style('font-size', d => `${d.size}px`)
          .style('font-family', d => d.font)
          .attr('transform', d => `translate(${d.x}, ${d.y})rotate(${d.rotate})`)
          .style('fill', (d, i) => d3.schemeCategory10[i % 10])
          .attr('text-anchor', 'middle')
          .text(d => d.text)
      
      // 最終的にSVGの文字列を返す
      resolve(document.body.innerHTML)
    })
  })
}