HTML5/CSS3/JavaScriptのエディタやオーサリングツール

[Toru Yoshikawa]

こんばんは。吉川です。

HTML5の普及において、HTML5をサポートするエディタやオーサリングツールが
増えれば、なお一層の弾みがつくことは間違いありませんが、現状では
Adobe の Dreamweaver CS5 がかろうじて拡張機能として対応しているぐらいで
大々的に喧伝しているものはないように思われます。

そこでMLの皆さんに質問なのですが、HTML5/CSS3/JavaScriptを開発する際に
現在使っているツールはどんなものがあるのでしょうか？

私自身は、サクラエディタでひたすら地道に書いてブラウザで確認するぐらいしか
していないので、是非とも参考にさせてください。

他にも、開発する上で工夫されている点や、今後期待しているツールなどなど
ツール周りのお話ならなんでもお聞きしたいです。

皆さんの返信をお待ちしております。:)

以上

--
Toru Yoshikawa
mail: pikotea[at]gmail.com
twitter: yoshikawa_t
blog: http://d.hatena.ne.jp/pikotea/

[Shumpei Shiraishi]

白石です。

ぼくも、HTML/JavaScript/CSSは全部普通のテキストエディタ（Emacs）ですねー。

昔はEclipse（Aptanaというプラグインを入れていました）を使っていましたが、普通のテキストエディタの軽さに慣れちゃったのと、Emacsのコード整形機能に依存しすぎて、離れられなくなってしまいました。

2010/8/5 Toru Yoshikawa <pik...@gmail.com>:

> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>
>

[CSS-EBLOG管理人えど]

比留間です。

確かにツールの存在は大きいでしょうね。
自分はGvimを使っています。
プラグインで様々なことができ、
かつ自分でもカスタマイズできるのがいいですね。

そしてなにより、キーボードですべての操作ができるので、
もう他のエディタは使えなくなってしまいました。

iPhoneから送信

[Futomi Hatano]

羽田野＠HTML5.JPです。
とても興味深いお題ですね。
私は、言語によって、バラバラのエディタを使ってます。
普段はWindowsを使って仕事をしている関係上、Windows向けのエディタですが、こんな感じです。

・HTML → DreamWeaver CS5 + HTML5拡張
　　ほとんど、HTMLタグを直接書いてるのですが、そのための編集支援として便利です。
　　「ソースフォーマットの適用」っていう機能があるのですが、
　　グチャグチャに書いたHTMLソースを、まとめて、インデントなど入れた整形を
　　自動的にやってくれるのが重宝します。

・JavaScript/CSS → EmEditor Professional
　　長年のユーザーなのですが、もっぱら、このエディタだけでやってます。
　　http://jp.emeditor.com/
　　簡単なHTMLなら、DWを使わず、EmEditorを使うことも多いです。
　　正規表現を使った検索や置換に対応しているので、重宝しています。

最近、JavaScriptでは、Notepad++ というエディタを使うことがあります。
ちょっと日本語周りで面倒がありますが、なかなか軽くて便利です。
http://notepad-plus-plus.org/
サイトは日本語がありませんが、ソフトそのものは日本語メニューに対応しています。
今後、JavaScriptの編集はNotepad++に鞍替えしようかなぁと思案中です。

最後に余談ですが、Perlを書くときは、長年今も変わらずTeraPadというエディタを使ってます。
http://www5f.biglobe.ne.jp/~t-susumu/

ということで、ほんと、バラバラにいろいろなエディタを使い分けてます。
いろいろなIDEを試してみたものの、どれも気に入らず、結局、一番シンプルなテキストエディタに落ち着いています。
私の場合、さほど大規模なプロジェクトを扱うわけではないので、これで良いのかもしれませんね。

> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。

--
Futomi Hatano
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi

[井上 徹]

新参者の、井上です。

私は、言語によって、バラバラのエディタを使ってます。

私もそんな感じだったのですが、最近は別方向にシフト中です。

HTML

以前：Terapad

今：EclipseIDEのGWTDesignerという有償プラグイン(GUIでhtml要素を置ける)

JS

以前：EclipseIDEでJSエディットするプラグイン

