コーディング初心者にオススメしたいエディターはDreamweaver

フリーランスの心得 ホームページ制作

こんにちは。Adobe信者のゆーへー(@katayamada_Y)です。

ホームページを作り始めてはや7年、実は最初からDreamweaverでした。
理由は簡単です。Adobe Master collectionに入ってたから。

高校の時、遊びでホームページを作ることがあって、その時は、ホームページビルダーを使ってました。
今は改善されてますが、当時流行だったテーブルレイアウトで自由にレイアウトを組むことができ、素人ながらすげえ!!って思ってました。

ですが、プロではそんな不要なソースだらけのレイアウトで制作してたら、は?しねよ。って言われます。(いわれませんが)

Dreamweaver以外にもエディターは結構あります。

コーディングやってる人は、案外Dreamweaver使ってません。意外でした・・・・
CC2016までは、よく落ちたり動作が重かったりっていう事があったので、嫌われているみたいです・・・

Dreamweaverはインストールするだけで、初心者でも簡単に爆速コーディング環境ができてしまうのです。

Dreamweaverの良さをふわっと紹介します。

ここがすごいよ。Dreamweaverの7つの機能!!

ボクは、このソフトのほとんどの機能を使っていません。

上のメニューから、HTMLのタグや、Jquery,Bootstrapなどのコードが出すことが可能なのですが、今となっては、自分でコーディングした方が早いので、不要になってしまいました。
ほかにも便利な機能があるんでしょうが、たぶん使ってません。

ただ、ここで紹介する機能だけ使えれば、かなりのスピードでコーディングできると約束できます

  • Scssの自動コンパイル
  • 短縮記述方Emmet
  • Git対応
  • スマホデバイスの確認環境
  • サーバー管理が簡単
  • コードスニペット機能
  • Extract(PSD読み込み機能)

便利すぎる。AdobeはBracketsってエディターもあったんですが、それがDreamweaverと統合して今の形になりました。
なので、2017CCのDWを使ってない方。進化してますよ!動作も軽いです。

そもそもDreamweaverって?

日本のデザイン業界では、知らない人はいない!アドビシステムズのアプリケーションです。
ホームページを作成することに特化しています。Adobeの他のアプリとも連携が可能です。
もともとは、別の会社の製品だったんですが、買収されて今のアプリになってます。

詳しくは、AdobeのDWページでご確認ください。

Scssのコンパイルが楽。glup?Grunt?そんなもんいらん!!

ここはボクが一番オススメしたいんですが、ScccをCssに書き出すにはコンパイルという作業が、必要で、いちいちめんどくさいので、タスクランナーを使ってその作業を簡略化させるのが一般的のようです。ただ、それをボクはしてません。

なぜなら。

使い方がわからなかったから!!

お恥ずかしい限りですが、Node.jsのインストールまではいけて、glupも入れることができました。が、使い方はいまいちわからなかった。
というかこれになんのメリットがあるのかがわからなかった。

だって、

Dreamweaver最初からコンパイル機能ついてますし!

というわけで、タスクランナーを使う事を諦めました。
Node.jsを無駄にインストールし、HDDにまた余計なものが入ってしまっただけでした。

そもそもScssってなに?

こちらのブログが丁寧でわかりやすかったので、見てね。

http://creator.dwango.co.jp/9668.html

Scssのコンパイル方法

  1. Dreamweaverを起動する。
  2. Scssファイルを開く。
  3. 以上!

えっまじで?って思う方いるでしょうが、マジです。超簡単。
glupの使い方で半日使いましたが、結局わからず、もういい!ってなったのですが、もう奴隷でもいいです。アドビ様様です。

他のエディターではこうはいかんのでっしゃろ?

Emmetが標準で入っている。

今やこれがないと仕事できません。Scssもそうですけど、入れないと時間無駄にしますよ。

WordPressにもEmmetのプラグインがあるので、入れることを推奨します。 ちょっと前までは、EmmetのプラグインをDWにインストールしてって作業が必要だったのですが、ほかのAdobeのエディターと統合して、Emmetが標準仕様になりました。 これがあるかないかでは、コーディングスピードが10倍は違うね。変数も使えちゃいます。

Emmetとは?

HTMLの省略記法です。
とにかくコーディングスピードが今までの比ではないくらい早くなります。
使ってない人は使わないとまじで損します。

