【Chrome拡張】Local版 CodePenのようなエディタツール、「Web Maker」を使ってみました

Chrome拡張「Web Maker」の機能・特徴について

Chrome 「Web Maker」とは？
webmakerapp.com

Local版 CodePen的Webエディタ

Chrome拡張機能のWebエディタ、使い勝手はCodePenに似ています。
CodePen(※)同様、ソースコードの結果がブラウザでその場で確認できます。
コーディング時に通常たどる、
html、css、js の各ファイルをエディタソフトで作成・保存
↓
結果をブラウザで逐次表示して確認
といった手間が省け、コーディングのスピードが格段に上がることが期待できます。

CodePenと違い、自身のブラウザ内(ローカル環境)で利用できるのがメリット、
ネットワークに接続してないくてもコード結果がプレビューできる、
Local版 CodePenのような存在です。

　

便利な機能

1) ファイルエクスポート機能
　入力した内容は、htmlファイルとして出力可能です。

2) プレビュー結果のスクリーンショット機能
　プレビュー結果を pngファイルで生成・保存できます。

　こんな感じでスクリーンショット画像が作られます。
　

3) CodePenとの連携機能
　「Edit on CodePen」機能により、「Web Maker」で入力した結果がそのままCodePenに反映される点が便利です。
　この機能により、Localの「Web Maker」でいったん作成・保存しておいたコードを、後から、CodePenで編集・公開するといったこともできますね。

　
　※CodePenとは？
　　8/30付の以下記事をご参照ください。
　　times-diary.hatenablog.com

まとめ

Web制作のお役立ちツールとして、ぜひインストールしておきたい Chrome拡張ツールの一つだと思いました。