プリセットマネージャーからでもポップアップする。

1）新規でドキュメントを作成して
なんでもいいから適当にブラシで描画
それをコピーして

2）ブラシが使えないドキュメントにペーストすると
ブラシが使えるようになる。

Telegraphics – Free plugins for Photoshop & Illustrator…and other software

ページ下部からプラグインをdlして

windowsならここらへんにぶっ込む。

C:\Program Files (x86)\Adobe\Photoshop CS\Plug-Ins\File Formats.

C:\Program Files\Adobe\Adobe Photoshop CS4 (64 Bit)\Plug-ins\File Formats.

windows7 64bitでも
photoshopの32bitならWindows (32 bit)を使う。

初めていわれた。

fireworksでも

ファイルを開けませんでした。
ファイルタイプが不明です。

と言われて開けなかった。

解決法

ペイントで開いて別名保存した
jpgで保存したら、ブロックノイズが乗りまくったのでpngにした。

忙しくってアウトプットする時間を作れない。
色々あるのに忘れてしまう。

カスタムシェイプで長方形や四角を描くときに
ガイド引いてから描いたり
適当に描いた後パスを選択してサイズを調整したり
四角や円なら描いた後
上の比率を設定ってところで数値を入力してサイズを整えていて

カンバスをダブルクリックして数値入力画面が表示されたりしないかなとダブルクリックしたけど
何もおこらなくて
そういやラインツールのオプションで矢印付けられたりしたけど
長方形はどうだろう？と押してみたら
サイズを指定する所があったという。
でも面倒くさいお( ´･＿･｀)

※ラインツールのオプションで開始点にチェックを入れたライン

[編集] – [コンテンツに応じて拡大・縮小]Ctrl+Alt+Shift+C
スマートオブジェクトには使えない

上で使ったアルファチャンネルは
クイック選択ツールで選択範囲を作って
[設定範囲] – [設定範囲を保存]から作成

参考adobe help

Adobe Photoshop CS5 * コンテンツに応じた拡大・縮小

キーボードショートカットを編集してると色々問題が起こるのかなぁ
Configuration再構築すると再設定しなきゃダメだから超面倒臭い( ´･＿･｀)

JavaScript エラーのトラブルシューティング（Dreamweaver CS4/CS5）

C-12. ユーザ設定フォルダの再作成

以下の操作を行い、Dreamweaver のユーザー設定フォルダを再作成します。

Windows

1. Dreamweaver を終了します。
2. 以下の「Configuration」フォルダのフォルダ名を「Configuration_OLD」などに変更します。

　注意　：　以下のフォルダは隠しフォルダのため、Windows の初期設定では表示されません。ファイルやフォルダが参照できない場合は、Windows のフォルダオプションで隠しファイルや隠しフォルダを表示する設定に変更必要があります。設定の変更方法について詳しくは、Windows ヘルプを参照してください。

Windows 7/Vista　：　Users¥＜ユーザ名＞\AppData\Roaming\Adobe\Dreamweaver ＜バージョン＞\ja_JP\Configuration
Windows XP　：　Documents and Settings\＜ユーザ名＞\Application Data\Adobe\Dreamweaver ＜バージョン＞\ja_JP\Configuration
3. Dreamweaver を再起動し、問題が改善されるか確認します。

Macintosh

1. Dreamweaver を終了します。
2. Finder で以下のフォルダを参照します。
Macintosh HD/Users/[username]/Library/Application Support/Adobe/Dreamweaver ＜バージョン＞/[language]/Configuration
3. フォルダ名を「Configuration Old」に変更します。
4. Dreamweaver を起動し、問題が再現されるか確認します。

fireworksの「カンバスを合わせる」って便利ですよね
photoshopでも使いたい！と思い調べてみたところ
イメージ – トリミングと
イメージ – すべての領域を表示を組み合わせて
同じような事が出来るみたいだったので
.jsxに出来ないかなぁと試してみました。

不具合や必要ない記述があるかと思いますが、自分が使う範囲では困らない感じになったのでとりあえず公開してみます。

fit-canvas.jsx

例1 / before これが

例1 / after こうなる

例2 / before オブジェクトがカンバスの外にはみ出てる場合

例2 / after それを含めてから削る

どんな使い方をしてるか

大元のpsdからパーツを作成する時に
レイヤーを複製で新規ファイルで作成して抽出してるんですけど
その時に、元psdのカンバスサイズを引き継いでしまうので
それを除去するのに使ってます。

※ “トリミング” と “すべての領域を表示” で削れない部分は削れません。

超参考にしたページ

Adobe Photoshop CS4自動化作戦

Flash Player をアンインストールする方法
Flash Player アンインストーラーをダウンロード出来る。

文字パネルからも変更出来ればいいのになぁ。

※ 画像のフォントはたぬきフォント(JIS第二水準漢字入りフリーフォント)を使いました。
何回かアップデートされていて現在1.05みたい。

現在157個？
高品質な飾り枠素材が、ai,jpg,pngの3種類から選んでダウンロード出来る(太っ腹だ)

こりゃ助かる。

cs4～はbridgeを使うみたい。

ちなみに追加のプラグインはこちらから

cs4

アドビ – Photoshopの：Windowsの場合：Adobe PhotoshopのCS4 – プラグイン（オプション） – 日本语
アドビ – Photoshopの：Macintoshの場合：Adobe PhotoshopのCS4 – プラグイン（オプション） – 日本语

cs5

アドビ – Photoshopの：Windowsの場合：Adobe PhotoshopのCS5 – プラグイン（オプション） – 日本语
アドビ – Photoshopの：Macintoshの場合：Adobe PhotoshopのCS5 – プラグイン（オプション） – 日本语

Adobe – Dreamweaver Extension
上の一般、レイアウト、フォームとか書いてあるタブの所にjQueryのタブを追加
ボタンひとつで

$(function(){

});

とか挿入出来る。

jQueryのコードヒント拡張もあるみたいなんだけど
jQuery API extension for Dreamweaver | XTND.US – Xtnd urslf! Extensions for software. Adobe Dreamweaver, Drupal, jQuery, Eclipse, Fireworks
Dreamweaaver側のショートカットを変更してるとインストール出来ないのよね

一応

C:\Users \[ユーザー名]\AppData\Roaming\Adobe\Dreamweaver [各バージョン]\ja_JP\Configuration\Menus\

のMenus.xmlを削除するとインストール出来る。
変更したショートカットが無くなってしまうので、WinMergeなんかを使って差分をコピったりするのもいいかも。

WinMergeの説明はこちら / ファイル比較ツールをWinMergeに変更す
WinMerge 日本語版本体はこちら / WinMerge 日本語版

何かに似ていますね。

以下(ヘルプに載っている)一気に閉じる方法のメモ。

レイヤー効果が広がりっぱなしだとこんな感じ。

長い、目的のレイヤーを探しづらい。

以下、やり方

※ 対象レイヤーがグループ化されている必要がある

1)レイヤーグループの矢印を
alt押しながらクリックして閉じる。

2)altを離して、矢印をクリック
スッキリ。

準備

以下のzipをダウンロードして解凍、no-alt-no-future.dwrが出てくる。
とりあえずalt=”"を挿入するdreamweaverの検索クエリー

対象html

いい感じにaltの入ってない画象があるhtml

使い方

ctrl+Fしてクエリーのロードをクリックして
no-alt-no-future.dwrを選択
いきなり置換するのは怖いと思うので
まずはすべて検索で動作確認。
問題が無さそうなら任意の検索対象を選択してすべて置換。
検索対象を現在のローカルサイト全体なんかにすると一気に終わる。

結果

ただ空のaltが入るだけ。

