はじめに

プログラミングに関連したWebサイトやブログを眺めているとコードを貼っていることがよくあります。

コードが貼ってあるWebサイトやSNSなどで勉強に最適です。

貼ってあるコードの種類は、様々でコードのスクリーンショットやコードを埋め込んでいるケースもあります。

どちらも勉強には最適です。

ただ、コードを練習したり説明をする際にコードを貼り付けたいと考えた場合。

どうやって貼り付けるか難しいと感じることがあるかもしれません。

それは、コードの貼り方を意外に知らないからです。

CodePenは、コードを練習したい人、CSSやJavaScriptで開発したい人などに向いているサービスです。

CodePenを使って自分が書いたコードをWebサイトやSNSなどに埋め込むこともできます。


CodePenとは

CodePenとは、オンライン上でプログラミングやコーディングを練習することができるツールです。

WebサイトやSNSに埋め込んでシェアすることができます。

CodePenは、有料会員と無料会員で楽しめる機能があり、WebサイトやSNSの埋め込みは、無料会員で利用可能です。

レイアウトのカスタマイズやブラウザテストの再利用、プライベートモードなど有料版で楽しめる機能もあります。

有料会員は、$75～プランが用意されています。


CodePenの登録方法

CodePenを使うためには、ユーザー登録が必要です。

CodePenにユーザー登録するには、まず公式サイトへアクセスします。

公式ページにアクセスしたら「Sign Up」のボタンをクリックして次へ進みます。

登録の際に会員は、無料会員と有料会員の2種類です。それぞれ登録の流れが若干異なります。


無料会員の登録方法

公式サイトへアクセスしたら、フリープラン登録の画面がまず表示されて、メールアドレスで登録するのかSNSで連携するかことも可能です。

SNSアカウントで登録可能なのは、Facebook、TwitterとGitHubです。

どれかのSNSアカウントを持っていればリンクしてそのまま使うことができます。

メールアドレスかSNSでアカウント登録を選択したら名前やパスワードなどの必要事項を入力して「Submit」をクリックしたら完了です。

Sing Upが完了したらプロフィールを入力画面になります。プロフィールは、後から設定することも可能です。

あとは、チュートリアルが開いてCodePenが利用できます。


有料会員の登録方法

有料会員の場合は、それぞれプランが用意されているので最初にプランの選定です。

SNSアカウントや無料会員でログインしている場合は、画面右のアイコンをクリックして、「Upgrade to PRO」を選びます。

有料会員用のプランのどれかを選び、「Sign Up」または「Upgrade to PRO」を選択してクレジットカード情報の入力をしたら設定完了です。


CodePenの機能

CodePenの機能を活用するためには、有料会員と無料会員で異なります。

基本的なブログやWebサイトへの埋め込み、コードのシェアやブラウザ上のライブコーディングは、どちらの会員でも利用可能です。

CodePenをサクッと使いたい場合は、無料会員でも十分な機能が活用できます。

無料会員の機能では物足りず、もっと色々な機能を使いたい、または、色々とカスタマイズしたい場合は、有料会員がおすすめです。

大きな違いはありませんが、細かな機能で有料会員と無料会員に違いがあります。


有料会員の場合

CodePenの有料会員のタイプは、3つあります。「Annual Starter」「Annual Developer」と「Annual Super」です。

もし、チームで有料会員にしたい場合は、「Annual Super Team」になります。

Annual DeveloperやAnnual Superは、ドメインを保有していてよりカスタマイズなどを深く楽しみたい人向けです。

無料会員との違いは、制限やストーレジの容量とプライベート設定ができることになります。

プライベート設定は、コードを非公開にすることが可能です。


無料会員の場合

CodePenの無料会員は、基本的な操作は無料会員でも可能です。

コードを書く、テストするやブログ、Webサイトへ貼り付けるなどは、無料会員でもできます。

有料会員と比べて、Embedできるテーマが1回だけや1つのプロジェクトで10ファイルまでしか使えないなどの制限が異なるところです。

もう一つは、コードの公開設定になります。

CodePenは、無料会員の場合は、コードが全て公開設定ですが、有料会員は、非公開設定が可能です。


CodePenの使い方

CodePenの使い方は、ログインした後、左側に表示されているメニューから「Create」を選択します。

Createを選択したらプルダウンメニューが表示されるので「Pen」をクリックするとコーディングの入力画面が表示されます。

「Pen」とは、JavaScriptやCSSなどのコーディングを練習やデモをする、または、作品を閲覧することが可能な機能です。

Createの中には、ProjectやPost、Collectionなど、他のメニューもあります。


CodePenの便利機能

CodePenには、便利な機能がたくさんあります。有料会員と無料会員で使える機能が若干異なりますが、共通して使える機能も色々です。

ここでは、有料会員と無料会員どちらも使える便利な機能や有料会員が使える便利な機能について紹介します。


ペアプログラミング

CodePenでは、パートナーやチームで共同プログラミングすることができます。

無料版は、2人までですが、有料版は、共同でプログラミングする人数を増やすことが可能です。

ペアプログラミングの機能は、リアルタイムでやりとりできることが最大のメリットになります。

リアルタイムで更新されるので互いの画面を共有しながら作業が可能です。


シンタックスハイライト

シンタックスハイライト機能を使って、コードを打ち込んでいる表示画面のテーマを変えることができます。