今：EclipseIDEでGWT    (orz

出現当初から改善が続いており、プレビューがわりと早く、軽くなってます。

でもJS書いてねーじゃん！　そのとおりです。orz

CSS

補完もなにもないので、TerapadかEclipse内のエディタ

今のところ一番の地獄。皆さんのお話から光明がw

GWTが出てくると、根本的に別の話ですね、すいません。

---------------------------------------------

井上 徹  Toru Inoue

(mail)

sass...@mac.com

(Twitter)

@toru_inoue

(tel)

080-3310-4809

03-6479-4503

---------------------------------------------

[村岡正和]

村岡です。

ボクは白石さんと同じで HTML/JavaScript/CSS は全部emacsで書いてます。

他のプログラミング言語もemacsで書くので。

HTMLはhtml-mode、CSSはcss-modeを利用しています。

JavaScriptだけはjs2-mode & flymake & JSLint でシンタックスチェックをやってます。

このごろ HTML/JavaScript/CSS開発に特化した軽いIDEが出ないかなあと思うようになってきました。

2010年8月7日12:34 井上 徹 <sass...@mac.com>:

--
==================================================
中国マーケティング系ブログを配信しています
http://www.shanghai-watch.com/blog/

IT・システムコンサルティング パートナーズ
バスタイムフィッシュ

村岡 正和
mur...@bathtimefish.com
〒653-0862 神戸市長田区西山町3-3-12-201
TEL/FAX 078-220-4489
MOBILE  090-3628-2579

[萩原崇之]

　萩原です。お久しぶりです。
　私は基本的にEclipseを言語ごとに使い分けています。一番いいのはPDTで、これのJavaScriptエディタがかなり強力で助かっています。CSSやHTMLも補完してくれたりしますし
　javaScroptの方はjavaScript　Developer　Toolというツールで、別個にインストールできます。

　あと、機能はやや落ちますが、AmaterasさんのEclipse HTML Editor
Pluginというのもあります。残念ながらZEN-Coadimgとの相性は悪いのですが(^^;)

2010年8月7日12:34 井上 徹 <sass...@mac.com>:

--
--^----^--------------------------------------
萩原崇之@自宅警備員.com
hagiwara...@gmail.com
はてな:http://d.hatena.ne.jp/kagigotonet/
twitter:takayuki_h
live bot:https://twitter.com/livernal_jp/
mixi : http://mixi.jp/show_profile.pl?id=27017384

[KOMATSU Kensaku]

小松です。

僕は、RadRails（EclipseベースのRoR開発環境）を良く使っています。

Rails開発では、これを使うとたまらなく便利ですし（というより無いときつい）、
js+css+htmlの開発支援機能（補完機能とか）も非常に整っています。RailsでWeb-APIを書いて、
js/css/html連携させる際などは、特に強力なツールです。

難を言えば、（Eclipse系共通ですが）重いという点ですね。。。

2010年8月7日13:20 萩原崇之 <hagiwara...@gmail.com>:

[北島]

はじめまして　北島です。

私は会社も自宅もドリCS4に「HTML5 Tag Suites」と「Zen Coding」を入れて、HTMLもCSSもJSも済ませています。
ドリは関連ファイルバーやその他の機能がが便利なので手放せないです。
JSはjQueryばかり使っているので、jQueryを使う上で便利なエクステンションでもあればなあと思っています。

昔はmiを使っていましたが、HTML5やCSS3のモードファイルって誰かつくっていたりしないのかな？
Zen Codingも使えるようになると素敵なんですけど

[Yasunobu Kawaguchi]

かわぐちといいます。

   私も10年来Emacsですね。

   学校/会社/自宅とOSも変わってますが、どの環境にもよく出来たEmacs環境がありました。コミュニティの方に感謝です。

  今時の環境は追っかけてないのですが、Aptana とか VisualStudioもありますよね。

  そうそう、Webブラウザ上で使えるものありませんかね。協調編集とかバージョン管理できると嬉しそう。

[Toru Yoshikawa]

吉川です。

皆さん貴重な情報ありがとうございます！

本当に多種多様な感じですね。

ほとんどの方が、色々と使い分けて使っているようなので意味はありませんが、
あえて大別すると、軽量なテキストエディタ派と高機能な Eclipse＋Plugin 派、
あとは DreamWeaver CS に分かれてる感じでしょうか。

皆さんからの情報を元に私も色々と試してみたいと思います。

引き続き、何かあればご返信ください。:)

