CodePenとは？使い方/埋め込み方法/ライセンス表記を画像付きで解説

「ブログにソースコードを埋め込みたいけど、何かよい方法はないかな？」
「CodePenって何なの？ どんなことができるのか知りたい！」
「CodePenの使い方やWebサイトにソースコードを埋め込む方法が知りたい！」

プログラミングをしている人は、自分の書いたソースコードを共有したり、自分の運営するブログやWebサイトで解説記事を書いたりすることも多いでしょう。

ソースコードを共有するのにおすすめなのが、いまや多くの技術系ブロガーも愛用する『CodePen（コードペン）』です。

本記事では、CodePenについて以下3点を中心に解説します。

• CodePenでできること
• CodePenの使い方
• 他人の作ったCodePenを引用する際の注意点

CodePenでできること

CodePenはWebブラウザ上でHTML/CSS/JavaScriptなど、主にフロントエンド言語のコーディングができるサービスです。

CodePenを利用する目的としてもっとも多いのが、ソースコードをブログやWebサイトなどでシェアすること。コーディングしたものがリアルタイムで反映されるため、コーディング初心者の練習用にも使えます。

CodePenでできることは以下のとおりです。

＜CodePenでできること＞

• ブラウザ上でHTML／CSS／JSのコーディングができる
• ソースコードを共有できる
• Webサイトにコードを埋め込める

できること1. ブラウザ上でHTML／CSS／JSのコーディングができる

CodePenを使えば、Webブラウザ上でHTML／CSS／JavaScriptなどのコーディングが可能です。

これら以外にも、HTML／CSS／JavaScriptに関連する言語やライブラリであれば扱うことができます。

＜CodePenで扱える言語やライブラリ例＞

• Haml
• Markdown
• Sass
• TypeScript
• Pug
• Babel
• jQuery
• Vue.js

このようにCodePenでは、上段にHTML／CSS／JavaScriptを記述するエディタが用意されています。

コーディングをするとその内容が、リアルタイムで下段スペースに反映される仕組みです。

できること2. ソースコードを共有できる

CodePenで書いたソースコードは、TwitterやFacebookなどのSNSや、他のCodePenユーザーに共有できます。

CodePen内では、他のユーザが作ったソースコードや簡単なアプリケーションを見られます。

他のユーザーがつくったユニークな作品や、複雑なアニメーションなどのソースコードも見れるため、フロントエンドを勉強している人にはぴったりです。

CodePenユーザーが作ったソースコードに対しては、「いいね」やコメントもできます。フロントエンドエンジニアのためのSNSとしても使えますね。

できること3. Webサイトにコードを埋め込める

CodePenでは、作ったソースコードをブログやWebサイトに埋め込むことも可能です。

ソースコードを埋め込むプラグインは多数存在しますが、読者に見やすくソースコードを共有するには、CodePenがとても優れています。

CodePenをWebサイトに埋め込むメリットは以下のとおり。

＜CodePenをWebサイトに埋め込むメリット＞

• ユーザーが自由に編集できる
• コードと結果を1画面で照らし合わせられる
• 複数の言語を同時に見られる

実際にCodePenをWebサイトに埋め込むと、このように表示されます。

See the Pen Only CSS: Sakura by Yusuke Nakaya (@YusukeNakaya) on CodePen.

▲出典：https://codepen.io/YusukeNakaya/pen/BaoNaJY

非常に見やすく、どんなソースコードを書けばこういった結果になるのかが一目で分かりますね。

コードの解説記事などにぴったりです。

CodePenの使い方

ここからは「CodePenを実際に使ってみたい！」という方向けに、Codepenの登録からコーディングするまでの方法を解説します。

CodePenの使い方の手順は以下のとおりです。

＜CodePenの使い方の手順＞

1. CodePenにアクセスする
2. 会員登録する
3. 「Pen」をクリックする
4. エディタの設定をする
5. コーディングする

まずはCodePenにアクセスしましょう。

画面右上の「Sign Up」から新規登録をします。

「Twitter」「GitHub」「Facebook」「メールアドレス」から登録可能です。

メールアドレスで登録する場合は、必要な情報を入力して「Submit」をクリックします。

登録が完了したら「Pen」をクリックしましょう。

上の画面でコーディングできます。

右上の「Setting」をクリックすれば、細かな設定が可能です。

「Preprocessor」のドロップダウンからは、Hamlやpug、Sassなど好きな言語を選択できます。

またJavaScriptでjQueryやVue.jsを扱う場合は、CDNを検索して読み込めば使用可能です。

CodePenのプレビューをWebサイトに埋め込む方法

次にCodePenで作成したソースコードをWebサイトに埋め込む方法をご紹介します。

共有したいソースコードが完成したら、右下にある「Embed」をクリック。

プレビューが正しく表示されているか確認します。

下に表示されている埋め込み用のHTMLコードをコピーします。

WordPressのサイトに埋め込む場合は、編集画面を「テキストモード」にし、任意の場所にコピーしたHTMLコードを貼り付ければ埋め込み完了です。

他人の作ったCodePenを引用する際の注意点

「他人の作ったCodePenをWebサイトに埋め込んでもいいの？」
「他人の作ったCodePenのコードスニペットをコピーして使っていいの？」

以下ではこのような疑問に答えるために、CodePenの著作権や引用について詳しく解説します。

CodePenには「パブリック（public）」と「プライベート（private）」の2つの公開タイプがあります。CodePen上で検索・閲覧できるものはすべてパブリックです。

Codepen公式ドキュメント（英語）によると、CodePen上で自由に閲覧できるパブリック設定のものについては「MITライセンス」と呼ばれる非常に制限のゆるいライセンスが付与されており、自由にコピーして使用できると記載されています。

【MITライセンス】

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

（引用：Wikipedia）

ただし上記にあるとおり、著作情報を重要な部分に記載する必要があります。

Codepenで公開されている作品のプレビューを、以下のようにそのまま記事内に貼り付ける場合、スクリプト内に自動で著作情報が含まれます。したがって特別な表記をくわえる必要はありません。

また、プレビュー右上の「EDIT ON CODEPEN」をクリックすることで、作者ページに飛ぶことができます。

See the Pen
Only CSS: Sakura by Yusuke Nakaya (@YusukeNakaya)
on CodePen.

▲上記プレビューのコードスニペットには著作情報が含まれている。Codepen公式は「表示される場所にかかわらずライセンスは適用される（英語）」と述べている。

なおCodepenのプレビューではなく、作品そのものを自分のサイトに組み込みたい場合、当該コードのわかりやすい位置に著作情報をくわえましょう。

See the Pen
vYNOJov by Shinichi Hikosaka (@shinichi-hikosaka)
on CodePen.

CodePenの著作権についてまとめると、以下のとおりです。

• CodepenのプレビューをWebページに埋め込む場合：
  著作情報が自動で埋め込まれるため、特別な対応の必要なし
• コードスニペットそのものをWebページにコピーして利用する場合：
  当該箇所のわかりやすい位置に、コメントアウトで著作情報を記載する

まとめ

CodePenの使い方や登録方法、他人のソースコードを引用するときの注意点について解説しました。ソースコードを引用するのにとても便利なCodePen、ぜひ使い方をマスターしてください。

• CodePenは、ブラウザでリアルタイムにコーディングできるサービス
• CodePenをWebサイトに埋め込むと、読者にコーディング結果を見せやすい
• Codepenを引用する場合は、重要な部分に著作表示を記載する

（執筆：HikoPro　編集：Workship MAGAZINE編集部）