React Nativeを利用したアプリ開発でライブラリのライセンスをJSXで表示したい

モチベーション

React Nativeを利用した開発で利用しているライブラリをAndroid, iOSごとにjson形式でまとめて、React NativeのViewから表示させたい。この仕組みを、できるところは自動化をさせたい。その手順や躓きポイントをまとめた。

この記事について

Unipos Advent Calendar 2022の2日目の記事です。

用意するもの

ライセンス出力で利用

• react-native-oss-license
• LicensePlist
• LicenseToolsPlugin

※LicenseToolsPluginはアーカイブされているため、現在だとAboutLibrariesを利用する方がよさそう。

自動化で利用

• Node.js
• Ruby
• sed
• jq
• plutil
• echo
• macOS

手順

CLIでreact-native-oss-licenseを動かしただけでは、ラインセンスを独自の形式でアプリに表示するまでの道のりが大きく、躓きそうなポイントがいくつかある。自分なりに、できるだけどうすると自動化できそうかを手順としてまとめた。

Android, iOSでそれぞれ手順が異なる。以下に、大まかな手順を記す。

Android

1. JS側からライセンス情報をyaml形式で出力
2. 1.で出力したyamlから、ライセンス情報を出力したyaml形式に則った形式で、#LICENSE#や#COPYRIGHT_HOLDERなど抜けているところをググって埋めた状態のyamlを作成しておく
3. 1.2.のyamlを合体させたyamlを作成する (JS.yamlとする)
4. Android側からライセンス情報をyaml形式で出力
5. 4.で出力したyamlから、ライセンス情報を出力したyaml形式に則った形式で、#LICENSE#や#COPYRIGHT_HOLDERなど抜けているところをググって埋めた状態のyamlを作成しておく
6. 4.5.のyamlを合体させたyamlを作成する (Android.yamlとする)
7. JS.yamlとAndroid.yamlを合体させる (JS&Android.yamlとする)
8. LicenseToolsPluginのコマンドでライセンス情報が正しく入力できている確認する
9. JS&Android.yamlからjsonに変換する (android.jsonとする)
10. android.jsonをjsxで読み込み、FlatListに表示する。

iOS

1. JS側からライセンス情報をplist形式で出力
2. 1.で出力したplistから、ライセンス情報を出力したyaml形式に則った形式で、#LICENSE#や#COPYRIGHT_HOLDERなど抜けているところをググって埋めた状態のyamlを作成しておく
3. 2.3.のplistを合体させる (JS.plistとする)
4. iOS側からライセンス情報をyaml形式で出力 (iOS.plistとする)
5. JS.plistをjsonにする (JS.jsonとする)
6. iOS.plistをjsonにする (iOS.jsonとする)
7. JS.jsonとiOS.jsonを合体させる (ios.jsonとする)
8. ios.jsonをjsxで読み込み、FlatListに表示する

手順の自動化で詰まりそうなポイント

上記の手順を実際に行うにはそれなりの労力が必要になる。自動化できる部分は自動化させたい。react-native-oss-licenseにはどうすればライセンスを出力できるのかがまとまっている。ただ、それだけだと自動化するときに難しいところもある。そのため、自動化するときに、自分が躓いてしまったポイントをまとめた。

#LICENSE#や#COPYRIGHT_HOLDERなど抜けているところ埋めるって辛くない？

これは大変じゃないかと思うが、実際大変。ライブラリによってはライセンスがあるものの、サーバーからダウンロードしてきたファイルの中にライセンスの記入が含まれていないものが数多く存在する。そのようなライブラリの#LICENSE#や#COPYRIGHT_HOLDERの項目を1つ1つググって埋めていくという手作業が必要になる。これはどうしようもないように思っている。

ライブラリの更新時にできるだけ再度同じ調査をしたくないので、初回、調べた内容を、CLIで出力されたyaml形式と同じ形で記入する。

下記のようなフォーマットでライセンスは出力される。

- artifact: example:+
  copyrightHolder: #COPYRIGHT_HOLDER
  license: #LICENSE#
  licenseUrl: https://example.com
  url: https://example.com

下記のように変更した状態のyamlを作成しておく。

- artifact: example:+
  copyrightHolder: example
  license: example
  licenseUrl: https://example.com
  url: https://example.com

次回以降は、この埋めた状態のyamlを、ライセンス出力のyamlと合成することで、もう一度ググるという必要がだいぶ減る。