p.s.
Microsoft Expression を使ってる方はあんまりいらっしゃらないんですかね。。。
(CS5の対抗馬として)

以上

[比留間 和也]

比留間です。

vimを使ってる人が誰もいなくてちょっとショックです・・。
Emacとかのほうが多いんでしょうかね。

エディタではないですが、zen-codingを入れてる人はちらほらいるみたいですね。
かくいう自分もvimのzen-coding「風」プラグインを入れてたりします。

ちなみにzen-codingは、HTMLを書くときは使ってますが
CSSを書くときは使ってません。なんかプロパティ名とか忘れちゃうのが怖くて・・。
なのでついつい手で打ってます。

2010/8/8 Toru Yoshikawa <pik...@gmail.com>:

> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>
>

--
<!-- ************************************* -->
<div itemscope>
<span itemprop="name">比留間 和也</span>
<span itemprop="blog">http://css-eblog.com/</span>
</div>
<!-- ************************************* -->

[石崎貞大]

石崎です。

私もvim使ってますよ～～。

zen-coding自体、比留間さんのご投稿で初めて知りましたが、
vimのプラグインもあるんですね！
ぜひ、試してみたいと思います。

2010年8月8日23:17 比留間 和也 <edo...@gmail.com>:

[Eiji Kitamura]

どうも、Googleのえーじです。
面白そうな話題なので僕も参加させてください。
こちらのリストに投稿するのは初になりますが、よろしくお願い致します。

簡単に自己紹介しておきますと、現在ChromeのDeveloper Advocateという仕事をしています。
HTML5を使った面白いデモやウェブアプリを常に探していますので、何か作った、発見された方は教えて頂けるととても嬉しいです(@agektmr)。
ちなみに以前はソーシャルウェブ周りをずっとやっておりましたので、そのあたりの絡みでも構いません。

僕もコーディングはvimを使ってます。もちろんTerminalで。
HTML5にもFlashライクにビジュアルもいじれるオーサリングツールが登場したら、また世界が変わるのかなーと妄想しております。

コメントよりも自己紹介がなくてすみません。

2010年8月9日11:55 石崎貞大 <sadah...@gmail.com>:

--
Eiji Kitamura : age...@google.com
Google - Developer Advocate

[Hiroshi Kawana]

初参加します。川名といいます。
よろしくお願いします。

# Macユーザの人は少ないかな…とか思いつつ
エディタはUSでは定番系のTextMateというエディタを使ってます。
http://macromates.com/

HTML/CSS/JavascriptのTypeaheadだけでなく、ActionScriptやPerl、PHP、Ruby、Python、果てはCやObj-CまでTypeaheadするという強力エディタです。
日本語のハンドリングに難があるのですが、開発過程では致命傷にはならないので最近はこれが多いでしょうか。
（でもなおった方が嬉しいので、誰か回避策をしっていたら @mutuki まで呟いてくださいw）

あとはWebKit系ブラウザには標準搭載されているスニペットエディタとJavaScriptのデバッガでHTML5系はなんとかなってます。
# Dw CS5も持ってはいるんですが…結局は使ってないという。

[tenkao]

はじめまして。萩原と申します。

Mac で Espresso か skEdit か Komodo Edit を使ってます。
Espresso と Komodo は zen coding も使ってます。

ちなみに Komodo はバージョン6（現在ベータ版）から HTML5 と CSS3 に対応するようです。
http://www.activestate.com/blog/2010/08/komodo-60-beta-3-faster-more-stable-invoke-tool-panel

[Kazuhiro Hara]

こんにちは、
ご無沙汰しています

原＠エフエックスビイです

普段Macをメインの制作環境にしています。
システム的な開発などもやったりするため、HTMLもCSSもJavaScriptも
NetBeansで統一しています。

