今更ながら、HTML、CSS、JavaScriptなどをプレビュー表示できるWebサービス「CodePen」のご紹介。
CodePenは、ブラウザ上でソースコードを書いてプレビュー表示しながら編集できたり、他の方々のコードをダウンロードできたり、自分のコードを公開できたりと、かなり便利なサービスです。
ただ一番便利なのは、「WordPressの記事でソースコードを表示できる」という、Webサイトへのソースコード埋め込み機能なんじゃないかと思っています。
例えばHTMLコードをWordPressで記事内に書くと、当然ながらソースコードを紹介したいのにタグ等は表示されません。ビジュアルエディターで書けば表示はできますが、改行がpタグで囲まれて出てくるのですんごい行間空きます。
だから、今までソースコードを紹介する時は、僕は「SyntaxHighlighter Evolved」というプラグインを使い載せてきました。他の方々もきっと何かしらのプラグインを使っていると思います。
が、同じソースコードの紹介なら、断然CodePenのが良いです！
CodePenが各種プラグインよりもおすすめできる理由と、CodePenの使い方をご紹介します。
目次
プラグインよりCodePenオススメな3つの理由
早速、何故プラグインではなくCodePenをお勧めするのかを先に書いていきます。
1.ページにかかる負荷が少ない
プラグインを使うと、それを動作させるスクリプトやCSSが読み込まれて多少なりとも表示速度に影響を及ぼします。
でも、CodePenは非同期で読み込んでくれる為、負荷が少なく済みます。
2.プレビュー表示ができる
ソースコードを表示するだけでなく、その場で「Result」をポチっとすれば実行結果が表示されます！
これかなり便利ですよね、今までやってた、コードを書いて、デモページを作るか画面キャプチャを貼るという作業が無くなります！
3.自分でも確認しながら書ける
プレビュー表示、ソースコードの結果の紹介にももちろん便利ですが、自分で「あ、このソースコード紹介しよ。」って思った時にも重宝します。
たまに、書いてみたもののうまく動かなかったりという事があるので、即時確認できるとやっぱり便利。
CodePenのデメリット
特に見当たらないのですがデメリットを挙げるとすれば、記事内に記載するのではなく埋め込む形なので、記事の文字数としてカウントされず、キーワードとしても検索対象にはなりません。
まぁ、コード自体を検索する人はそんなにいないと思うし、もしいたらその人、書けてるんでね、紹介するコード。そんな方にはこの記事自体不要だろうから引っ掛からないとしてもたいした問題ではないですね。
登録方法
では、便利でオススメなCodePenの登録にいきましょう。
CodePenにアクセス
CodePen
右上「Sign Up」をクリック
「Sign Up with Email」をクリック
SNSでのアカウントでも登録できますが、今回はメールアドレスでのアカウント登録を。
フォームの入力
ボタンの下に、登録用のフォームが表示されます。
YOUR NAME：名前
CHOOSE A USERNAME：ユーザーネーム
EMAIL：メールアドレス
CHOOSE PASSWORD：パスワード
を入力します。
セーブ
プロフィール入力欄になりますが、ここはとりあえず何も設定しなくても大丈夫です。後からも変更できます。
ちなみに、メールアドレスでGravatarを設定していたら、CodePenのアバターにも反映されます。
そのまま「Save&Continue」をクリック。
以上で登録完了です！
ソースコードの貼り付け方
登録が完了したら、早速使ってみましょう！WordPressの記事に、CodePenで書いたソースコードを載せてみます。
まずは、右上「Create」から、「New Pen」を選択。
テキトーにソースコードを書いて・・・
あ、ちなみに左のギアアイコンで、Preprocessorも選択できます。CSSは、SCSSの選択もできるし、リセットCSS、ノーマライズCSSの選択もできます。
書けたら「Save」(Saveは途中でもこまめに行っておきましょう！)します。
コードが完成したら、右下にある「Embed」をクリック。
HTML(recommended)タブからコードをコピーします。ちなみにiframeでも埋め込みには問題ありません。WordPress Shortcodeだと、別途プラグインが必要になります。
埋め込む時は、コピーしたコードをテキストエディターに埋め込み。
できたっ！これでCodePenによるソースコードの埋め込み完了です。
See the Pen rZygKY by takio (@webmemo) on CodePen.
さいごに
ソースコードを紹介する記事は、間違ってたらまずいのでだいぶ調べて、考えて、無駄の無いように書こうとしますよね。
また、万一間違ったコードを書いたら、読んでくれた人にはご迷惑をおかけしてしまいますが指摘してもらえる事もあります。
そして、もっと良いソースコードがあった場合も教えてもらえたりします。
良い事だらけです。かなり成長できますね！
インプットしたら、アウトプットしましょう。まだ自分はアウトプットなんて・・・と思っていてもガンガンアウトプットしましょう！
そのアウトプットには、WordPress+CodePenがとっても便利ですよ。というお話でしたm(__)m
