Chrome Life

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

するでしょうww

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

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

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

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

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

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

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

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

それでは、また!

【近未来的なインターフェースを体験しよう】
パソコンについているウェブカメラを利用して、その映像をブラウザのWebRTC機能を使って取り込み、顔認識で機体を操作するゲームです。面白いので是非チェックしてみてください。
WebRTCを使って顔コントローラーで遊ぶKinect風ゲーム「FaceKat」

【Bootstrap版 Dreamweaver】
Bootstrapベースのページデザインが、ブラウザ上でパーツを組み合わせていくだけで作ることができます。Bootstrapをうまく融合した最速でウェブのユーザーインターフェースを構築するツールですので是非チェックしてみてください。
BootstrapのUIがドラッグアンドドロップだけで組めるエディタ「Jetstrap」

【Chromeをバリバリ使っている開発者の方へ】
ChromeのWebインスペクターで表示されるソースのスタイルを変更する方法を見つけました。こちらも合わせてチェックしてみてください。
Chrome Developer Toolsのテーマを開発者好みに切り替える裏ワザ

【なかなか仕事が思うどおりに進まない方へ】
やるべきタスクが消化できずに溜まっていく一方で困っている方に、それを解消する方法とツールを紹介しています。このツールを使うことで、重要な仕事にフォーカスできるので、仕事が空回りせずに、地に足の着いた進め方ができるようになりますよ。こちらも合わせてチェックしてみてください。
一日のやるべき事に集中できる!クールなタスク管理ダッシュボード「Momentum」

【iGoogleのようなスタートページを探している方へ】
iGoogleのサービス終了後、代替サービスとして良いものが見つからない方に朗報です。26種類のHDテーマ、17種類のウィジェット、複数タブ機能、音声検索の対応などスタートページとして十分な機能が備わったものを見つけました。こちらも合わせてチェックしてみてください。
待望のiGoogle代替サービスが登場!クールで高度なカスタマイズが可能なスタートページ「iChrome」

【iGoogleのようなスタートページを探している方へ】
iGoogleのサービス終了後、代替サービスとして良いものが見つからない方に朗報です。26種類のHDテーマ、17種類のウィジェット、複数タブ機能、音声検索の対応などスタートページとして十分な機能が備わったものを見つけました。こちらも合わせてチェックしてみてください。
待望のiGoogle代替サービスが登場!クールで高度なカスタマイズが可能なスタートページ「iChrome」

Emacs、Vimを極めるためのオススメ書籍

タグ: , , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。