アプリ屋になりたいブログ

アプリ屋になりたいブログ

アプリの開発と仕事の効率化について紹介するブログ

【無料】CodePenを使ってブラウザでコーディング!登録方法とブログの埋め込みまで解説!

f:id:bocbocmm6:20191230220356p:plain

技術ブログなどで以下のようなものをよく見かけませんか?

これは実はCodePenというWebサービスで作成したコードを埋め込んでいるものです。


See the Pen
TESTCODEPEN
by imura-moto (@imura-moto)
on CodePen.


こんな人向けの記事です
  • ブラウザ上でHTMLやjsをプレビューしながらコーディングしたい
  • 技術ブログにソースコードを埋め込みたい


さて特徴と、登録方法、ブログの埋め込みまで解説していきます。

CodePenとは

CodePenとはブラウザ上でHTML/Javascript/cssのコーディングが行えるサービスです!


特徴としては、HTML/Javascript/cssのエディターを同時に表示しつつ、リアルタイムでプレビュー画面も表示させることができるところです。


f:id:bocbocmm6:20191230212426p:plain


その他CodePenの主な特徴は以下です。

CodePen特徴
  • ブラウザでフロントエンドのコーディングが可能
  • 他の人が作成したソースコードが見れる
  • 他の人が作成したソースコードにいいねを付けられる
  • 他の人が作成したソースコードをコピーして改変できる
  • ブログにソースコードの埋め込みが可能

CodePenの登録方法

早速CodePenの登録方法を見ていきましょう。

登録手順は簡単です。

まず公式サイトに飛びます。

https://codepen.io/

「Sign Up For Free」をクリックします。


f:id:bocbocmm6:20191230213636p:plain

TwitterやGitHubやメールなどでログインします。
私はGitHubのアカウントでログインしました。

f:id:bocbocmm6:20191230213852p:plain


連携画面が表示されたので、そのまま次に進みます。

f:id:bocbocmm6:20191230214030p:plain


詳細にユーザー登録ができるようですが、めんどくさいので全部すっ飛ばして次に進みます。

f:id:bocbocmm6:20191230214100p:plain

無事登録が完了し、チュートリアル画面に飛びました!

f:id:bocbocmm6:20191230214150p:plain

CodePenの使い方

使い方と言ってもほぼ見たままです。

上部のエディター部分にソースコードを書いて、下にプレビュー画面が表示されています。

f:id:bocbocmm6:20191230214326p:plain

せっかくなので、three.jsで作成したものをそのまま書いてみました。

www.apnari.com

コード作成が完了したら、「Save」を押せばOKです。

CodePenのブログへの埋め込み方



先ほど作成したものをブログに埋め込んでみましょう。

画面の右下の「Embed」をクリックします。

f:id:bocbocmm6:20191230214744p:plain


ブログ埋め込み用のコードが表示されます。
それをそのままコピーします。

f:id:bocbocmm6:20191230214850p:plain

ブログにそのままコピペすればOKです。

f:id:bocbocmm6:20191230215124p:plain

まとめ

今回はCodePenの無料版を使ってコーディングからブログへの埋め込みまでを実施しました。

無料版でも十分使用することが可能でした。

有料会員では画面のレイアウトを変えたり、ペアプログラミングするようの機能も使えるようになるみたいです。
正直個人利用の場合は、無料版で全然十分です。

ブログへの埋め込みもすごく簡単&見やすいので非常に使えるサービスだと感じました。

これから私自身もどんどん使っていきます。