「DreamweaverCC」タグアーカイブ

Dreamweaverでリアルタイムプレビュー

リアルタイムプレビューもCC2017からの機能。ブラウザ表示を手動でリロードしなくても、自動的にリロードしてくれる。
（キャッシュが絡むんで、ちょっとだけブラウザ側の設定が必要）

これも設定を忘れないよう、備忘録。
ここに書いている内容は私の環境でやっていることなので、同じようにならなくても責任はとれない。

※環境はMac・DreamweaverCC2018
※ローカルサーバーはMAMPを使用
※作業しているフォルダ（案件フォルダ）はSassの設定で使用した「test」をそのまま使用

リアルタイムプレビューの設定

リアルタイムプレビューは、作業しているフォルダの中身をMAMPのhtdocsにコピーして表示させる仕組みになっている。
サイトの管理で設定したものを削除してもhtdocs内にファイルが残ったままになるので、こまめに整理した方がよい。
MAMPを起動しておいてから、リアルタイムプレビューを使用。

  1. サイトメニュー ＞ サイトの管理 ＞ test（今回はSassの設定で登録したものを使用）を開く
  2. サイト設定の各項目を設定

    ◆サーバー
    ローカルサーバーのMAMPを設定しておくとPHPファイルも確認できるのでラク。
    「＋」ボタンをクリックして、新規サーバーの追加設定画面を表示させる。

    【基本】
    ◎サーバー名：適当でOK　今回はMAMPを設定するので「MAMP」
    ◎使用する接続：ローカル/ネットワーク
    ◎サーバーフォルダー：/Applications/MAMP/htdocs/test/
    ◎Web URL：http://localhost:8888/test/
    ※「サーバーフォルダー」と「Web URL」は「test」というフォルダまで指定しておかないと、MAMPのhtdocs内に「test」内のファイルが直にコピーされてしまう。

    サイト設定、サーバーの基本設定画面

    【詳細設定】
    ◎リモートサーバー：同期情報の保持のチェックを外す
    （チェック外すと_notesが作られないって説明があるけど、作られまくってる。。。）
    ◎テストサーバー：テストサーバーにファイルを自動的にプッシュにチェック入れて「保存」をクリック。

    サイト設定、サーバー詳細設定画面

    「サーバー」画面に戻ったら、設定した「MAMP」の「テスト」にチェックを入れて「保存」をクリック。

    サイト設定、サーバーの設定画面
  3. htmlファイルに戻ったら「リアルタイムプレビュー」ボタンをクリックして、
    ブラウザでプレビュー ＞ 任意のブラウザを選択 ＞ サイトのプレビューが表示される

※リアルタイムプレビュー表示の注意点
ブラウザ側でキャッシュを無効にしていないとうまく表示が変わらない。
（キャッシュを無効化してても、しばらく時間が経たないと変わらなかったりする）
各ブラウザのデベロッパーツールを表示して、ネットワークのキャッシュ無効にチェックを入れること。

◎Chrome：検証 ＞ Network ＞ Disable cache

Chromeのデベロッパーツール
◎Firefox：要素を調査 ＞ ネットワーク ＞ キャッシュを無効化

Firefoxのデベロッパーツール

◎Safari：開発メニューに「キャッシュを無効にする」というのがあるとappleサポートページに書いてあるけど見当たらず。。。
Safariだけ常時無効にする方法がわかりません。。。

リアルタイムプレビューは、ずーっと作業を続けてる時は比較的安定して動くけど、ちょっと開いたまま作業せずにほっておくと接続がきれて動かなくなったりする。
何度試しても無理なら起動しなおすとかした方が早いかも。
複数ページを確認する場合、ページごとにリアルタイムプレビューボタンをクリックしなくても、確認したいhtmlファイルをDreamweaverで選択すればブラウザで勝手に表示が切り替わってくれる。


DreamweaverでSassを設定

Sass（Scss）を使用するには黒い画面（ターミナル）で設定をごにょごにょしないといけない、と、思われがちだけどDreamweaverCC2018で比較的簡単に設定できる。
機能的にはCC2017からなので知ってる人は知ってる機能。

