読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

オフラインで使えるchromeアドオンの「Web Maker」が超高速!!

スポンサードリンク

フロントエンド制作時のテストや社内での勉強会などはcodepenを使用しますが、どうしてもオンラインは速度についてはオフラインには劣ります。

そのため時には簡単なコードのテストはhtmlファイルを作り必要であればjQueryを読み込んで...という非常に非効率な作業をしていました。

オフラインで使えるchromeアドオン「Web Maker」

今日紹介するWeb Makerはそんな自分の悩みを解決するchromeアドオンです。

codepenのUIに近い設計でオフラインで使用できる点が大きな特徴です。

便利な機能

codepenでできることはほぼWeb Makerでできます。

HTML

f:id:funclur:20170314002909p:plain

htmlはmarkdown形式、もしくはpugに選択可能です。

CSS

f:id:funclur:20170314002857p:plain

cssのメタ言語も網羅しています。
scssは個人的に必須です。

JS

f:id:funclur:20170314002858p:plain

Coffee Script、ES6、Type Scriptから選べます。

ADD LIBRARY

f:id:funclur:20170314002914p:plain

右上のADD LIBRARYからライブラリを追加できます。

jQueryはもちろんのことreactやangularなどのライブラリも簡単に追加することができます。
タブではなくurlから直接読み込むこともできます。

保存

f:id:funclur:20170314002900p:plain

保存することも可能です。ブラウザに保存できます。
saveした後にOPENでタイトルをクリックすれば保存した状態で開かれます。

f:id:funclur:20170314002902p:plain

また、タイトルは左上に表示されておりクリックすることで編集できます。

ダウンロード

f:id:funclur:20170314002908p:plain

作成したコードをファイルにしてダウンロードができます。

edit on codepen

edit on codepenをクリックすることでcodepenに反映することができます。

オンラインでソースを共有したい時もコピーなどせず楽に移行することができますね。

Take screenshot of preview

こちら使うかわかりませんが表示された要素をキャプチャすることができます。
使い方によっては必要となることもあるでしょう。

4つのviewモード

viewモードは4つ用意されています。
codepenはフルスクリーンにするのに認証が必要だったりめんどくささがありますがWeb Makerは1クリックで可能です。
しかもその状態で保存すれば開いた時も保存したviewモードで開かれます。

Settings

f:id:funclur:20170314002904p:plain

設定では、インデント、インデントサイズ、テーマ、fontsize、editorのKey bindingsが選べます。

まとめ

とにかく多機能でありながらシンプルで高速な開発環境が実現できるchromeアドオンの「Web Maker」

これからのフロントエンドに必須のツールとなるのではないでしょうか。

下記は、Web Maker制作者の翻訳記事です。

CodePenライクなChrome拡張「Web Maker」でフロントエンド開発が捗る - WPJ

Web Makerアドオンのインストールはこちら
Web Maker - Chrome Web Store