この記事では、ChromeBookの拡張機能「WebMaker」について紹介します。WebMakerを一言で表すと、ChromeのタブをCodePen風味のWeb開発ツールにする拡張機能です。ChromeBookでHTML/JS/CSSをどのエディタを使って書こうか迷っていました。VisualStudioやAptanaやEclipaseは重たいしインストールできないし、SublimeTextとかでしょうかと考えていましたが、WebMakerを使うのが一番お手軽で便利だと思います。どこが良かったのかこれから書いていきます。
WebMakerの特徴
WebMakerの特徴は次のとおりです。
- オフラインでも作業可能
- JS/CSSのライブラリを簡単に追加/削除できる
- Emmetが使える
- 便利なショートカットが準備されている
- CodePenと連携できる
- 次のプリプロセッサーに対応している
- html
- Markdown
- HTMLより簡単な構文で文章をマークアップする。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するためもの
- Jade
- JadeはHTMLを書くためのテンプレートエンジンです。
- 拡張子は、pug
- Markdown
- CSS
- SCSS
- Syntactically Awesome StyleSheet
- 拡張子は、scss
- CSSをプログラムっぽく書くことでコーディング効率化や保守性が上がる
- LESS
- 基本概念はSCSSと同様に、 CSSをプログラムっぽく書くことでコーディング効率化や保守性が上がる
- 拡張子は、less
- SCSS
- JS
- JSX
- Reactを書く際に、コードの記載を効率化するもの
- CoffeeScript or TypeScript
- Javascriptにコンパイルする系の言語たち
- JSX
- html
個人的には、オフラインでも作業可能な点とLESSやTypeScriptが使える点がいいですね。JSX(React)は、まだ私には早すぎます(笑)
拡張機能をインストールすると次のようなアイコンがブラウザに追加されます。
起動した画面は、次のような感じです。
WebMakerの便利機能:ライブラリ追加/削除
有名所のライブラリは、次の画面から追加することができます。追加できるライブラリの代表例は、次のものです。私も全部は抑えていないのですが、これだけつかえればひとまずは十分です。
- JS
- jQuery
- BootStrap
- Fundation
- Angular
- Vue
- Three
- D3
- React
- CSS
- BootStrap
- Hint
- Fundation
- SemanticUI
- Bulma
WebMakerの便利機能:サジェスト機能
コードを入力すると、候補を出してくれる。画像は、CSSでfontと入力した例。
WebMakerの便利機能:プリプロセッサ言語の切り替え
CSSの記載方法を帰る場合は、エディタのCSSを選択すると切り替える事ができます。
WebMakerの便利機能:ショートカット
WebMakerは次のショートカットが利用可能です。Emmetが使えたり、コメントアウトが簡単にできるのは大きいですね。
- Ctrl + Shift + 5
- プレビューページをリフレッシュ
- Ctrl+ F、Ctrl+ Opt/Alt + F
- 検索、検索+置換
- Tab
- Emmet変換
- Ctrl + /
- 1行コメントアウトする
WebMakerの便利機能:CodePenと連携
「Edit on Codepen」ボタンを押下するとWebMakerで書いたコードをCodePenにコピーできます。CodePen上にコピーできるとBLOGに公開するのも簡単になりますね(codepenアカウントを持っている場合)
まとめ
Chromeの拡張機能「Web Maker」について書いてきました。本気で書くならIDEを入れる必要がありますが、ライトな開発にはとても使いやすそうですね。特にChrome拡張機能の開発やHTML5プロフェッショナル認定試験の勉強に良さそうです。
コメント