背景を白にしたり、緑にしたりとカスタマイズすることが可能です。


オートコンプリート

CodePenの機能の中には、オートコンプリートがあります。オートコンプリートは、ソースコードのコンプリートを自動化する設定です。

アカウントをクリックして「Editor Options」を探します。

Editor Optionsの項目の中に「Autocomplete」があるのでチェックを入れたら設定完了です。


ブラウザテスト

CodePenトップページの上にある「Change View」をクリックしてください。

プルダウン項目の中に「Open on Cross Brower Testing」があります。

ここをクリックするとブラウザのテストをすることが可能です。

OS毎やスマホによって分けられるため、ブラウザテストは非常に使い勝手がいいといえます。

ブラウザを選択したら「Run Test」のボタンがあるので、クリックしてみましょう。

シュミレーションが可能です。


有料会員用テーマ・レイアウトカスタマイズ

テーマやレイアウトのカスタマイズは、無料会員も使えますが、制限があります。

有料会員になると制限がなくなるのでテーマやレイアウトをカスタマイズすることが可能です。

トップページ右上のアイコンをクリックして、「Embed Theme Builder」をクリックします。

編集画面へ移動し、「+ Create Theme」を選択したらテーマやレイアウトのカスタマイズが可能です。


マテリアルのストック

この機能も有料会員が使える機能です。

アセットマネージャーで写真などのマテリアルをアップロードすることで保管管理が可能。

画像や素材をストックしておくと作成や編集時にすぐ引き出して使うことができるので便利です。


CodePenをシェアする

CodePenで書いたコードなどをブログやWebサイトで公開・SNSでシェアしたい場合もあるでしょう。

シェアする方法についてWebサイトとSNS、それぞれチェックします。

CodePenのコードをシェアする方法は、有料会員だけでなく、無料会員でも活用可能です。


Webサイトへの埋め込み方法

CodePenで書いたコードをWebサイトやブログなどに埋め込みたい場合、まず「Pen」でコードなどを打ち込んで作成します。

作成したら、Saveをクリックして、保存してください。

保存したら画面右下に「Embed」というボタンを確認できます。

Embedをクリックしてください。

そうすると、貼り付けるコードをカスタマイズすることができるようになります。

何も変更しない場合は、下の「Copy & Paste Code」の欄にあるコードをコピーしてください。

コピーしたコードを、Webサイトやブログに貼り付けます。

テーマや埋め込みコードの種類などをカスタマイズする場合。

上のプルダウンメニューを選択しましょう。

そうするとカスタマイズ可能です。

カスタマイズした後は、同じように「Copy & Paste Code」の欄にあるコードをコピー。

先ほど同様、Webサイトやブログなどに貼り付けることができます。


SNSでシェア

CodePenで書いたコードはブログやWebサイトだけでなく、SNSを使ってシェアすることもできます。

CodePenは、TwitterやFacebookアカウントがあればリンク可能。

非常に簡単な手順で気軽にTwitterやFacebook上にコードをシェアすることができます。

シェアする方法は、とてもシンプル。

画面右下にある「Share」ボタンをクリックしてください。

クリックしたら、TwitterやFacebookどちらでシェアしたいか選択してクリックするだけです。


コードの編集方法

ブログやWebサイトへコードを貼り付けた場合、仮に間違えたコードだった、もしくは編集したい場の手順を紹介します。

CodePenのトップページから左側の「Dashboard」をクリックします。

次に編集したいコードを検索して選択したら編集が可能です。

コードを編集や修正をしたら画面上にある「Save」をクリックします。

WordPressで作ったブログに貼り付けている場合は、これで自動的に反映されます。

他のサイトは貼り付ける用のコードをコピペするだけです。


CodePen以外のプレイグランド

Webサイトでフロントエンドのコードを練習することができるCodePenのようなサイトをプレイグランドといいます。

プレイグランドは、CodePen以外にも有名なサイトがあります。ここでは、CodePen以外に人気の高いプレイグランドの紹介です。


JSFiddle

CodePenや他のプレイグランドと比べたら後発で機能が少ないのですが、CSSやJavaScriptなどの組み合わせをテストすることが可能です。

シュミレーション機能は評判が高く人気のプレイグランドになります。

機能は少なめなのを頭に留めておきましょう。


CSS Deck

CSSは、CodePenに類似したプレイグランドです。

CSSという名前になっていますが、CSS以外にもHTMLやJavaScriptをテストすることができます。

使える機能も豊富なのでCSS Deskを好んで使う人も少なくありません。


JS Bin

JavaScriptマスターであるRemy Sharpが始めたサービスがJS Binです。

このJS Binは、JavaScriptのコンソールの使い勝手の良さが有名なプレイグランドになります。

多機能な他のプレイグランドとは、異なり、基本機能に焦点を当てています。


まとめ

CodePenを使わなくても他のサービスを使ってコードを埋め込むことは可能です。

それでも、CodePenは気軽に使えて便利な機能を兼ね備えているので有効活用できます。

有料会員の場合は、グレードによって多くの機能をさらに有効活用することができますが、無料会員でも十分に有効活用可能です。

CodePenをうまく使いこなしてWebサイトやブログに箔をつけることもできます。

CodePenを有効活用してコードの練習などに役立てることはおすすめです。