プラカンブログSTAFF BLOG

2017.09.05

Chromeでライブコーディング、Web Makerの使い方

htmlやJSやCSSを手軽にテストしたい時、CodePenやJSFiddleなどのサービスを利用するでしょう。それらと同等の事が「Chromeだけで」できるんです!しかもオフラインでも動いて超高速!今回はそんなChromeだけでライブコーディングができる「Web Maker(chromeアドオン)」の使い方の紹介をします!

Chromeアドオンの「Web Maker」とは

CodePenやJSFiddleさえも使っていない方のために簡単に説明しますと、htmlやJSやCSSをテストする時、昔であれば、エディタを開いて、htmlファイル、JSファイル、CSSファイルを用意して、場合によってはjQueryやSCSSの準備をして、ブラウザを開いてテストしていたと思います。

そんなめんどくさい作業が、chromeの1画面だけで完結できるのが「Web Maker」です。プレビューもリアルタイムに更新されるので、わざわざ別ブラウザで更新をかける必要もなく、作ったソースはダウンロードもできるし、さらにCodePenやJSFiddleと違い、オフラインでも動くのでいつでもどこでもテスト可能なのです!

「Web Maker」のダウンロードとインストール

Web MakerはGoogle Chromeのアドオン(プラグイン)です。こちらからダウンロード・インストールします。

インストールが完了すると、以下のようにChromeにアイコンが追加されます。このアイコンをクリックするだけで、新規タブが開きWeb Makerを起動する事ができます。

「Web Maker」のインターフェイス

Web Makerを起動すると上記の画面が(新規タブ)立ち上がります。ご覧の通り「HTML」「CSS」「JS」「プレビュー」の画面に分かれています。説明不要だと思いますが、それぞれの画面にソースを入力する事で、プレビューエリアにその内容が、随時反映されるという仕組みです。

HTMLは「bodyタグ内」CSSは「styleタグ内」Javascript は「scriptタグ内」にコードが追加される事になります。つまりHTMLの場合、DOCTYPEやbodyなどの記述は不要で、いきなりbodyの中身から書き始めてよいという事です。CSSやJSも同様です。

各ボタンの説明

画面右下にあるボタンを説明します。

ダウンロード

ダウンロードボタンを押すと、作成したHTMLファイルがダウンロードされます。CSSやJSはHTML内に記述された状態になります。

CodePen

CodePenボタンを押すと、今まで記述したソースをそのまま、CodePenへ移行してくれます。引き続きCodePenで編集したり、書いたソースを公開するのに便利です。

画面キャプチャ

これはシンプルに画面をキャプチャする機能だと思うのですが、執筆現在はキャプチャがうまく機能していない状態です。MacやWindowsの機能で普通にキャプチャすればいいので、あまり使わない機能ではないでしょうか。

画面レイアウト変更

HTML、CSS、JS、プレビュー画面のそれぞれのレイアウトを変更できます。自分の作業しやすいレイアウトに変更しましょう!

Whats new

Web Maker自体の更新情報です。気になる人はチェックしてみましょう!

Web Makerの「設定」

現時点では上記のように、インデント、デフォルト言語、テーマ、フォント、フォントサイズ、Key bindings、などが設定ができるようです。お好みの設定にしておきましょう。

WebMakerの保存機能やライブラリの追加

画面右上にあるボタンで、作成したソースを保存したり、再度開いたりできます。「SAVE」で保存し、今までに保存したものを開く際は、「OPEN」ボタンを押せば以下のような一覧が表示され、いつでもアクセスできます。

また「ADD LIBRARY」でjQueryやBootstrapなど有名どころのライブラリを使う事ができます!

Web Makerで使える言語

HTMLはもちろんEmmet対応で、Markdown・Pugを選べます。

CSSは入力補完機能つきで、SCSSやSASS、LESS、Stylus、Atomic CSSを選べます。

JSも入力補完機能つきで、CofeeScriptや、ES6(Babel)、TypeScriptが使えます。

Chromeのアドオン「Web Maker」はフロントエンド開発に必須のツール

多機能かつ高速な「Web Maker」はオフラインで使える事を考慮すると、フロントエンド開発者は必ずインストールしておきたいツールのひとつだと言えるでしょう!

Web Maker公式サイト

この記事は、HISADA が書きました。