いつでもDreamweaverをやめてもいいように、その替わりにVisual Studio Codeにできるように環境を作ってみた。でもまだDreamweaverは便利だからやめないけどね。

現在作業しているサイト更新の案件では、大まかには以下のような流れで利用している。

1. Redmineでチケットを発行する。
2. git-flowのブランチで作業開始する。
3. Dreamweaverで作業する。
4. テストサイトにアップする。
5. テストサイトでお客さんに確認してもらう。
6. git-flowのブランチで作業完了する。
7. 本番サイトにアップする。

Redmineは普通にブラウザで行って本番アップも今まで通り、あとはVS Codeで完結したい。今まではDreamweaverのテンプレート機能に依存している作業があったが、それがなくなったのでDreamweaverを使わなくても作業ができるようになった。次の通りにVisual Studioの拡張機能を使ってDreamweaverでの作業の替わりの設定をしてみる。

Gitは、コマンドを使わずに今までSourceTreeで行っていた。GIｔはあらかじめVS Codeで用意されているが、もっと便利にGitを使うためにも、以下の拡張機能をインストールしておく。

• Git Graph
• Git History
• GitLens — Git supercharged

ただし、いまメンテナンスをしているサイトのHTMLファイルは、文字コードがUTF-8ではなくシフトJISなのでGitで差分を見ると文字化けしてしまう。これは昔からやっているサイトなのでどうしようもない。UTF-8にしようと提案したけど、あえなく却下された。だってページがとても多いからコストがかかるからだってさ。

git-flowも簡単に行うために次の拡張機能を利用する。同じ名前の拡張機能がいくつかあるので注意。

• gitflow

結局はSource Treeのほうがわかりやすくて便利なことが確かである。Gitの作業はどれでやってもやることは同じなのであまり気にしないようにする。本当に難しい作業は、Gitのコマンドを叩かなければいけない。

DreamweaverでもリアルタイムにプレビューしながらHTMLファイルを作成していくので、次の拡張機能をインストールしておく。

• HTML Preview

HTMLファイルのプレビューの拡張機能はたくさんあるけど、こちらがよさそうだった。ただし、作業しているサイトのHTMLファイルは、共通のヘッダやメニュー、フッダにSSIを使っているので、SSIをサポートされていないので完璧にはプレビューできない。何か他によいプレビューの拡張機能があったら紹介して欲しい。でも、いまどきSSIで作っているという、とても古いサイトなのである。

テストサイトのアップは、次のSFTPの拡張機能を使っている。

• SFTP

Dreamweaverに合わせてアップロードのショートカットキーは、Ctrl+Shift+uに設定しておく。ショートカットキーを揃えるのは、マクロキーボードを使っているからである。このショートカットをキー一つに登録できるマクロキーボードは便利である。

テストサイトにアップした後、すぐにテストサイトをプレビューできるように以下の拡張機能をインストールしておく。テストサイトのページのURLをお客さんに伝える必要あるので、すぐにテストサイトにアクセスできてアドレスをコピペできることが重要である。この拡張機能が見つからなかったら、自分で作るしかないかと思っていた。Visual Studio Codeの拡張機能はたくさんあるので目的のものはあるもんだなと思った。

marketplace.visualstudio.com

Open PHP/HTML/JS In Browser – Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=PrimaFuture.open-php-html-js-in-browser

Extension for Visual Studio Code – A GUI to open PHP/HTML/JS files in browser on http://localhost or file:/// scheme. Suitable for XAMPP.

こちらもブラウザプレビューのショートカットキーとしてDreamweaverにあわせてF12にしておく。設定ファイルを次のようにすると、HTMLファイルの編集ウィンドウでF12を押せばChromeが起動して、テストサーバーにアップされたページが表示される。HTML Previewでできなかった細かい確認はここで行う。Chromeのアドレスに表示されたテストページのURLをお客さんに伝えて確認してもらう。

{
  "open-php-html-js-in-browser.selectedBrowser": "Chrome",
  "open-php-html-js-in-browser.urlToOpen": "custom",
  "open-php-html-js-in-browser.documentRootFolder": "C:/<ドキュメントルート>",
  "open-php-html-js-in-browser.customUrlToOpen": "https://<テストサイトのドメイン>/${relativeDirnameDocumentRoot}/${fileBasename}"
}

以上で、Dreamweaverの代替でVS Codeで使うようにする設定は完了。

しかし、Dreamweaverは、まだまだHTMLファイルの作成にとても楽だから、まだまだ使っていくつもりである。リンクのアドレスとか、テーブルの処理とか、最終更新日の自動記入とか、まだまだ細かいHTMLは断然Dreamweaverのほうが使い勝手がよい。この辺りのHTMLエディタとしては、Visual Studio Codeは頑張っても勝てない。

アドビ税とかアンチでDreamweaverを嫌っている尖った人たちが何だが多いけど、便利なものはお金を支払っても使っていこうと思う。ちなみに、Dreamweaverは単体で契約している。あとPhotoShopも単体で契約している。

追記（2021年5月11日）

DreamweaverとPhotoshopを単体で契約していたけど、アマゾンでAdobe Creative Cloud コンプリートが安かったので買ってしまった。単体と200円も毎月違わなかったから即買いだった。

Adobe Creative Cloud コンプリート 動画 / 写真 / イラスト 編集ソフト 【12ヵ月】 オンラインコード版 Windows / Mac 対応 | 動画 8K 4K VR 画像 写真 イラスト デザイン フォント

アドビ

¥78,192 （2025/03/15 22:48時点 | Amazon調べ）

Amazon

ポチップ

Adobe Creative Cloud フォトプラン 動画編集ソフト 【12ヵ月】 サブスクリプション Windows / Mac 対応 | 動画 8K 4K VR 画像 写真 イラスト デザイン フォント

アドビ

¥25,632 （2025/03/12 22:45時点 | Amazon調べ）

Amazon

ポチップ

Adobe Acrobat Pro PDF編集ソフト / 12ヵ月 / オンラインコード版 Windows / Mac 対応 | PDF 変換 編集

アドビ

¥21,312 （2025/03/15 22:48時点 | Amazon調べ）

Amazon

ポチップ

追記（2021年6月3日）

SFTPでファイルのアップロードがNo such fileのエラーでできなくなっていた。対処方法を調べてみると、行き当たったのはこちらのサイト。

怪しい物を開発するブログ

VSCode 最新の1.57.1に更新したらSFTP拡張機能がエラーを出したので対応

https://blog.supersonico.info/?p=4578

開発ではVSCode利用しています。で、ファイルを保存するとローカルのVMにSFTPでファイルアップロードしてそのまま確認できる。というような感じの開発環境です。 プラグインはこれです。SFTPプラグインです。 エラーがでる VSCodeを

このサイトの記事通りにsftp.jsに一行追加したらアップロードできるようになった。