• ねぇねぇ。なんでDreamweaver使ってるのにFTP別にしてるの？ねぇなんで？
• だってFTP繋ぐソフトないとアップ出来ないじゃん。
• DreamweaverでFTP繋げばいいじゃん。
• え。FTP繋げられるの？ (設定めんどくさそ～)
• 繋がるよ！使ってみなよ！
• 今度時間あったらやってみるわ！ (って言っとこ)

どうもこんばんは！HYPのこうじです。

意外とDreamweaverを使っているのにも関わらず、FTPにつなぐのはFFFTPだったりとか別クライアントでやってる人が結構多いですよね。

もしや知らない？

難しいのか？

等と色々憶測しますが、多分楽天市場とかに出店すると、大抵ECC(ECコンサルタント)に言われる事とか、サポートページの説明がFFFTPなんですよね。
そりゃ本職の型が片手間でウェブもやらなければいけないとなったら自然と教えてもらった通りにやるのが定石です。

DreamweaverのFTPクライアントは非常に優れているので、これを使わない手はありません。
もし使っていない人でも、ハイブリッド的な使い方もオススメです。
『FTP管理とテンプレート管理をDreamweaverでやって、コーディングをSublimeTextでやる』とか。

用途によりますが、大抵EC管理の外注の場合はクライアント様がDreamweaver使ってたら絶対テンプレート機能を使って構築します。
管理楽ですからね！

まぁテンプレート機能は後日機会があったらって事で、今回はDreamweaverのサイト管理機能を設定してみましょう！

今回はわかりやすいように、楽天GOLDを想定した作成をしてみます。

Dreamweaverのイケメン機能

その前に、Dreamweaverのココがいいね！をご紹介。

関連ファイルをすべてアップロード

もうなんといってもこれです。まじ神。

例えば、トップページを編集して、一緒にJavascriptも書き換えて…。スタイルシートもブイブイ言わせたとしますね。
通常なら、変更したファイルを全て選んでアップロードしなければいけません。

それがDreamweaverからアップロードした場合、編集したhtmlファイルをアップロードするだけで、編集したページに関連している更新されたファイルも一緒にアップロードしてくれます！

編集したファイルが多いと、ついついアップするのを忘れてしまって、思ったようにページが表示されなかったなんて事はよくある事ですが、そういったちょいミス系を気にする事がなくなるのは魅力的ですね！

ファイル名を変えても紐づけされているファイルを全部変更してくれる

FTPとは関係ないですが、これも意外と優秀！

例えば、Dreamweaverのエクスプローラーからファイル名を変更したら、変更したファイルにリンクしているすべてのファイルのリンク名も変更してくれます！

何かの拍子にファイル名を変更しなければいけない時も、普通であれば『リンクしているファイルをすべて開いて変更して保存…』を繰り返さなくてはいけませんが、Dreamweaverだと、全部自動でやってくれます。便利ですね！

テンプレート機能がより効率的に

テンプレート機能を使うと、ひな形を編集した際には大量のファイルが一括更新されるのはザラです。

そんな時に、他のFTP接続ソフトを使っていたら、まず更新されたファイルがどれだとか、こっからここまでアップロードとか全部手動で選択してアップロードする必要があります。当然ですが…。

ですがDreamweaverの同期でアップロードすれば、更新されたファイルを全て検出して一括でアップロードしてくれるので、言ってしまえばボタン一つで終了です！

実際は一つじゃないよ。3回くらいはクリックするよ！
それでも断然ラクですね！

そんな感じで、早速サイト管理の設定を行っていきましょう！

サイトの設定を行おう

まずは、サイトのファイルが格納されているフォルダを準備しましょう。
初めてサイトを構築するよ！という場合は、新しくフォルダを作ればOK。
既に構築済みの方は、そのフォルダを指定します。

サイト管理画面を開く

サイトフォルダを選択

『サイト名』には自分の分かりやすい名前を入力しましょう。

『ローカルサイトフォルダー』には、サイトファイルが格納されているフォルダを選択します。
初めて作る人は、新しいフォルダを作ってそれを選択すればOK。

FTP接続情報を作成

FTP情報は接続するサーバーのマニュアルを確認してくださいね。
『＋』ボタンを押してFTP情報入力画面を表示させます。

FTP情報を入力

『テストボタン』を押すと、今の設定が実際に接続できるかを確認出来ます。
ここで通らなかったらどこか間違っているので、IDやパスワードを確認しましょう。

『ルートディレクトリ』は接続時の最初のフォルダを指定出来ます。
ルート以外のフォルダを接続時に参照したい場合は、フォルダ階層を入力するとリモートサーバーの接続時階層が設定した階層からスタートになります。

例: css/fonts

保存時に自動でアップロードするには

保存と同時に、アップロードもすませちゃいたい欲張りなあなたは、FTP情報画面の詳細設定から行えます。