LicenseToolsPluginの未対応のライセンスが存在する

ライセンスも日夜、新しいものが登場する。そのようなライセンスを持つライブラリを利用すると、LicenseToolsPluginではエラーになる。

例えば下記のように表示されることがある。

* What went wrong:
Execution failed for task ':app:generateLicensePage'.
> java.io.FileNotFoundException: File not found: template/licenses/Unlicense.html

Unlicenseというライセンス形態を利用できないと表示される(意訳)。

作成したyamlが正しいかどうかを確認するために、generateLicensePageを実行しているとする。この場合は、このライセンスを持つライブラリの部分をgenerateLicensePageの実行時のみコメントアウトすることで対処できる。そして、generateLicensePageが終わり次第、コメントアウトした部分をアンコメントする。
(※LicenseToolsPluginをforkしてUnlicenseにも対応させれば......)

コメントアウトには、JSからsedコマンドを利用した。

`sed -i '' -e '/${artifact名}/,+${artifact名からそのライブラリの部分を示す行数}s/^/#/' ${yamlファイルのパス}`

アンコメントにも、JSからsedコマンドを利用した。

`sed -i '' -e '/${artifact名}/,+${artifact名からそのライブラリの部分を示す行数}s/#//' ${yamlファイルのパス}`

yamlをjsonにするには？

jsxでライブラリのライセンスを表示させたかったのでyamlをjsonにしたい。そのため、JS側からrubyとjqを利用して、yamlからjsonに変換した。最終的に作成されるjsonにfomatをかける意味でjqを利用していた。下記コマンドを実行した後に、writeFileでコマンドの中身を書き込み、jsonファイルを作成した。

`ruby -rjson -ryaml -e 'print YAML.load(STDIN.read).to_json' < ${yamlファイルのパス} | jq .`

./gradlew checkLicensesの実行結果に余計な文章も混じる

./gradlew checkLicensesを実行すると、Android側のライセンス情報をyaml形式でshellに出力してくれる。だが、コマンドのログには、yaml以外の部分も存在していて、そのままだと取り扱いづらい。

書きのように出力される。

何らかの文字列がたくさん
何らかの文字列がたくさん
- artifact: example:+
  copyrightHolder: example
  license: example
  licenseUrl: https://example.com
  url: https://example.com
何らかの文字列がたくさん
何らかの文字列がたくさん

そこで、JS側でsedを使って、yaml形式の部分だけを抜き取った。

`echo -e "${./gradlew checkLicensesの結果}" | sed -n -E -e '/- .*:.*|  .*:.*/p'`

- .*:.*にて、- artifact: example:+部分を抜き出し、 .*:.*部分で、 copyrightHolder: exampleのような部分を抜き出した。

試したこととして、js-yamlを利用した。結果として、yaml記法に則っていない部分があると、js-yamlではエラーになってしまうようで、代理でsedコマンドを利用するように変更した。

plistからjsonにどうやって変換するの？

macOSにはplutilというコマンドが同梱されているようだったので、このコマンドをJS側から利用することにした。

`plutil -convert json ${plistファイルのパス} -o -`

JSXでjsonって読み込めるの？

普通に読み込めるみたい。そのままimportすると利用できるようだった。

import {License} from 'license.json';

TypeScriptとTSXを利用している場合は、型定義をしておくことで、importしたときに型がついた状態で、TSX上で操作できる。

declare module '*/license.json' {
  export type License = {
    artifact: string;
    省略
  };
  const Licenses: License[];
  export default Licenses;
}

まとめ

React Nativeを利用した開発で、ライブラリのライセンスをjsonとしてまとめて、JSXで表示するまでのざっくり手順をまとめた。その際に躓きそうな手順もまとめた。OTA (Over The Air) を利用していた都合上、Android側やiOS側のネイティブコードに変更がないようにしたかったので、jsonにまとめるという方式を取った。しかし、実際、大変だった。

LicenseToolsPluginはアーカイブになったため、AboutLibrariesに置きかえる作業をしなければ......

最後に、ライブラリの作成者様方に感謝を。react-native-oss-licenseやLicenseToolsPlugin、LicensePlistなどがなければ、もっと膨大な作業が発生したと思う。ありがとうございました。

参考

• react-native-oss-license/sample at master · k-tomoyasu/react-native-oss-license · GitHub