このサイトはJavaScriptがオンになっていないと正常に表示されません

DreamweaverからCodaに変えました

thumb_coda

Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか？きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。本当におすすめです！


IT系、Web業界の求人に強い転職サイト【green】

Codaの特徴を簡単に

coda

詳しい説明はリンクをクリックでジャンプします。

はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて！ちなみに私はCoda英語版をインストールしているため、スクリーンショットが全て英語版のものとなっています。

美しいビジュアル

Codaのインターフェイスデザイン

Dreamweaverはなんだかごちゃごちゃしたイメージがあるのですが…（私だけ？）、Codaのデザインはすっきりシンプル。Apple Design Awardにも輝いています！

サイトのサムネイル画像

サイトのサムネイル画像。ペタッと貼り付けた感じがかわいい。

» CodaのWebサイトから体験版をダウンロード！

Codaの特徴 目次へ。

便利なプレビュー画面

画面を分割

Codaの最大の特徴（たぶん）として、自由に画面レイアウトを設定できる機能があります。Dreamweaverでも分割できるのですが、HTMLファイルを開いていたなら、そのコードビューとデザインビュー（WYSIWYGモード）のみ。CodaだとHTMLファイル・CSSファイル・プレビュー画面が一度に表示することができます。

Codaの画面レイアウト

右上の分割アイコンで分割。デフォルトでは横分割ですが、オプションキーを押しながらクリックすると縦分割できます。また、環境設定からオプションを押さなくても縦分割できるように設定できます。

↓分割する方法を簡単に説明。初めて動画を作った＆Youtubeにアップした…どきどき。

コマンドキーと 1-6 でもモードを切り替えられます。コマンド＋２、コマンド＋３はエディターとプレビューを切り替えるのでとても便利！

いろんなブラウザーでチェック

ブラウザーチェック

プレビュー画面の右上にあるブラウザーアイコンを長押しするとプレビューするブラウザーを選択できます。し・か・も、VMWare Fusionをインストールしている場合、IEで確認もできます！（IEが起動します）詳しい方法は 「VMWare 上の Internet Explorer でプレビューする」が参考になります。

ホームにジャンプ

ツールバーの「サイト」にある 「ホームページを表示」を選択するとダイレクトに設定されたルート URL にジャンプ。何気に便利。

» CodaのWebサイトから体験版をダウンロード！

Codaの特徴 目次へ。

PHPやJavaScriptの動作確認も

JavaScriptの動作確認

プレビュー画面で、Dreamweaverではまったく表示されなかったPHPやJavaScriptの動作を確認しながら作業できます。jQueryも！動くんです！

追記: Dreamweaver CS4〜の「ライブビュー」機能を使うとPHP、JavaScriptの動作確認ができます。Adobeさん失礼しました！

PHPの動作確認

Hello World！PHPがうまく表示されない場合は「動的にローカルの内容をプレビューする 」が参考になります。

ブロック編集機能

複数行まとめてコメントアウト。オプションキーを押しながらドラッグするとブロック編集モードになり、行のはじめに文字を入力すると、選択された範囲のすべての行に同じ文字が入力されます。エスケープで解除。

» CodaのWebサイトから体験版をダウンロード！

Codaの特徴 目次へ。

素早いタグ打ちが可能

基本のタグ打ち

これはカスタマイズされたDreamweaverでは実現可能と言えますが、一応紹介。例えば<div>と打つと閉じタグも同時に挿入されたり、ヒントもスムーズに表示されます。

クリップを挿入

画面下の「クリップ」をクリックすると、よく使うフレーズやタグが表示されます。「挿入」をクリック、またはドラッグ&ドロップで挿入可能。自分で好きなタグを登録することもできるので、自分仕様にカスタマイズできます！

色をドラッグ＆ドロップでWebカラー16進数の数値を表示

書式 > カラーパネルを表示 から色のパレットを表示できます。色をドラッグ＆ドロップでWebカラー16進数の数値が表示されます。

WordPressモード

Codaプラグイン WordPressモード

プラグインもいろいろでてます。Dreamweaverでいうエクステンションですね。こちらはWordPress用タグが簡単に挿入できるプラグイン「WordPress Mode」。書式もしくは画面左下のギアアイコンの 構文モード からWordPressを選択するとヒントが表示されるようになります。

