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

サイト内検索

最近の投稿

アイキャッチ
リニューアルした水木しげるロードは夜がおすすめ

さて、先日14日にリニューアルした境港の通称鬼太郎ロードに行って参りました。鬼太郎に会える町として新たに妖怪を追加して約800mの通りに177体の妖怪ブロンズ像がお出迎え、ゾーン分けをして再配置...

17 Jul 2018

アイキャッチ
flexboxで簡単レイアウト

Flexbox(Flexible Box Layout Module)とは今時のレスポンシブに対応したレイアウトスタイルです。上下中央の配置や等間隔の配置、固定幅と可変幅の配置など使い方は様々、...

07 Jul 2018

アイキャッチ
ダウンモニターアプリのご紹介

今回はウェブサイトの監視アプリのご紹介です。以下からダウンロードできます。 * [Free Website Monitor](https://play.google.com/store/app...

30 Jun 2018

アイキャッチ
出雲日御碕灯台が思った以上に良かったのでご紹介

ここ最近は天気も良いので出雲日御碕(いずもひのみさき)神社に行ってみました。 出雲大社から約10kmぐらい先にあります。海沿いを車で15分ぐらい山道を進むと神社につきます。ほぼ一本道なので迷う...

25 Jun 2018

アイキャッチ
bootstrap4でのtable-responsiveをレスポンシブにする

最近はCSSフレームワークはBootstrap3からBootstrap4をメインにして作業しております。かなり使いやすいです。ほぼこのフレームワークだけで完結できる仕様になってきました。 さて...

16 Jun 2018

著者

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

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

タグクラウド

webmaker developer chrome
フッターイメージ