東京のWeb制作会社LIGLIGならできるおもしろいこと。フロントエンドシェアこんにちは、デザイナーの王です。皆さんはどうやってWebページを組んでますか?僕は、HTMLの骨組みをひと通り書き終え、それからChromeで直接CSSを書いていきます。個人的には、ChromeはCSSをリアルタイムでいじれるので便利です。この手法で組むと、CSSを追加、編集するたびに、いちいちコピペを連発しなければならない。その後ちゃんとコピペしきれているか別タブで確認して・・・。GOODです!「編集したCSSをそのまま保存できたらなあ。」と誰もが思うことでしょう。ブラウザのセキュリティ上、そのような機能は永遠に提供されないと思われますが。GitHubhttps://github.com/NV/chrome-devtools-autosaveまずは、下のデモ動画をご覧ください。完全入門ガイド!」をぜひ一読ください。Autosave」のインストールと設定方法について紹介していきます。インストールさっそくインストールから見ていきましょう。ウェブストアからインストールしましょう。https://chrome.google.com/webstore/detail/devtools-autosave/ステップ2この拡張を使うためには、Node.js(サーバープログラム)をインストールしておく必要があります。落としてない方は、インストールしておきましょう。http://nodejs.org/※Node.jsについて詳しく知りたい方は、下記ージを一読することをおすすめします。日本語版http://www.ibm.com/developerworks/jp/opensource/library/os-nodejsステップ3この拡張を使用するためには先ほどインストールしたNode.jsを利用したモジュールが必要ですので、それをインストールします。Windowsコマンドプロンプトを右クリックして、「管理者として実行」を選んで開きます。入力してEnterを押して実行します。入力してEnterを押して実行します。管理者のパスワードが聞かれますので、入力して再度Enterを押します。Chrome側の設定このあと、Chrome側で拡張の設定をおこないます。Autosave」という拡張が新しく追加されてるはずなので、それの「オプション」ボタンをクリック。するとこのような画面が出てきます。ここで、どこのページを監視(自動保存)するか、及び監視されたページのCSSをどこに保存するのかを設定します。※「Match」のところで正規表現が使えますが、別に使わなくても大丈夫です。使用するこれで使用するための全ての準備が整いました。使い方は簡単、まずNode.jsのサーバーを起動します。いうコマンドを入力して実行します。あとは、インストールのステップ3で設定した監視されてるサイトをロードしてCSSを編集するだけで勝手に保存されちゃいます。※自動保存を終了したいときは、ターミナル(コマンドプロンプト)を閉じればいいだけです。Generator」というサービスをご存知ですか?このツールを使うと、HTMLからCSSセレクターを抽出して、CSSに出力してくれるんです!HTML樹の構造順、上から下まで、コメント付きで順番に出力してくれるところが何とも素晴らしい!実際に手でCSSを記述する前に一回こいつを通して、後で要らなくなったセレクターを削除する、という方法を取れば更に仕事が捗るはず。まとめ便利な時代になって来ましたね。一度その甘い蜜を吸ってしまうともう元には戻れません。皆さんもこれらのツールをフルに生かして、遊ぶ時間をもっともっと増やしてストレスフリーでいきましょう!ちなみに、このツールは表題ではCSSを自動保存としましたが、実はJavaScriptもいけます。いうことで、もし何か不明な点があれば、コメントを頂ければと思います。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。