Help us understand the problem. What is going on with this article?

ハイブリッドアプリのライセンス一覧を自動生成しよう

More than 1 year has passed since last update.

スマホアプリを開発する際、オープンソースのライブラリを使用することが多いと思います。オープンソースには大抵何かしらのライセンスがあります。(MIT、Apache Software Licenseなど)
これらのライセンスでは頒布物(アプリ)に「成果物を使用していることを明記すること」(著作権表記)が条件に含まれていることが多いです。

なぜライセンス一覧が必要?

WebサイトだとJavaScriptなどのソースコードが閲覧できるため、ソースコード内にライセンス表記が含まれていれば、サイト内にライセンス用のページを作成する必要はありません。
しかし、iOS/AndroidのネイティブアプリやCordova(Monaca)アプリの場合はソースコードを閲覧できないため、アプリ内にライセンス用の画面を作成して、誰でも簡単に閲覧できるようにしなくてはなりません。

オープンソースのライブラリを使用する際は、ライセンスを必ず確認しましょう。

その他の条件

著作権表記はあくまで一条件です。ライセンスによっては、他にも色々条件があります。
例えば、GPL(GNU General Public License) だと、GPLのライブラリを取り込んだ著作物にもGPLライセンスを適用する必要がある、など。

本記事では、著作権表記に関する自動化のみ取り上げます。

前提

ハイブリッドアプリと書いていますが、今回はJavaScriptアプリのみ対象です!
筆者はCordova(Monaca)アプリを開発していますが、React Nativeなども流用できるかも?

余談ですが、ネイティブアプリだと、Androidはlicense-tools-pluginがおすすめ。
iOSはCocoaPodsを使っているなら、CocoaPodsの機能で自動生成できます。

ライセンス一覧の定義を自動生成

使用しているライセンス一覧の情報を手動で集めて画面を作成するのはすごく手間がかかります。
JavaScriptの場合、大抵のライブラリはnpmで管理しているため、package.jsonの情報から自動生成できないか考えました。
license-checkerというライブラリを使用すればできそうなのでやってみます。

インストール

npm install -g license-checker

実行

/path/toにライセンス情報が定義されたJSONファイルが出力されます。

license-checker --production --json > /path/to

画面に表示

出力されたJSONファイルを画面に表示します。
サンプルはOnsenUI+Vue.jsの例です。ビルドにはwebpackを使用しています。

webpackがあれば、JSONもimportできるので便利ですね!
webpackを使用しない場合は、XHRでJSONをロードしたり、事前にJSONをJavaScriptのオブジェクトに変換するnpm scriptsを作成すると良いです。

LicensesPage.vue
<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">ライセンス</div>
    </v-ons-toolbar>
    <v-ons-list>
      <v-ons-list-item v-for="(license, key) in licenses" @click="onLicenseClick(license)">
        <div class="list-item__title">{{ key }} {{ license.publisher }} ({{ license.licenses }})</div>
        <div class="list-item__subtitle">{{ license.repository }}</div>
      </v-ons-list-item>
    </v-ons-list>
  </v-ons-page>
</template>

<script>
  import licensesJson from '/path/to'; // 自動生成したライセンスを定義したJSONファイルをimport

  export default {
    data() {
      return {
        licenses: licensesJson
      };
    },
    methods: {
      onLicenseClick(license) {
        // ライセンスをタップすると、ブラウザでリポジトリのページ(GitHubなど)を開く(cordova-plugin-inappbrowserをインストールしておく必要あり)
        window.open(license.repository, '_system');
      }
    }
  };
</script>

(補足)JSONのimport方法

webpack3までだと、json-loaderでJSONをimportできます。
webpack4からは本体に取り込まれたため、json-loaderのインストールは不要になりましたが、現時点では以下ページの通り考慮が必要でした。
https://qiita.com/uggds/items/2ee337c5843aae28a34a#error3-module-parse-failed-unexpected-token--in-json-at-position-0

画面イメージ

ファイル_001.png

無駄な情報の排除

自動生成したJSONファイルには、アプリ自体のライセンス情報や、npmで管理している自作したライブラリの情報も含まれてしまいます。
また、AとB別々のライブラリが同じライブラリに依存しているが、バージョンが異なる場合、2件出力されてしまいます。
以下の方法で除外します。

自作ライブラリのpackage.jsonを編集

private=trueとして、自作ライブラリであることを明記します。

package.json
{
  "name": "hoge-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "private": true
}

ライブラリをインストール

npm i compare-versions --save

除外するスクリプト

license-generator.js
const execSync = require('child_process').execSync;
const fs = require('fs');
const compareVersions = require('compare-versions');

const filePath = './src/assets/licenses/licenses.json';

// 元情報となるライセンス一覧のJSONを出力
const ret = execSync(`license-checker --production --json > ${filePath}`);
if (ret.error) {
  console.error('Error ' + JSON.stringify(ret.error, null, 4));
  process.exit(1);
}

// 出力されたJSONファイルを読み込む
const licenses = JSON.parse(fs.readFileSync(filePath, 'utf8'));
const licenseKeys = Object.keys(licenses);
const newLicenses = {};
const versions = {};

licenseKeys.forEach(key => {
  const license = licenses[key];
  delete license.path;
  delete license.licenseFile;
  // 自作ライブラリ(private=true)を除外
  if (!license.private) {
    const tmp = key.match(/(.+)@(.+)$/);
    const name = tmp[1];
    const version = tmp[2];
    if (!versions.hasOwnProperty(name)) {
      newLicenses[key] = license;
      versions[name] = version;
    } else if (compareVersions(versions[name], version) < 1) {
      // 重複している場合、最新バージョンのみ含める
      delete newLicenses[name+'@'+versions[name]];
      newLicenses[key] = license;
      versions[name] = version;
    }
  }
});

fs.writeFileSync(filePath, JSON.stringify(newLicenses, null, 4));

npm scripts

package.json
{
    "scripts": {
        "license-generate": "node license-generator.js"
    }
}

実行

npm run license-generate

ライセンス一覧を作ろう

ライブラリを作成するには大変な労力がかかっています。
ライブラリ作成者への感謝の意も込めて、上記方法などを活用してライセンス一覧を作成しましょう!

kishisuke
🐤っ子プログラマー
peoplesoftware
主にJavaやC#を使った受託開発や、BaaSなどのクラウドサービス、スマホアプリの自社開発を行っている会社です。※各記事の内容は個人の見解であり、所属する会社の公式見解ではありません。
http://www.pscsrv.co.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした