ChromeBookでHTML/JS/CSSを書くならWebMaker

この記事では、ChromeBookの拡張機能「WebMaker」について紹介します。WebMakerを一言で表すと、ChromeのタブをCodePen風味のWeb開発ツールにする拡張機能です。ChromeBookでHTML/JS/CSSをどのエディタを使って書こうか迷っていました。VisualStudioやAptanaやEclipaseは重たいしインストールできないし、SublimeTextとかでしょうかと考えていましたが、WebMakerを使うのが一番お手軽で便利だと思います。どこが良かったのかこれから書いていきます。

WebMakerの特徴

WebMakerの特徴は次のとおりです。

1. オフラインでも作業可能
2. JS/CSSのライブラリを簡単に追加/削除できる
3. Emmetが使える
4. 便利なショートカットが準備されている
5. CodePenと連携できる
6. 次のプリプロセッサーに対応している
   • html
     • Markdown
       • HTMLより簡単な構文で文章をマークアップする。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するためもの
     • Jade
       • JadeはHTMLを書くためのテンプレートエンジンです。
       • 拡張子は、pug
   • CSS
     • SCSS
       • Syntactically Awesome StyleSheet
       • 拡張子は、scss
       • CSSをプログラムっぽく書くことでコーディング効率化や保守性が上がる
     • LESS
       • 基本概念はSCSSと同様に、 CSSをプログラムっぽく書くことでコーディング効率化や保守性が上がる
       • 拡張子は、less
   • JS
     •  JSX
       • Reactを書く際に、コードの記載を効率化するもの
     • CoffeeScript or TypeScript
       • Javascriptにコンパイルする系の言語たち

個人的には、オフラインでも作業可能な点と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 + /
  • １行コメントアウトする

WebMakerの便利機能：CodePenと連携

「Edit on Codepen」ボタンを押下するとWebMakerで書いたコードをCodePenにコピーできます。CodePen上にコピーできるとBLOGに公開するのも簡単になりますね（codepenアカウントを持っている場合）

まとめ

Chromeの拡張機能「Web Maker」について書いてきました。本気で書くならIDEを入れる必要がありますが、ライトな開発にはとても使いやすそうですね。特にChrome拡張機能の開発やHTML5プロフェッショナル認定試験の勉強に良さそうです。