Dreamweaver導入への道（2020.01.02）

　今から冷静に考えれば結構呆気なかったなぁ～と思ったりもしますが、見た目以上になかなか大変だったこのDreamweaverへの移行作業。最近、そもそもDreamweaverへの関心というか、ホームページ自体に対する注目も低いので、そもそも他のサイトを見ても関連記事が無いので、あえて自分が気付いたところ等々を踏まえてまとめてみました。

そもそも、どうしてDreamweaver導入を目論んだのか

Dreamweaverが候補に上がった理由

Dreamweaver導入で心配だった点

　かといって、Dwにしてしまえば幸せなことばかりかというとそうでもありません。それなら、もう既に乗り換えしていますからね。やはり、18年間もHPBにはお世話になっているので、クセも何もこのソフトにあわせられているっていうのもありますし。

※結果的にあとで解決策が出てくるところもあるので、結論は実際の作業手順のところを見てください

共通項目の同期

　私が一時期悩んでいたのが、メニューとか各ページに埋め込んでいる共通の内容のところの更新でした。その度にコピペしていくのって地味に面倒なんです。

　で、いつのころからか、HPBに「共通部分の同期」という機能が出てきて、dvi要素にid指定をして共通項目として登録をしておけば、一発で同期が出来るようになりました。これが結構便利なんです。

　正直、これが上手く使えないと、Dwに乗り換えたくても出来ないほど。一様、あれこれ調べたら、テンプレートとかライブラリというのを使えば、Dwでも出来そうで、むしろサイドメニューの組み立て方はこっちの方が便利な可能性もある。心配なのは、ページの最下部とかにあるボタン類や関連記事のところ。場合によっては、これはPHPを使うとか別の方法を何かしら考えてもいいかも…とか考えていました。

Word感覚で使えるホームページビルダー

　HPBの良いところは、良くも悪くも、Wordというかワープロ感覚のような感じで、ページが打てるというところ。私のように、文章がそこそこ多いページを作る場合、コードベースでいくDreamweaverはあまりやりやすいとは思えません。

　また、文面だけならいいのですが、画像や表とかをコピーといったときに、Shiftキーを押しながら方向キーを押して範囲で選んでコピペ出来るHPBに対して、Dreamweaverはコピーするとなるとコード側を選んでいくというスタイル。確かにコードを操作するという点で言えば、間違いなくDreamweaverの方がやりやすいのですが、ページを作成している段階ではHPBの方が楽。

　そこに最近は、HPBのショートカットで「Ctrl+0」でP要素とか、「Ctrl+3」でh3といった感じでショートカットキーも組み合わせていると、HPBの方がドンドン入力していけるんですよね。

画像をドンドン貼り付けるということが苦手なDw

　これはちょっと意外だったのですが、Dreamweaverって、たくさんの画像をどんどんページに張っていくという作業ってほとんど出来ないんですよね。チマチマと1枚ずつ挿入していかなければならない。これって、私のように1ページあたりの画像枚数が多い人間にとっては、ちょっと面倒くさい話なんですよね。

　HPBだと、フォルダタブからドンドン貼り付けていけるんですよね。

場合によってはHPBで作成→Dwで管理という流れもアリかも

　両者の特徴をあれこれ考えていくと、ページを作成していく作業については、シンプルにHPBでやった方がスムーズな気がするのですが、最終的なチェックとか仕上げだったり、サイトとしての管理をするにはDreamweaverの方が便利なのかもしれません。

　そう考えると、ページの作成作業はHPBで行い、その後Dreamweaverで管理からアップロードまでしていく、という流れもアリかもしれません。特にそうなると、Dreamweaverのテンプレート機能を活用するってのは、案外いいかもね。

実際にDreamweaver導入を進めてみた

　そして、7月頃から徐々にテストを始めて、9月には順次Dreamweaverへの移行を始めました。本当は、Bootstrap4の適用と合わせて行いたかったのですが、そうなると何をしているんだか分らなくなる可能性があったので、とりあえず、Dreamweaverに移行することを優先して、ちょっとしたバグとかを修正するような形でやっていきました。古いページとか、タグが大文字・小文字がメチャクチャだったりしてますし、閉じタグが入力されていないとか、今更アレコレバグをDwに指摘されてます。

　本格的にDreamweaverを使ってみた感想しては、良いとこもあるし悪い所もあるといった感じ。それでも、慣れてくるともはや、HPBには戻れ無いかなぁ…と思ってしまうところもあります。

基本的なタグ入力と操作

基本は「コード」「ライブ」「デザイン」の3つ

　Dreamweaverの画面の基本は、「コード」「ライブ」「デザイン」の3つがあります。

　「コード」は、その名の通り、いわゆるHTMLのタグを打っていく画面。HPBで言うと「HTMLソース」ってやつになります。基本的には、ここで入力をしていくというのが、Dreamweaverの基本スタイルです。