ダウンロード / とりあえずalt=”"を挿入するdreamweaverの検索クエリー

cssのコードヒントで
widまで入力したら
widowsじゃなくwidthを表示させたい

対処法

CodeHints.xmlを変更する事で可能(自己責任で)

CodeHints.xmlの場所

cs4以前とcs5以降で対象のCodeHints.xmlの位置がどうも違う？

Windows7での例

cs4

C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS4\configuration\CodeHints\CodeHints.xml

cs5

C:\Users\[ユーザー名]\AppData\Roaming\Adobe\Dreamweaver CS5\ja_JP\Configuration\CodeHints\CodeHints.xml

実際の作業

CodeHints.xmlを開いて
Ctrl+F(検索)でwidowsを探す

多分3件ヒットするので

<menuitem label="widows" value="widows:" icon="shared/mm/images/hintMisc.gif" />

の方をコメントアウト
で、コードヒントにwidowsが表示されなくなると思う。

こっちもコメントアウトしといたほうがいいのかな。

<menu pattern="widows:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
 <menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>

ICO (Windows Icon) Format
Telegraphics – Free plugins for Photoshop & Illustrator…and other software

解凍してICOFormat64.8biをphotoshopのプラグインフォルダに入れる

例 / windows64-bitの保存先は

C:\Program Files (x86)\Adobe\Photoshop CS\Plug-Ins\File Formats

そんな時は、altを押してレイヤーの境界あたりにマウスを持って行くと対象を切り替えられる。

という基本操作のお話。

というわけで
そうゆう人間がphotoshopでWebのデザインをしてる時なんかは
テキストの行送りを”自動”にすると行間が空きすぎだなーと感じるわけです(175%なので)。

よく使うフォントサイズなら150%の行間をなんとなく覚えてるんだけど、
適当な文字サイズだとすぐにわからん頭なので、
電卓打ったり適当に変更しながらやってるんですけど
どうせならどんなフォントサイズでもとりあえず150%の行間にしておいて詰めたりしたい！

で「%で行間隔を指定したら出来たりして」と
%で指定すると、0.01pixelから5000.00pixelの値を入力してください。近似値を挿入します。と叱られてしまいます。
環境設定の単位・定規で決めた文字の単位以外受け付けない、と。

でも、photoshopの事だから(自動)の元がどこかにあるはずだ！
それが

段落 – ジャスティフィケーション

ここ

あった、175％。

変更した。見やすい。

というわけで%で指定出来たー。

テキストをアウトライン化しようと[テキスト] – [パスに変換]すると
物によって文字が細くなるというか、なんかカタチが崩れるんですね、微妙に。

こんな感じに(青がテキスト、赤がアウトライン)

うちは大雑把というかあんまり気にならないけど、気になる人もいることでしょう。

でもって調べると[コマンド] – [テキスト] – [固定]でもアウトライン化出来るみたいなので試してみると
こんな感じ。中マドが抜けない＞＜；；；

使い方を間違っているんですかね、これはこれで素敵だけど。

他にパスに変換する方法は見つけられなかったので
あとは画像に変換する方法を探してみる。
書きだしたりせずに簡単に出来ないかな？とあれこれやってみると
レイヤーを右クリックして – 選択範囲を結合で画像になった

うん、これがいい。

知恵袋で見かけた文字をこんな風に加工する方法のメモ、お手軽。

効果 – パス – パスのオフセット

パスのオフセット1回目

パスのオフセット2回目

オフセット1回目で形状をラウンド以外を選んで
2回目でラウンドtと1回目のオフセット量分マイナス指定。

参考1:リンケージの設定を自動化する | tanablog
上記のソースだとHOGE+連番なので
任意の接頭語+連番になるように少し書き換えて.jsflとして保存

こんな感じ。

var library = fl.getDocumentDOM().library;
var items = library.getSelectedItems();

//prompt("表示されるメッセージ", "入力されてる文字")
var myprefix=prompt("prefix", "test")

for (var i = 0; i < items.length; i++) {
//actionscriptに書き出し
  items[i].linkageExportForAS = true;
//最初のフレームに書き出し
  items[i].linkageExportInFirstFrame = true;
  items[i].linkageIdentifier = myprefix + i;
}

ライブラリの名前を活かしてリンケージさせるならこんな感じ？

var library = fl.getDocumentDOM().library;
var items = library.getSelectedItems();
var myprefix=prompt("prefixを付けるなら入力", "test")

for (var i = 0; i < items.length; i++) {
  items[i].linkageExportForAS = true;
  items[i].linkageExportInFirstFrame = true;
  items[i].linkageIdentifier = myprefix + items[i].name;//ここを変更
}

リンケージを解除するjsfl[引用]

var library = fl.getDocumentDOM().library;

library.selectAll();
library.setItemProperty("linkageExportForAS", false);

プロンプトでラジオボタンみたいなのを表示させて処理を分岐させるにはどうしたらいいんだろう。

参考2:Flashの拡張機能(pdf)

使い方メモ

[コマンド] – [コマンドの実行]からか
作成した.jsflを以下に保存するとツールバーのコマンド内に出現する

xpの場所

C:\Documents and Settings\[ユーザ名]\Local Settings\Application Data\Adobe\Flash CS3\ja\Configuration\Commands

参考3:jsflのすすめ – yama-ko.net blog

元々キーボードの調子が悪くctrlとかshiftとかzとかcとかvが反応しなくなるときがあるので、上のツールバーから[挿入 - イメージ]を押してみるがこっちも反応がない。
あるぇ？

でタブっぽいところのアイコンから画像を挿入しようと思ったら下の画像のようになってた。

い、いつから！？

文字化けした部分の名前がわからなくてうまく検索できなかったが
Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\Objects\insertbar.xml
がこの挿入アイコンの中身みたい、開いてみたら同じようにテキストが化けてた。

文字コードがSJISだったのでutf-8に変更したら文字化けが治った。
中身も違っていたのでinsertbar.xml自体削除してDreamweaverを再起動したら治った。

その後Ctrl+Iとツールバーからの画像挿入は一発目はできなくて、復活したinsertbarのアイコンから一度画像を挿入したらCtrl+Iとツールバーからも挿入できるようになった。

いつから化けてたのか記憶がないんだけど、adobeからダウンロードしたYUIの拡張がいけなかった気がする。

サイトのフォルダを一発で開く。

ローカルファイルのところを[右クリック - エクスプローラー]

クロークを使って、putやgetしないファイルを設定する

DreamweaverのFTPて便利。
ちょっと触るだけのサイトのファイルを、面倒臭がって適当にゲットしたら余計なファイルまで関連ファイルとしてダウンロード開始しちゃっていつまでもサーバーと通信中ですが終わらない事がある。

ファイルの所を右クリックするか、サイト定義のクロークで
putやgetから除外するファイルを決められる。
クロークを使用可能と次で終わるファイルをクロークにチェックを入れて、拡張子を追加。

.fla .psd

拡張子 半角ブランク 拡張子で追加してくみたい。

クロークに設定された拡張子は見た目が変わる。

imgフォルダにぶっこまれた大量のpdfを誤ってダウンロードしなくて済むハズ。

最近更新したファイル

ローカルファイルの右クリックして [選択 - 最近修正されたファイル]

日付指定でファイルを選択出来る。

テキストをタグで囲む

テキストを選択してCtrl+Tで囲める
zen-codingのCtrl+Hの劣化版みたいな機能だけど、zen-codingが入ってない場合は便利。

あれ、gifが動かない。

何か思いついたら随時追加。

原因は判らないのだけれど、直近の操作で思いつくのがこの投稿のhtml5関係の拡張を重ねて入れたりした事。

