ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

ファイルの保存場所のカスタマイズ

November 15 2008

制作作業をしていると「保存」というのは頻繁に繰り返す事になりますが
「元ファイル」と「書き出しファイル」というのが存在するWeb制作において
保存場所が違うってのは本当によくある話。
Fireworksなんかはファイルの書き出し場所まで元ファイルの情報に含んでくれるので
ここらはホントかゆいところに手が届くよなあ、と思います。
最近、どちらかというと制作はPhotoshopで行う事が多いのですが
Macromediaを吸収して、CS3まで進化してるにも関わらずここらへんはまだ未実装です。
(というかそこまでやる気がないんだろうな・・・)

で、自分の場合というと制作物はバックアップの関係上、ネットワーク上のファイルサーバに
フォルダを作ってその中に案件毎のフォルダがあるもんですから
保存する度に一度マイコンピュータに戻って、
地下に潜るかの如くフォルダをあさらなければならない。
で、書き出しするとまた書き出しフォルダ・・・
元ファイルに修正を加えて保存しようとすると
前回の保存場所の書き出しフォルダを覚えとるから
また元ファイルフォルダを探す旅へ。で、書き出し・・・(`Д´)ムキーーーーーー!

いい加減イラッとくるのでせめて保存ダイアログに表示されるサイドバーに
仕事フォルダを追加しちまおう、と思って検索してみました。

「共通ダイアログのショートカットを変更する」
http://www.atmarkit.co.jp/fwin2k/win2ktips/330placebar/placebar.html

この左側に表示されているフォルダは最大5つまで設定できるみたい。(XPの場合)
最初からXPに内蔵されているグループ・ポリシー・オブジェクト・エディタを使う方法では
ちょっと難しかったので、Microsoftが提供している「TweakUI」を使用してみました。
http://www.microsoft.com/windowsxp/downloads/powertoys/xppowertoys.mspx
上記ページの右側サイドバーの下の方に「TweakUI.exe」があるのでそれをダウンロード。
このままでは英語なので、日本語化したい人は
http://stereo.jpn.org/muttyan/ptoyxp.htm
から日本語化パッチをダウンロードしておきましょう。

TweakUIを起動して、左側のツリーで[Common Dialogs]を選択すると、
右側にショートカット・バーをカスタマイズするためのフィールドが表示されます。
そこに任意のフォルダを振り分けてやればOKです。

自分の場合、ネットワークにあるファイルサーバの「仕事用フォルダ」を表示させました。
これでちょっとは煩わしさが無くなりました(笑)

一番良いのはPhotoshopの元ファイルに
書き出し先情報を保存してくれる様になればいいんですけどね・・

JQuery : マウスオーバーでフェード効果

November 13 2008

読み込ませておけば何かと便利なJQuery。
使い勝手が良すぎてホント重宝しております。

今回はマウスオーバーでフェード効果を使うやり方。
どっかで見て習得したものの、ひさしぶりにこれをやろうと思ったら
案の定ど忘れしてたんで覚え書きとして書いておく。

まずJQueryを読み込ませておいてから、下記のスクリプトを書く。

$(document).ready(function(){
$("img.jquery-hover").fadeTo(0,1.0);
$("img.jquery-hover").hover(function(){
$(this).fadeTo(300,0.8);
},
function(){
$(this).fadeTo(300,1.0);
});
});

適当な名前でjsファイルとして保存して、またlinkタグで読み込ませよう。

ちなみにfadeTo(speed, opacity, callback)というプロパティになってます。
speed : フェードの速度。"slow", "normal", "fast" の文字列か、ミリ秒を数値で指定。
opacity : 不透明度。0 ~ 1 で指定。この不透明度になるまで、フェードします。
callback : フェードが終了した後に実行されるコールバック関数。(オプション)
今回は不透明度を1~0.8まで300ミリ秒かけて操作するという設定です。

で、imgタグにclass名「jquery-hover」を足してやれば完成。
なんてお手軽。

pタグで囲んで背景色ひいてあげるとその色が透けます。
グラデーション画像ひいてもおもしろいかもです。

追記:
Wordpressで使用する場合、この書き方ではコンフリクトして動かないので
$の部分をすべてjQueryで置き換えれば動作します。
wp_enqueue_scriptで読み込ませればOKです。

idとかclass、君たちの名前は?

November 09 2008

仕事の合間とかにWeb関連の事が書かれたブログを巡回するのが好きです。
やっぱ同じ仕事をしている人達の発見とかやり方は刺激になります。

その中で見つけた記事で
「idとclassになんて名前をつけるのか?」というエントリーがけっこうありました。
これは案件に明確な仕様書でもあれば、その通りつけるんでしょうけど
まず今までそんなガチな案件をやった事がないヘボヘボさんなので・・(泣)

正直、CSS関連は他の制作会社様のコーダーの方達のノウハウをそのまま適用してます。
「あと続きお願いします」って仕事の時に参考にさせてもらって学びました。
だから最初に「Wrapper」って見たときに、「YO!YO!チェケラウ!」みたいな
そんなイメージが頭に浮かんで思わず笑ってしまいました。
いや、初めて見たもんですからそんな単語。

参考エントリー「もう、class名やid名で悩まないんだからっ!!」
http://css-happylife.com/log/memo/000100.shtml

ここに書かれている物は普段でもよく使いますが
正直、どこに何書いたっけ?ってのは、
例えば納品後、半年以上経って「あそこに新製品足して」って場合に
CSSファイルに書かれた膨大なclass名なんてすっかり忘却の彼方って事はままあります。
自分で書いたモンですらわかんねえんですから、他人が見たってわかるわけないですね。
それどころか@importで複数のファイルを読み込ませていると、どこになにが(泣)という
非常に情けない結果になりうる事だってあります。

■自分で見ても!(A)
■他人が見ても!(B)
■簡単にわかる!!(二人)
僕の名前はWrapper~~♪僕の名前はFooter~~♪(30代以上西日本限定:by,ヤンマー)
なんていうのはホント試行錯誤していくしかありません。
幸い、業務はほとんどの場合一人で完結する(今現在)ので、
自分がウンウン悩めばいいだけなんですけどもw

参考エントリー「サイトタイプ別class名管理方法」
http://gyauza.egoism.jp/clip/archives/2008/09/080929-classnaming/
うむう、このエントリーは非常に興味深いです。

「ウチはこれだよ!」って仕様を確立させるのが一番いいんだろうなあ。
そして一番良いのはどんどん「これがメジャー」ってのが固まってきてくれるのがいいんですが。

よくやるのが
CSSリセットやボックスなどの情報をbasic.cssって形にしといて
あとはhtmlタグ別にcssファイルを作る、というパターンです。
class名にはhtmlファイルの名前を頭に入れておきます。(例:dt.index_newinfoとか)
それを一気に@importで読ませます。
これが一番(久々に更新とかで忘却してる際に)見つけやすかった。
アンダーバー入れてしまうとNN6.1とかは読んでくれませんが。

参考サイト:「正しい知識を得たい人の爲のCSS2リファレンス 」
http://hp.vector.co.jp/authors/VA022006/css/index.html
やっぱここの内容を頭にガッツリ入れとかないとなあ。
何が正しいかはその人の環境にもよりますが、出来る事ならちゃんとしたいもんです。
関西では「シュッとした」という言い方が一番近いような(笑)

あ、少なくとも最近は.redtextとか書かなくなりましたっ。
日々勉強、これにつきますね。いやホント。

« Jul 2020 August 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31