VimでZen CodingとかAptana、Dreamweaverなどいろいろ試して
はいるのですが、NetBeansが手に馴染む感じです。

とはいえ、まだちゃんとHTML5とCSS3がサポートされていないので
今後に期待です。

2010年8月5日20:36 Toru Yoshikawa <pik...@gmail.com>:

> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
>
>

--
--
<!-- #signature
((!)) 電話番号変わりました!!
=================================================================
株式会社エフエックスビイ 代表取締役CVO 原 一浩
-----------------------------------------------------------------
+ Homepage http://fxb.jp/
E-mail mailto:ka...@fxb.jp
Phone 090-1700-2899
Address 〒101-0051 東京都千代田区神田神保町1-58
第二石合ビル501
-----------------------------------------------------------------
+ 書籍：プロセス オブ ウェブデザイン 企画からデザインへ
http://www.amazon.co.jp/exec/obidos/ASIN/4798110590/ref=nosim
+ 書籍：FFmpegで作る動画共有サイト
http://www.amazon.co.jp/exec/obidos/ASIN/483992466X/ref=nosim
+ 書籍：Flash 逆引きデザイン事典 [CS3/8/MX2004対応]
http://www.amazon.co.jp/exec/obidos/ASIN/4798113948/ref=nosim
+ 書籍：変革期のウェブ
http://www.amazon.co.jp/exec/obidos/ASIN/4839924651/ref=nosim
+ 書籍：標準Webデザイン講座 FLASH 8
http://www.amazon.co.jp/exec/obidos/ASIN/479811071X/ref=nosim
+ 書籍：Flashでデザイン 差がつくBlogサイトの作り方 SE
http://www.amazon.co.jp/exec/obidos/ASIN/4756151221/ref=nosim
=================================================================
-->

[Toshiro Takahashi]

こんばんは。ご無沙汰してます。高橋登史朗です