その際ja_JP\Configuration\TagLibraries内のファイルを上書きしますか？みたいな事を聞かれたので、何回か入れたり外したりしてる間に壊れてしまったのかしら。

とりあえず解決させた方法
ja_JP\Configuration\TagLibrariesをリネームしてDwを再起動し新しくTagLibrariesを作成させたらxhtmlシンタックスをするようになってくれました。

その後また拡張を入れたり外したり入れたりしてもこの現象は再現できんかった。
何が起きたんだろう。
[追記ここまで / 20101112]

HTML5 Pack for Dreamweaver CS3 and CS4を入れてみたけど、すでに丸山さん作のhtml5_tag_suites_v050.zipが入っているのでようわからんかった。

それよりも！

昨日作った接頭辞付きCSS3プロパティー同時挿入コードヒント拡張機能をバージョンアップしました。のcss3_setwithprefix_v110.zipがなんだか素敵そう。

Dreamweaver8以降に対応で、ヒントリストの語尾に「＋」のあるプロパティを選択すると、Firefox、Safari、Operaのプレフィックス付きプロパティが同時に挿入されるそうな。

早速試してみたところ、border-radiusがborder-raまで入力しないと表示されず。
+付きはスクロールバーを摘まんで下のほうにあった。
あるぇ？

blogを読む限りborと入力したあたりで出てきそうなので、こちらの環境に問題があるんだろうなぁ。
他のmxpとぶつかってるんだろうか。

とりあえずcodehint.xmlを編集して順番を変えればいいのかな？と思い
Program Filesの onfiguration\CodeHints\CodeHints.xml を開いたけど見当たらない。
よく探してみたらDocuments and Settingsの configuration\CodeHints\CSS3_hints.xml で発見。

うちには手に負えない領域ですた。

まず、どういう現象で困っているかというと

1 / モーショントゥイーンでただ回転させると
1フレーム目と最終フレームが同じ位置なので一瞬モタつく

2 / フレームレートを通してみると、よくわかる。

対策を考える

最初のフレームと最後のフレームの描画が同じだからモタつくわけで
最後のフレームが表示されなきゃいいハズ。

3 / asはそのフレームが描画される前に実行されるようなので
最終フレームにgotoAndPlay(1)を追加すると最後のフレームがキャンセルされて被らない。

4 / 見比べてみる。

asを使わずに、わざわざモーショントゥイーンで回転させてるんだから
トゥイーンの設定だけで解決したかったけど
どうにもやり方が見つからなかったので結局asを使ってしまったという。

でも滑らかになった。

for (var i = 1; i<=thumbmax; i++) {
 this["thumb"+i].num = i;
 this["thumb"+i].onRelease = function() {
  if (flag == "off") {
   _root.container_dummy.attachMovie("container", "container", 1);
   _root.container_dummy.container.photo_root.attachMovie("p"+this.num, "photo", 2);
   _root.flag = "on";
   //
    _root.container_dummy.container.photo_root.photo.x_button.onRelease = function() {
    if (flag == "on") {
     remove();
    }
   }
  }
 }
}

_root.container_dummy.container.photo_root.photo.x_button.onReleaseとか長すぎる。
こんな風にすると短く指定出来た(5～6行目あたり)

for (var i = 1; i<=thumbmax; i++) {
 this["thumb"+i].num = i;
 this["thumb"+i].onRelease = function() {
  if (flag == "off") {
   var at_c = _root.container_dummy.attachMovie("container", "container", 1);
   var at_p = at_c.photo_root.attachMovie("p"+this.num, "photo", 2);
   _root.flag = "on";
   //
   at_p.onRelease = function() {
    if (flag == "on") {
     remove();
    }
   }
  }
 }
}

上記の一件で、もうWeb用の画像加工もイラレで大丈夫！
なんて思っていたんだけど、どうも線は別の話でした。

例えば、以下のページ様を参考に設定してみたのですが(ピクセルプレビューを使っていなかった)。
参考:イラレラボ　illustrator-labo – Tips_イラレでもズレませんブレません

ただの矩形に1pxの線を内側に指定すると次のように上部の線のアンチエイリアスがおかしくなりました。

次にこちらのページ(とろテク – Illustrator CS2以降 1ピクセルの線をWEB用に保存)を参考に-0.5pxのオフセットを使ってみることに。

オブジェクト – パス – パスのオフセットを適用

あるぇ？

そして次に出会ったこちらのサイトIllustratorでピクセル単位の作業を奇麗に行うための方法（イラレのピクセルずれ問題） – Memento Macを何度か読み返していると。

効果 > パスのオフセットを使う!!と大きく書いてありました(´･ω･)

効果 – パス – パスのオフセットを使用

やっと出来た><

蛇足:効果とオブジェクトの違い

効果はアピアランス、修正も削除も出来る。
オブジェクトはパス自体を変形させる。

イラレ気が利かない。

デュアルブラシ、ブラシのマスクみたいでオモロイです。
けどそうそう毎回いじったりしなさそうなのでメモ。

その前に、カスタムしたブラシを保存する方法を覚えておく

新規ブラシを作成のアイコンをクリックして、名前をつけて保存。

新しいブラシを登録するのは[編集] – [ブラシを定義]の方

ブラシ先端のシェイプの設定
ソフト円ブラシ175pxをベースにした

シェイプの設定
ジッターを上げた、予想がつかない

散布の設定
離れないような感じに

デュアルブラシの設定
チョークを175pxで、ソフト円ブラシにマスクが掛かったみたいじゃない？

カラーの設定
揺らいで欲しかったから、気持ちやんわり。

ウェットエッジ、滑らかさにチェック。

もう少し着色してみる、テクスチャは後から付けたほうがいいのかな？

ファイル:Olympic flag.svg – Wikipedia

このシンボルマークのように線が絡むリングというか円というか輪を描く方法を考えてみたけど、どうも効率が悪い方法しか思いつかなかった。
慣れてる人にはどうって事ないんだろうなぁ。

以下その効率の悪い描き方

塗りなし線ありの適当な円を描く

線を塗にする

オブジェクト – パス – パスのアウトラインを実行

塗りになった

もう一回線を引く

このまま線を追加すると、なぜか線の位置を変更出来なかったので
一回複合パスを解除して

[パスファインダ - 中マド]で再度複合パス

