http://www.wintryblasts.com/blog/ ja Nucleus CMS v3.41 © Weblog http://backend.userland.com/rss http://www.wintryblasts.com/blog/nucleus/nucleus2.gif http://www.wintryblasts.com/blog/ http://www.wintryblasts.com/blog/?itemid=95 商品を複製するか、それとも商品をリンクするか選べます。

リンクする際のSQLがどうなるかについてのお話。
まず始めに。
これは EasyPopulate を使わず直接MySQLをCSV形式などでダウンロードし、
変更する人を想定して書いています。
phpMyAdminなどを使うと簡単です。

MySQL上では商品とカテゴリの相関関係は全て、「products_to_categories」
というテーブルに収められています。
制御はいたってシンプル。
products_idとcategories_idを一致させています。

そのため、products_idが101として、categories_id=10、categories_id=100の
二つのカテゴリにリンクで登録した場合DBは下記の構成になります。
(101,10)
(101,100)

たったこれだけなのでSQLからCSVを書き出して編集すると大変早いと思われます。

ただこの作業をするのであればマスターカテゴリは設定すべきかと思います。
テーブル「products」の「master_categories_id」を適宜設定してください。

最近はZen Cartのカスタマイズで苦戦しております。
次回はマウスオーバーの実装について書きたいと思います。]]> Tech http://www.wintryblasts.com/blog/?itemid=95 Fri, 16 Jul 2010 14:50:48 +0900 http://www.wintryblasts.com/blog/?itemid=94
ソースコード上で該当するdivタグより前に、フロートをかけていないのに
「clear:both;」なんて設定すると背景画像が消えます。あらビックリ。

というか、普通やらないですよね･･･(^_^;)
何かしらfloatを使用したらclearタグは使うようにしましょう。
基本だけど。]]> 日常 http://www.wintryblasts.com/blog/?itemid=94 Tue, 1 Jun 2010 18:21:30 +0900 http://www.wintryblasts.com/blog/?itemid=93 使いにくくなっています。

外部CSSの編集時に、はまったのでメモ。

外部CSSリンクのあるHTML書類を開いた場合、従来のウィンドウ表示とは変わって
メインのタブ下に小さなタブ表示でCSSファイルへのリンクが表示されます。

20100215-dreamweavercss1.jpg

キーボードで書類を切り替えてHTMLとCSSを交互に編集する自分には非常に不便。
ググってみても出てこないんで基本的な事なのかと環境設定をもう一度見直し。

20100215-dreamweavercss3.jpg

一般 > 関連ファイルの表示のチェックを外せばOK。
従来通りに表示できます。

しかし常にコード表示のはずがデザインビューで開いたりするしイマイチだなあ。。。
Javascriptのコードヒントなど地味な新機能が良いだけにもったいない。

世の中デザインビューとマウスでHTML編集してると思うと背筋が寒くなるなあ。。。]]> 日常 http://www.wintryblasts.com/blog/?itemid=93 Mon, 15 Feb 2010 11:57:16 +0900 http://www.wintryblasts.com/blog/?itemid=91 画像が重なって表示されてしまい、親のボックスからもはみ出してしまう状態。
フロートのクリアはしてあるのにクリアがされていないような状態です。
バグフィックスの覚書きです。HTMLソース
<ul class="hoge">
<li><img src="img/hoge.jpg" alt="hoge" id="hoge" style="border-color:#990000;" /></li>
<li><img src="img/hoge.jpg" alt="hoge" id="hoge" style="border-color:#990000;" /></li>
<li><img src="img/hoge.jpg" alt="hoge" id="hoge" style="border-color:#990000;" /></li>
</ul>

IDやボーダーがスタイルタグで設定してあるのはDOMを使って色を変えたりしているため。

CSSソース

この状態だとIE6はOKなのになぜかIE7だけ画像の高さを認識せずに重なって表示されたり、

対処法は、
height:auto; を親のulに指定する。
IE6の表示でエラーが出る場合はIE7だけ専用タグで読み込めばOK。
ファイルがもう一つ必要なので微妙ですが･･･
]]> 日常 http://www.wintryblasts.com/blog/?itemid=91 Sat, 31 Oct 2009 15:23:31 +0900 http://www.wintryblasts.com/blog/?itemid=88 画像一覧を切り替えるjavascriptを作ってみました。

