onocomコンテンツへスキップonocomWordPress、concrete5、Mautic、JavaScript、PHP、Docker、プログラミングなどの覚え書きをしていきます。【Office】Excelでプロジェクト管理(工程・実績管理・スケジュール管理)するためのガントチャート・テンプレートを作りました。DreamweaverでSass・Compassを利用する方法の備忘録です。Gulp・Grunt等でやる方法がありますが、コマンドプロンプト(通称:黒い画面)はちょっと敷居が高いと思われる方も多いと思うので、Adobeユーザーなら大抵入っているDreamweaverの設定方法をお伝えします。Dreamweaverを利用してWordPressでサイト構築(テーマ開発)することを想定していますが、他のサイト制作でも同様の設定で多分利用できます。試行錯誤の結果とりあえず動いたという設定方法をご紹介しておりますので、正統なやり方では無いかもしれません。その点ご容赦ください。文字コードの関係でエラーになる場合があったため、config.rb、config_prod.rbに以下の一文を追加しました。“UTF-8”今回想定するDreamweaverのサイト設定Dreamweaverのサイト設定が以下のように行われている前提で説明を行います。wp-includes等のファイルがある。テーマディレクトリを「THEME_NAME」としてテーマを作り込もうとしていることを想定しています(この部分を適宜ご自身の環境に合わせて以降読み替えてください)。空のディレクトリを作成しよう以下のように、/wp-content/themes/THEME_NAME/ディレクトリに空のディレクトリを作成します。ディレクトリこのディレクトリにSassファイルを配置していきます。ディレクトリとりあえず作ります。config.rbとconfig_prod.rbをダウンロードしてきてテーマディレクトリ直下に配置します。Gist:Dreamweaverでcompassを動作させようとした時のconfig.rbhttps://gist.github.com/onocom/29259b091fdea04e159506bcba6d89ffconfig.rbこれはMinifyしない為のコンフィグファイル。このコンフィグが実行されると、最後にMinify用のコンフィグが実行される。THEME_NAMEディレクトリは適宜書き換えてください。--force`endconfig_prod.rbMinify(圧縮)用のコンフィグ。output_styleを変更することで様々な出力を選べる。設定は.mapファイルを生成するかどうかの指定。設定は、コメントを出力するかしないかの指定になります。ディレクトリは適宜書き換えてください。上記ファイルを配置するとこんな感じ。サイトの管理(M)から該当のサイトをダブルクリックして以下の画面を立ち上げます。以下のように設定しておきました。ファイルの保存時に自動コンパイルを有効にするをチェック入れとくと勝手にコンパイルしてくれるようです。Styleやソースマップを生成、ソースコメントを作成などはconfigで設定してあるので無視して良さそう。Compassの設定をしようCompassの設定項目で、Compassを使用するにチェックし、Rubyベースの構成ファイルを指定で先ほど配置したconfig.rbファイルを指定します。これが出来たら保存をします。コンパイルされるか確かめてみようSass・Compassの設定がちゃんと動作するか確かめて見ましょう。scssディレクトリ内に、適当なscssファイル(ここではmain.scss)を作成し、保存します。/~~~/main.cssとうメッセージが「出力」ウィンドウに出力され、以下のファイルが自動的に作成されました。THEME_NAME/css/main.cssTHEME_NAME/css/min/main.cssやったー!出来た!まとめ設定さえしてしまえば、DreamweaverでもSassが使えるので大変便利ですね。黒いウインドウ怖いといって敬遠していたかた、ぜひご活用ください。設定方法でもっと良いやり方があれば教えてください。3)を愛用しているのですが、2014年頃から新しいバージョンがリリースされず。このまま使い続けるのもいいのですが、他のIDE(統合開発環境)を模索しても良い頃かと思い、AptanaのベースともなっているEclipseをインストールしてみました。2017年の6月末にEclipseのバージョン4.7(コードネームをOXYGEN(酸素))がリリースされており変わらず活発にアップデートがされているようです。10(64bit)でEclipseをインストールする手順をまとめてみました。日本語化についても簡単に触れていますが不足部分はググってくださいませ。ダウンロード公式サイトのダウンロードページへアクセスhttps://www.eclipse.org/downloads/ダウンロードボタンをクリック。一度ダウンロードボタンをクリックダウンロードが開始される。お金に余裕のある方は、ダウンロード中の画面に表示される寄付を検討してみてくださいませ。インストールダウンロードしてきた、「eclipse-inst-win64.exe」をダブルクリックしてインストール操作を行います。