線の位置を選べるようになった(何が違うんだろう？

もう一度オブジェクト – パス – パスのアウトラインを実行して線を塗りに変更する。

あとは並べて分解して着色

適当に配置

[パスファインダ - 分割]でバラバラにして

着色

まだまだ着色、ここらへんの効率が悪い、どうにかならないかな。

完成

複合パスを分解して複合パスに戻すと、線の位置を選択できるようになるとか謎だけどイラレ面白いなー

そこでjsxで出来ないかな？と調べて書いてみようと頑張ったんですけど、
複数選択したレイヤーの情報を取得する事すら出来ずに挫折しました(割と手前の壁)。

しかし、海の向こうではすでに等間隔に分布させるjsxを作って配布されてる方がいらっしゃいました、すごいなー。

ダウンロード:Adobe Photoshop Scripts | Trevor Morris Photographics
垂直方向用のjsxしか試してないけど、水平方向用や他にも沢山jsxがありまんた。

分布結果の違いを比べてみた画像

整列前の適当な配置、青い背景はサイズが分かりやすいようにとつけちゃった。

photoshopの左端を分布 / 重なるよねぇ

photoshopの水平方向中央を分布 / 最初何が起きたのか理解できなかった。

photoshopの右端を分布 / 重なるよねぇ

Adobe Photoshop Scripts | Trevor Morris Photographicsの
Photoshop > Scripts > Distribute Layers Horizontallyを使用

SUGEEEEEEEEEEEE！！！！！1
愛してる！！！！！！！！！

DFからWinMerge 日本語版に乗り換えまんた。
(以前のpost:DFを使ってDreamweaverでファイルの比較を有効にする)

ファイル比較ツールなにそれ？って人に説明すると
次のような異なるhtmlファイルのどうしようもないない文字列の中から異なる部分をサクッと見つけてくれます。

example1.html

<body>
<p>猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫</p>
</body>

example2.html

<body>
<p>猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫描猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫猫</p>
</body>

* 猫(ねこ)の中に描(えが)が混ざってます。

比べてみよう

以前使っていたDF

異なる部分がある行をお知らせしてくれる差分ツール。
右端で折り返せない(うちが使い方を熟知していないだけかもしれないけど)。

乗り換えたWinMerge

違う部分をピンポイントで着色してくれっから、すげーわかりやすい。
右端で折り返しも出来る。

色変更も出来る、けどなかなか見やすいカラーリングって無いものですな。

ダウンロード:WinMerge 日本語版
Dreamweaverから使う場合は以前のpostが参考になるかも。 / :DFを使ってDreamweaverでファイルの比較を有効にする

そもそもルートパス(サイトルート相対パス？)ってなんぞ？

ルートパス

サイトルートのルートディレクトリからみた相対パス
/から始まる。

絶対パス

外部サイトへリンク貼るときなんかのパス
httpから始まる

相対パス

ファイルから見た対象ファイルへのパス
よく使う

ルートパスで書かれたサイトをローカルでプレビューするには

Dreamweaverだと

[編集] - [環境設定] - [ブラウザでプレビュー] - [オプション]一時ファイルを使ってプレビューにチェック

しておけば相対リンクがドキュメントでもプレビュー出来る(プレビューは)。

編集する設定はadobeのサイトAdobe Dreamweaver CS4 * 新規リンクの相対パスの設定
を参照 / ヘルプの引用

メリット(だと思うところ)
これだとローカルにサーバーを立てる必要もない。

デメリット(だと思うところ)
IETesterでIE6の表示を確認する時たいへんなのと
編集修正するたびブラウザの更新で確認できない。

XAMPPだと

バーチャルホストを使うのが現実的みたい。

編集するファイルは2つ
1つめ
C:\xampp\apache\conf\extra\httpd-vhosts.conf
(うちのPCでの設定ファイルの場所)

1-1）

NameVirtualHost *:801のコメントアウト（##）を削除して有効化する。

1-2）
例 / dドライブのsiterootフォルダをドキュメントルートにして

http://sitenameでアクセス出来るようにするには。

1<VirtualHost *:80>
  DocumentRoot "D:/siteroot"
  ServerName sitename
  <Directory "D:/siteroot">
    order deny,allow
    allow from all
  </Directory>
</VirtualHost>

(ちょっと修正した)
Access forbidden!Error 403になっちゃうならDirectoryの指定は必要
<Directory>は<VirtualHost>の中でも外でも問題なにのだろうか？
DocumentRootのパスに2バイト文字が混ざってると上手くいかない感じ。

Directoryの中に記述できるモノもようわからん。
ここらへん？
http://httpd.apache.org/docs/2.2/ja/mod/core.html#directory
http://httpd.apache.org/docs/2.2/ja/mod/core.html#options
http://httpd.apache.org/docs/2.2/ja/mod/core.html#allowoverride

2つめ
C:\WINDOWS\system32\drivers\etc\hosts
例 / さっきのServerNameに記述した名前(sitename)を追加

127.0.0.1       localhost sitename

とか

127.0.0.1       localhost
127.0.0.1       sitename

みたいな感じで

Apacheを再起動してhttp://sitenameにアクセスしてみる。
いままでこれ知らなかったから
phpのテストをしたい場合
xamppのhtdocs以下にフォルダ作ってて
不便だと思ってたけど、他のサイトと同じように管理出来るのかしら。
ん～2バイト文字のフォルダ名が付いてるとエラーがでるのぅ。
もうちょい試してみよう。

参考にしたサイト

相対ルートパスのサイトをローカルで見る方法（バーチャルホスト設定） World of granshe.
Windows版 XAMPPでバーチャルホストを設定すると、403エラーになる。：Keep The Faith ～ウェブディレクターの日常。まぁ、何でもほどほどに。ほどほどに。～
core – Apache HTTP サーバ
Apache conf 設定メモ

ファイルが読めない！ .htaccess
<Directory> ディテクティブ内の設定で、該当のディレクトリが
Order allow,deny
Allow from all
となっているか。また、AllowOverride の設定がどうなっているか確認しましょう。

Dreamweaverでのサイトルート相対パス設定
Adobe Dreamweaver CS4 * 新規リンクの相対パスの設定

初期設定では、Dreamweaver はドキュメント相対パスを使用して、サイトの他のページへのリンクを作成します。 サイトルート相対パスを使用するには、サーバー上のドキュメントルートと同じ機能を持つローカルルートフォルダを選択して、Dreamweaver でローカルフォルダを定義します。 Dreamweaver はこのフォルダを使って、ファイルへのサイトルート相対パスを決定します。
[サイト]-[サイトの管理] を選択します。
[サイトの管理] ダイアログボックスで、リストにあるサイトをダブルクリックします。
[サイト定義] ダイアログボックスで詳細設定が表示されていない場合は、[詳細設定] タブをクリックします。

[サイト定義] ダイアログボックスの [詳細設定] タブに [ローカル情報] カテゴリのオプションが表示されます。
[ドキュメント] または [サイトルート] オプションを選択して、新しいリンクの相対パスを設定します。

この設定を変更しても、[OK] をクリックした後に既存のリンクのパスは変換されません。 この設定は、Dreamweaver で作成した新規リンクにだけ適用されます。
注意： テストサーバーを指定するか、[編集]-[環境設定]-[ブラウザでプレビュー] で [一時ファイルを使用してプレビュー] オプションを選択していない限り、ローカルブラウザでドキュメントをプレビューしても、サイトのルート相対パスを使ってリンクされたコンテンツは表示されません。 これは、サーバーと違って、ブラウザではサイトのルートを認識できないためです。 サイトルート相対パスでリンクされているコンテンツをすぐにプレビューする場合は、リモートサーバーにファイルを置き、[ファイル]-[ブラウザでプレビュー] を選択します。
サイトルート相対パスの場合、[HTTP アドレス] ボックスに Web サイトの URL を入力します。

Dreamweaver はこのアドレスを使用して、サイトルート相対リンクが、サイトルートが異なることがあるリモートサーバー上で動作するかどうかを確認します。 たとえば、ハードディスクの C:¥Sales¥images¥ フォルダ (Sales はローカルルートフォルダ) にあるイメージファイルにリンクし、完了したサイトの URL が http://www.mysite.com/SalesApp/ (SalesApp はリモートルートフォルダ) である場合は、[HTTP] ボックスに URL を入力すると、リモートサーバー上でリンクされたファイルへのパスが /SalesApp/images/ となります。
注意： 以前のリリースの Dreamweaver では、正しいリモートルートフォルダを追加できず、これにより実行時にページで障害が発生していました。
「OK」をクリックします。

新しいパス設定は現在のサイトのみに適用されます。

ダメな方法

Excelに配置されている状態

Excelでコピー(Ctrl + C)して
Photoshopにペースト(Ctrl + V)した画像

普段やってる大丈夫ぽい方法

ファイル – Webページとして保存

ファイル内の画像を一気に保存出来る。
画像が大量にある場合は楽。
上手く出来ないファイルもある。

ペイントを経由

ペイントを経由するとなぜか上手くいく。
面倒くさい。

メタコン（Metafile Converter）を使う

メタコン
ここで知ったんですがペイントにペーストする手間を減らせる感じ。
追記 / windows7 64bitでも問題なく使える
フォーラム :: トピックを表示 – メタファイル（画像）のコピー（クリップボード経由）

<手順> ——————————————————————–
(１) メタコン（Metafile Converter）を起動して、「自動クリップ貼り付け」にチェック、「表示のみ」 を選択、メタコンは閉じずにそのまま
(２) ワードやエクセルを起動して、その中の画像をクリックして選択する
(３) CTRLを押しながら C を押して、選択されている画像をクリップボードにコピー（ここではベクターイメージがクリップボードにコピーされる）
(４) メタコンに戻るとクリップボードの中にコピーされている画像が表示されているので、CTRLを押しながら C を押す（ここでビットマップ・イメージがクリップボードにコピーされる）
(５) PhotoShop や IrfanView など画像のプログラムにて、CTRL を押しながらV を押して貼り付ける

しかし、根本的な解決法はさっぱりわからんままです。

バックアップどこにあるんだろう？とか復元どうやってさせんだっけ？と忘れちゃうのでメモ。
ゴリゴリとカスタマイズして使ってるわけでもないけど、手に馴染むようにしたいじゃない？

スニペットを移す

保存してある場所(例はxp)

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver 9\Configuration\Snippets
C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\Snippets

xpのapplication dataは

C:\Documents and Settings\ユーザー名\Application Data\

windows7だとappdataのroamingフォルダ

C:\Users\ユーザー名\AppData\Roaming

新規ドキュメントのテンプレファイルをいじる

C:\Program Files\Adobe\Adobe Dreamweaver CS4\ja_JP\Configuration\DocumentTypes\NewDocuments

新規作成時のhtmlを自分好みにしたいならDefault.htmlをいじる。
最初にあるファイルは適当にバックアップ、うちはDefault.html_bakって感じにリネームしてる。

Windows7に移す時は

C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS4\ja_JP\Configuration\DocumentTypes\NewDocuments

cs5なら

C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5\ja_JP\Configuration\DocumentTypes\NewDocuments

zen-codingを入れる

Downloads - zen-coding - Project Hosting on Google Code
Dreamweaver用の各バージョン一覧

ついでにショートカット追加

[編集] - [キーボードショートカット(Y)] - [コマンド(C)] - [Zen Coding]
[Expand Abbreviation](zen-codingする)にCtrl+E追加
[Toggle Comment](選択範囲をコメントにする)にCtrl+Shift+CかCtrl+Alt+C(編集 - コードをたたむ - 選択範囲以外をたたむ とかぶるけど)を追加
あと
[Wrap with Abbreviation](選択範囲をタグで包む) - Ctrl+Shift+Aを追加してもいい。
すでに設定してあるならわざわざやり直さなくても次の方法で復元できる。

カスタムショートカットを移す

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\Menus\Custom Sets

の中にオリジナルのキーボードショートカットが.xmlで保存されてるの移す。

コードヒント系

C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\CodeHints

CodeHints.xmlを念のためバックアップ。

cs5のcssコードヒントはこっちかも
windows7

C:\Users\[ユーザー名]\AppData\Roaming\Adobe\Dreamweaver CS5\ja_JP\Configuration\CodeHints\CodeHints.xml

以下のサイト様から素敵なコードヒント達をダウンロード出来る

dwlog.net: 自作機能拡張アーカイブ
[ BUN:Log ]　Dreamweaver CS4版/CS5版 スペシャルコードヒント
[ BUN:Log ]　[ 改訂版 ] Dreamweaver CS3版 スペシャルコードヒント
widowsプロパティの誤入力を防ぐCodeHints.xml｜カラクリエイト

拡張機能を入れる

え～っとあのmxpどこに保存したっけ？となったら以下のサイト様が綺麗にまとめてくれているので参考にする。
Dreamweaverの拡張機能まとめ | Arch

ワークスペースを復元する

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\Workspace

自分で作成したワークスペース名の.xmlがあるから多分移し替えるだけで表示されるようになるはず。
これまだ試してない。

あと移しておきたいの何かあるかな。

否定先読みってのを使うと出来るっぽいです。

jpg以外のimgタグを検索

検索対象

<img src="example.jpg" alt="" />
<img src="example.jpg" alt="" />
<img src="example.png" alt="" />
<img src="example.jpg" alt="" />
<img src="example.png" alt="" />
<img src="example.gif" alt="" />

検索文字

(?!src=".*jpg")src=".*"

結果

target属性のないaタグだけを検索

検索対象

<a href="example.html" target="_blank">_blankで開け</a>
<a href="example.html" target="_blank">_blankで開け</a>
<a href="example.html">target指定なし</a>
<a href="example.html" target="_blank">_blankで開け</a>
<a href="example.html">target指定なし</a>
<a href="example.html" target="_top">_topで開け</a>
<a href="example.html">target指定なし</a>

検索文字

(?!<a.*target=")<a

結果

.html以外のリンクを検索

検索対象

<a href="example.pdf" target="_blank">_blankで開け</a>
<a href="example.html" target="_blank">_blankで開け</a>
<a href="example.html">target指定なし</a>
<a href="example.htm" target="_blank">_blankで開け</a>
<a href="example/example">target指定なし</a>
<a href="/" target="_top">_topで開け</a>
<a href="example.html">target指定なし</a>

検索文字

(?!href=".*html")href=".*"

結果

ありゃ、head内のcssもマッチしちゃった。

検索 – 特定のタグ でやる

target属性を含めないaタグみたいのなら特定のタグで検索できた。
.jpgじゃないimgの検索の仕方は分からなかった、出来るのかな？

参考にさせていただきました

• 正規表現の先読みについて解説してみる – (rubikitch loves (Emacs Ruby CUI))
• 間違いだらけの正規表現講座 level 11 – Ukiwiki

Bram.us » PS_BRAMUS.TextExport 1.3 – Automatically export all Text layers from Photoshop PSD to a Text file (PSD2TXT)

(レイヤー階層で)下にあるテキストレイヤーから順番にテキストを抽出してテキストファイルに書き出してくれる.jsx

フォルダ階層が深いと処理にものすごく時間がかかって不安になる。
逆にフォルダ階層が浅いとテキストレイヤーの数が多くても結構速く終わる感じがしました
(The quick brown fox jumps over the lazy dog.と書いてあるテキストレイヤーを60程複製したpsdを処理させたらだいたい10～20秒くらいで完了しました)。

複数psdを開いている場合

TextExport has detected Multiple Files.
Do you wish to run TextExport on all opened files?

と聞かれるので、開いているファイル全て処理したいなら「はい」にして
選択してるファイルだけ処理したいなら「いいえ」を選ぶ。

随分昔からあるscriptみたいだけど知らなかったなぁ、あると便利でした。
という事でメモ。

ブラウザでプレビューすると、こうなると思います。

ブラウザがデフォルトで持っている body の margin や padding が効いているからこうなるのは当然なんだけど
なかには余白無しでプレビューしたいなぁと持っている人がいるかもしれないし、
余白をなくしたい気分になる時がいつか来たりするかもしれないので(こないと思うけど)消す方法を考えてみました。

方法1 / プレビュー用のhtmlテンプレがどっかにあるハズだ。

Dreameweaverにもテンプレートhtmlがあるし、Fireworks も adobe だからあるでしょうと探したらありました。

WindowsXPの場合
C:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\HTML Code\Dreamweaver\SLICES.XTTの1526行目。

WRITE_HTML("<body bgcolor=\"#", exportDoc.backgroundColor.toString(16), "\"");

ここで body を吐き出してるっぽいので margin:0;padding:0 を追加してみた

WRITE_HTML("<body style=\"margin:0;padding:0;\" bgcolor=\"#", exportDoc.backgroundColor.toString(16), "\"");

* 編集する場合はバックアップを忘れずに。

方法1の結果

できた。

方法2 / 保存したpngをあらかじめ用意した余白のないhtmlに読み込ませる

適当な場所に(今回はFireworksで作成中のpngを保存しているフォルダでやりました)余白のない適当なhtmlを作成して
プレビューしたくなったら代わりにそれをF5して表示する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>preview html</title>
 <style type="text/css">
 body{margin:0;padding:0;}</style>
</head>
<body>
	<img src="example.png" />
</body>
</html>

方法2の結果

できた。

使い道

余白を消すだけじゃあまり意味がないので、背景画像を先に作っておいて background で読み込むような css を書いておけば
デザイン中のイメージが湧きやすくなったりしないかしらね?
ちなみに<head>は1523行目

WRITE_HTML("</head>\n");

Adobe Photoshop CS4 に関するセキュリティアップデート公開（APSB10-13）

Windows 版および Macintosh 版 Adobe Photoshop CS4 にクリティカルな脆弱性が発見されました。攻撃者がこの脆弱性を悪用することに成功した場合、当該システムが攻撃者によって制御される恐れがあります。 この脆弱性は、エンドユーザが悪意の込められた ASL、ABR、GRD のいずれかの形式のファイルを Adobe Photoshop CS4 に読み込ませない限り、悪用されることはありません。 対象となるユーザは、Adobe Photoshop CS4 11.0.2 にアップデートすることを推奨します。

Adobe Photoshop CS4 11.0.2 アップデート （Windows） *英語ページのみ
Adobe – Photoshop : For Windows : Adobe Photoshop CS4 11.0.2 update – multiple languages

Adobe Photoshop CS4 11.0.2 アップデート （Macintosh） *英語ページのみ
Adobe – Photoshop : For Macintosh : Adobe Photoshop CS4 11.0.2 update – multiple languages

なんでサイトのわかりやすいところにアナウンスがないのかなぁ?
1週間くらい立ってるから流れちゃっただけ?

使い方

[ファイル] – [スクリプト] – [参照] から下からダウンロードしたjsxを選択する。
(xpの場合) C:\Program Files\Adobe\Adobe Photoshop CS3\プリセット\スクリプト の中に.jsxを入れておけば[ファイル] – [スクリプト] から使用できる。

ExtendScript Toolkitからも使える。

ダウンロード

addGuide.jsx｜選択範囲にあわせてガイドを引く.jsx

挙動 / どんなガイドが引かれるか

こんな感じの選択範囲だと

こうなる

四角じゃない選択範囲だと

こうなる

変な形の選択範囲だと

こうなる、予想通り。

ソース

function selectionRange(){
	try {
		//選択範囲を取得
		var boundsObj = activeDocument.selection.bounds;
		x1 = parseInt(boundsObj[0]);
		y1 = parseInt(boundsObj[1]);
		x2 = parseInt(boundsObj[2]);
		y2 = parseInt(boundsObj[3]);

		//選択範囲にガイドを引く
		guideWrap("Vrtc",x1);//左上
		guideWrap("Vrtc",x2);//右上
		guideWrap("Hrzn",y1);//左上
		guideWrap("Hrzn",y2);//左下
	}
	catch(e){
		alert("選択範囲がありません。");
	}
}

function guideWrap(direction,position){
var id1 = charIDToTypeID( "Mk  " );
    var desc1 = new ActionDescriptor();
    var id2 = charIDToTypeID( "Nw  " );
        var desc2 = new ActionDescriptor();
        var id3 = charIDToTypeID( "Pstn" );
        var id4 = charIDToTypeID( "#Pxl" );
        desc2.putUnitDouble( id3, id4, position );
        var id5 = charIDToTypeID( "Ornt" );
        var id6 = charIDToTypeID( "Ornt" );
        var id7 = charIDToTypeID( direction );
        desc2.putEnumerated( id5, id6, id7 );
    var id8 = charIDToTypeID( "Gd  " );
    desc1.putObject( id2, id8, desc2 );
executeAction(id1,desc1,DialogModes.NO);
}

// ==========
// 実行
// ==========
selectionRange();

参考

選択範囲の取得方法を参考にさせていただきました。
崖っぷちWEBデザイナーブログ | photoshopのscript機能メモ（CS3）

1. .jsxをアクションに登録して
2. [ファイル] – [自動処理] – [バッチ] から登録したアクションを指定

といった手順を踏む必要があったけれど今回のはバッチ処理なしでいけるはず、多分。
WindowsXPのCS3では大丈夫だった。

どういったモノ?

パターンに画像を、ファイル名で登録するだけ。
大量に登録したい時に威力を発揮するはず。

例えばこうゆう.patではないパターン画像を超簡単に一気に登録できる。
patterns: set no.7 by ~77words on deviantART

使い方

[ファイル] – [スクリプト] – [参照] から下からダウンロードしたjsxを選択する。
(xpの場合) C:\Program Files\Adobe\Adobe Photoshop CS3\プリセット\スクリプト の中に.jsxを入れておけば[ファイル] – [スクリプト] から使用できる。

ExtendScript Toolkitからも使える。

ダウンロード

• addPattern.jsx｜バッチを使わずに画像をファイル名でパターンに追加する.jsx

// ==========
// File Name: addPattern.jsx
// File URI: http://sakurachiro.com/_exercise/javascript/jsx/addPattern.jsx
// Description: 画像をパターンに一括登録する
// Author: makoto
// Version: 1.0.0
// Author URI: http://blog.sakurachiro.com/
// Copyright: Copyright 2010 makoto
// ==========

textureFolderObj = Folder.selectDialog("パターンに登録したい画像があるフォルダを選択してください");
if (textureFolderObj) {
  fileSet(textureFolderObj);
}

function fileSet(textureFolderObj) {
  var textureFileList = textureFolderObj.getFiles();
  for (var i = 0; i < textureFileList.length; i++) {
    var textureFileObj = textureFileList[i];
    if (textureFileObj.name.indexOf(".") < 0) {
      //拡張子がなければフォルダと判断
      fileSet(textureFileObj);
    } else if (textureFileObj.name.match(/.png|.jpg|.jpeg|.gif/g)) {
      //正規表現に自信はないけど動いているようだ
      addTexture(textureFileObj);
    }
  }
}

function addTexture(textureFileObj) {
	open(new File(textureFileObj));

  // ==========
  // 登録する
  // ==========
  var idMk = charIDToTypeID("Mk  ");
  var desc1 = new ActionDescriptor();
  var idNull = charIDToTypeID("null");
  var ref1 = new ActionReference();
  var myPtrn = charIDToTypeID("Ptrn");
  ref1.putClass(myPtrn);
  desc1.putReference(idNull, ref1);
  var idUsng = charIDToTypeID("Usng");
  var ref2 = new ActionReference();
  var idPrpr = charIDToTypeID("Prpr");
  var idFsel = charIDToTypeID("fsel");
  ref2.putProperty(idPrpr, idFsel);
  var idDcmn = charIDToTypeID("Dcmn");
  var idOrdn = charIDToTypeID("Ordn");
  var idTrgt = charIDToTypeID("Trgt");
  ref2.putEnumerated(idDcmn, idOrdn, idTrgt);
  desc1.putReference(idUsng, ref2);
  var idNm = charIDToTypeID("Nm  ");
  var docName = app.activeDocument.name;
  desc1.putString(idNm, docName);
  executeAction(idMk, desc1, DialogModes.NO);

  // ==========
  // 閉じる
  // ==========
  var idCls = charIDToTypeID("Cls ");
  executeAction(idCls, undefined, DialogModes.NO);
}

今回詰まったところ

バッチにある「サブフォルダをすべて含める」をjsxでどうやって書いていいのかがさっぱりだった。

こんな風に書いて、

var myFolder = Folder.selectDialog("フォルダを選択");
var myFiles = myFolder.getFiles();
for(i=0;i<myFiles.length;i++){
 alert(myFiles.length);
}

下記画像ような中身のフォルダを選択すると、困った事にmyFiles.lengthは7になる。

そんな時とても参考になったページ

IllustratorとPhotoshopのファイル名埋め込み
IllustratorとPhotoshopのファイル名埋め込み – for iPhone

ExtendScript Toolkitを使ってみたんだけど
ちゃんと書けていたのに「対象アプリケーションを選択」でPhotoshopを選んでいなかった為、いつまでもopenが関数ではありません等のエラーが出て動かず途方に暮れた。

ちゃんとadobe photoshop cs3を選択しなければ。

DwのショートカットにCtrl+Y(やり直し)というのがあって、
うちのショートカット勢の準レギュラーです。
Ctrl+Zとペアで行動する事が多い子です。

彼(Ctrl+Y)に期待する具体的な能力は、「取り消しを取り消す」事。

photoshopのShift+Ctrl+Zでヒストリーを1つ進めるのと同じ感じ。
良い例が思いつかないけど、こんな風に。

まずあるテキスト。

<p>The quick brown fox jumps over the lazy dog.</p>

1)quick brownを選択してdel

<p>The fox jumps over the lazy dog.</p>

2)やっぱり削除しないでおこう。Ctrl+Z発動。

