Other

オフラインでライブコーディング・コード管理ができる!!
chromeの拡張機能【Web Maker】

更新日:

Web Maker
今回は、オフラインでライブコーディングやコード管理がchrome上で出来る、chrome拡張機能「Web Maker」を紹介します。

chromeの拡張機能は便利なものが沢山ありますが、Web MakerはWeb制作や開発において、欠かせない存在だと思います。

世のプログラマー御用達のCodePenの公式ブログでも、「CodePenをオフラインで使いたいならWeb Makerを試してみてね!」と公言しています。

実際の導入方法や、使い方、便利なポイントなど詳しく見ていきたいと思います!!




Web Makerとは?

CodePenを使っている方ならお分かりだと思いますが、Web Makerはブラウザ上でHTML,CSS,Javascriptのコーディングをリアルタイムで行うことが出来る環境のことです。

このような環境の事を、プレイグラウンドと言ったりします。

コーディングすると、画面上にリアルタイムにコード内容が反映され、HTMLの枠組みや、CSSでのレイアウト、JavaScriptでの動きなどを確認することが出来ます。

また、作成したコード内容を保存しておいて、部品ごとに使えるようにして置いたり、備忘録としても使えます。

CodePenでは作成したコードを公開できるので、世界中のプログラマー、クリエイターのコードを見たり、自分のコードを見せたりすることが出来ます。

Web Makerの凄いところは、オフラインで使える所です。

CodePenはWebサービスなので、もちろんインターネット環境が必要になりますが、Web Makerはchromeブラウザの拡張機能なので、ネットに繋がっていなくても使うことが出来るのです。

ネット環境が無かったり、接続状況が良くない時などでもスピーディーにプレイグラウンド環境でのコーディングが可能なのです。

ちょっとしたコードレビューはもちろん、プレゼン中のコードプレビュー、ライトニングトークなどにも活躍すること間違いなしです。

拡張機能追加手順

まずは、Web Maker公式ページに飛びましょう。

https://webmakerapp.com/

公式ページに飛ぶと、「ADD TO CHROME」がありますのでクリックしましょう。

WebMakeraddchrome

クリックするとポップアップが表示されますので、「拡張機能を追加」
をクリックします。

拡張機能を追加する画像

拡張機能を追加すると、「Welcome to Web Maker」という歓迎のお言葉とともに機能の説明が書いてあるモーダルウィンドウが開かれます。

welcomeWebMaker

これで拡張機能の追加は完了になります!!

モーダルの説明を左から一つづつ見ていきましょう。

①矢印アイコンのカード

Web Makerを立ちあげる時はブラウザ右上のアイコンを押して下さいとあります。

拡張機能を追加するとchromeブラウザのアドレスバー右側当たりに、WebMakerのアイコンが追加されていることと思います。

これで、chromeさえ開けばWebMakerを使うことができます。

②歯車アイコンのカード

設定やカスタマイズなどの変更は画面右下の歯車マークを押して下さいとあります。

初めは初期設定で良いと思いますが、慣れてきたら自分の使いやすいようにカスタマイズ、設定していくといいかもしれません。

③Twitterアイコンのカード

WebMakerの公式Twitterをフォローして、最新の機能や情報をみよう!とあります。

今後使って行くことを考えると、フォローしておくといいかと思います。




使い方

では、ここからは使い方を見ていきましょう。

コーディング

使い方サンプル

試しに、「Hello Would」が表示されるHTML&CSSと、「Hello Would」をconsole.logで表示する簡単なコードを書いてみました。

オフラインなので、書いた瞬間即座に反映されます。レスポンス抜群ですね。

今の例ですと、画面が左右に分かれています。

左側がコードを書く画面、右側がコードの結果表示画面になっています。

コードを書く画面は、上からHTML,CSS,JavaScriptに分かれています。

それぞれ大きさを変更することが出来るため、パート事にコードを書いていくのもやりやすいです。

JavaScriptのコンソール画面は、右下のボタンを押すとアコーディオンで出てきます。

