web-makerクロームエクステンション

web-makerクロームエクステンション

  • 2017-03-14  最終更新日:2017-03-14

すぐにJavascriptやcssを試して見てみたいというときがありますよね?そんなときはweb-makerが役立ちます!マークダウンも試せます、ちなみにクローム限定です。

すぐにjavascriptを試してみたいときや、cssやsassの表示を確認してみたいとき、markdownを試してみたいときライブラリも入っているので設定しておけばjQueryの動作確認やAngularJS、react、vueも試せます。cssのフレームワークも入っていますのでbootstrapやfoundationのcss動作確認も行えます。

こちらからダウンロードできます→ webmaker


スポンサーリンク


使い方

webmaker

インストールしたら右クリックのオプションでReplace new tab pageのチェックは外しておきましょう、タブを開くたびにwebmakerが開いてしまいます。 Preserve last written codeはチェック入れていますが、記入したものを記憶して起動時に最後に書いたものが表示されるようになっています。毎回新規に起動させたい場合はチェックを外しておくと良いです。

webmaker

使い方というほどでもないですがwebmakerをクリックすると開きます、 HTML、markdown、pugから選択できます、cssのところはcss、sass、scss、less、stylusから選べます、jsはcoffescriptやtypescriptやES6(babel)から選択できます。あとは入力するだけ。リアルタイムにプレビューが表示されます。簡単ですね。

webmaker

ライブラリもありますので試してみたいライブラリを選択しておけば読み込んでくれます。 いまのところjQuery、AngulrJS、React、Vue.js、Three.js、D3、Underscoreが選べますね。CSSはBootstrap、Foundation、Animate.css、Hint.cssが選べるようです。

さらにインポートやエクスポート機能があるので入力した状態を保存しておくことができます。CodePenでの編集もできます。

htmlファイルのダウンロードもできちゃいますから手軽に試して確認ができるのでとてもいいですね。

webmaker

設定画面でいろいろ設定できます。

参考になれば幸いです。


∞Tadashi Suyama∞

webmaker developer chrome
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
姫路セントラルパークに行ってきた感想

さて久しぶりになりましたが連休中に姫路市に行って参りました。太陽公園と姫路セントラルパークを2日かけて回りましたが姫路セントラルパークに関しては1日では足りないぐらいかもしれないです。ここは遊園...

12 May 2019

アイキャッチ
これは楽!iterm2パスワードマネージャー機能

さて今回はiterm2のパスワード管理についてです。そもそもこんな機能がついていること自体知らなかったのでこれ使って楽だなと思ったのでご紹介します。 iterm2の現在時点での最新バージョンは...

30 Mar 2019

アイキャッチ
JavaScriptライブラリデータベースのご紹介

さて今回はJSライブラリーのデータベースをご紹介したいと思います。知っている方が多いかと思いますがライブラリやプラグイン、フレームワークなど探す際には役立つサイトではないでしょうか。 どのJS...

28 Mar 2019

アイキャッチ
Web制作者が8年Chrome使ってきた中でおすすめの拡張機能

最近はEdgeもGoogle Chromeと同じChromiumベースでのブラウザとなりほとんどクローム(Chrome)状態ではあります。FirefoxとSafariぐらいでしょうか。Firef...

17 Mar 2019

アイキャッチ
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

webmaker developer chrome
フッターイメージ