TL;DR
コーダーの方なら利用されている人が多いであろう codepen。今回は有料版や無料版の違い、現在はどんなことが出来るようになっているのかをまとめました。
codepen とは
ブログなどに貼り付け可能な無料のコードシェア（オンラインエディタ）サービスです。有料にすることでプライベートモード（非公開）でコードを管理したり、リアルタイムで同時閲覧、ブログに埋め込んだ時のレイアウトをかっこよくカスタマイズすることもできます。
通常のエディタのように更新＞プレビューも必要なく、normalize.css や外部リソースの貼り付けも簡単。自分でテストサーバを準備しなくてもよいし、練習やテストにもってこいです。
普段スニペットを作っておいて、サイト構築時に組み込んだりプログラミングの練習に利用したり。非公開で使いたかったのとブラウザテストツールを使いまわしたかったので、年$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 を追加
- オートベンダープレフィックス
- メタタグ（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 経由でホスティングされているので、外部サイトにも読み込ませることができます。
デフォルトテーマがこちら
オリジナル CSS を読み込ませたものがこちら
今の CodePen のボタン UI が少し嫌だったのでボタンをシンプルに変え、分かりやすいようにロゴを少し動かしてみました。
[Pro] ヘッダーの表示・非表示
Tab Bar で埋め込みテーマのヘッダー（html / css / js / Result / ロゴ）などの部分を表示・非表示にすることができます（有料版のみ） 。
Hide で保存したテーマを適用させると、このようにロゴやボタンを消すことができます。
無料版で変更できる箇所はこちら。
ボタンの色やテキストカラーなどは変更可能です。コードとビューの間のボーダー色を変えたり、コードペンのロゴを消すなどの細かいカスタマイズは有料版で対応できます。
[Pro] プロフェッサーモード
コードを書いている過程をリアルタイムで閲覧することができます。多くの生徒さんなどにサポートしながら一つのコーディングの過程を見せたい時に便利な機能です。削除可能なコメント・チャット機能付きです。
オートコンプリートを設定しよう
ソースコードのオートコンプリートは便利なので設定しておきましょう。
アカウント＞ Setting に入り「Editor Options」の「Autocomplete」にチェックを入れて保存。
リアルタイム同期・ペアプログラミング
「collab Mode」を選択すると共同でプログラミングすることができます。有料版は最大６人までリアルタイムでやり取り可能です。
この動画のように、GoogleDrive のごとくリアルタイムで共同作用が行え、チャットでやり取りができます。
[Pro] 複数の端末でリアルタイム同期
この動画のように複数の端末のリアルタイムビューのみも可能です。スクロールの位置まで反映されます。
表示領域とパラメータ
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
ブラウザテスト
管理画面の「Change View」＞「Open on CrossBrowser Testing」で各ブラウザのテストが出来るようになっています。コードペンからサインアップ・ログインすれば無料で試すことができます。Pro 版に入っておくと、元ファイルを更新した時（保存は不要）でもブラウザツール上でリアルタイムに反映されます。
これがあると暇な時に作成したスニペットをテストしておいて、いざという時にすぐ使えますね。
OS の選択
ブラウザの選択
スマホは iPhone4siPhone7 Plus、Nexus、Galaxy、iPad、Android2.24.0 系などほぼ網羅。これは嬉しいですね。
「Run Test」を押すとシュミレーターが立ち上がります。またスクリーンショットなどを保存可能です。
元のファイルを変更すると、保存の有無に関わらず、シュミレーター上でもリアルタイムで変更内容が反映されます。
アニメーションのループ
「Animations should」は、埋め込みコードを Result で再生させたとき、アニメーションを 5 秒後に停止するか、ループさせるか選択できます。
[Pro] 素材のホスティング
Asset Manager ではファイルをドラッグで直接アプロードできます。アップロードしたファイルには画像パスが割り振られるので、それをコピーして任意の箇所に貼り付ければ OK。
またアップロードしたロゴや素材を保管・管理できます。同じ名前のファイルがアップロードされた場合はファイル名がリネームされるので上書きの心配は不要です。
アセットマネージャー
コード一式をダウンロードしたいときは、Export から Gist / zip などでダウンロード・保存ができます。
シンタックスハイライトの種類
「Syntax Highlighting」でコード表示のスタイルを変更可能です。テーマを一覧画像にしました。
以上、CodePen の使い方でした。