コーディングに便利なCodepenの使い方とカスタマイズ（有料版と無料版）

作成：2016/12/12
更新：2017/04/16
使い方

コーダーの方なら利用されている人が多いであろうcodepen。今回は有料版や無料版の違い、現在はどんなことが出来るようになっているのかをまとめました。

codepenとは

ブログなどに貼り付け可能な無料のコードシェア（オンラインエディタ）サービスです。有料にすることでプライベートモード（非公開）でコードを管理したり、リアルタイムで同時閲覧、ブログに埋め込んだ時のレイアウトをかっこよくカスタマイズすることもできます。

通常のエディタのように更新＞プレビューも必要なく、normalize.css や外部リソースの貼り付けも簡単。自分でテストサーバを準備しなくてもよいし、練習やテストにもってこいです。

CodePen

普段スニペットを作っておいて、サイト構築時に組み込んだりプログラミングの練習に利用したり。非公開で使いたかったのとブラウザテストツールを使いまわしたかったので、年$75の有料プランにしてます。

プランは無料/PRO/SUPER PRO/TEAM PROに分かれていて、有料版の「PRO版」と「SUPER PRO版」を比較すると以下のような違いがあります。

プラン	PRO	SUPER PRO
年	$75	$300
アセットホスティング容量	1GB	5GB
共同編集	2人	6人
リアルタイム編集同時視聴	10人	35人
ライブビュー	可	可
プライベート	可	可
カスタムCSS	可	可

TEAM PROについてはCodePen Plansをご覧ください。

codepenで何ができるのか

ざっくりと以下のようなことができます。

スニペット管理
[Pro] プライベートモード / コードの非公開
コードのテンプレート化
コードをzipでダウンロードする
インデント幅の編集
ブログなどにコードの埋め込み
[Pro] カスタムCSS / 埋め込みのレイアウト編集
ビューの変更
デバッグ
コンソール編集
豊富なプリプロセッサ
CSS：Normalize/Resetを追加
外部CSS:Bootstrap/Foundation/Animate.cssの読み込み
外部JS:Angular/Backbone/Bootstrap/Ember...などの読み込み
オートベンダープレフィックス
メタタグ（viewport）の差し込み
[Pro] リアルタイム同時閲覧・チャット
ペアプログラミング（共同編集）
オンラインエディタ
オートコンプリート
ブラウザテスト
アセット管理（素材をアップロード）
オートセーブ
シンタックスハイライトのテーマ変更

codepenの使い方

アカウント登録やコード作成の手順はネットに沢山情報が転がっているのでここでは割愛します。

ペンをブログに沢山埋め込む時に気をつけること

コードをブログなどに埋め込むには右下の「Embed」を押すとポップアップが出るので下のコードをコピペすればOKなんですが、

複数貼る場合は「Use click-to-load」にチェックを入れておきましょう。チェックを入れておくと静的画像のみが表示され、ユーザーが任意でペンを再生できるようになります。これにチェックを入れておかないと、自動で再生されてしまうので貼り付けたページが激重になってしまいます。

[Pro] 埋め込みテーマのカスタマイズ

Embed Theme Builder（埋め込みレイアウトのカスタマイズ）について。無料版は制限があるのですが、有料版になると外部スタイルシートを読み込ませ、ロゴを消したり、動きをつけたり、細部までカスタマイズできるようになります。ブログの雰囲気に馴染ませることができるようになります。

右上のアカウントから「Embed Theme Builder」をクリックします。

テーマ編集画面に移動したら「+ Create Theme」をクリックします。

[Pro] レイアウトカスタマイズ

例えば、この画像のようにロゴだけフワフワ動かしたり、事細かにスタイルを変更したい場合、有料版の「Custom CSS」の場所に読み込ませたいスタイルを書いたCSSを設定すればOK。

「Custom CSS」は埋め込みのレイアウトを細かくカスタマイズする機能で外部CSSを読み込むことができますが、コードペンで作ったCSS/jsはホスティングされるのを利用して、それを読み込ませることができます。

