tofucodes diary

にほんごのほう

SourceMapを用いてOSSのライセンス表記を外に出す方法

OSSライセンスの明記をSourceMapで回避しちゃおうという話。

例えば

複数のjsファイルを結合したプロダクトのコードをminifyしてCDNとかに置くパターンを想定。 こういう場合おそらく以下のようなケースがあると思うんですよ。

  • 各jsファイルのminifyされたものを結合する
  • 全てのjsファイルを結合した後の1ファイルをminifyする

前者のケースの場合は、各min.jsにライセンスが表記してある必要がありますし(まあ大体のOSSライブラリはこうなってるかもだけど)、後者のケースでも結局minifyする時にライセンス表記を消さないようにしないといけないんですね。 自分のチームじゃないんですが、前者の方法でライセンスを保持してるチームも実際にあります。

で自分のとこはどうしようかなあと思っていたところ、チームの先輩がタイトルにあるSourceMapを用いたライセンスの表記の方法を提案してくれました。 SourceMapを用いると以下の2点のメリットを得ることができます。

  1. minify後の最終ファイルにライセンス文を含めなくて良い
  2. デバッグしやすい

minify後の最終ファイルにライセンス文を含めなくて良い

らしい。としか言いようがないのですがw このあと触れますがブラウザでminify前のjsを参照できてそっちにライセンスが表記してあれば大丈夫「らしい」です。(ご自身で調べてみることをおすすめしますmm) 自分も調べてみたのですが、残念ながらそれっぽい情報には辿り着けませんでした。 でもpixivでも同じ方法が取られている「らしい」です。 ファイルの大きさ的にはライセンス文の分だけ少なくなるくらいであまりここにはメリット無いかなと、あくまで自分のチームのプロダクトではそう感じました。

デバッグしやすい

これはSourceMapを利用したことがある人なら分かることですが、ブラウザでデバッグがしやすくなります。 具体的にはminify前後のファイル(sample.js/sample.min.js)とSourceMap(sample.min.js.map)を同じパスにデプロイした状態でブラウザでminify済みファイル(sample.min.js)を読み込みます。すると読み込んでるのはminify済みのファイルだけなのに、ブラウザのデバッグツールではminify前のファイル(sample.js)も参照することができるようになります。そのminify前のファイルにブレイクポイント差し込むこともできちゃいます。すばらしいですね。

方法

ほぼほぼ前の項目で書いてしまったんですが一応まとめとして。

  1. minifyする時にSourceMapを書き出すようにする
  2. minify後の最終ファイルと同じパスにminify前のファイルとSourMapもデプロイする

僕のチームでは結合&minifyはGruntで自動化してるのでこれ使ってSouceMapを書き出してデプロイとかしてます。

お願い

今回記載した内容についてもし間違いが含まれてましたら、コメント等でご指摘いただけたら幸いです。

追記

1日空けて考えてみたらちょっと思うところがあったので追記。 たぶんSourceMapの良い点としてminifyしてもコードを「可読性の良い状態で」公開することができることなのかと思いました。思い返せば、今回のアドバイスをくれた先輩も常日頃コードは公開すべきみたいな立場にいたなぁ、、、とw

なので今回の内容の本質はライセンスどうこうではなく、コードを公開するという点だったのかもしれませぬ。

さらなる追記

t-wadaさんからこのようなご指摘を受けまして、、、まさに言いたかったことをおっしゃってくれましたw ということでタイトルが誤解を招くような感じを受けるので修正しました。

t-wadaさんありがとうございますー。