Intellij IDEAで簡単WEB画面作成
現在ちょっとしたWEBサービスを作っているのですが、
そのWEB画面をIntellij IDEAを使ったら思っていたより楽だったので紹介したいと思います。
IDEを使うまでもないって思われるかもしれませんが、便利なものは使おうというスタンスです☆
Step1.必要なものをそろえる
- 今回はIntellij IDEA12を使います。WebStormでも同じことができます。持ってない方はこちらから購入できます。
- Google Chromeの最新版
- Sassをインストール（インストール方法はググってね。）
Step2.Intellij IDEAにプラグインをインストールする
今回使うプラグインは下記の2つです。Preferencesからpluginを選択してインストールしてください。
Step3.必要な物はそろった！あとは書くだけ！
プロジェクトを新規に作成して、index.htmlとcss、scssフォルダーを作成します。
scssフォルダー内にstyle.scssというファイルを作成するとscssをFlie Watchersで監視するか尋ねられるので、add wathcerをクリックして監視対象にしてください。
PreferencesからFile Wachersを選択すると追加したscssの設定が確認できるので、cssの出力先をcssフォルダーになるように引数を変更しましょう。
試しにこんな感じで書いてみます。
するとcssフォルダー内にstyle.cssが作成されていることが確認できます。
このcssはscssに変更があるたびに自動更新されるので、開発中はcssを意識する必要ありません。
次にViewのLiveEditにチェックが入っていることを確認してindex.htmlをブラウザで開きます。
この状態でindex.htmlやstyle.scssに変更があると自動的にファイルが読み込まれブラウザに反映されます。
いちいち変更したらブラウザを更新するって手間が省けるので便利です。
以上で簡単ですがWEB画面作成のお話は終わりです。
ちょっとしたページを作成したいってときはお試しください。
つかったサンプルはGithubに上げました。
