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のコンプリート版を契約していればいいけど、エンジニア系のマネージャーが取り仕切っている部署とかだと、エディターはフリーのを使えの一点張りでどうしようもない。
状況によるけど、面接とかで上司が何畑の人かは確認しておいた方がいいよ。