設定を忘れないよう、備忘録ってことで。
ここに書いている内容は私の環境でやっていることなので、同じようにならなくても責任はとれない。

※環境はMac・DreamweaverCC2018
※Sassについて：scssでもsassでもフォルダ名は「sass」が多いので、この文章中でもフォルダや基本名称はSass。ファイルはscss。
※作業しているフォルダ（案件フォルダ）を「test」とする

Sassの設定

  1. サイトメニュー ＞ サイトの管理 ＞ 新規サイト　を開く
  2. サイト設定 ＞ サイト

    ◎サイト名：サイトの管理で表示される名前。今回は「test」としている
    ◎ローカルサイトフォルダ：作業するフォルダを指定

    サイト設定の入力画面
  3. サイト設定 ＞ CSSプリプロセッサー

    ◆一般
    ◎「ファイルの保存時に自動コンパイルを有効にする」にチェックを入れる。
    ◎SASS/SCSS：Output file style：cssへの書き出し方法を設定
    cssの書き出しは「nested」「compact」「compressed」「expanded」の4種類から選ぶ。
    それぞれどんな表示になるかは色々なサイトで紹介されてる。
    実際表示を見比べた方がわかりやすいと思う。

    サイト設定、cssプリプロセッサーの一般管理画面

    ◆ソースと出力
    scssファイルとcssファイルの保存場所を設定する。

    【css出力】
    ◎ソースと同じフォルダー：scssファイルと同じフォルダにcssファイルが作成される
    ◎出力フォルダーを定義：scssファイルとcssファイルを別にしたい場合のcssフォルダを指定

    【ソースフォルダー】
    Sassフォルダを指定する

    サイト設定、cssプリプロセッサー：ソースと出力設定画面

    ◆Compass
    入ってると便利なフレームワーク。ベンダープレフィックスを自動でつけてくれたりする。
    ターミナルでインストールしてたけど、Dreamweaverでインストールできるようになった。
    でも、開発終了ってなったらしいんで、今後この設定はどうなるんでしょうねぇ。。。

    ◎「Compassを使用する」にチェックを入れる
    ◎Rubyベースの構成ファイルを指定：PCにCompassをインストール済みの場合、使用している「config.rb」ファイルを指定して「保存」をクリック。
    ◎構成オプションを手動で指定：Compassをインストールしていない場合はこちらで各フォルダを指定して「ファイルをインストール」をクリック。
    手動で指定すると「config.rb」「ie.scss」「print.scss」「screen.scss」が自動的に作成される。

    ※「config.rb」：Compassの設定が書かれたファイル。
    cssやSassを保存するフォルダやcssの表示方法が書かれているので、他人とSassの設定を共有できる。
    ※手動で指定すると「config.rb」の「http_path」の記述が自分のPC環境そのままになるんで、他人に渡す時は書き換えが必要。jsフォルダの設定も無いんで、自分の環境に合わせて書き換えが必要。
    ※自分で作成しているscssファイルがある場合、「ie.scss」「print.scss」「screen.scss」は使用せずに削除してもOK。ただし、削除後設定パネルの「ファイルをインストール」を再度クリックすると新たに作られる。
    ※自分でscssファイルを作成している場合、ファイル内でCompassファイルの読み込みが必要。
    自動で作成された分は「screen.scss」に記述が入ってる。
    ※font-familyとかcss設定に日本語（游ゴシックとか）が記述してあるとコンパイルエラーを起こすので、scssファイルの1行目に必ず「@charset “UTF-8”;」の記述が必要。

    サイト設定、cssプリプロセッサー：Compassの設定画面

    【別のサイトを制作する場合】
    新たに「test2」というサイトを制作する場合は、「test」フォルダから「config.rb」をコピーしておく。
    サイトの管理で「test」の設定をコピーして「test2」の内容に書き換える。
    Compassの設定は、Compass ＞ Rubyベースの構成ファイルを指定　にコピーしておいた「config.rb」のパスが自動で入るので手動で設定する必要なし。（多分。。。）

たまに動作が不安定な時があるような無いような。。。
気軽にSassが使えるようになったんで、DreamweverCC使えてSassを使ったことがないって人には、いいとっかかりになるんじゃないかな、っと。