CodePenのライセンス表記の仕方:著作権表示は必要?

codeペンのライセンス

最近は「CodePen」のコードサンプルが埋め込まれた記事をよく見かけるようになりましたね。

See the Pen Waves by Rico Sta. Cruz (@rstacruz) on CodePen.

CodePenとはHTML、CSS、Javascriptのコードを共有できるサービスです。膨大な数のコードが投稿されており、探せば目的に合ったあらゆる表現を見つけることができます。ただ、「CodePenで公開されているコードはコピーして使っていいの?」と疑問に思う方も多いのではないかと思います。そこで今回はCodePenのライセンスについて詳しく見ていきたいと思います。

CodePenのライセンス

CodePenのライセンスは、公式サイトのLicensingに明記されています。ここでは、一部抜粋して紹介します。

パブリックPenはMITライセンス

Public Pens are MIT Licensed, private Pens are owned by you with no implicit license.

パブリックPenの場合は、MITライセンスになります。プライベートPenの場合、ライセンスが自動付与されることは無く、作成者がライセンスを保有します。

CodePenでは投稿するときに「パブリック(公開)」と「プライベート(非公開)」の2種類を選ぶことができます(非公開は有料プランでのみ指定可能)。パブリックが選ばれた場合にはMITライセンスとなり、プライベートの場合、作成者がコードのライセンスを所有することになります。

MITライセンスとは?

要約すると、MIT Licenseとは次のようなライセンスである。

1. このソフトウェアを誰でも無償で無制限に扱って良い。ただし、著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。

2. 作者または著作権者は、ソフトウェアに関してなんら責任を負わない。


ーWikipedia

MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があるので注意しましょう。詳しくはMITライセンス日本語訳が参考になるかと思います。

プライベートでも埋め込まれることがあるので注意

「プライベート(非公開)ならライセンスも何も関係ないよね」と思うかもしれませんが、プライベートでも、作成者がシェアをすれば、他の人が見ることができます。
つまり、CodePen上から探して見れるコードは基本的にMITライセンスのパブリックですが、ブログ上に埋め込まれたコードは必ずしもパブリックとは限らないので注意しましょう。

ちなみにプライベートだとマークが表示されます。

2. 結局どうやって著作権表記すれば良いの?

では結局CodePenで公開されているコードを自分のウェブサイトで使うときにはどのような表記をすれば良いのでしょうか。
MITライセンスでは、ソースコード上の重要な部分に、著作権およびライセンス表示をすれば、サイト上で公開する義務はありません。そのため、以下のように記述をするのが良いのではないかと思います。

CSSに書く場合の例

コメントアウトで以下のように書くのが良いでしょう。

/* Copyright (c) 作成年 著作権者名 Released under the MIT license http://opensource.org/licenses/mit-license.php */ /* 例 Copyright (c) 2017 Rico Sta. Cruz (@rstacruz) Released under the MIT license http://opensource.org/licenses/mit-license.php */

外部CSSファイルの最上部に載せるのが理想的ですが、数行のCSSだけを利用する場合「表記がどこを指しているのか」分からなくなってしまいます。そのため、部分的な利用であれば利用するCSSコードの直前に書くのが良いのではないかと思います。
なお、MITライセンス文は、全文が載っているリンクを明示すればOKです。

HTMLに書く場合の例

同様にコメントアウトする形で記載します。

<!-- Copyright (c) 作成年 著作権者名 Released under the MIT license http://opensource.org/licenses/mit-license.php -->

”重要部分”であるため、ヘッダー部分(<html>タグの直下など)に載せるのが、望ましいのかもしれませんが、こちらも数行だけのコードを利用する場合「どこを指しているのか」分からなくなってしまいます。そのため、利用するコードの直前に上記コードを貼り付けるという形を取るのが良いのではないかと思います。

同じカテゴリーの記事
同じカテゴリーの記事一覧
リファレンス
サルワカ