画像名さえ決めてしまえばDOM Scriptingで色々できるなあと。
長くなってしまうので別にページを作りました。
そんなに難しいスクリプトじゃないので恥ずかしいのですが公開。

http://wintryblasts.com/techtips/tips1.html]]> 日常 http://www.wintryblasts.com/blog/?itemid=88 Sun, 6 Sep 2009 23:36:29 +0900 http://www.wintryblasts.com/blog/?itemid=84 ネタはあるんですが、まだ公開するほどソースがまとまってなくて・・・orz
というわけで今回は珍しく買い物ネタです！

3年ぶりにMacを買い換えすることにしました。
MacBook Proでモバイラー復帰です。
今回のモデルチェンジは値段が下がったこともさることながら、SDカードスロットの追加や
FW800が使えるようになったりと実用面でのスペックアップが著しく決断しちゃいました。
本当はSnow Leopardまで待つつもりだったのが、29ドルでアップグレードというWWDCの
プレゼンを見てしまって、いともたまらずアップルストアに問い合わせしちゃいました。
英語キーボード機の在庫もあるとのことで一安心。

ちなみに現在の開発環境はiBookと自作Windows機。

いまだにPowerPCのiBookを愛用していたのですが、パワー不足もあり
最近はWindowsでコーディングをしたりデザインをしてました。
しかし、どうにもWindowsは使いにくいというか慣れない部分があります。

ツリー表示。

これはどうにもいただけない。
おまけにフォルダで見ようとするとMac OS 9に逆戻りした気分になります。
それだけMacのカラム表示がウェブを作る際の階層管理に適しているということかもしれません。
せっかくWindowsでの開発環境も手に入れたのでFireworksはWindows版 "も" 使おうかなと思います。
Expressionの勉強もありますからね。まったくWindowsを無くす訳じゃないです。

とはいえ、RubyをやるにはMacintoshの方が数段便利でしょうし、サーバ環境も簡単に作れますので
MacBook Pro に頼りまくること間違いなしですが（笑）

週末に買いに行くので楽しみです！]]> 日常 http://www.wintryblasts.com/blog/?itemid=84 Thu, 11 Jun 2009 23:12:02 +0900 http://www.wintryblasts.com/blog/?itemid=82 文字が見えず消えてしまうため入力がまともに出来ません。

Microsoftへ問い合わせた結果報告です。まず、Expression studio 2の中で、 Designだけの不具合ってのが奇妙です。

しかもIMEでも入力できなかったので、ほとほと困り果てました。
ウェブデザインするのに使えるツールとして、Designに期待していたこともあって悲しさは2倍といっても良い状態でした（笑）

結論としては「ATOKは使えません。IMEを修正プログラム適用して使ってください」とのこと･･･

IMEは日本語入力出来るようにする修正プログラムを教えて貰いました。
http://support.microsoft.com/kb/946223/ja

ATOKの対応は難しいとのことで、入力言語を切り替えて使うことになりました。
しかし、自分の環境ではキーボードの切り替えが上手くいかないアプリケーションもあって、たまにATOKに戻らなかったりとかします。これは困る。面倒です。

結果としてXAML書く時はExpression Design 2、通常のデザインはFireworksで行っています。

ヨイショする訳じゃないですが、サポートの方の対応は良かったです。

Expression Webのタグ補完をDreamweaverのようにして欲しいといった関係のない要望も聞いてくれました。
アップデータ出してくれないかな？（笑）

あと、Expression Design 2はベクターツール主眼なのか、透明効果やオーバーレイといったレイヤーを重ねる部分が弱い気がします。
Fireworksで、レイヤーを重ねて透明感を出したりするデザインを再現するのは難しいです。

でもAdobeより安くて、使えるツールとして頑張って欲しいなあ〜]]> 日常 http://www.wintryblasts.com/blog/?itemid=82 Wed, 18 Mar 2009 00:24:38 +0900 http://www.wintryblasts.com/blog/?itemid=80 使うと一部分だけボーダーが消えてしまうバグの回避策の覚え書きです。やり方は簡単で、border指定をしたdivに、
position:relative;を指定するだけ。

