DreamweaverでSass(Compass)を利用する方法

Adobe DreamweaverでSass・Compassを利用する方法の備忘録です。

Gulp・Grunt等でやる方法がありますが、コマンドプロンプト(通称:黒い画面)はちょっと敷居が高いと思われる方も多いと思うので、Adobeユーザーなら大抵入っているDreamweaverの設定方法をお伝えします。

Dreamweaverを利用してWordPressでサイト構築(テーマ開発)することを想定していますが、他のサイト制作でも同様の設定で多分利用できます。

試行錯誤の結果とりあえず動いたという設定方法をご紹介しておりますので、正統なやり方では無いかもしれません。その点ご容赦ください。

2018年2月2日追記

文字コードの関係でエラーになる場合があったため、config.rb、config_prod.rbに以下の一文を追加しました。

Encoding.default_external = “UTF-8”

今回想定するDreamweaverのサイト設定

Dreamweaverのサイト設定が以下のように行われている前提で説明を行います。

今回のサイト設定・構造

Dreamweaverのサイト設定

  • サイト直下にwp-content , wp-admin, wp-includes等のファイルがある。
  • テーマディレクトリを「THEME_NAME」としてテーマを作り込もうとしていることを想定しています(この部分を適宜ご自身の環境に合わせて以降読み替えてください)。

空のディレクトリを作成しよう

以下のように、/wp-content/themes/THEME_NAME/ディレクトリに空のディレクトリを作成します。

Compass用の空ディレクトリの作成

scss ディレクトリ

このディレクトリにSassファイルを配置していきます。

css, css/min ディレクトリ

sassディレクトリに配置されたSassファイルがコンパイルされ、生成されたCSSファイルが配置されます(css/minにはminifyされたCSSが配置されます)

fonts, images, js ディレクトリ

とりあえず作ります。Compassが画像等を出力する時に使用するようですが正直よく分かりません(笑)

configファイルを配置しよう

以下Gist からconfig.rbとconfig_prod.rbをダウンロードしてきてテーマディレクトリ直下に配置します。

Gist:Dreamweaverでcompassを動作させようとした時のconfig.rb

https://gist.github.com/onocom/29259b091fdea04e159506bcba6d89ff

config.rb

これはMinifyしない為のコンフィグファイル。このコンフィグが実行されると、最後にMinify用のコンフィグが実行される。

THEME_NAMEディレクトリは適宜書き換えてください。

config_prod.rb

Minify(圧縮)用のコンフィグ。

なお、output_styleを変更することで様々な出力を選べる。

  • :expanded ・・・ 通常のCSS出力
  • :nested ・・・ ネストされたCSS出力
  • :compact ・・・  コンパクトなCSS出力
  • :compressed ・・・ Minifyされた最も小さいCSS出力

また、sourcemap の設定は.mapファイルを生成するかどうかの指定。
line_comments の設定は、コメントを出力するかしないかの指定になります。

THEME_NAME ディレクトリは適宜書き換えてください。

テーマディレクトリ直下に配置

上記ファイルを配置するとこんな感じ。

config.rb/config_prod.rbを配置

サイト設定でCompassを有効化しよう

サイト設定を開く

Dreamweaverメニュー → サイト(S) → サイトの管理(M)から該当のサイトをダブルクリックして以下の画面を立ち上げます。

サイト設定

CSSプリプロセッサー - 一般設定

以下のように設定しておきました。

Sassの設定

ファイルの保存時に自動コンパイルを有効にする

をチェック入れとくと勝手にコンパイルしてくれるようです。その他のOutput file Styleやソースマップを生成、ソースコメントを作成などはconfigで設定してあるので無視して良さそう。

Compassの設定をしよう

Compassの設定

Compassの設定項目で、

Compassを使用する

にチェックし、

Rubyベースの構成ファイルを指定で先ほど配置したconfig.rbファイルを指定します。

これが出来たら保存をします。

コンパイルされるか確かめてみよう

Sassファイル(SCSSファイル)を保存するとコンパイルされる

Sass・Compassの設定がちゃんと動作するか確かめて見ましょう。

scssディレクトリ内に、適当なscssファイル(ここではmain.scss)を作成し、保存します。

数秒待つと

/~~~/main.scss は CSSに正常にコンパイルされました: /~~~/main.css

とうメッセージが「出力」ウィンドウに出力され、以下のファイルが自動的に作成されました。

THEME_NAME/css/main.css
THEME_NAME/css/min/main.css

やったー!出来た!

まとめ

設定さえしてしまえば、DreamweaverでもSassが使えるので大変便利ですね。

黒いウインドウ怖いといって敬遠していたかた、ぜひご活用ください。

config.rb の設定方法でもっと良いやり方があれば教えてください。

 



【動画付き操作方法】複数に分かれたファイルを1つにまとめて圧縮する方法。まとめたファイルをファイル便(無料の大容量ファイル転送サービス)で送る方法。(Windows/Mac)

大容量の写真をメールで送りたい!沢山のファイルを纏めて送りたい!という方へ

写真ファイルなどのファイルサイズの大きなファイルをやり取りする時に、メールに添付してしまうと容量オーバーで送れない場合があります。また、ファイル数が多いと尚大変です。

そういったときのために、

1:複数ファイルを圧縮して1つにまとめる方法

2:圧縮したファイルをファイル便、大容量ファイル転送サービスで送る方法

を動画付きでご紹介します。

Windowsで操作をしていますが、「圧縮してひとつに纏めて送る。」という基本的な考え方はMacでも同様です。

1:複数ファイルを圧縮して1つにまとめる方法

複数のファイルサイズの大きいファイルをひとつに纏めて圧縮する方法は以下のとおりです。

手順

  1. フォルダを作成する
  2. フォルダに圧縮したいデータを入れる
  3. フォルダを右クリックする
  4. 右クリックメニューの「送る」から「圧縮( zip形式 )フォルダー」を選択
  5. 圧縮ファイルが出来上がります

2:圧縮したファイルをファイル便、大容量ファイル転送サービスで送る方法

宅ふぁいる便というサービスを利用してファイルを一旦オンラインにアップロードします。(宅ふぁいる便だと300MBまで無料で送ることが出来ます。)

アップロードするとダウンロード用のURLが発行されますので、そちらをコピーしてメールやサイボウズLive、チャットワーク等に貼り付けて共有します。

手順(300MB以内のファイルを送る場合)

300MB以内の場合は宅ふぁいる便というサービスが使いやすいです。

  1. 宅ふぁいる便のアップロード用URLにアクセスする
    https://free.filesend.to/fileup_free
  2. 圧縮したファイルをドラッグ&ドロップで放り込む
  3. 「著作権侵害や違法なファイル等ではありません」にチェックを入れる
  4. 「アップロード内容を確認する」ボタンをクリックしてファイルをアップロードする
  5. ダウンロードURLをコピーして、メールやサイボウズLiveで送信します。

手順(300MB以上のファイルを送る場合)

300MBを超える物凄く大きなファイルを送りたい場合は、ギガファイル便というサービスを利用します。

  1. 宅ふぁいる便のアップロード用URLにアクセスする
    http://gigafile.nu/
  2. 圧縮したファイルをドラッグ&ドロップで放り込む
  3. ダウンロードURLが発行されるので、URLをコピーして、メールやサイボウズLiveで送信します。

まとめ

最近はGoogleDriveやDropboxといったサービスでやり取りすることも増えてきましたが、クライアントさんによってはそういうサービスを利用していない方も多いので、ファイル送信サービスをご紹介しました。

ご参考になれば幸いです。