　次に一般的な表示画面には「ライブ」と「デザイン」の2種類があります。全く同じ訳では無いですが、HPBで言うと、「ライブ」が「プレビュー」に近く、「デザイン」が「ページ編集」に近いという印象です。

　ただ、HPBの「プレビュー」とDwの「ライブ」の違いは、ほとんどHTML記述そって表示されるものの、この画面での文字入力はほとんど無理に近いというところ。その一方で、文字の範囲選択をしてタグを入力したり、それぞれのタグ（例えばp要素とかdiv要素）にclass指定をしたりすることは可能だったりします。

　一方で、「デザイン」の方は、「ページ編集」に近いので入力も出来なくはありません。ただ、表示そのものがあまりCSSが反映されていないので、見た目が結構異なるので、それはそれで扱いにくかったりします。

　という風に、「ライブ」も「デザイン」もどちらも入力にあまり向いた機能ではないので、結局「コード」に入力をするというスタイルに落ち着きます。その一方で、「コード」だけ入力しても、どういう感じになるのか分らないので、画面を分割にして「コード」と「ライブ」（場合によってはデザインのときもあるが…）で表示して入力をするというのが多くなります。

　ちなみに、私の場合は、32インチの4Kディスプレイを使っているので、このように左右に並べてもいい感じで表示できますが、ノートPCなどの通常のフルHD画面だとなかなか厳しいので、仕方なく縦分割を選んでいますが、そうなると今度は表示範囲が狭すぎてなかなか作業効率が悪くなります。

ショートカットは今後勉強が必要

　あと、ショートカットキーについては、まだまだ見習い中というところがありますが、案外使い込んでいくと、簡単にタグが打てたりするので、それほど不満は無いかも。

　例えば、今までHPBだとspanで囲むのって地味に面倒だったんだけど、<span class="Blue-B"></span>で囲むなら、

　囲む部分を選んだ上で、Ctrl+Tでタグ編集にして、

　「あお」と打ったら「span class="Blue-B」と変換するように単語登録しておいたら、一発ですからね。これは結構便利です。

　さらに、Emmetという機能があるようで、これも覚えると結構便利そう。例えば、簡単なところだと、p+Tabで<p></p>や、div+Tabで<div></div>なんてのは序の口で、p.～やp#～でclassやidが打てますし、*10を付けると10個作ってくれたりとか、もう覚えれば結構できることは多そう。ただ、これって日本語入力にしているとダメで、日本語入力をいちいちオフにしないと出来ないので、結局のところ先のショートカットに落ち着く傾向があります。

スニペット機能

　Dreamweaverには「スニペット」というある程度のタグをいつでも使えるように保存しておくという機能があります。

　以前は、このスニペットに対してショートカットキーが割り当てすることが出来たようですが、今は「トリガーキー」というのが設定出来るようになっていて、例えば私が設定しているものだと、「動画」と打ったあとにTabキーを押すと、自動的に動画用のタグが打てたりします。なので、こっちだと日本語切替をしなくてもいいので結構便利です。

　こういう感じで、コード内容を予め入力しておいて、トリガーキーに入力した言葉+TABキーでコードがバシッと入力されます。もしトリガーキーを忘れても、スニペットウインドウから選んで挿入ボタンを押してもOKです。

　HPBは、こういうことが出来なかったので、ATOKのお気に入り文章という機能を使って入力してたりもしてました（っていうか、今も使ったりしています）が、Wordで言う定型文みたいなヤツをソフトでキチンと対応してくれるというのはいいことですよね。

テンプレート機能とライブラリ機能

　あと、テンプレートとライブラリ機能は結構便利ですし、これをどう使いこなすかで、サイトの運用が劇的に変わります。

テンプレート機能

　テンプレートは、その名の通り、あるHTMLページをテンプレート化してくれる機能。この機能のスゴいのは、そのテンプレートの中で、「この部分だけは、各ページ毎で変更出来るけど、それ以外のところは変更出来ない」ということが設定することが出来ます。

　例えば、上の例だと、上部のtitleの部分（ページタイトル等のメタタグのところ）と、id=contentのdiv要素の中（コンテンツ本文のところ）だけが編集可能で、それ以外の薄いグレーの部分は一切操作が出来ないように設定しています。

　こうしておくと、固定しておきたいメニューなどの項目のところは固定しておいて、右側のメニューなどは共通化しておけば、テンプレートを編集するだけで、そのテンプレートを使っているすべてのページを一気に変更してくれます。これはホント、神です。

　私の場合、MotorSportsとかPhotoRepoとかCameraRepoとか、いくつかのカテゴリー分けがあるので、それを作っておけば、派生して作るのにとても便利。今までは、前のHTMLファイルを持ってきて、コピーして…って感じをしていたり、部分的に共通化されたりしてたけど、これならミスも無いし、まとめて修正も出来るのでとてもいいです。

