Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

HTML5、CSS3、JavaScriptがリアルタイム編集できる!軽量HTMLエディタ「Liveweave」

みなさんは、HTMLやCSSのコーディングには何を使っていますか?

デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。

デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。

しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。

コードを修正→ファイルの保存→ブラウザで更新→確認

この手順を繰り返すのですが、これがなかなか面倒です。

できれば、コードを修正したタイミングですぐに確認できるとベストですよね。

そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。

Liveweave」は、ブラウザ上で動作するHTMLエディタです。

コーディングエリアとレンダリングエリアが2ペインで表示されるので、コーディングしながらリアルタイムに結果を確認することができます。

ファイルの保存、ブラウザで更新の手順を省くことができるので、

コーディングスピードも一気に加速

するでしょうww

エディタは、左右分割と上下分割、コーディングエリアのみ、レンダリングエリアのみのレイアウトが選べるようになっています。

コードを選択状態にして、Tidyボタンを押すと、コードを整形することができます。

もう1つ便利なのが、jQueryjQuery Mobile、MooTools、Ext JSなどのライブラリーをメニューから選ぶだけでインクルードしてくれる機能です。

ライブラリーは、GoogleライブラリAPIから読み込まれるようになっています。

デバッグして問題なければ、最後にSaveボタンをクリックして作ったHTMLファイルがダウンロードできるようになっています。

もちろん、最終的にはファイルを分割したり調整は必要になってきますが、最初の枠組みを作る段階ではいろいろと手を加えて確認することも多いので、「Liveweave」を使うととても便利だと思いますよ。

HTML5やCSS3の勉強したい人や、新人の研修で教える際に重宝するかもしれませんねww

是非、チェックしてみてください。

それでは、また!