利用しているライブラリのライセンスを一覧で表示する画面を作成する

React Native

オープンソースのライブラリを利用するに当たって、ライセンスによっては使用していることを表示しないといけないものがあります。

Webページなどでは、簡単にソースを見られるのでそこで表示していることにできます。しかし、アプリの場合はソースが通常は見られないので表示用のページを作成して、そこへ書き並べることになります。

今回はその対応の内容をメモしています。

概要

ざっくりとは以下の対応です。

ライセンスの一覧情報テキストを作成
~~npm-license-crawler を利用して~~
license-ls を利用して使用しているパッケージのライセンス一覧をまとめたjsonファイルを作成。
アプリ内に表示ページを作成
上記の json ファイルを読み込んで、一覧表示するライセンス画面をアプリに実装。

ライセンスの一覧情報テキストを作成

~~いくつか方法はあるようですが、今回は npm-license-crawler というライブラリを使いました。~~

他のライブラリでlicense-lsというものが便利だったのでこちらを利用します。ライセンス情報をまとめてファイルに出力できるものです。

https://github.com/morficus/license-ls

実行

私は package.json に以下のように script を用意して実行しました。依存しているパッケージは対象にしない、json 形式で license.json に出力するなどの指定をオプションで指定してます。 package.json で指定しているライブラリのもののみが出力され、依存の依存になっているものは対象外になります。アプリが直接依存しているもののみ抽出できるのでわかりやすくなります。

  "scripts": {
    ~~~
    "license": "npx license-ls --depth=0 --prod --format=json > './src/licenses.json'",
  },

指定したファイルに json 形式で出力されているはずです。パッケージの情報のオブジェクトの配列になっています。

アプリ内に表示ページを作成

上記の json ファイルを使ってライセンスページを作成します。特に難しいことはなく FlatList でリスト表示しています。

json の中身はオブジェクトの配列になっているので、そのままFlatListに渡すことができます。 FlatList の data に渡して、各要素でURLとライセンスの名前・形式を取得しています。

タップした際には該当のパッケージのライセンスページをブラウザで開くようにしました。

const licenseFile = require("./licenses.json");

export const LicensesScreen = () => {

  const openUrl = (url: string) => {
    WebBrowser.openBrowserAsync(url);
  };

  const LicenseItem = (props) => {
    const { packageItem, onPress } = props;
    const { name, license, homepage } = packageItem;
    return (
      <TouchableOpacity
        style={styles.licenseItem}
        onPress={() => {
          onPress(homepage);
        }}>
        <Text style={styles.packageName}>{name}</Text>
        <Text style={styles.license}>{license}</Text>
        <Text style={styles.url}>{homepage}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={licenseFile}
        renderItem={({ item }) => {
          return <LicenseItem packageItem={item} onPress={openUrl} />;
        }}
      />
    </View>
  );
};