14
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React Native用のOSSライセンス表記生成ツールを作った

Last updated at Posted at 2019-11-17

Flutterで利用しているOSSライセンス一覧を生成するDart CLIを作ってみたを読んでReact Native版を作ってみました。
npmパッケージのライセンスをios, androidで表示するためのファイルを出力し、画像のようなライセンスの一覧が作れます。
about-libraries.png

リポジトリは以下です。
https://github.com/k-tomoyasu/react-native-oss-license
Typescriptで実装しています。

react-native-oss-licenseの概要

とても大事だけど大変なOSSライセンス管理をサポートするためのCLIツールです。React Nativeの開発で利用しているnpmパッケージのライセンスの一覧を出力します。

react-native-oss-licenseではnpmパッケージのライセンスのみに対応しています。iOS・Androidのライブラリについては、それぞれライセンス表記を自動化するツールがあるのでそれらと併用を想定しています。npmパッケージから出力したライセンス一覧と、併用しているツールで出力したライセンス一覧をマージします。

react-native-oss-licenseがサポートするのはnpmパッケージのライセンス一覧を出力するところまでで、マージ部分はユーザに委ねられており、最終的にアプリでライセンスを表示するには次のような作業をすることになります。

  1. iOSのライブラリ表記をツールで生成する
  2. react-native-oss-license で1.の形式に合わせたファイルを出力する
  3. 1.2.の結果をマージする
  4. Androidのライブラリ表記をツールで生成する
  5. react-native-oss-license で3.の形式に合わせたファイルを出力する
  6. 4.5.の結果をマージする
  7. アプリで一覧を表示するように実装する

また、現在サポートしているツールはLicensePlist, license-tools-plugin, AboutLibrariesの3つです。

各ツールの入力と出力

iOSではLicensePlistがよく使われており、出力されたplistファイルを利用して設定アプリにライセンス一覧を表記できます。
Androidではoss-license-pluginlicense-tools-pluginAboutLibrariesでアプリ内にライセンスを表示するためのActivity,Fragmentまたは静的ファイルを得ることができます。

react-native-oss-licenseではpackage.json, node_modules以下のファイルを入力に、上記のiOS, Androidのツールに合わせた形式のファイルを出力します。

ツールごとの入出力

tool プラットフォーム 入力 出力
LicensePlist iOS cocoapods, Carthage, Swift Package Managerの依存関係の記述、ライブラリのファイル plist
AboutLibraries Android build.gradle Activity
license-tools-plugin Android build.gradle yml, ymlから生成されるhtmlなど
react-native-oss-license iOS, Android(React Native) package.json, node_modules以下のファイル plist, AboutLibraries用のstrings.xml, liense-tools-plugin用のyml

処理の流れは以下のようになっています。

  1. package.jsonから利用しているパッケージの情報を取得
  2. node_modules以下からLICENSEファイル取得
  3. iOS, Androidの各形式に合わせたファイルを出力

CLI

CLIは次のようなオプションがあります。

> cd {project-root}
> react-native-oss-license --help
Usage: react-native-oss-license [options]

Options:
  -f, --format <format>       require output format. options:[settings-bundle,license-tools-plugin,about-libraries]
  --dev                       include devDependencies (default: false)
  --depth <depth>             dependencies depth (default: null)
  --output-path <outputPath>  specify path where output file (default: "default path")
  --json                      output json to stdout (default: false)
  --only-direct-dependency    output only dependencies you write packages.json. (default: false)
  --version                   show current version
  -h, --help                  output usage information

> react-native-oss-license --format settings-bundle
output settings-bundle format to 'ios/com.k-tomoyasu.react-native-oss-license.Output'

--formatでサポートしている形式を指定(settings-bundle or license-tools-plugin or about-libraries)するか、--jsonオプションを指定することが必須になっています。
--formatオプション指定時は入力した形式のファイルを出力し、--jsonを指定した際は標準出力にライセンス情報を表示します。jsonを整形して独自の形式でライセンス表記するケースを想定したものです。

結果

settings-bundle(iOS)

settings-bundle-list.pngsettings-bundle-detail.png

about-libraries(Android)

about-libraries.png

license-tools-plugin(Android)

license-tools-plugin.png

謝辞

元ネタ記事のFlutterで利用しているOSSライセンス一覧を生成するDart CLIを作ってみたリポジトリがとても参考になりました。ありがとうございます!

14
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?