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

• 作成：2016/12/12
• 更新：2017/04/16
• 使い方 > 開発環境

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

エンジニア速報は Twitter の@commteで配信しています。

codepenとは

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

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

CodePen

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

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

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経由でホスティングされているので、外部サイトにも読み込ませることができます。

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

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

今の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にパラメータをつければ、エディタの表示形式を変更することができます。

Resizing Code Editor Panels - CodePen Blog

コラボモード - CodePenブログ

ブラウザテスト

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

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

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

OSの選択

ブラウザの選択

スマホはiPhone4s~iPhone7 Plus、Nexus、Galaxy、iPad、Android2.2~4.0系などほぼ網羅。これは嬉しいですね。

「Run Test」を押すとシュミレーターが立ち上がります。またスクリーンショットなどを保存可能です。

元のファイルを変更すると、保存の有無に関わらず、シュミレーター上でもリアルタイムで変更内容が反映されます。

アニメーションのループ

「Animations should」は、埋め込みコードをResultで再生させたとき、アニメーションを5秒後に停止するか、ループさせるか選択できます。

[Pro] 素材のホスティング

Asset Manager ではファイルをドラッグで直接アプロードできます。アップロードしたファイルには画像パスが割り振られるので、それをコピーして任意の箇所に貼り付ければOK。

またアップロードしたロゴや素材を保管・管理できます。同じ名前のファイルがアップロードされた場合はファイル名がリネームされるので上書きの心配は不要です。

アセットマネージャー

コード一式をダウンロードしたいときは、ExportからGist / zip などでダウンロード・保存ができます。

シンタックスハイライトの種類

「Syntax Highlighting」でコード表示のスタイルを変更可能です。テーマを一覧画像にしました。

以上、CodePenの使い方でした。