GoogleChrome用エクステ「WebMaker」

GoogleChrome用エクステ「WebMaker」

デザインをしている時、「このデザイン、実はコーディング難しかったりしないか…?」と不安になる時があります。

できるにしてもここで工数が余計に取られてしまえば見積もりに変動が出てしまうし、コーダーさんの苦労を増やしてしまう…

コーディングの基礎はあるものの、「これは画像じゃなくてCSSでfloatと角丸にしてもらって制御できるっしょ」等と軽く想定してデザインして、実はコーディングはすごく難しかったなんてことも多々。(コーダーさんいつもごめんなさい…m(__)m

コーダーさんに聞いてしまえば早いのですが、自分の勉強のためにもコーディング方法を把握しておきたいこともあったり…。

でもDreamweaverとかエディタを立ち上げてhtmlとCSSを書いてファイル用意してプレビューして…というエディタとブラウザを行ったり来たりするのが面倒だなーという困ったちゃんが私です。

そんな自分の(笑)救世主がこちら

Web Maker

https://webmakerapp.com(公式)

GoogleChromeのエクステンション、「WebMaker」です。

Chrome上で動くのでブラウザごとの挙動チェックはもちろんChromeしかできないのですが、とりあえずの動きをサクッと見ることができるのでとても助かります。

何とJavaScriptもサクッとプレビューできちゃいます。

複雑さはないので特にこれといった説明はしなくても大丈夫かとは思いますが一応…。

こちらは画面全体図。

レイアウトはそれぞれ好きにいじれるのでとりあえず自分の環境ですが

向かって左側がエディタ陣エリア、右側がプレビューエリア。

左側のエディタで入力したコードがリアルタイムで右のプレビューに反映されます。

エディタ側の使用する言語などは設定で変更できます。

画面のメニュー周りから見ていくと、

① コードのタイトル

何も入れなければその日の日時になります。

② 左から順に

1.各種ライブラリを追加できます。

設定すればjQueryやbootstrapなどの動作確認も可能。

2.「NEW」の通り、新規作成。

3.こちらも「SAVE」そのまま、保存です。

4.3で保存したデータを呼び出します。

③ HTMLファイルへ保存。

CSSやJavascriptはHTMLと一緒に書き出されます。

④ CodePenで編集できます。

⑤ スクリーンショットを撮れます。

⑥ 使いやすいようにレイアウトできます。

⑦ 別窓でプレビュー。

⑧ 開発からのお知らせ。英語ですが頑張って読みます…。

⑨ 設定

設定もこんな感じに簡単そうです。

使える言語やフレームワークもこちらで以下から選べます。

これからもっと増えるといいなああああ。

・html
・markdown
・pug

・css
・scss
・sass
・less
・stylus
・atomic css

・js
・coffescript
・es6(babel)
・typescript

個人的にリアルタイムで動作確認できるようになったらいいなあ〜と思うのがPHP。

これはPHPの仕組み的に無理ですよねきっと。

しかしCSS、Javascriptだけでもリアルタイムプレビューできる、しかも軽い!のはとても素晴らしい₍₍ ◝(●˙꒳˙●)◜ ₎₎

開発者さんありがとう!ありがとう!

気になったらぜひ使ってみてください

にほんブログ村 ライフスタイルブログ クリエイティブライフへ




Webmakerカテゴリの最新記事

https://emmblo.com/wp-admin/widgets.php