非常に便利な機能ですが、『やっべ！間違った！！』と思っても待ったなしです。
ご利用は計画的に。

画像格納先の初期フォルダの指定

せっかくなので、しておきましょう。

サイト設定が完成！

簡単ですね！！

同期をしてみよう

さて、サイト設定が完成しましたので、早速同期を行ってみましょう。
同期は同じく、ファイルウィンドウから行います。

一つ一つ選んでも可能ですが、初めての場合は一度リモートサーバーと完全に同期してからやると、古いファイルあげちゃった！とか、そういう心配が減ります。
なので、まずは今設定しているフォルダをリモートサーバーと同じ状態にしておきましょう。

すべて同期するにはファイルウィンドウの右にあるぐるぐるをクリックします。
ちなみに左は、ただファイルリストを更新するだけだよ。

同期方法を設定

同期の範囲と同期方法を細かく選択できます。

ちなみに、同期セレクトボックスを『選択したローカルファイルのみ』にすると、エクスプローラで選択されているファイルのみ、同期処理を行います。

基本的には、サーバー上のファイルとローカルファイルを比較して、新しい方をアップロードorダウンロードします。

『ローカルドライブ上にないリモートファイルを削除』にチェックを付けると、ローカルファイルに無くてサーバー上にだけあるファイルを削除できます。そのままですね(笑)
使い方によっては、サーバー上の無駄に残っているファイルを整理出来たりもします。

チェックファイルを確認して同期開始

サーバーとローカルファイルの照合が終わると、すべての処理するファイルリストがすべて一覧で出てきますので、気に入らない処理結果は自分で変更しましょう。
『あーこれ上げたくないな。』とか、『これいらんかった。』といった場合はここでファイルの処理を変更できます。

ちなみに『GET = ダウンロード』で、『PUT = アップロード』の事です。

変更が終わったらOKボタンを押せば、同期が開始します。

これで同期は完了です！

チームで管理する時は

複数人で管理する場合は、必ず最初に同期を行って、変更されているファイルがないかどうかを確認しましょう。

同期しないで進めてしまっても、もしサーバー上のファイルが編集されている場合は『自分のとサーバー上のファイルどっちが大事なの！？』と、彼女と喧嘩した時にありがちな内容を聞かれます。
勝手に上書きとかはされないので安心してください。

ただ、どちらかの編集が確実に無駄になってしまいますので、一人で管理じゃない場合は、最初に同期しておくと幸せかもしれません。

これは同期したくない！そんなときは？

もちろん、通常であればサーバーとローカルフォルダが全く同じ状況が通常ですが、

このファイルは同期したくない！

そんなこともあるかと思います。

例えばわかりやすいように、画像データと一緒にpsdもフォルダ分けで入れている場合、もちろんpsdフォルダも同期されます。

正直サーバー上で使わないファイルをアップロードしても、楽天GOLDのような数少ない容量を圧迫してしまうので、そういったものを同期するのは非常にナンセンス。

そんな時は、『クローク』という機能を使って、同期の対象外ファイルとして設定できます。

クロークされたファイルorフォルダは、アイコンに斜線が引かれ、アップロードもダウンロードもされません。

逆にサーバー上で自動で作られるフォルダや、外部サービスで自動更新されるファイルをクロークする事で、無駄な通信のやり時も減らすことが出来て、作業効率アップに繋がりますね！

拡張子からクローク

この場合はサイト管理設定の詳細設定内にある『クローク』から、クロークする拡張子を登録する事で勝手にクロークしてくれます。

ファイルやフォルダ毎にクローク

ピンポイントでクロークしたい！フォルダの中をまとめてクローク！なんて時はこの方法で出来ます。

ファイルウィンドウからクロークしたいファイルを右クリックし、コンテキストメニューのクロークから『クローク実行』をクリック。
解除したい場合は『クロークを解除』。

まとめ

基本的にページを編集するときはDreamweaver！という方は、サイト管理機能は是非オススメです。
無駄にアプリを増やさなくて良いのと、いちいち別アプリを開く手間も省けます。

サイト作りから公開までこれ一つで出来るのに、わざわざ回りくどいことをする必要はないですよね。

無理にテキストエディタでタグを覚えるより、Dreamweaverの使い方を覚える方が、人によっては近道かもしれませんね！

ただ、ハイブリッドコーダーさんにはハイブリッド具合によってはDreamweaverじゃなくて、別途FTPクライアントの方が楽な事もあります。
なんせ、ただFTPのみ使うのであれば、断然NextFTPのソフトのが起動が早いですからね！

僕の場合は、基本的にSublimeTextなので、FTPはプラグインの『SFTP』を使い、予備でNextFTPを使用しています。
そしてテンプレート機能を使う時のみ、Dreamweaverを使うという感じです。

Dreamweaverのサイト管理は一つの手段なので、自分にあった使い分けが見つかると良いですね！