適用するためのCSSを「コードペン」で作成し、URLに.cssと付け加えると

cssの中身が表示されます。このURLを

Custom CSS に適用させればOKです。こうすれば自分でスタイルシートを用意しなくてもいいですね。また、コードペンで作成したスタイルシートはCDN経由でホスティングされているので、外部サイトにも読み込ませることができます。

デフォルトテーマがこちら

See the Pen <a href="http://codepen.io/commte/pen/2feb3bd4592faef0de7685263b6a5228/">-webkit-background-clip: text;</a> by commte (<a href="http://codepen.io/commte">@commte</a>) on <a href="http://codepen.io">CodePen</a>.<br />

オリジナルCSSを読み込ませたものがこちら

See the Pen <a href='http://codepen.io/commte/pen/2feb3bd4592faef0de7685263b6a5228/'>-webkit-background-clip: text;</a> by commte (<a href='http://codepen.io/commte'>@commte</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

今のCodePenのボタンUIが少し嫌だったのでボタンをシンプルに変え、分かりやすいようにロゴを少し動かしてみました。

[Pro] ヘッダーの表示・非表示

Tab Bar で埋め込みテーマのヘッダー（html / css / js / Result / ロゴ）などの部分を表示・非表示にすることができます（有料版のみ）。

Hideで保存したテーマを適用させると、このようにロゴやボタンを消すことができます。

無料版で変更できる箇所はこちら。

ボタンの色やテキストカラーなどは変更可能です。コードとビューの間のボーダー色を変えたり、コードペンのロゴを消すなどの細かいカスタマイズは有料版で対応できます。

[Pro] プロフェッサーモード

コードを書いている過程をリアルタイムで閲覧することができます。多くの生徒さんなどにサポートしながら一つのコーディングの過程を見せたい時に便利な機能です。削除可能なコメント・チャット機能付きです。

オートコンプリートを設定しよう

ソースコードのオートコンプリートは便利なので設定しておきましょう。

アカウント＞Settingに入り「Editor Options」の「Autocomplete」にチェックを入れて保存。

リアルタイム同期・ペアプログラミング

「collab Mode」を選択すると共同でプログラミングすることができます。有料版は最大６人までリアルタイムでやり取り可能です。

上記の動画のように、GoogleDriveのごとくリアルタイムで共同作用が行え、チャットでやり取りができます。

Collab Mode - CodePen Blog

[Pro] 複数の端末でリアルタイム同期

複数の端末のリアルタイムビューのみも可能です。スクロールの位置まで反映されます。

Live View - CodePen Blog

表示領域とパラメータ

URLにパラメータをつければ、エディタの表示形式を変更することができます。

パラメータ	表示領域
?editors=001	JS表示
?editors=010	CSS表示
?editors=011	CSS/JS表示
?editors=100	HTML表示
?editors=101	HTML/JS表示
?editors=110	HTML/CSS表示
?editors=1111	Consoleを開く
?editors=1112	Consoleを拡大表示
URLの「pen」を「full」に変更	編集領域を全て非表示
URLの「pen」を「details」に変更	編集領域の下に作者情報を表示
URLの「pen」を「collab」に変更	共同作用

Resizing Code Editor Panels - CodePen Blog

コラボモード - CodePenブログ

ブラウザテスト

管理画面の「Change View」＞「Open on CrossBrowser Testing」で各ブラウザのテストが出来るようになっています。コードペンからサインアップ・ログインすれば無料で試すことができます。Pro版に入っておくと、元ファイルを更新した時（保存は不要）でもブラウザツール上でリアルタイムに反映されます。

これがあると暇な時に作成したスニペットをテストしておいて、いざという時にすぐ使えますね。

Webエディタ「CodePen」が、完全無料のクロスブラウザチェックに神対応したので使ってみた！ | シェアしたくなる最新のWebサービス・ITニュース情報をチェック！ APPGIGA!!（アプギガ）

OSの選択