Dreamweaverの開発環境を整える

開発環境の作り方

ローカルとサーバーを同期させる為の設定

• サイト > 新規サイト
  • ローカル情報
    1. サイト名
       管理するサイト名を入力します
    2. ローカルルートフォルダ
       フォルダを格納しているディレクトリ
    3. HTTP アドレス
       ホームページのアドレス
  • リモート情報
    
    1. アクセス
       FTPを指定する(場合によっては違うので確認すること)
    2. FTPホスト
       FTPホスト名を入力します
       (Ex) ftp.example.jp
    3. ホストディレクトリ
       サーバー側で今回開発するファイルを格納しているディレクトリを入力します
       (Ex)/root/site/
    4. ログイン
       FTPユーザ名を入力します
    5. パスワード
       パスワードを入力します
    6. FTP Passive モードを使用
       チェックを入れます

ローカルとサーバーを同期させる

リモートホストに接続をクリックします。

更新したファイルをサーバーに反映させる

サイト > PUT
もしくは
Ctrl + Shift + U

導入したら捗る！

Sass

1. Rubyをインストールする
   SassはRubyがないと動かないため、まずRubyをインストールします。
   Ruby ダウンロード
   インストールする際に、「Rubyの実行ファイルへ環境PATHを設定する」にチェックを入れます。
2. Sassをインストール
   コマンドプロンプトから下記のコマンドを入力します。
   gem install sass
   実行すればSassがインストールされます。
3. 編集 > 環境設定 > カテゴリ > ファイルタイプ/エディター
   ファイルタイプ/エディターの「コードビューで開く」内にSCSSを追加する。
   一番後ろに記載されている拡張子から、半角スペースを空けて「.scss」と入力すればOK。
4. Extensions.txtを変更する
   C:\Users\Adobe\Adobe Dreamweaver (adobeバージョン)\ja_JP\Configuration\Extensions.txt
   C:\Users\<ユーザー名>\AppData\Roaming\Adobe\Dreamweaver (adobeバージョン)\ja_JP\configuration\Extensions.txt
   下記2箇所に、以下のようにSCSSを加える

   HTM,HTML,SHTM,SHTML,HTA,HTC,...CSS,SCSS,...:All Documents
   ...
   ...
   ...
   CSS,SCSS:Style Sheets
   ...
   ...
   ...

   これで、SCSSファイルがDreamweaverのファイルアイコンに変わります。

5. MMDocumentTypes.xmlを変更する
   C:\Users\<ユーザー名>\AppData\Roaming\Adobe\Dreamweaver (adobeバージョン)\ja_JP\configuration\DocumentTypes\MMDocumentTypes.xml
   142行目の<documenttype id="CSS"～となっている行を下記のように編集します。
   <documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" >
6. Koalaを落とそう
   Koalaは、SassをCSSに変換するアプリです。
   Koala ダウンロード
   Koalaの設定で簡単に日本語にも出来るので分かりやすいと思います。
   因みに、開いた状態にしていないとSassからCSSに変換してくれないので、必ず開いておくこと。

本当はEmmetとか導入したいけど、面倒くさそうなので断念…。
Sublime Textと並行して使えばいいか。と、思っている私です。