制作環境を変えてみた〜Coda2編〜
By: Collin Allen

私は普段Web制作の仕事をしている訳ですが、その制作作業の中に「コーディング」というHTMLだったりCSSだったりを書く作業があります。タグという英文みたいのをひたすら打ち込んでいく作業だと言えば、Web制作をよく知らない方にも何となくイメージしやすいでしょうか。

このコーディング作業に使用するソフトを「エディタ」と呼んだりします。私たちWebデザイナーの場合は、そのエディタの中でもHTML・CSS・JavaScriptなどのWeb制作によく使われる言語に特化したものが一般的によく使われます。恐らく一番一般的なのはAdobe社製のDreamweaverというソフトではないでしょうか。

 

 

私自身、Web制作の仕事を始めてからずっとDreamweaverを使っていました。まぁ特に不満が無かったんですね。英文ばかりのコードがわかりやすくなるカラーリング機能だったり、便利なサジェスト機能(携帯の予測変換みたいなもの)だったり、Web制作におけるコーディングでは非常に使いやすいエディタだと思います。

 

しかし、最近になって「Coda2」というMac用エディタソフトに乗り換えたのです。

Panic, Inc.

Panic, Inc.
Coda 2
★★★★☆
94件の評価
App Store
powered by アプリスコア.com

 

乗り換えた理由は下記の通り

  • 多くの開発者ブログで高評価されている
  • インターフェイスデザインがかっこいい
  • 階層構造などの視認性が高い
  • Dreamweaverでできることは大体できる

という感じです。2番目の理由の「かっこいい」ってのは個人的に結構大事なことで、音楽制作ソフトやギターなんかにも言えるんですが、やっぱり見た目的に「かっこいい」と思えないと気分的に盛り上がらないのです(笑)

Dreamweaverでできる事ができるならば、見やすかったり使いやすい物のほうが良いですね。コーディングの際にHTML・CSSを並べて表示することが出来たり、色々とカスタマイズできるところも気に入りました。

実際のところDreamweaverの全機能を使いこなしていたとは言えないのですが、Coda2に乗り換えてみて非常に操作しやすい印象を受けました。 ちょっとAdobeに難癖つけるみたいですが、Dreamweaverの画面をぱっと見た時にCoda2ほど何ができるのかが把握しにくい様な気がしま す。

 

 

多くの開発者ブログの方も紹介しているのですが、下記の点は特に便利ですね。

ウィンドウを並べながらの編集

横幅の大きなサイトだと逆に不便かも知れませんが、スマートフォン向けサイトの様な長細いサイトの場合ですと、上記の画像のように左からHTML・CSS・プレビューといった感じで並べて編集できるのが便利です。Dreamweaverもプレビュー機能はあるんですけど、CSSも一緒に並べてっていうのはいいですよね。

 

階層の分かりやすさ

HTML編集画面です。左側の青っぽい部分に注目して下さい。

HTMLを書いたことがある方は分かると思うのですが、HTML文書は階層構造といって色んな要素が入れ子状態になっているんですね。HTMLがフクザツになってこの階層構造が深くなってくると、行の先頭にあるインデント(字下げの空白のこと)だけでは分かりにくくなってきます。なんたって英文ですから、階層構造を確認してると目がチカチカしてきたりします(笑)

この左側の青っぽい部分は階層が深い行ほど色が濃く、浅いところほど色が薄くなります。これでどの行がどれくらいの階層にあるのかが直感的に把握しやすくなります。

 

それと、私はまだ使ってみてはいないのですが、iPadと連携してiPad上でプレビューを見ることが出来るようになるDiet CodaというiPadアプリも有るようです。Kindle・Nexus7・iPad miniとタブレットも普及し始めて、これからタブレットを視野に入れたウェブサイト構築を行う機会も増えてくるでしょうし、こういう周辺環境面でも面白い試みが伺えます。

Panic, Inc.

Panic, Inc.
Diet Coda
★★★★☆
32件の評価
App Store
powered by アプリスコア.com

 

その他iCloudとの連携サービスなどもあるようで(←まだちゃんと検証してないw)、Mac使いのWEB制作者には結構うれしい機能が沢山あると思います。なんたってDreamweaverが4万円以上するのに対して6500円(2012年11月現在)というのは、個人でWeb制作をしている方にとっても有難い価格なんじゃないかと思います。

 

もちろん不満な点も全くないわけでは無いんですが、今のところ最も使いやすいと感じています。

Dreamweaverから引っ越してきた人としては、DreamweaverのEndキーで行末に移動する機能を多用していたので(本来これはWindowsの挙動でMacの場合はcommand+→だったりします)、できればその辺のキーボード操作の挙動もカスタマイズできると嬉しいですね。

パニックincさんどうですかねー?

(/ω・\)チラッ