ライブコーディングが手軽に出来るGoogleクロームプラグイン「Web Maker」の紹介です。

フロントエンドデベロッパーさんは、新しいライブラリやフレームワークを試す時にどうしていますか?

ローカル環境でhtmlを作成して書き始める人、
もしくはexpress等のマイクロフレームワークを使って 検証用の小さいシステムを作っている人も多いかもしれません。

上記の他に、Web上でライブコーディングが出来る codepenJSFiddle等のサービスが存在しますが、
それと同等のことがWebブラウザ上で実現出来るGoogleクローム プラグインが「Web Maker」です。

* Web Maker


Web Makerで出来ること

・ Googleクローム上でHTML, CSS, JSのライブコーディングが出来る
 

Web Makerのインストール

Web MakerはGoogle Chromeのプラグインなので、
こちらのGoogle Playストア内のページからダウンロード & インストールします。

インストールされると下のアイコンが追加されます

* アイコンをクリックすると、新しいページとしてWeb Maker (エディタ) が起動します


Web Makerの使い方

Web Makerはオンラインエディタサービスと同じように  HTML, CSS, Javascript,のコード編集用。
ブラウザのプレビュー用の 4ペインに それぞれ分かれています。

* HTMLは ' body ' タグ内、CSSは ' style ' タグ内 、Javascript は ' script 'タグ内に編集したコードが追加されます。

* Web Makerの画面構成
( コードを編集すると、プレビュー画面に反映されます * ページのリロードをする必用がありません ​)
 


デフォルトでは HTML, CSS, Javascript用のエディタが用意されていますが、
メニューから" CSS -> sass ",  " JS -> ES6 (Babel) "の様に編集する言語の切り替えも可能です。

* 編集する言語の切り替え

対応している言語

* HTML
- html, Markdown, Jade

* スタイルシート
- css, scss, sass, less, stylus

* Javascript
- js (ES5), ES6(babel), TypeScript, CoffeeScript

jQueryやBootstrap等の 外部ライブラリも'ADD LIBRAY'ボタンから導入することが可能です。

ライブラリの導入は ローカル内からファイルを読み込むのではなく、
ホスティングされているURL ( CDN )から呼び出す形になっています。

過去記事 : CDNサービス「unpkg」を使ってみる

* 外部ライブラリ追加画面 (  * 複数追加する場合は改行してURLを追加します ) 


また、編集したコードをタイトルを付けて保存することも出来るので 後で編集を再開することも可能です。
( タイトルをつけて 'save'ボタンをクリック、または ' ctrl + s ' で保存ができます  )

 * メニュー上部のopenボタンを押して保存したファイルの呼び出し ( command + o でも可能 ) 


* その他に用意されている機能

・プレビュー画面のスクリーンショット撮影機能 ( カメラボタンをクリック )
・編集中のコードをcodepenに移行 ( codepenボタンをクリック )
・コード編集のオートコンプリート ( js, css等の他にemmetにも対応 )
・編集しているコードをhtmlファイルとして発行 (矢印ボタンをクリック)
・コードペインのレイアウト変更 ( 4種類用意されています )

* chromeのプラグインなので、dev-toolがそのまま使えます

* 実際にWeb Makerを使ってみた動画


Summary

以上が Web Makerの紹介でした。

ライブリローディング機能がついているので、
' アニメーションライブラリを使ってコーディング '、'ドキュメント片手にフレームワークを試す '
なんて時はサクサク作業が進みます。

試したい時にすぐにコードを書き始めることが出来るので、
フロントエンドの開発をしている人や Webデザイナーさんに 大変役立ちそうなプラグインですね!

Web Maker : 公式HP / GitHubレポジトリページ

 


Socialシェアボタン

スポンサーリンク