My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

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

f:id:sntkk3:20170910151957p:plain

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

Chrome 「Web Maker」とは?
webmakerapp.com

Local版 CodePen的Webエディタ

Chrome拡張機能のWebエディタ、使い勝手はCodePenに似ています。
CodePen(※)同様、ソースコードの結果がブラウザでその場で確認できます。
コーディング時に通常たどる、
html、css、js の各ファイルをエディタソフトで作成・保存

結果をブラウザで逐次表示して確認
といった手間が省け、コーディングのスピードが格段に上がることが期待できます。

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

 f:id:sntkk3:20170910150933p:plain

便利な機能

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


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

 こんな感じでスクリーンショット画像が作られます。
 f:id:sntkk3:20170910155017p:plain


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

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


まとめ

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