技術ブログなどで以下のようなものをよく見かけませんか？
これは実はCodePenというWebサービスで作成したコードを埋め込んでいるものです。
See the Pen
TESTCODEPEN by imura-moto (@imura-moto)
on CodePen.
- ブラウザ上でHTMLやjsをプレビューしながらコーディングしたい
- 技術ブログにソースコードを埋め込みたい
さて特徴と、登録方法、ブログの埋め込みまで解説していきます。
CodePenとは
CodePenとはブラウザ上でHTML/Javascript/cssのコーディングが行えるサービスです！
特徴としては、HTML/Javascript/cssのエディターを同時に表示しつつ、リアルタイムでプレビュー画面も表示させることができるところです。
その他CodePenの主な特徴は以下です。
- ブラウザでフロントエンドのコーディングが可能
- 他の人が作成したソースコードが見れる
- 他の人が作成したソースコードにいいねを付けられる
- 他の人が作成したソースコードをコピーして改変できる
- ブログにソースコードの埋め込みが可能
CodePenの登録方法
早速CodePenの登録方法を見ていきましょう。
登録手順は簡単です。
まず公式サイトに飛びます。
「Sign Up For Free」をクリックします。
TwitterやGitHubやメールなどでログインします。
私はGitHubのアカウントでログインしました。
連携画面が表示されたので、そのまま次に進みます。
詳細にユーザー登録ができるようですが、めんどくさいので全部すっ飛ばして次に進みます。
無事登録が完了し、チュートリアル画面に飛びました！
CodePenの使い方
使い方と言ってもほぼ見たままです。
上部のエディター部分にソースコードを書いて、下にプレビュー画面が表示されています。
せっかくなので、three.jsで作成したものをそのまま書いてみました。
コード作成が完了したら、「Save」を押せばOKです。
CodePenのブログへの埋め込み方
先ほど作成したものをブログに埋め込んでみましょう。
画面の右下の「Embed」をクリックします。
ブログ埋め込み用のコードが表示されます。
それをそのままコピーします。
ブログにそのままコピペすればOKです。
まとめ
今回はCodePenの無料版を使ってコーディングからブログへの埋め込みまでを実施しました。
無料版でも十分使用することが可能でした。
有料会員では画面のレイアウトを変えたり、ペアプログラミングするようの機能も使えるようになるみたいです。
正直個人利用の場合は、無料版で全然十分です。
ブログへの埋め込みもすごく簡単＆見やすいので非常に使えるサービスだと感じました。
これから私自身もどんどん使っていきます。