<p>The quick brown fox jumps over the lazy dog.</p>

3)ちょっと待てよ、やっぱりquick brownは必要ないや。Ctrl+Y発動。

<p>The fox jumps over the lazy dog.</p>

このときCtrl+Yすれば、quick brownを選択して削除する手間が省ける。

どうも彼はそれだけじゃないようだ。

「やり直し=ヒストリを進める」ショートカットだと思っていたんだけど、なんか違う。
セルの分割 / Ctrl+Alt+Sをした後や、
段落フォーマットをCtrl+Shift+PやCtrl+3で変更した後にCtrl+Yすると繰り返してくれる。

ということは、ヒストリを1つ進めるように見えるのは直前の処理を繰り返しているだけで、実際は取り消しを取り消しになってるだけ?

でも、デザインビューで[右クリック] – [タグを削除(V)]なんかはCtrl+Yしても繰り返してくれないんだよなぁ。

よくわからない子だ。

だってテクスチャ開始位置がテクスチャを適用した矩形の左上からではなく、キャンバスの左上からで、矩形を生成した瞬間からは矩形を移動させても固定される。
まるで、矩形がテクスチャのマスクのような挙動をする。

例えば、こんなテクスチャを作った。

5pxのグリッド背景。

キャンバスの適当な位置に、矩形を作成して先程のテクスチャを適用する。