ほぼ、枯れてきた話題ですが、できればもう一度聞いてみたいなぁと言うことで
(^^

私もIDEではなく、エディタを主に使い続けている派のひとりです。それは、自
分の意図と結果の間をなるべく短く、理解できる範囲で留めたいという不安の反
映でもあったりします。

そのせいで、eclipseにしても、Dreamweaver にしてもほとんど使わずに来まし
た。

でも、開発速度が必要な時には、

MS系のフォームのような、ドラッグドロップで、そして、オブジェクトの続きを
支援されながら作れると楽だなぁ、という欲求が時々起こります。

そういう意味で、これは、Webページなんだけど、「ドラッグドロップで全部作
れちゃうぞ」、みたいな(出来ればコードはなるべく飾りの少ない形で出る)ツー
ルって、

今は良いものが有るのでしょうか？

本当は、AccessがタイトなHTML/JavaScriptコードを吐き出してくれたら最高か
も、とか思ったりもする今日この頃です。

Dreamweaverはやはり良いのかなぁ。(P.S.実は、私は最近まで、ドリームウエー
バーだと思ってました^^;＜この読みについてのうんちくはまた別に)

高橋登史朗です

--
--
Toshiro Takahashi
高橋登史朗
http://allabout.co.jp/internet/javascript/profile/mbiopage.htm
Blog: http://jsgt.org/mt/01/
Twitter: http://twitter.com/toshirot

[梅田聡]

初めまして。梅田と申します。

私はDreamweaverCS5の拡張機能を使っています。基本的にはHTML5もCSS3もDreamweaverのみです。

と言ってみたものの、CSS3の補完機能に関しては-moz-や-webkit-から打ち込み始めなければならなく、

実際の所は補完機能はあまり使わずコピーペーストやベタ打ちで済ませてしまっています。

ただ、「HTML5にこんなタグがあったんだ。」など見ていて勉強になる事もあります。

元々DreamweaverからHTMLやCSSの世界に入った者ですが、現在はベタ打ちでコーディングを行うため

Dreamweaverをテキストエディタ感覚で使っています。

動作が重たい上に機能を使い切れていない最悪の組み合わせですね...。しかしmacで軽量なFTPソフトを

見つけられていないため、DreamweaverのFTP機能に頼りざるおえないのが今の私の現状です。

2010年9月3日0:16 Toshiro Takahashi <ta...@game.gr.jp>:

[永野朗夫]

初めまして、永野といいます。

フリーでウェブデザインやiPhoneアプリ開発を行っています。

メイン環境はMacです。

一応Dreamweaver CS3持ってるのですが、Dashcodeを使っています。

ご存知のない方もいるかもしれないので説明いたしますが、

Appleの提供するウィジェット制作ツールで、html、css、javascriptのエディタとしてもそこそこの機能を持っています。

WebKit系の補完には対応してるようです。

FTPはCyberduckを使ってます。ドネーションウェアで、機能的にも満足してます。

DreamweaverのFTPの差分アップデート機能は割といい加減なようで、以前実務でずいぶん痛い目に遭いました ^^;

ところで、いま知り合いのミュージシャンのモバイルサイトを作ってるのですが、Android は HTML5 Audio に対応してないのですね。

あと、普段はjQueryを愛用していますが、対応環境をWebKitに絞り込むと、jQueryのよく使う機能がネイティブで存在するので要らなくなってしまいました。

2010年9月3日18:48 梅田聡 <ume...@gmail.com>:

[Sachiko YOKOKAWA]

初めまして。横川と申します。
私もメイン環境はMacです。

主に使用しているエディタはTextWranglerとJedit Xです。
あと、たまーにmiも使います。

Perl書きなので、シンタックスチェックのできるTextWranglerが好きですが
Jeditも同じくらい使っています。

私にとっては、目の疲労予防のため
背景色・文字色が自由にいじれることも必要条件です（笑）

使い方はコピペや手打ち、またユーザ辞書での変換なので、
あまり参考にはならないかなとも思いますが…

Dreamweaver CS3も持っていますが、使ったことはほどんどありません。
また、評判のTextMateは使ってみたことがありますが、
やはり専用の日本語フォントが読みづらく、今は使っていません。

ちなみに、FTPはTransmitです。
サーバ上のファイルを直接好きなエディタで開けて便利です。
ローカルファイルへのパーミッション付けなども楽で好きです。

---------------------------++
Studio PHIZ 横川　祐子（ヨコカワ サチコ／禁魚）
Email : kingyo...@gmail.com
Web Site : http://studio-phiz.com/
-------------------------
NPO とさはちきんねっと
http://tosa8kin.cside.to/

[Toru Yoshikawa]

吉川です。

Microsoftの「Expression Web 4」でDreamweaver CS5に続いて
HTML5向けのアドインが出たようです。
下記ブログで詳しく紹介されていますので興味のある方は
チェックしてみてください。

HTML5 Schema Configuration Add-In for Expression Web
http://blogs.msdn.com/b/shosuz/archive/2010/10/07/html5-schema-configuration-add-in-for-expression-web.aspx

On 9月4日, 午前11:03, Sachiko YOKOKAWA <kingyoblu...@gmail.com> wrote:
> 初めまして。横川と申します。
> 私もメイン環境はMacです。
>
> 主に使用しているエディタはTextWranglerとJedit Xです。
> あと、たまーにmiも使います。
>
> Perl書きなので、シンタックスチェックのできるTextWranglerが好きですが
> Jeditも同じくらい使っています。
>
> 私にとっては、目の疲労予防のため
> 背景色・文字色が自由にいじれることも必要条件です（笑）
>
> 使い方はコピペや手打ち、またユーザ辞書での変換なので、
> あまり参考にはならないかなとも思いますが…
>
> Dreamweaver CS3も持っていますが、使ったことはほどんどありません。
> また、評判のTextMateは使ってみたことがありますが、
> やはり専用の日本語フォントが読みづらく、今は使っていません。
>
> ちなみに、FTPはTransmitです。
> サーバ上のファイルを直接好きなエディタで開けて便利です。
> ローカルファイルへのパーミッション付けなども楽で好きです。
>
> ---------------------------++
> Studio PHIZ 横川　祐子（ヨコカワ サチコ／禁魚）

> Email : kingyoblu...@gmail.com