Git対応。バージョン管理が簡単だ!

いやー待ってました!。初心者ではあまり必要としない機能ですが、バージョン管理ってかなり大事。
間違えて上書きしちゃったときもコミットしてればもとに戻せるし、ほかのサイトのデータを上書きしてしまった!なんて時もすぐに元に戻せます

一番のメリットは、ほかの人が触っても変更箇所がわかるってところ。更新されたこともわかります。コミットさえしていれば。

ホームページ制作を長くやればやるほどこの機能の重要性がわかってきます。
必ずしも一人で作業するとは限りませんし、クライアントが勝手に触る場合だってあります。その場合はコミットされてないので、どうしようもないかな・・・

SVNとかでも管理できますけど、DW上でコミットできてしまうので、こっちの方が断然早くて使いやすいです。というわけでこれもかなりオススメな機能。

スマホデバイスの確認環境

HTML環境に限りだったかな?たしかWordpressでもできたような気がするけど・・忘れました。
この機能は一時的に、サーバーにデータをアップロードし、それをスマホデバイスなどで確認できる機能があります。

QRコードが発行されるので、読み込みも簡単!

いちいちサーバーにアップしてってのは、リスクもあるし、めんどくさいんですよね。一回一回アップしないといけないし。
リアルタイムプレビューをクリックするだけで、QRコードを生成してくれるので、お手軽なんですよねぇ。

エミュレーターではどうしても再現してくれない場合があるので、最近は特にですけど、実機確認は必須作業です!

サーバー管理が簡単。

Bracketsのが簡単らしいです(笑)。すいません。ほかのソフト使ったことないです!
それでもボクはDreamweaverを使い続けます。なれたので、サーバー管理もとても簡単です。

フォルダ選択して、名前決めるだけ
Scssのコンパイルをどういう風にするかもこの時決めれます。
圧縮するのが、特に何もせず、そのままCssをコンパイルするか。

一度決めてしまえば、一括で管理できるので、フォルダをいちいち開かなくても、Dreamweaver上で選択して、表示することができます。

HTMLの新規作成とかもできます。コピーもね。

コードスニペット機能

コードスニペットってのは、簡単に言えば、ショートコードを自分で作る機能の事です。
a+tabキーとかで、aに登録していた、コードが展開可能になります。

WordPressとかだと、かなり重宝しますね。例えば、the_permalink()とか。ディレクトリーの関数とか微妙にスペル忘れませんか?
いちいち入力するにはコードが長すぎ!って事結構ありますよね。

あとは固定ページ呼び出しのコードとかを登録しておけば、コーディングスピードはもう10倍どころじゃない!!!

Dreamweaverにはこの機能があるので、Evernoteも不要ですね。

デフォルトでも、Bootstrapのメニューのコードとかいろいろ入ってます。使ったことないけど。

Extract。PSDデータの読み込み。

Extraxtの機能は主に3つ

  • CSSを書き出すことができる。
  • PSDから画像を書き出せる。
  • テキストをコピーできる。

この機能結構前からあったんですが、知りませんでした。
なぜってphotoshopでホームページ制作したことがないから・・・・イラレの方が楽じゃん・・・レイヤー管理しなくてもいいし・・・

先日の案件で初めて使いました。

クライアントからデザインのデータが、PSDできて。
うわっまじかよ!って状態だったんですけど。Extraxtって機能があるってのを知って使ってみたら、超便利じゃないですか。

illustratorでホームページ作るの辞めようかとも思った・・・

さいごに

いかがでしたか?Dreamweaver最高じゃないですかね?

CC2016までとは違うんですよ!!

始めるには、CCコンプリートプランで買うか単品で買うかですけど、単品だと月2000円くらいするので、オススメはコンプリートプランですかね。
フォトショップもillustratorも使えるし、動画編集もついてるというか全部ついてる!

月5000円ほどです。まさか海賊版使ってませんよね?月5000円で、こんな機能が使えちゃうなんて超良いです。

フリーランスのウェブデザイナーとかコーダーってほとんど経費ないから、こういうソフトでお金使わないと使うところないよ!!

年間プランがオススメですが、ずっと使わないのであれば、とりあえずはお試しで良いかと思います。
月々プランは、ちょっと高いので、デモ版で使ってみて良かったら年間プランに入ることをおすすめします。

気に入った記事であれば、ぽちっとお願いします<(_ _)>