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

サイト内検索

最近の投稿

アイキャッチ
macOS Mojaveで特定のアプリが動作しなくなったときの設定

今回はMacトラブルについてです。今まで使っていた人はおそらくこの設定は知っている人が多いかもしれませんが、初めてMacを使った人はこれで悩んでいる人が多いかもしれません。今回はロジクールマウス...

09 Jan 2019

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年もよろしくお願いします。 今年の初詣は寒波の影響でかなり寒かったですが比較的天候も良く人も多かった気がしますね。 本年は熊野大社に大晦日深夜の初詣にい...

04 Jan 2019

アイキャッチ
年末年始のお知らせ

今年ももう終わりですね。 当事務所は12/29〜1/6までお休みでございます。 1/7日から営業開始いたします。 よろしくお願いします。 ### 年末年始の営業時間 12/29-1...

29 Dec 2018

アイキャッチ
鳥取砂丘いくならおすすめの砂の美術館

先日の3連休に鳥取砂丘近くにある砂の美術館に行ってきました。この日はたまたまイベント期間中で3Dプロジェクションマッピングも見ることが出来、30分おきに上映していたので実際は10分弱ぐらいの映像...

28 Dec 2018

アイキャッチ
ワードプレスでグーグルマップを簡単に表示させるプラグイン

さて、今回は簡単に地図を設置できるプラグインのご紹介です。あまりにも有名なので説明が不要かと思いますが、簡単に説明しますと要は地図表示です。私はグーグルマップをプラグインでの表示はしたことなかっ...

19 Dec 2018

著者

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

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

タグクラウド

webmaker developer chrome
フッターイメージ