拡大してみると。

ズレてる。

選択ツールで掴んで移動してみる。

ズレたまま動く。

何やってんの?左上からリピートして下さいよ。

最初からキャンバスのx:0，y:0に作成しろって事なのかしら。

とりあえず修正する方法

拡大縮小ツールかCtrl+Tで矩形を変形。

左と上にラインが出現した、ここで変形を確定すれば完了。

本当に矩形がテクスチャのマスクのようだ。
変形中だけリンクが外れる感じ。

うちが知らないだけでもっと簡単にテクスチャの開始位置を変更する方法があるんでしょうか?

ハイパスでシャープみたいな効果を出す時は、オーバーレイとセットで使う。

少々ピントの甘い画像や、縮小加工した後には、シャープを軽くかけてる事かと思いますが(決め付け)、アンシャープマスクの代わりにハイパスを使うと、キレと存在感が増します。

そこで実際どう違うのか?どれくらい違うのか?をちゃんと見比べてみたくなったので、ハイパスとアンシャープマスクそれぞれ数パターン書き出してみました。

フィルタの設定

アンシャープマスク
( [フィルタ] – [シャープ] – [アンシャープマスク] ) /
量170% – 半径1.0px の決め打ちで、半径を変化させた。

ハイパス
( [フィルタ] – [その他] – [ハイパス] ) /
レイヤーを複製し、上レイヤーにハイパスを適用して描画モードをオーバーレイに。