Zenコーディング

Zenコーディングのプラグイン Tea for Coda

Zenコーディングのプラグインが「Tea for Coda」という名前で配布されています。F1キーで展開できます。Zenコーディングの詳しい使い方は「知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた」がわかりやすいです。

» CodaのWebサイトから体験版をダウンロード！

Codaの特徴 目次へ。

他にもFTPサーバーにアップロードするのが簡単！リファレンスブックを登録できる！ターミナルがついてる！値段もDreamweaverの49,875円に比べて格安です！15日間無料体験版があるので、ぜひ試してみてください！さよならDreamweaver！

Advertisement

IT系、Web業界の求人に強い転職サイト【green】

シェアする

  • このエントリーをはてなブックマークに追加

関連する記事

コメント

  • カツミ

    ぼくの友達もCODAをつかってて、使いやすいとのことでダウンロードしてはや半年。画面の分割のことは知らなかったです。情報ありがとうございます。それでは。

  • http://www.media-pro.co.jp HIROSHI TANIKAWA

    確かに使いやすそうです。プレビュー機能は便利。それにPHPプレビューも嬉しい機能ですね。
    プレビューのレイアウトはどのブラウザに近いですか?いや変な質問かな…
    結局IE6～,Safari,Firefox等で動作確認しなきゃいけないですからね縲恣r中経過で確認できるのは良いのですが。
    DWはFlashとセットで買っちゃうので、使用しています。テンプレート機能とか連携機能使っちゃうんで、代え難いかな。
    まんまとAdobeの手中にはまってるかな?

  • http://twitter.com/mariroom/ mariroom

    いつも役立つ記事をありがとうございます。

    アドビの中の人間として、コメント残すことお許しください。
    Dreamweaver CS5ではPHP動的ファイルの確認、PHPコードヒントが可能になりました。JavaScriptもWebKitレンダリングエンジンが「ライブビュー」利用可能なので確認できます。

    参考：
    Adobe TV CMSのサポートと動的関連ファイル：http://tv.adobe.com/jp/watch/learn-dreamweaver-cs5/6633/
    Adobe TV ライブビューナビゲーション：
    http://tv.adobe.com/jp/watch/learn-dreamweaver-cs5/6632/

    ※ぜひManaさんもお試しいただければ幸いです！

    お役立ち記事、これからも期待していいます。
    どうぞ今後ともよろしくお願いいたします。

  • yukki_design

    Codaにしようか迷っていた矢先に分かりやすいレビューをありがとうございます。
    この記事を読んで私もCodaに変える決心がつきました。

    もともとDWは使っておらず、無料テキストエディタでコーディングしていた身なのですが、やはり高機能なソフトを求めると無料では限界がありますよね。
    それにしてもこれだけの機能で9,800円て破格…

  • Pingback: DreamweaverからCodaに変えました | Webクリエイターボックス | とっても！　ちゅどん（雑記帳）

  • Webクリエイターボックス

    @カツミさん
    分割機能は本当に便利です！！ぜひお試しください ;)

    @Hiroshi さん
    私はFlashを使わないのでいいのですが、使う人にとってはDreamweaverの連携は捨てがたいでしょうね！ブラウザーはFFで確認してからブラウザーアイコンクリックで切り替えてます。IEばかりはWin立ち上げてますが…。（FusionではなくParallels入れてるので…）

    @mariroomさん
    コメントありがとうございます！恐縮です！素早い対応に驚きました。CS5試してみましたのですが、ライブビュー機能があるとは知らず…さっそく追記・訂正いたしました。失礼しました。

    @yukki_designさん
    本当にこれだけの機能がついてあの値段はお買い得ですよね！ぜひ試してみてください :D

  • Fringe

    Adobeの中の人が見てるみたいなのでコメントさせていただきますと、サーバーへの転送機能を使うと途端に面倒くさくなる仕様をやめれば、エディターとしては優秀だと思います。
    その機能がうざくてCoda愛用してます。

  • Pingback: View point | 水泳・競泳情報のSWIMMING VIEW

  • Pingback: ホームページ作成ソフトcodaがいいらしい : WEB作成メモblog

  • GON

    素敵な情報ありがとうございます。
    DWはちょっと便利なエディタぐらいにしか使いこなせていなかった（過剰な機能が多い？）ので、乗り換えちゃいそうです。
    でも、Web Premiumは引き続きUPGすると思いますのでご安心を。＞adobeの中の人

    Transmitユーザーへの優待販売とかあれば、もっと幸せなんですが・・・。

  • sickboy

    Codaはホント神アプリですよね！
    コーディングそのものもそうですが、ファイル管理＆コードナビゲータも中々使い易いですし、シェルクライアントにもなってくれるのが何より助かります♪

  • Pingback: links for 2010-09-02 « 個人的な雑記

  • http://tetsuya.s307.xrea.com/ 哲やん

    Winなので乗り換えはできませんが、なかなか良いツールですね。
    Adobeの中の方がいらっしゃるので書きづらいのですが、最近のDWCS5のアップデータ（11.0.0.3）がエラーで進まなくなってしまって。
    HTML5とCSS3を何とか理解しようとしていたので残念な結果が・・・
    あまりツールに依存するのもなんだなぁと思いながらも手書きでは追い付かないのでDW以外にも使い分けられるものがあるのはうらやましいです。

  • hser

    はじめまして！ためになるお話や情報で楽しく拝見させて頂いてます^^
    Dreamweaverのライブビュー機能ですが、CS4から追加されていてます！（CS5からと明記されていたので）
    ※Adobe社様の人間ではなく、仕事でも趣味でも使用しております。
    他にもhtmlにincludeさせているcssやJSファイルのソースへも一覧表示され１クリックで切替が可能になっていて重宝しています^^
    今調べてみたところCS4から追加された「Related Files」という機能だそうです。
    ※参考ページ
    http://www.adobe.com/jp/devnet/dreamweaver/articles/dwcs4_publicbeta.html

    自宅ではWindowsなのでCodaは使用できませんが、社内ではMac使用なので機会があれば使用してみたいと思いました^^
    これからも素敵な情報楽しみにしてます！
    ＃追伸　WebDesignerでも拝読させて頂いております^^ この機会にtwitterフォローさせて頂きました！

  • hser

    五月雨投稿申し訳ありません。
    追伸でWebDesignerと打ってしまいましたが、訂正です。
    WebDesigning（雑誌）でした。うっかりと誤字してしまい申し訳ありません。

  • Webクリエイターボックス

    @Fringe さん
    確かに動作がちょっと…という時がありますよね

    @GON さん
    Adobeさんもほっとしてるはずｗ

    @sickboy さん
    サクサク動いてくれるところが大好きです！

    @哲やん さん
    Winでも他のツールがありそうですけど、うーんどうなんでしょ？エラーの解決を願ってます！

    @hser さん
    CS4からだったんですね…意外とみなさん知らないのは機能が増えすぎちゃったからですかね？早速訂正しました！雑誌＆Twitterもチェックしてくださって、ありがとうございます！

  • nerd

    ＞サーバーへの転送機能を使うと途端に面倒くさくなる仕様
    どの仕様のことだろう…

  • USTYLETV

    はじめまして、毎日Twitter楽しみにしています。
    私もCoda愛用者です。
    が、やはりDWも愛用しているのですが、MTでの構築依頼も多いのでDWが手放せない状態です。

    ターミナルは重宝しまくりです。

  • さいさい

    いつも為になる情報ありがとうございます。
    声かわいいですね。

  • Webクリエイターボックス

    @USTYLETV　さん
    私はMTをいじることが皆無だからか？Codaを使い始めてドックにDWが現れることはなくなりました。CMSによっては相性がいいんですかね？

    @さいさい　さん
    声がえろいとも言われましたｗ

  • yamada

    いいなぁ・・・これ(´ﾟωﾟ｀)

    これ・・・・イイナァッ！(‘A`)
    winで使えたらもっと素敵。

  • Pingback: WebデザイナーにオススメのMac 厳選60個アプリ集 | Last Day. jp

  • Pingback: Mac, iPhone, iPad » 「CodeIgniter 徹底入門」でPHP学習中

  • yamoto

    はじめまして。
    いつも楽しく拝見させていただいています。
    CODAで「PHPやJavaScriptの動作確認も」とありますが、参考サイトを見ても今ひとつ設定が上手く出来ず、、、
    他にも色々と探してみたのですが、CODAに関する情報はやはり少ないですね。。。
    そこでお願いなのですが、上記の続きとして、CODAでWPサイトの制作を進める際の、一連の設定や手順なども合わせて教えていただけると非常に助かります。
    WPでサイトを作る際の効率の良い制作環境というのは、皆さんも意外と気になるところではないかと思いますので、もし宜しければ一度ご検討いただけると幸いです。

  • Webクリエイターボックス

    なるほど。確かに日本語でのリソースは少ないですね。Codaユーザーがそんなに多くないので記事化するかはわかりませんが、いつか実現できれば！と思います。

    ローカルで動かす場合の簡単な説明はこちら：
    http://hakkenpack.blog79.fc2.com/blog-entry-47.html
    パスの設定を正しくすればプレビューも見れると思います。

  • Pingback: 書式 | よくわかるDreamweaverの使い方

  • Pingback: テキストエディタ | よくわかるDreamweaverの使い方

  • Pingback: FTPクライアント | よくわかるDreamweaverの使い方

  • Pingback: ブラウザ | よくわかるDreamweaverの使い方

  • http://bandstudio.net/ baron

    始めまして
    Dreamweaverで検索してたら
    こちらのサイトが目に止まり
    参考にさせていただきました
    残念ながらWin環境なので試すことができず
    悔しいです・・・
    ただDWではPHPをアプリケーションから
    書き出してくれるのですが
    そのような機能はあるのでしょうか？
    http://bandstudio.net/dreamweaver/index.php
    このようなことです。
    これからもこのサイト楽しみにしています
    Bye

  • Pingback: [Mac]Codaを導入してみての不満点を挙げてみる : 太のうぇぶでぶ -There is no border in the Internet!-

  • http://negic.net/ ねぎ

    すこし参考にさせてもらいましたー。ありがとうございます！
    Codaのページにジャンプするんじゃなくて、MacAppStoreのCodaのページにジャンプするようにしたら少しは買ってくれる人いるんじゃ？？

  • Pingback: WindowsからMacに乗り換えてみた « Katawara.*

  • http://www.panic.com/jp/ noby829

    こんにちは。Panic の長谷川と申します。

    この度 Mac App Store の為替レート変更に伴い、Coda の価格が 8500円に改定されました。
    よりお求めやすくなったかな、と思います。
    ので、気になっていたけどまだ。。という方の参考になればと思います。

  • http://www.mag2.com/m/0000025124.html kazu

    codaに匹敵するwindows用のeditorってないんですかね。

    dreamweaver開く気にもならないし。

  • Pingback: ロリポップでwordpress» Blog Archive » Dreamweaver　からCoda に乗り換えてみる

  • Pingback: CodaのTEA for Codaをカスタマイズしてみた | negic.net

  • http://www1.ocn.ne.jp/~codomo/ 藤井雅英

    しかたなくDWでHPをリニューアルチャレンジ中。
    送信ボタンがうまくできなくて調べてたらCODAさんへ到着。送信ボタンができるのなら、そくTranceform?です。可能ですか。じゃなくても移行したいですが。viva Mac.

  • ken

    DreamweaverのFTPがエラーでるのでcodaに乗り換えましたが、勝手が違うし、最初からDOCTYPE宣言がないなど、いろいろ手こずってます。

    英語の部分も多いし、
    なにより解説サイトや本が少ないので
    覚えるの大変ですねw

  • Pingback: Macをポチったらやっておくべき備忘録（自分用） | Olein

ページトップへ戻る

Web関連記事・お知らせ

もっと表示

Web制作テクニック

もっと表示

インスピレーション・デザイン

もっと表示

Twitter 人気のつぶやき

もっと表示

サイト内検索

本書きました

Webクリエイターズガイドブック

Twitter

    フォローする

    Facebookページ

    中の人ってこんな人

    このブログの中の人、Manaです。

    カナダ・バンクーバー在住のWebデザイナーManaです。 日本で2年間グラフィックデザイナーとして働いた後、バンクーバーにあるWeb制作の学校を卒業。 現地企業で経験を積んだ後オーストラリアへ。そして再びカナダへ。 さらに詳しく知りたいという方はこちらへ。 個人的などうでもいいことはこちらでつぶやいてます。

    • ランダム
    • 新着記事