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

ChromeBook

この記事では、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 + /
    • 1行コメントアウトする

WebMakerの便利機能:CodePenと連携

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

まとめ

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

コメント