kondoumh のブログ

- とあるソフトウェアエンジニアのめったに更新されないブログ -

CodePen で手軽に Web UI を推敲する

HTML / CSS / JavaScript の Playground は JSFiddle などが有名ですが、結構前から CodePen と言うサービスが普及しているようで。最近になって知りました。

codepen.io

Qiita でも最近記事内に CodePen を埋め込めるようになったりしています。

qiita.com

類似サービスのまとめ記事

www.webprofessional.jp

CodePen は Playground なので、大規模なプログラムを書くのには適していませんが、ライブラリの書き味とかを試すのに手元で環境を構築することなく開始できるのがよいところです。最近は、Web フロントエンドのメジャーなフレームワークは環境構築が一仕事になっており、余暇でやろうとしてもコードを書き始めるまでに力尽きることが多いため、お手軽さ重要です。

1枚の HTML ファイルに CSS/JavaScript を混ぜて書くぐらいの感じで*1、ライブプレビュー付きでコードを書けます。Popular なライブラリはクイックに追加できるようになっています。

f:id:kondoumh:20180422145301p:plain

CDN に配置されたライブラリの検索も楽ですので、好みのライブラリ・バージョンを使えます。

トランスパイラも選べます。

f:id:kondoumh:20180423011822p:plain

JavaScript のデバッグは Chrome の DevTools が使えますが、console.log で Console ウィンドウに情報を出せます。オブジェクトは JSON の Pretty print で出力されるので見易いです。 これなら、DevTools が使えない iPad の Safari や Chrome でもライブプレビュー、デバッグ出力を見ながらコードを書けますね*2

f:id:kondoumh:20180422155108p:plain

数年前、Meteor がまだ勢いがあった頃に HTML5 Canvas を駆使するメディア系ライブラリ KineticJS を使ってダイヤグラムエディタのおもちゃを書いてたのですが、その UI 部分を CodePen で動くようにしてみました。

See the Pen Konva-dia by kondoumh (@kondoumh) on CodePen.

KineticJS をフォークした Konva.js を使いました。

github.com

CoffeeScript 久々に触りました。コードエディタが一画面なので、これぐらいの長さのコードになるとちょっとつらいですね。リファクタリングも手打ちですし。

CodePen ではこういった Pen と呼ばれるコード片の他に、Project を生成して Web IDE としても使える模様です。

追記) CodePen で Picked Pens 入りしてました。

f:id:kondoumh:20180425010112p:plain

*1:実際、Pen を export すると、index.html / index.js / style.css ぐらいの単純構成です。

*2:今回の記事タイトルを「iPad でコードを書く - CodePen 編」にしようかとも思ったのですが、iOS のブラウザだと、テキストエディタの検索用キーショートカットが ⌘ + F になっててブラウザの方に吸われてしまい、長いコードは書きづらいということでやめました。