最近SCSSを利用してバリバリCSSを記述しているが、、(いや、言い過ぎました。m(__)m)

WordoressのテーマにはSCSSで書かれでいることも多くなったが、プリプロセッサには一般的な『Compass』が使われている。

だいたい、

http_path = "/"
css_dir = "css"
sass_dir = "_scss"
# output_style = :compressed
line_comments = false
.........

 みたいな、ルールが与えられていて、Ruby&『Compass』と聞いただけで面倒がっていた私はDWのCSSプリプロセッサと『Compass』の共存に頭を悩ましていた。

しかし流石にMacromedia Dreamweaver! いゃ、失礼 Adobe Dreamweaver! 『Compass』の事は忘れていませんでした。

こちらのページに: https://blogs.adobe.com/creativestation/web-dreamweaver-sass-compile-and-options

Compassを利用したい場合は、サイト設定の「CSS プリプロセッサー」の「Compass」の項目から「Compass を使用する」にチェックを入れ、Sassファイルの上部に「@import ‘compass’;」を記述します。
Dreamweaverに内蔵されているライブラリを利用するので、Windowsユーザーでも面倒なインストールを行わずに手軽に使うことができます。

のようにありました。

いゃ、嬉しいじゃないか。

こんな地味な事で人の気分は高揚し、幸せになるものなんですね。

ちなみに対応はCC2017からです。

 

 

「Dreamweaver CS4のサイト定義で一階層上が設定されるバグ」
個人的に使っているCS4ではこの症状は現れませんでしたが、教えている学校のDreamweaver CS4では、選んだディレクトリの一階層上が設定されるというバグが見られました。
国内サイトを探しても有益な解決策が見つかりませんでしたが、海外ではバグとして報告され、アドビのフォーラムでも同様のバグが報告されていました。

解決策としては、手動(パス打ち込み)で設定するか、意図的に一階層下のディレクトリの設定することによって可能です。
これは私も行っていましたが、もっと根本的な解決策は無いのものかと考えながら続きを読むと、アドビフォーラムで報告されていました。

http://dwcourse.com/dreamweaver/windows-bug-local-root-folder.php
http://forums.adobe.com/message/2197998

報告では、この症状はCS4だけでなく全てのバージョンで、VistaのSP2で発生するとのことです。
現在のところ解決策は無いようですが、「サイト定義は毎日のことじゃないので、ガマンできるよ、」と結ばれていました。
しかし、学校で教えるとなると、、そうはいかないんですね。
生徒は、先生よりもソフトを信じる傾向にあるし、特に初心者にはバグというものを感覚的に理解できないので。。

※この件に関して情報をお持ちの方はお教えください。
※誤訳や解釈違いの可能性がありますので、原文をご一読ください。

To make the web pages is easy now by Fireworks and Dreamweaver.
This guide paper is the introduction of workflow about Fireworks and Dreamweaver.

 

Dreamweaver のデザインタイムは一見良く出来ている。
デザイン(Dreamweaver 編集時)しているときだけ、ページ単位で特定の複数のCSSを有効にすることができる。
つまり編集時だけの仮のCSSリンクだ。

便利そうで、、実際便利なので良く使っている。
CMSのテンプレート設計時などは実際のサイト構造とローカルでの構築環境が違っている場合も多い。
また、CSSへのリンクをphpなどによって動的に設定している場合もある。
このような場合はもちろん静的なローカル環境ではデザインの確認ができず、ローカルで検証サーバーを立ち上げるか、本サーバーへのアップにより確認となる。

しかし、デザインタイムを設定すれば、自由にCSSファイルへのリンク設定が可能なため、このような問題から開放される。。はずなのだが、、
実際は上手く行かない。

リンクは設定され、多くのスタイルは適応されるが、されないものもある。
また、デザインタイム使用時のブラウザによるプレビューは益々完全とはいえない。デザインタイムを盲信すると思わずハマッてしまうことになる。
結局、削除前提のリンクを記述することになる。

Dreamweaver デザインタイムは便利そうで便利ではあるが、100%は使えないという話でした。

Dreamweaver CS4からSubversion(SVN)機能が搭載されました。

Dreamweaver本体が単なるページ作成ソフトでは無く、WEBサイト構築のIDEを目指しているようなので、対抗馬としてはAptana(Eclipse)が考えられます。
各言語への対応とSVN機能が利用できるようになったことで、益々CS4はIDE的なソフトを目指しているといえるでしょう。
個人的にも、Dreamweaverを利用するか、Aptanaを利用するかの岐路に立たされているので、DreamweaverとAptanaは互いにライバルと言えます。(個人ユースとしてはEclipse程大きなIDEにはなって欲しくないですね。)

現状の問題点としては以下の3点が上げられます。
・サポートされていないSVN機能がある。
・TortoiseSVN などと併用するとバージョン管理に問題(バージョンの読み込み不能や競合、メタデータの読み込み不能)が発生し修復不可能となる。

