codepen-useful-1

ブラウザ上で、手軽にWebプログラミングを書いて実行できるコードエディタ「CodePen」をご存知の方は多いと思います。

使えば使うほど、このサービスが多機能であることに気付くわけですが、特に便利だと感じるちょっとマニアックな使い方だけをピックアップしてみました。

一応、公式のドキュメントには書いてあるのですが、「翻訳が面倒な人」や「そもそも知らない」…という人に向けて紹介しておきます。


「ソースコード」のホスティング機能!

「CodePen」では、簡単に「HTML/CSS/JavaScript」を書いて「実行&保存」できますが、書いたコードはどこからでも参照することができます。

例えば、何かコードを書いて保存すると専用の「プロジェクトURL」が自動的に発行されます。

codepen-useful-2

このURLの末尾に、「.js」「.css」「.html」と追記するだけで参照できるようになります。


JavaScriptファイルを参照したければ、こんな感じになります。

// 元のURL
http://codepen.io/webhacck/pen/rxYJgz

// JavaScriptファイルを参照するURL
http://codepen.io/webhacck/pen/rxYJgz.js


このURLをブラウザで開くと、コードを参照できるのが分かります。

codepen-useful-3

つまり、「CDN」経由でコードを利用するような感じになるわけですね。


「scriptタグ」などを使えば、どこからでも再利用できます。

<!-- 「scriptタグ」を使った例 -->
<script src="http://codepen.io/webhacck/pen/rxYJgz.js"></script>

同じように、CSSやHTMLファイルも参照可能で、「.markdown」「.sass」「.cofeescript」などにも対応しています。

URLの拡張機能丨公式ドキュメント


JSONPによる「プロジェクト情報」取得機能!

「CodePen」で作られたプロジェクトは、「oEmbed」を使って詳細な情報をJSONPで取得することが出来ます。

取得するためのURLは以下のとおり。

http://codepen.io/api/oembed/?url=【プロジェクトURL】&format=js&callback=callback

「プロジェクトURL」は、CodePenエディタで保存した時に発行されるURLのことです。


例えば、以下の「プロジェクトURL」だと…、

http://codepen.io/webhacck/pen/xVEdzQ


こんな感じに記載することができます。

http://codepen.io/api/oembed/?url=http://codepen.io/webhacck/pen/xVEdzQ&format=js&callback=callback


このURLをブラウザで開くと、JSONPで情報が取得できているのが分かります。

codepen-useful-4

取得できる情報としては、以下のようなモノがあります。

  • プロジェクト名
  • 開発者名
  • 開発者ページURL
  • サムネイル画像URL
  • 埋め込み用タグ
  • etc...

このような情報を活用すれば、CodePenの検索サイトやポートフォリオページ…など、アイデア次第で面白いWebコンテンツを制作することが出来るでしょう。

oEmebed詳細丨公式ドキュメント


定型文が保持できる「テンプレート」機能!

コードを書くときに、毎回決まった「構文」を書いている人に便利な機能がコチラ!

例えば、以下のような「h1タグ」と「リスト構造」を毎回最初に書く必要があるとします。

codepen-useful-5


いつも通り、コードを保存する際に「TEMPLATE?」へチェックを入れて保存するだけでOK!

codepen-useful-6_2


これで、次回から新規にコードを書く際に、先ほど保存した「テンプレート」を選択して書けるようになるので便利です。

codepen-useful-7

構文だけでなく、例えば毎回「Bootstrap」を読み込んで使うような人も「テンプレート化」することで、即座にコードを書き始めることが出来るので非常に快適です。

テンプレート機能詳細丨公式ドキュメント


「CodePenボタン」を生成する機能!

これは、Webサービスやアプリなどに組み込んで使うケースが多いと思いますが、任意のソースコードを「CodePen」のエディタへ流しこむような処理を実現する「CodePenボタン」が簡単に作れます。

例えば、以下のようなコードがあったとします。

<!-- HTMLコード -->
<h1>Hello, World!</h1>


/* CSSコード */
h1 { color: red }


// JavaScriptコード
var num = 12345; alert( num );

これを、HTMLの「formタグ」を使って「CodePenボタン」を作ってみたいと思います。


方法は簡単で、「POST」メソッドを使い、action要素には以下のURLを指定します。

http://codepen.io/pen/define


すると、こんな感じの構文になるでしょう。

<form action="http://codepen.io/pen/define" method="POST" target="_blank">

    <input type="hidden" name="data" value='【ソースコード】'>
    <input type="submit" value="Create New Pen">

</form>

【ソースコード】の箇所に、流し込みたいコードを当てはめればOKです。


先ほどのコードを当てはめるとこんな感じ!

<input type="hidden" name="data" value='{

    "title": "New Pen!",
    "html": "<h1>Hello, World!</h1>",
    "css": "h1 {color: red}",
    "js": "var num = 12345;alert(num);"

}'>


これをブラウザで開くと、「CodePen」ボタンが表示されるのでクリック!

codepen-useful-8


すると、コードが自動的に「CodePenエディタ」に送信されて実行されます。

codepen-useful-9

実際の開発環境では、HTMLに任意のコードを挿入するよりも、JSONなど別ファイルから指定する方が現実的かと思います。

CodePenボタンの詳細丨公式ドキュメント


まとめ

今回ご紹介したように、「CodePen」には意外と便利な機能が多く提供されており、今でも地味にバージョンアップが活発に行われています。

まだまだ紹介できていないユニークな機能もあるので、もしご興味ある方はぜひ「ドキュメント」をチェックしてみることをオススメします!

「CodePen」公式サイト