WEB制作

【Webデザイナー向け】ATOMをDreamWeaverっぽくするカスタマイズ、パッケージのメモ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

DW派の人の代替アプリは100歩譲ってATOMがオススメねぷ

2021年現在、Web制作つまりHTMLやCSSなどのコーディングで最強の神エディタと言えばDream Weaverの一択だ。

ところが、大手企業のAdobe社が開発している有料製品であるがゆえ、神エディタにも関わらず、経費削減をする中小企業や半端な大手企業、意味不明なオープンソース信仰派が牛耳っている職場だと大した金額でもないのにDream Weaverを契約してくれない場合もある。

企業は利益を追求する集団なので経費削減は100歩譲って理解できるとしても、大昔のイメージから「Dream Weaverは初心者向き」というような現実から目を背けるバカの一つ覚えのような発言をする意識高い系のエンジニアとかもいるので、いかんともしがたい。

今回はそんな背景の中、Dream Weaver派だったあなたが代わりのエディタとしてATOMを使う場合に、できるだけDreamWeverの使い勝手を再現できる設定を考えて行こうと思う。

無料エディタでもATOMなわけ

HTMLがいじれるようなエディタは有名どころだとVisual Studio Codeとかもあるが、なんでATOMかというと筆者が多少は触ったことがあるし、比較的歴史があって使っている人が多いから。

せっかく使い方を覚えてもすぐに開発終了したり、コロコロとバージョンアップで使い勝手が変わるようでは困る。その点、ATONは4~5年くらいの間、バージョンアップしても使い勝手は変わらないし安定している。

そして何といってもDream Weaverを目の敵にしているような無駄に意識高い系のコーダーやエンジニアにも使っている人が多いので、その手の連中に小言を言われたりもしないので快適。

ATOMはカスタマイズしまくらないとならない

そんな意識高い系にも使われているATOMだが、インストールしただけで快適な設定が出来上がっているDream Weaverとは違い、ATOMはインストール直後はゴミなので自分で「パッケージ」と呼ばれる拡張機能をインストールしてカスタマイズするのが必須。

パッケージは無料で公開されていてATOMの設定メニューからインストールすることができる。他の同類のエディタもこういった仕組みが採用されている。

DW化するためのパッケージ

結論から言うとパッケージを入れまくっても所詮は別のアプリ、完全にDream Weaverと同じ使い勝手にすることはできない。

自称意識高い系の人たちが使うエディタと比べてDream Weaverの便利なところと言えば、リアルタイムでコーディングしながら結果をプレビューしたり、プレビュー画面の要素を選択して効率的にコーディングできることである。紐づいているCSSは一覧でタブに表示され、レスポンシブもデバイスごとに幅を確認しながら直感的に作っていくことができる。

本当はこういった部分もDW化できれば良かったのだが、ATOM自体も意識高い系が使うエディタなので完全に再現することはできない。それでも少しでもDreaWeaverに近づけるための慰めのようなパッケージを紹介する。

インストールするにはATOMの設定からインストールというような項目を出してパッケージ名をコピペで検索すればOKだ。

autoclose-html

Drea Weaverでは当たり前だが、自動で閉じタグが入力されるパッケージ。Dream Weaverでは何もしないでも出来ることだけどね。初期設定だと少し挙動が違うので、自力でカスタマイズは必要。

atom-beautify

HTMLやCSSの整形に使う。DWと同じにはならない。

BrowserPlus

結果をブラウザっぽい画面でプレビューしながらコーディングできる。

Color Picker

カラーピッカー。とりあえず、これくらいは入ってないと・・・。

css-spy

そのhtmlファイルで使っているcssクラスとかを視覚的にわかりやすくするやつ、だった気がする。

Highlight Selected

初期状態だと選択している場所がわかりにくいので見やすくするパッケージ。

Japanese Menu

日本語が母国語の人向けにメニューなどを日本語化する。

open-in-browsers

モノホンのブラウザでのチェックをしやすくする。

とりあえず、これくらいかな

Creative Cloudのコンプリート版を契約していればいいけど、エンジニア系のマネージャーが取り仕切っている部署とかだと、エディターはフリーのを使えの一点張りでどうしようもない。

状況によるけど、面接とかで上司が何畑の人かは確認しておいた方がいいよ。

【PR】U-NEXT31日間無料トライアル

映画、ドラマ、アニメなどの動画が最新作から名作まで充実! スマホで1000ch以上の音楽放送も楽しめる!電子書籍も読める!

PC、スマートフォン、タブレット、テレビなどで今すぐ「観て」「聴いて」「読んで」楽しめる新しいエンターテイメントサービス!

無料体験はこちら