console

ちゃんと「Hello Would」が表示されている事が確認できます。

コンソールでのデバッグもやりやすいですね。

コードの保存

作成したコードは簡単に保存することが出来ます。

まずは、作成中のコードに名前を付けましょう。

名前は画面上部にデフォルトのもの「Untitled mm-dd-hh:mm」が記載されていますので、
自分が分かるような名前に変更しておくと、後で開く時にわかりやすいと思います。

今回の画面だと「Untitled 12-12-13:48」になります。

デフォルトの日付け

今回、このコードを「test」として保存します。

画面右上にある「SAVE」ボタンをクリックするとあっとゆう間に保存完了です。

SAVE LOADバー

ちゃんと保存されているか、「LOAD」ボタンで確認してみましょう。

「OPEN」ボタンを押すと画面右側から保存中のコード一覧が表示されます。

LOADテスト

先ほど保存したコードがちゃんと保存されている事が確認できます。

ココが便利!!

プリプロセッサーのサポート

プリプロセッサー参考例

プリプロセッサーとは、凄く簡単にゆうと、ど〇えもんのひみつ道具「ほんやくこんにゃく」のようなものです。

コード入力画面のHTML、CSS、JavaScriptそれぞれの横に「▼」プルダウンメニューがあると思います。
そこをクリックすると各対応のプリプロセッサーを利用することができます。

Markdown, Pug,SCSS, LESS, Atomic CSS, JSX, CoffeeScript, TypeScriptに対応しており。特に設定することなく、利用したいプリプロセッサーを選択するだけですぐに利用できます。

ライブラリの追加が簡単にできる

画面右上の「ADD LIBRARY」をクリックすると、ライブラリの追加画面が表示されます。

ライブラリの追加

みなさんお馴染みの、jQuery等のJavaScriptライブラリーはもちろんのこと、Bootstrap、Animate.css、今ではデザイン観点では欠かせないFontAwesome等のCSSライブラリーも利用することができます。

Bootstrap4βにも対応していますね!!

さらに、セレクタメニューに載っていないライブラリも、テキストエリアに入力すると自動で候補が表示されます。

CodePenとの互換性

フッターツールバー

画面下のCodePenのロゴマークをクリックすると、今まで記述したソースをそのままCodePenへ移行してくれます。CodePenでは書いたコードを公開できるので、引き続きCodePenで編集してそれを公開したりなど出来ます。

ダウンロード機能

同じく画面下のCodePen左側の下矢印ボタンをクリックすると、コーディングしていたソースをHTMLファイルとしてダウンロードすることが出来ます。CSSとJavaScriptはHTMLの中に書かれた状態で吐き出されます。

まとめ

Web Makerは今後フロントエンドや講演会などでかなり活躍しそうです。

中でもオフラインで使える強みはかなり大きのではないかと思います。

学校・勉強会でコードの書き方を説明する時、実際にコーディングしながら説明する時など。特に通信環境に不安がある時は大活躍しそうです。CodePenとの互換性もあるので、今までCodePenを使っていた方も、WebMakerを使ってみてはいかがでしょうか。

また、普段のWeb制作の学習用にもかなり便利だなと思います。
HTML、CSS、JavaScriptの勉強はしやすいですし、ちょっとしたコードテストなどもプレイグラウンドで試せるので、毎日の練習用エディターとして使うといいのかな思います。

さらに、便利機能として紹介したプリプロセッサーや、プラグインなども初期設定不要ですぐにどのように動作するのかが試せるので、プロジェクトのプロセッサー、ライブラリ選定なども行うことができると思います。

また、コンポーネント単位や、部品単位、よく使うパーツごとなどに分けてコードを保存しておけるのも素敵です。

「Web Maker」

フロントエンドのみなさんはもちろん、そうでない方もぜひ使ってみていただきたい!!




-Other

Copyright© IT未経験のバンドマンがプログラマーを目指して。 , 2018 All Rights Reserved.