WordPressの記事内にCodePenで書いたHTMLやCSSを埋め込んでみる

/

CodePen

CodePenはブラウザ上のエディタを利用してCSSやJavaScriptなどフロントエンドのコードを公開して共有出来るWEBサービスです。
また作成したコードは自身のBlogなど、外部のサイトにもソースと表示画面を一緒にした形で埋め込むことが出来ます。

サンプル

埋め込んだコードはこんな感じで表示されます。

See the Pen Hello CodePen by koltatt (@koltatt) on CodePen.

アカウント登録

CodePenを利用するにはアカウントの登録が必要です。アカウント登録はトップページ > Sign upから行います。
名前にはNameとUserName2つの入力欄がありますがUserNameはポストを作る際のアドレスに利用されるのでユーザーIDのような扱いになります。
またTwitterやGithubと連動させるとアバターの画像を共有させる事も可能です。

有料プラン

CodePenはFree planも用意されているのでコードを公開するだけなら無料で使えますが、プライベートモードが使えたりローカルのエディターからコードのアップロードが可能になる有料プランも用意されています。

コードを書く

CodePenで公開されるシングルページのアプリケーションはPenと呼ばれています。
Penを作成するには自分のアカウントページにログインしてNew Penを選びます。
新しいPenを作成するページにはHTML,CSS,JavaScriptの各エディタとソースを反映するためのViewのウィンドウが用意されているので、Viewウィンドウでソースコードの挙動を確認しながらアプリケーションを作成する事が出来ます。
書き終えたコードは画面左上のUntitledを好きな名前に変更してSaveを押して保存すれば、CodePenのサイト上で公開されます。

保存したコードの一覧は右上にあるアバターの画像を選択してYour Profileを選択する確認することが可能です。

Settings

Penの作成ページにあるSettingsを選ぶと作成するPenの設定をする事が出来ます。
SettingsではPenのタイトルやディスクリプション、タグを設定出来るほか、エディタで使用するSassやCoffeScriptなどのメタ言語やJQueryやBootstrapなどのライブラリを追加する事が出来ます。
またデフォルトではオートセーブやアップロードがオンになっていますが、SettingsのBehaviorからオン・オフの切り替えが可能です。

利用可能なプリプロセッサやライブラリ

Preprocessor

HTML

Haml, Slim, Markdown, Jade

CSS

LESS, Sass, SCSS, PostCSS, Stylus

JavaScript

CoffeScript, LiveScript, TypeScript, Babel

Library

JQuery, React ,Bootstrap…etc

ライセンス

CodePenで公開されたコードはサイト上のライセンスのページを見るとMITラインセンスとして扱われるようです。

In short: public Pens are MIT Licensed, private Pens are owned by you with no implicit license. Read on for more detail.
What License Is Code I Post to CodePen? – CodePen

有料プランで利用できるプライベート機能で書かれたコードの場合にはCodePen側からはラインセンスが付与されずコードの権利は書いた本人に帰属するようですが、気になる方は事前に確認しておいたほうが良いと思います。
What License Is Code I Post to CodePen?

コードの埋め込み

CodePenで書いたコードは外部のWEBページに埋め込むことが出来ます。
エディタページの右下にあるembedをクリックするとWEBページに貼り付けるためのコードが表示されるので、それをコピーして自分のBlogなどに貼り付けるとCodePenで表示されるような画面をを埋め込むことが出来ます。
ページに埋め込むための方式はHTMLのscriptタグを利用した使った方法が推奨されているようですが、iframeタグを使った方法を選択することも可能です。

WordPress Plugin

WordPressにコードを埋め込む場合にはプラグインによってショートコードを利用することも出来ます。

プラグインの使い方はWordPressのプラグインの新規追加から「CodePen Embedded Pens Shortcode」を検索してインストールを実行。CodePenのembedからWordPress shortcodeを選択して記事に貼り付ます。

ところでこのプラグインを利用するとコードは若干短くなりますがWordPressの記事にコード埋め込む手順がHTMLタグを利用した場合と殆ど変わりません。特にメリットが無いのでなんのために用意されたプラグインなのか最初は分からなかったのですが、どうやらサーバーやWordPress本体の機能が制限されていてHTMLでの埋め込みが上手くいかないユーザーのためのプラグインのようです。

そのためサーバーやWordPressの設定の権限を持っておらずHTMLでの埋め込みが出来ない場合にはプラグインは有効ですが、WordPressを利用している場合でも他の方法が使える場合には必ずしもプラグインを利用する必要は無いようです。

CodePen has a WordPress Plugin specifically for Embedded Pens. It allows you to use a WordPress Shortcode to embed them rather than HTML. That’s pretty much the whole point. You don’t need to use it if you use self-hosted WordPress, but it might make some things easier if you choose to.
Embeds & WordPress – codpen

CodePen Embedded Pens Shortcode/WordPress

感想

WordPress内でCSSやJavaScriptのコードを実行したいと思ったのですが、気にいるプラグインが無かったのでWEBサービスであるCodePenを使って見ました。
試しに使ってみた限りでは希望どおりの動作をしてくれますし、埋め込み側の表示でSassなどのメタ言語のコンパイルの実行の切り替えが出来たり機能も申し分ないです。

ただ外部のWEBサービスなのでサービスが終了したり、仕様変更が行われるなどで埋め込んだコードがうまく表示されなくなるなどのリスクがあります。そのため後々困らないように通常の記事の中にも重要な部分のコードを一緒に書いておいて、文章だけでも内容を把握出来るなどの対策をしておくと記事の寿命という点では安全かもしれません。