良い点としては、ページ作成 -> アップロード確認 -> コミット(チェックイン) が一環してスムーズに行えることです。
アプリケーションの切り替えで思考の流れを妨げないのでSVNの使用を意識する必要がありません。

一旦使い出すとTortoiseと併用できなくなり、キツイですが、、SVN機能を搭載した最初のバージョンとしては十分に利用価値があるでしょう。
しかし、個人的なお勧めは、DWのエクステンション「SubWeaver」でしょう。
こちらはTortoiseに準拠(Tortoiseがインストールされていないと動作しない。)なので、安定性が高く
レスポンスも非常に良いです。(単にDWのファイルブラウザでSVN操作が可能なのですが。)
アイコンのステータス表示はありませんが、使用上の問題はありません。
CS4以外のバージョンでも利用可能です。

以下のサイトで日本語版のダウンロードが可能です。
http://studio-fun.net/

Nucleusのスキンを作成を支援?するためのDreamweaver用スニペットです。
個人的には使えている、、のですが、
果たして他の人に使えるほど便利かは疑問です。
ただ、Nucleusのテンプレートを効率良く作成するにはDreamweaverのスニペットなどを利用するのが必要不可欠だと考えています。またスニペットは「自分用にカスタマイズ」するのが容易なので、是非お試し下さい。

Dreamweaverスニペット画面
スニペット

 

_Nucleus_pagemaker_utf
インクルードファイル(モジュール)
mod_head_links.inc DOCTYPE宣言やCSSファイル、RSSファイルへのリンク指定など
mod_navigation.inc スキンタイプによってタイトルなどを制御する
mod_nicetitle.css nicetitle.js用のCSSファイル
mod_nicetitle.js フローティング・スタイルのtitle属性値の表示
mod_sidebar.inc 標準的なブログタイプのサイドナビゲーション
nucleus_general_2.css tmplate_generalから出力されたHTMLをレイアウトするものです(画像が必要ありません)
レイアウト用ダミーテキスト
default/index テンプレートdefault/indexから出力されるHTMLソース。
default/item テンプレートdefault/itemから出力されるHTMLソース。
メニュー(sidebar.inc) ファイルmod_sidebar.incから出力されるHTMLソース。
検索結果 スキン「検索ページ」から出力されるHTMLソース。


「_Nucleus_pagemaker_utf」で可能なこと

  1. スキン作成のためのレイアウト用ダミーテキストが挿入できます。
  2. defaultスキンに対応可能なCSSとしてnucleus_general.cssとnucleus_general_2.cssが用意されています。nucleus_general_2.cssは画像が必要がありません。 (nucleus_general.css用の画像はdefaultスキンの画像を利用するか、http://itami.info/suc/template/general.htmlからダウンロードして下さい。)
  3. ダミーテキストを配置することによってローカルコンピュータでのレイアウト作業が可能となります。
  4. Nucleusのdefaultスキンに使用されているファイルをmod_×××という名前で汎用利用し易く用意していますので、ローカルコンピュータでNucleusブログ作成に必要な基本ファイルを全て準備できます。

インストール
Dreamweaverのスニペットは書き出しや読込がサポートされていません。CS3でもこのあたりに変更はないようなので、手作業でインストールして下さい。
「フォルダオプション」 > 「表示」は“全てのファイルとフォルダを表示する”に設定して下さい。

ローカルディスク > Documents and Settings > ユーザー(Ownerなど) > Application Data > Macromedia(CS3の場合はAdobe)> Dreamweaver MX 2004(又はDreamweaver 8、Dreamweaver 9) > Configuration > Snippets にフォルダを保存して下さい。
ユーザーが一度もスニペットを作成していない場合はSnippetsフォルダは作成されません。その場合はフォルダを作成してSnippetsと名前を付けて、その中にフォルダを保存して下さい。


※フォルダ名は_Nucleus_pagemaker_utfになっていますが、どのような名前に変更しても構いません。
使用方法
Dreamweaverで編集しているスキンの必要な場所に挿入して利用してください。

  1. ダミーテキストの利用
    基本的なレイアウトが終了したファイルにレイアウト用ダミーテキストのdefault/index又はdefault/itemを選んで挿入して下さい。
  2. CSSファイルを新規作成してnucleus_general2.css(又はnucleus_general.css)を挿入してファイル名をnucleus_general2.cssとして保存します。
    ※nucleus_general2.cssは画像を必要としないCSSです。
  3. 作成中のファイルにnucleus_general2.cssをリンクします。
  4. スキンで使用するテンプレートはdefault/index、default/item又はgenera/index、genera/itemを選んでください。


タンポポ
URLを指定して読み込み:
尚、テンプレートは管理領域の「読込/書出し」から“URLを指定して読み込み:”で以下のURLを指定して読み込むことも可能です。

general
utf generalテンプレート
http://itami.info/ftp/nucleus_general_template_utf_20070609.xml
euc generalテンプレート
http://itami.info/ftp/nucleus_general_template_euc_20070609.xml

 


ダウンロード

更新履歴

  • 20070812:CSSにゴミが入っていたため修正しました。以前のコードでも機能上の問題は発生しません。