Vueで著作権ページを表示したいときどうするか

前提

• 以下記載のコードはそのままコピペしても動作は保証していません

環境

• macOS 10.15.6
• OnsenUI

検討

• nodeライブラリを使用しているということで、すべての著作権はnode_modules配下にある
• そこからライセンスを抜き出し表示すれば良い

手順

jsonファイルを作成する

• このシェルを使用し、jsonファイルを作成する
  • ※生成されたjsonファイルは完璧ではございません
  • 生成されたjsonファイルから以下を行う
    • 一番下の,を削除する
    • 外枠の {}を追加する
    • 改行を全て削除する

generateJson.sh

# !/bin/bash
for i in `ls node_modules/*/LICENSE node_modules/*/LICENCE`;
do
    license_name=$(echo $i|sed 's/node_modules\///g'|sed 's/\/LICENSE//g'|sed 's/\/LICENCE//g');
    license_text=$(cat ${i}|sed -e 's/\"/\\\"/g');
    json=$(printf '
    "%s": {
        "license_name": "%s",
        "license_text": "%s"
        },' "${license_name}" "${license_name}" "${license_text}")
    echo ${json}
done > ./licenses.json

著作権をリストで表示するページを作成する

• 上記で作成したjsonファイルをimportし、ライセンスの名前をリストで表示する

Copyright.vue

<template>
  <v-ons-page>
    <v-ons-list class="scroll_erea">
      <v-ons-list-item
        v-for="(license, key) in licenses"
        :key="key"
        class="copyright__item"
        @click="onLicenseClick(license, key)">
        <div class="copyright__item__title">
          {{ key }}
        </div>
      </v-ons-list-item>
    </v-ons-list>
  </v-ons-page>
</template>
​
<script>
import CopyrightDetail from '@/components/pages/CopyrightDetail'
import licensesJson from '@licenses'
​
export default {
  name: 'Copyright',
  data () {
    return {
     licenses: licensesJson
  {
  methods: {
    onLicenseClick (license, key) {
      const props = {
        licenseName: license.license_name,
        licenseText: license.license_text
      }
      // ここにCopyrightDetailページにpropsを渡して遷移する処理を入れてください
    }
  }
}
</script>
<style lang="scss" scoped>
.scroll_erea {
  position: absolute;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
</style>

著作権の詳細を表示するページを作成する

• propsで受け取った著作権の詳細テキストを表示する

CopyrightDetail.vue

<template>
  <v-ons-page>
    {{ licenseText }}
  </v-ons-page>
</template>
​
<script>
import { mapMutations } from 'vuex'
​
export default {
  name: 'CopyrightDetail',
  props: {
    licenseName: {
      type: String,
      required: true
    },
    licenseText: {
      type: String,
      required: true
    }
  }
}
</script>

こうなったらいいのにと思うこと

• シェル一髪で著作権のjsonファイルを作成できる
• nodeのライブラリが多すぎるとDOMレンダリングのforループでかなり時間がかかるため、そこを短縮する処理を入れる

おわりに

• こうすればnodeライブラリの著作権情報をVueで簡単に表示できるよ、などあれば教えてください