sample1

sample2

(画像にもよるけど)ハイパスだと半径2~4くらいがいいかな?って感じでした。
あとkは、アンシャープマスクは全体的にシャープになるけど、ハイパスは部分的にシャープになる感じ。
ハイパスをかけたレイヤーの透明度を変えたり、灰色で塗ったりして調整も出来る。

シャープ関係ないけど半径10~20あたりも好きだなー。

ところでハイパスとはどういったもフィルタなのか?
adobeヘルプの説明だと
Adobe Photoshop CS4 * その他のフィルタ

ハイパス
カラーが極端に変化している部分で指定した半径内のエッジのディテールを保持し、それ以外の部分についてはエッジのディテールを抑えます。 半径に 0.1 ピクセルを指定すると、エッジのピクセルだけが保持されます。 ハイパスフィルタは、線数の少ないディテールを画像から削除して、ぼかし（ガウス）フィルタとは逆の効果を加えます。

ちまたではインデントはタブか?スペースか?といった難しい話(インデント　スペース　タブ – Google 検索)があるみたいですけど、うちはそういったこだわりは全くなくTABを使っていました、現在はスペースを使うようにしてます(大したことない理由なので後述)。

で、Dreamweaverで使うインデントをスペースに変更したのに何か違和感があった。
いくらソースフォーマットしてもTABでインデントされる事があるのた。あるぇ?
全部TABなのかな?と非表示文字を表示してみたところ下の画像の様になった。

HTMLとCSSそれぞれのインデント記号が違う。

HTML側の記号がスペースで、CSS側の記号がTABだった、なにこれ。

原因と解決法

環境設定をよくみてみると[高度なフォーマット:CSS]というボタンがあった。

CSS側のインデント設定もスペースに変更したらおkだったああああ、よかったあああ

まとめ

[コマンド] – [ソースフォーマットの適用] で html(やcss)をインデントしたり出来る。
htmlとcssのフォーマット設定は分かれている。
htmlのインデント設定は[編集] – [環境設定] – [コードフォーマット]から
cssのインデント設定は[編集] – [環境設定] – [コードフォーマット]窓 – [高度なフォーマット:CSS]ボタンから変更する。

たかだかこれだけの事を説明するのに無駄に画像を使ってなにしてるんだろう。

TABを使っていた理由

• Dreamweaverのインデント初期設定がTABだった
• 他人のhtmlを修正する時はほぼすべてTABだった
• スペースだったとしてもソースフォーマットするとTABになってしまう
• インデント幅を後から簡単に変更出来る

で特に疑問を持たずTABでインデントしていた。

スペースに変えた理由

ある日の事、Dreamweaverで書いたソースをWordPressにコピペしてSyntaxHighlighterで吐き出させたページをAnother HTML-lint gatewayでチェックしたらTABを特殊文字で吐き出していてエラーになっていたから、スペースに変換するのなら最初からスペースでインデントした方が楽だという理由。

[追記 / 20100501] for文の中身を変更した。

使い方イメージ

上のソースを[適当な名前].jsxで保存。
program files以下のphotoshopフォルダにある\プリセット\スクリプト ( C:\Program Files\Adobe\Adobe Photoshop CS3\プリセット\スクリプト ) にぶち込むと[ファイル] – [スクリプト]から選べるようになるので便利。

