実はスゴイ「CodePen」の隠れた必殺機能の使い方をまとめてみた!ブラウザ上で、手軽にWebプログラミングを書いて実行できるコードエディタ「CodePen」をご存知の方は多いと思います。使えば使うほど、このサービスが多機能であることに気付くわけですが、特に便利だと感じるちょっとマニアックな使い方だけをピックアップしてみました。一応、公式のドキュメントには書いてあるのですが、「翻訳が面倒な人」や「そもそも知らない」...という人に向けて紹介しておきます。「ソースコード」のホスティング機能!「CodePen」では、簡単に「HTML/CSS/JavaScript」を書いて「実行&保存」できますが、書いたコードはどこからでも参照することができます。何かコードを書いて保存すると専用の「プロジェクトURL」が自動的に発行されます。このURLの末尾に、「.js」「.css」「.html」と追記するだけで参照できるようになります。JavaScriptファイルを参照したければ、こんな感じになります。JavaScriptファイルを参照するURLhttp://codepen.io/webhacck/pen/rxYJgz.jsこのURLをブラウザで開くと、コードを参照できるのが分かります。「CDN」経由でコードを利用するような感じになるわけですね。「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で情報が取得できているのが分かります。取得できる情報としては、以下のようなモノがあります。ページURLサムネイル画像URL埋め込み用タグetc...このような情報を活用すれば、CodePenの検索サイトやポートフォリオページ...など、アイデア次第で面白いWebコンテンツを制作することが出来るでしょう。oEmebed詳細丨公式ドキュメント定型文が保持できる「テンプレート」機能!コードを書くときに、毎回決まった「構文」を書いている人に便利な機能がコチラ!例えば、以下のような「h1タグ」と「リスト構造」を毎回最初に書く必要があるとします。いつも通り、コードを保存する際に「TEMPLATE?」へチェックを入れて保存するだけでOK!これで、次回から新規にコードを書く際に、先ほど保存した「テンプレート」を選択して書けるようになるので便利です。構文だけでなく、例えば毎回「Bootstrap」を読み込んで使うような人も「テンプレート化」することで、即座にコードを書き始めることが出来るので非常に快適です。テンプレート機能詳細丨公式ドキュメント「CodePenボタン」を生成する機能!これは、Webサービスやアプリなどに組み込んで使うケースが多いと思いますが、任意のソースコードを「CodePen」のエディタへ流しこむような処理を実現する「CodePenボタン」が簡単に作れます。以下のようなコードがあったとします。);これを、HTMLの「formタグ」を使って「CodePenボタン」を作ってみたいと思います。方法は簡単で、「POST」メソッドを使い、action要素には以下のURLを指定します。http://codepen.io/pen/defineすると、こんな感じの構文になるでしょう。Pen"></form>【ソースコード】の箇所に、流し込みたいコードを当てはめればOKです。12345;alert(num);"}'>これをブラウザで開くと、「CodePen」ボタンが表示されるのでクリック!すると、コードが自動的に「CodePenエディタ」に送信されて実行されます。実際の開発環境では、HTMLに任意のコードを挿入するよりも、JSONなど別ファイルから指定する方が現実的かと思います。CodePenボタンの詳細丨公式ドキュメントまとめ今回ご紹介したように、「CodePen」には意外と便利な機能が多く提供されており、今でも地味にバージョンアップが活発に行われています。