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

Mar 14, 2017

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

2017-03-14 最終更新日:2017-03-14
webmaker developer chrome

すぐに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∞

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

最近の投稿

アイキャッチ
新しいことを続ける力を身につける方法

今回は新しく始めるきっかけや物事にどのように取り組むかを考えてみたいと思います。 結構新しいことを始めることって大変だと思います。なかなかの勇気と体力が必要かなと。 例えばダイエットとかを例...

24 Jun 2017

アイキャッチ
ドメインオーソリティの使い道

ドメインオーソリティーとは一言で言えばドメインの価値を数値化したモノです。ドメインに関するものなので中身については全く意味をなさないと思います。ドメインオーソリティーの数値が低いから低品質なコン...

17 Jun 2017

アイキャッチ
個人情報を一切収集しない検索エンジンDuckDuckGoとは?

ネット検索と言えば、日本ならGoogleやYahoo Japan!(検索エンジンはGoogle)経由が多いですね。Bingは少数派といったところでしょうか。 DuckDuckGoという検索エン...

10 Jun 2017

アイキャッチ
ブートストラップバリデータ使い方 - Validator - for Bootstrap 3

今回はフォームバリデータのご紹介です。前回のPHPMailerと関連がありますが、フロントエンドでのバリデートができます。 CSSのフレームワークBootstrap3をお使いの方ならすんなりと...

03 Jun 2017

アイキャッチ
PHPMailerの使い方

今回はあらゆるところで使われているPHP用のメール送信ライブラリphpmailerの使い方を紹介します。 脆弱性がPHPMailer5.2.18より下のバージョンで発生するので新しいバージョン...

28 May 2017

著者

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

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

タグクラウド

webmaker developer chrome
フッターイメージ