[ファイル] – [スクリプト] – [参照(B)…]から[適当な名前].jsxを選んで使える。

ステージ枠にだけガイドを引くには

上の.jsxのままだとカンバスの中央にもガイドが引かれて邪魔かもしれない、真ん中のは必要ないよって場合は1行目の50を削除する。

• ここを　　var posArr=[0,50,100];
• こうする　var posArr=[0,100];

結構作ってる人がいる。

うちが作ってみた理由もこれと全く同じでした。
外枠にガイドを引くスクリプト | Dearps ～Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです～

カンバスのサイズに合わせたシェイプを描きたい場合等フォトショップはピクセルにスナップしてくれないので外枠にガイドをひく必要があります。

高機能、他のjsxもすばらしい。
Add Guides EX(1.0.0) – Adobe Photoshop

ダイアログボックスからガイドの位置・幅・間隔・数等を指定することによって、自動的に位置を計算してガイドを作成します。

さくさくと引ける。
flabaka – 複数のガイドを一度に引けちゃうJSX

x=50,x=100,x=150,x=200の計4本ガイドを引きたい場合、50,100,150,200と入力し、OKボタンを押します。

• 新規ドキュメントのドキュメントタイプを増やすには
• 新規ドキュメントのドキュメントタイプを増やすには、其の二

書いた本人なのに読み直してみても意味がわからないし、なんだか書いてある通りにもならない。
なので再度挑戦してみたい。

ちなみにHTML5で新規追加されたタグをDreamweaverのタグライブラリーに登録してみた – dwlog.net様のhtml5_tag_suites_v004.lzhを使うとやりたい事

< 機能について>

* 登録したタグとその属性についてCodeHintで表示させます。
* 新規ドキュメントダイアログでHTML5を選択可能になります。ファイルメニュー→変換にもHTML5が追加されます。選択するとドキュメントタイプが< !DOCTYPE html>に変換されます。

が出来るようになるんですけど自分でやってみたいじゃないですか。

編集したファイル

以前アタリをつけたというProgram Files内の

C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\DocumentTypes\MMDocumentTypeDeclarations.xml

ではなく、
Application Data以下のMMDocumentTypeDeclarations.xmlを編集した。

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\DocumentTypes\MMDocumentTypeDeclarations.xml

具体的には上記xmlに次の部分を追加してDreamweaverを再起動。

<documenttypedeclaration id="mm_html_55">
　<title>
　　HTML5
　</title>
　<doctypedecl>
　　<![CDATA[<!DOCTYPE html>]]>
　</doctypedecl>
　<rootelement>
　　<![CDATA[<html></html>]]>
　</rootelement>
　<dtdcontext>html</dtdcontext>
　<dtdcontext>xhtml</dtdcontext>
　<dtdcontext>xslt</dtdcontext>
</documenttypedeclaration>

もしくは

C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\Strings\documenttypedeclarations.xml

を

C:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration\Strings

フォルダにコピーして

<string id="mm_html_55" value="HTML5" />

を追加するとか。

ドキュメントタイプにHTML5が増えた。

けど問題がないわけじゃない。

C:\Program Files\Adobe\Adobe Dreamweaver CS4\ja_JP\Configuration\DocumentTypes\NewDocuments\Default.html

を編集しているので、新規ドキュメントをHTML5で作成してもこんな風になってしまいました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>さくらちろ｜</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="robots" content="all">
<meta name="author" content="さくらちろ">
<meta name="copyright" content="さくらちろ">
<meta name="slurp" content="noydir">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen,tv,projection">

</head>

<body>

</body>
</html>

type=”text/css”とか<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>とかどうにかしないと使えないような…

<dtdcontext>の元はどこにあるんだろう？

そうゆうのは精神衛生上良くないです。

でもって簡単に50%の位置にガイドを引く方法
[ビュー] – [新規ガイド] – 位置に[50%]

ビューからガイド引いた事なかったから気付かなかった。

36pxから変更した任意の数値を記憶させる本来のやり方があるのかもしれないけどあいにくと知らないため、代替で使っていた方法です。

「グリッドの設定」を保存させる方法。

グリッドの設定はFireworksの環境設定に保存されず、各ファイル毎に記録されているようなので、好みのグリッド幅を設定した名称未設定ファイルから毎回Fireworksを起動させれば擬似的にグリッドの設定を保存できるって話。

FIreworksを使うのをやめれば解決する問題ですけどね。

結論からいうと。

WinFileCache.datを削除してワークスペースレイアウトを変更したらエラーはでなくなった。

以下、事の起こりやら参考にしたページやら蛇足。

事の起こり。

某mixiのDreamweaverコミュで「dwで作業をしつつ他のアプリで作業をしてdwに戻ってくるとパネルタブが閉じてしまう」という質問をみかけた。

どうやったらその状態を再現できるんだろうか？と
パネルタブ周り(ワークスペースも絡んでくる？)を弄っていたらエラーが発生するようになってしまった。＞＜

エラーメッセージで検索すると「色々やっても治らなかったから結局再インストールした」という方の記事が…

解決までの道のり。

エラーが出てるjavascriptの中身を辿ってみた。

1. TeamAdminTempDelete.htmlを検索
2. 中を見ると../Shared/Common/Scripts/dwscripts.jsを読み込んでonloadでdelTempFile()してる
3. dwscripts.jsのdelTempFileを検索 -> hitしない。あるぇ？

もう一度検索

以下のページを見つける。
Dreamweaver CS4 エラー / Creative COW 日本語

そこから以下のページにたどり着く。
Troubleshoot JavaScript errors in Dreamweaver CS4 / adobe

トラブルシューティングステップ

質問に答えた後に、上に、下でのステップに従って、誤りを障害調査してください:

1. 知られているJavaScript誤りのリストをチェックします。
2. あなたのドリームウィバーのバージョンのために最新のアップデートをインストールします。
3. JavaScript によって言及された名前オブジェクト
4. FileCache.dat ファイルを削除します。
5. 新しいページを試みます。
6. サイトキャッシュを作り直します。
7. サイトの特定の誤りのために、.dwsサイトキャッシュファイルを削除してみます。
8. Mac ユーザ: 経路の特殊文字がないかどうかチェックします。
9. 検証、拡大はあなたのドリームウィバーのバージョンと互換性があります。
10. 拡大を無効にします。
11. 拡大をアンインストールします。
12. ドリームウィバーユーザ構成フォルダーを再作成します。
13. 選択している始動モードか診断始動モードによるドリームウィバーを実行します。
14. 追加TechNotesを見ます。

ふむふむなるほど

1. Configuration内(*1)のFileCache-[乱数].datを削除してみる。->まだエラーが出る。
2. 普段使っているワークスペースのレイアウトを適当なやつに変更してみる。-> エラーが出なくなった！！
3. カスタマイズしたワークスペースレイアウトに戻す -> エラーが出ない！！

といった感じで解決しました。
結局キャッシュが悪さしてたって事になるの？

*1
Program Files内のConfigurationフォルダじゃなくて、Documents and Settings内のConfigurationフォルダ
例えばこんな感じ

• ドライブ名:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver 9\Configuration
• ドライブ名:\Documents and Settings\ユーザー名\Application Data\Adobe\Dreamweaver CS4\ja_JP\Configuration

vistaやwindows7だと AppData\Roaming の中?

その中にある「WinFileCache-[乱数].dat」。

メモ：ユーザ構成フォルダーを作り直す方法
How to re-create the Dreamweaver user configuration folder (CS3 on Windows XP, Vista)