悩んでいたのが、あっさり消えました(笑)]]> 日常 http://www.wintryblasts.com/blog/?itemid=80 Fri, 13 Mar 2009 10:20:48 +0900 http://www.wintryblasts.com/blog/?itemid=76
背景画像を使ったマウスオーバーボタンを作りたいときのアクセシビリティ対策、SEO対策としても重宝してます。

使い方としては背景画像で以下のような画像を使用します。

ボタン背景

CSSでマウスオーバー時に背景画像を切り替えるソースを記述します。
たとえば、以下のような典型的ソース。

li a#hoge { background:url(背景画像名.jpg) 0 0 no-repeat; }
li a:hover#hoge { background:url(背景画像名.jpg) 0 -38px no-repeat; }

今までだとこの画像に文字も入れておいて、CSSでtext-indent:-9999px;とか記述してしまうのですが、そうすると画像を表示していないときには何も読めなくなってしまいます。

かといってGIF画像ではエッジが綺麗に表示できないので困ってしまいます。

そこで、その上に乗せるテキストを透過PNG画像で作成します。
ALTに説明を記述できるので、画像を表示しない設定のアクセシビリティ対策も安心です。

サンプルが掲載できないので後日、アップ時にアドレスを載せます。
一応こちらでも使ってはいますがロゴやテキストの背景はOKで、ボタンだけエラーになっております。。。
http://www.exdesigning.net/

さて、問題はインターネットエクスプローラー。
IE7は余裕で表示できるのですが、IE6は透過処理が出来ません。
白くなってしまって悲しいことになります。

そこで、IE6で表示させるためのJavascriptを使用します。
今回使用したのは以下のライブラリ。

PNG Behavior
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

IE PNG Fix
http://www.twinhelix.com/css/iepngfix/

まだ、IE PNG Fixに関しては、使いこなせているとは言えないので、
書き方に関しては研究して、また記事を書こうと思っています。

どちらにも共通するのはパスの書き方が難しいと言うことです。
HTMLからのパスを記述しないと動きません。
FLASHでパスを書くときに似ています。

あと、どちらも「blank.gif」をアップロードして適切なパスを書かないと
動かないので注意が必要です。
これがないと×（バツ）印が画像に表示されてしまいます。

日本のサイトでも透過PNGを使ったサイトが増えてきているので
定番になっていくのだろうと思っています。

今回は使用しませんでしたが、タミヤのサイトのようにプルダウンが
透明で下が見えると、かなりお洒落だなーと思います。

http://www.tamiya.com/japan/index.htm]]> 日常 http://www.wintryblasts.com/blog/?itemid=76 Wed, 11 Mar 2009 00:17:23 +0900 http://www.wintryblasts.com/blog/?itemid=74 Apple Mailにはメールエクスポートの機能がありませんので以下のソフトを使用して取り出しや変換を行います。

まず、以下のサイトよりツールをダウンロードしてインストール（アプリケーションフォルダにコピー）します。
emlx to mbox Converter
http://www.cosmicsoft.net/emlxconvert.html

次にFinderで以下の項目を開いておきます。

ユーザ名/ライブラリ/Mail/Mailboxes/メールボックスの名前.mbox/Messages

このフォルダはMailで作ったフォルダの分だけありますので複数ある場合は
何回かに分けて作業をする必要があります。

emlxconvertを起動します。

emlxconvert

起動されたアプリケーションの白い部分にMessagesフォルダ内のemlxファイルをドラッグアンドドロップします。

save mboxを押すと変換が始まります。メールボックスと同じ名前でフォルダを作成し、別の場所に変換先を指定しましょう。
UNIX mbox形式で変換が完了します。

全てのメールを変換することが出来ましたら、CD-Rなどに焼いてWindowsにコピーします。














僕の場合はWindowsのメーラーがBecky!なので直接、取り込むことが出来ました。
Outlookなどをお使いの場合は更に変換することで取り込めると思います。

参考までに。
Mail Export Tool
http://www.gesource.jp/soft/mailexptool/
eml形式で保存すればOutlookに取り込むことも可能です。

またThunderbirdをお使いの場合は、下記のソフトが良さそうです。
http://nic-nac-project.de/~kaosmos/mboximport-en.html]]> 日常 http://www.wintryblasts.com/blog/?itemid=74 Sat, 8 Nov 2008 22:56:13 +0900