ライブラリ機能

　それに対して、ライブラリーはもう少し小さい単位に使うことが出来、HPBでいう「共通項目」の概念に近いものです。いくつかのページに使うんだけど、それらを同期させたいというメニューだったりボタンだったりに活用することが出来ます。

　HPBの共通項目とDmのライブラリーとの決定的な違いは、きちんとアセットの中のライブラリ内に一覧表示されて、挿入出来るというところ。HPBの共通項目は、あくまでdiv要素をid化することで認識していましたが、どの共通項目がどのidを使っていて…なんてのは管理することが出来ませんでした、それが一元管理出来ますし、ここから挿入も出来ます。これもホント、便利です。

　ライブラリは、私の場合、ページ下部のリンクボタンや関係記事のリンクに使っています。HPBの共通項目はidで認識していたため、逆に１ページ１つしか対応出来なかったのも地味な不満点でした。また、これらの一括管理が出来ないので、「えっと…この共通パーツはどのページにあったかなぁ…」と思い出しながら、そのページから持ってくるということをしていたので、それがライブラリのリストからサクッと出せるのは結構便利。

不満点

ライブ表示での入力はやっぱり無理

　やはり、ライブ表示上で操作ができなくはないのですが、そのあたりはHPBの方が使い勝手はいいです。先にも述べたとおり、ワープロ感覚でサクサク使えますから。なので、今でこそHPB時代に作成したものを、Dwに移行するという作業なので問題はないのですが、これから新規にページを作るという時にはDwで何処まで出来るのかは未知数かもしれません。

　あれこれ試してみると、どうやら、「ライブ」ではなかなか苦しいけど、「デザイン」にすると入力も含めていろんな事がそこそこ出来そう。最近では、コード入力にも慣れてしまったのでそちらでほとんどやっていますが、誤字脱字を直したりするときは、デザインがいいかも。

　あと、どうするんだろう？と悩んでいた表での行や列の挿入・削除、結合などはこのデザインビューからだと案外やっていけるので、どうにかなりそう。最近のお悩みは、中央寄せ・右寄せの設定と回り込みの設定を、コード入力せずにやる方法がないものか…と探しています。

画像の挿入

　案外、面倒くさいのがこの画像の挿入。もちろん、1枚づつ選ぶのはそんなに苦にはならないのですが、私のように1ページに大量の写真を貼る場合が結構手間だったりします。漏れがあるのも良くないし。

　本当は、画像ファイルもリネームしてしまって、連番なんかにしておけば、先程のEmmetで連番を入れたりも出来るようなので、それでまとめて挿入出来たりするのでしょうが、そうなると画像ファイルの管理が煩雑になるので、個人的にはやりたくないんですよね。

　どうやら、アセットパネルからまとめて挿入も出来なくはないようですが、これはこれで１枚ずつしか表示されないので、使い勝手があまりよくない。でも、今のところまとめてドバッと写真を挿入することが出来るのはこの方法しかないので、一度、アセットパネルからその日分の写真を一括で挿入して、divで囲って文章打っていって…というのが現実的な方法なのかな。ただ、これだと普通の記事はいいんだけど、RQのページが作りにくいだろうな。

　あとは、HPBと同じく、画像を挿入するときに高さと幅が絶対つきまとうんですよね。もちろん、あとで置換で消せばいいのですが、一手間増えるんですよね…。

　まあ、私のような使い方がレアなのでしょうが、もうちょっといい方法が見つからないかな…。

ちょっと余談ですが…

実はここにきて、HPBの安定化方法を見つけてしまう…

　これは結構以外だったのですが、ここ最近、HPBが安定しないというのがすごい不満だったんです。具体的に言うと、あるページを開こうと思うと、ひらく前に強制終了してしまうなんてのが結構多かったんです。

　なのですが、実は、ここのところHPBでファイルを開いて、コードをコピーして、Dwで貼り付けて…という作業をしていて、HPBが落ちないんですよ、これが不思議なぐらい…。

　どうやったのかというと、単純に「ビジュアルサイトビュー」を一度閉じてから、普通に「ファイル」から目的のファイルを開くというだけ。これで、全くと言っていいほど落ちなくなりました。ただ、こうしてしまうとサイト更新の時に面倒かなぁと思うのですが、再起動すれば自動的にビジュアルサイトビューは起動してくれるので、更新するときだけ利用すればいいし、何なら「サイト」から「サイト転送」で進めば出来ますからね。

　確かに、ページ枚数が膨大なので、サイト転送までがもたつくとかは同じだし、重たいページの動作が重いのも同じですが、強制終了されなくなったのは嬉しい悲鳴。っていうか、引越し作業をしていて気付くとか遅いわ…。

ページのトップに戻る