ユンサンの／융상의／YungSang's

<!--[if IE]>
<script type="text/javascript" src="iepngfix.js" charset="utf-8"></script>
<style type="text/css">
.iepngfix {
  behavior: expression(IEPNGFIX.fix(this));
}
</style>
<![endif]-->

Continue reading "透過PNG と IE と IE7　まとめ" »

Posted by YungSang at 05:50 PM | Permalink | Comments (8) | TrackBacks (1)

昨日、AoD！（サイトの方）の CSS を調整していたところ、font-family の設定がされていないことに気が付いた。

そこで、

font-family:  "MS PGothic", Osaka, Verdana, Arial, Sans-Serif;

を追加した訳ですが。

念の為、と思って Opera でみると、"MS PGothic" が効いてない様子。
まさかと思って、いろいろ試して見ると、

font-family: "ＭＳ Ｐゴシック", "MS PGothic", Osaka, Verdana, Arial, Sans-Serif;

で上手く行く。なんで？
日本語入れなあかんのか！

そうなると文字コードを指定しないといけません。
AoD！（サイトの方）は、テストも兼ねてあえて euc-jp にしていて、
それ以外の外部ファイル（スクリプト、スタイルシート）は全て utf-8 にしています。
どんな文字コードのサイトに使われてもいいようにです。

普通なら、script タグのように、linkタグを

<link href="/aod2/index.css" rel="stylesheet" type="text/css" charset="utf-8" />

のようにすればいいと思った訳で。

ところが！

今度は IE がスタイルを認識してくれません！IE７でも！

いろいろ調べてみると、スタイルシート側にも設定が必要のようです。

@charset 'utf-8';

↑を先頭にセットすると、IE でもスタイルを認識するようになりました。

これはマジで知らなかった！

Posted by YungSang at 03:29 PM | Permalink | Comments (0) | TrackBacks (0)

トラフィックやサーバーの負荷、プラグインのデータ元のレスポンスにより、
AoD ! がタイムアウトしてしまうケースがある。（頻繁に起こるという報告もある）

ので、タイムアウト時間を５秒から長くしようかと検討しています。

そういえば、昨日こんな記事があったな。

なるほどね。では。

１） アニメーションにもっと凝る。
（Flashにする？）

２） ４コママンガ（メッセージ）をコマ送りする。
（個人的にはこれがやりたい）

３） 15秒ＣＭを表示する。
（YouTubeかStage6からでも取ってくるか？余計遅くなりそう。。。）

４） バナー広告を表示する。
（営業的にはいいけど、おもろないか）

かつ、ランダムに出せるようにしたいですね。
かつ、ローディング中コンポーネントは、先読みしないといけませんね。

でな訳で、
AoD ! ローディング中コンポーネントの作品／広告／アイデア募集です。

ローディング時間が短いと途中までしか見れないの。
最後まで見たいために、逆に待ちたくなるような感じで＾＾

Posted by YungSang at 12:02 PM | Permalink | Comments (0) | TrackBacks (0)

ポップアップフレームの仕様を一部（背景画像部分）公開。
以下は、Mac風なフレーム番号２と３をベースにしています。

<div class="head iepngfix"></div><div class="body iepngfix"></div><div class="foot iepngfix"></div>

.AOD2Feeder .head {
	margin: 0;
	padding: 0;
	width: 425px;
	height: 55px;
	background: url(http://www.isella.com/aod2/images/popup_head.png) no-repeat;
}
.AOD2Feeder .body {
	margin: 0;
	padding: 0 30px;
	width: 365px;
	background: url(http://www.isella.com/aod2/images/popup_content.png) repeat-y;
}
.AOD2Feeder .foot {
	margin: 0;
	padding: 0;
	width: 425px;
	height: 50px;
	background: url(http://www.isella.com/aod2/images/popup_bottom.png) no-repeat;
}

という訳で、暇な方は作って送って下さいな。

ちなみに、
※ 上記 .body の background は、PNG の場合、iepngfix の関係で、リピートではなく、無条件に拡大されますので注意して下さい。
※ 上記 .body の padding: 0 30px; が IE6 以下の下位互換モードで変になる原因。直すの面倒臭いので、そのままです。

Posted by YungSang at 02:29 PM | Permalink | Comments (2) | TrackBacks (0)

AoD ! のページをブログにするのが面倒なので、自分で RSS を作ってみました。

これで、AoD ! に関するバージョンアップとかの情報を
簡単に発信することが出来るようになりました。

PS:
Picasa ウェブ アルバムプラグインも作りました。
使い方は、ウェブ アルバムのRSSのURLを指定するだけです。
せっかくなので、lightbox も内蔵です。
バカボンのパパなのだ

Posted by YungSang at 02:10 PM | Permalink | Comments (5) | TrackBacks (0)

jQuery も１歳の誕生日を迎え、jQuery 1.1.1 が出ておりますが、
様子見で、まだ使っておりません。
良さそうですね。

で、AoD も来月で１歳の誕生日なので、記念と称して、
今となってはもう必要ない jQuery 1.0.4 の私的勘所を10個にまとめて見ました。

１．エレメントの内容の設定には、$.html() は使わない。（参照は良い）
$.html() は、innerhtml というアトリビュートを勝手に作ってしまい、
そこにも２重に内容を書き込んでしまう。（FireFox とか Safari で）
対策は、$.empty().append() を使って、内容をクリアしてから、追加する。
これだと、余計なものは作られない。

$('#test').html('中身');

$('#test').empty().append('中身');

最近のブログ投稿画面によくあるブラウザ上の“WYSIWYG型”HTMLエディターで、
スクリプトが動いてしまうと、余計なものまでコンテンツに入ったまま保存されてしまうので、注意が必要。
普通の場合でもメモリ食いそうだけどね。

２．$.trim() を使う。
$.html()で取得して、その内容に対して文字列操作をする場合、
ブラウザによって、タグ直後の空白文字を含めるブラウザ（IE以外）と
含めないブラウザ（IE）があるので、$.trim() してからやるのが安全。

$('#test').html().charAt(0);

$.trim($('#test').html()).charAt(0);

３．$.css() では一括指定プロパティは使わない。
例えば、背景画像を設定するのに、background ではなく、background-image を使う。
background を使うと、画像だけでなくて、FireFox とかで -moz 系のプロパティまで勝手に追加されてしまう。
悪さはしないけど、気持ち悪い。

$('#test').css({
	'background': 'url(http://www.xxx.com/images/xxx.jpg)'
});

$('#test').css({
	'background-image': 'url(http://www.xxx.com/images/xxx.jpg)'
});

４．$.attr() でのJSONの書き方。
普通

$.attr({
	id   : 'test',
	class: 'test'
});

$.attr({
	'id'   : 'test',
	'class': 'test'
});

たぶん、class が何かの予約語になってる感じ。

５．$.param() は便利。
XMLHttpRequest や JSONScriptRequest など、Ajax で動的な呼び出しをする際に、
パラメタを $.param() を使って生成する。
JSON とかを渡すと、全ての値に encodeURIComponent() でエンコードしてから、
& で区切ったCGIパラメタ文字列を生成してくれる。

var url = url + '?' + $.param({
	'url' : 'http://www.xxx.com/xxx/',
	'test': true
});

Continue reading "細かすぎて伝わらない かも知れない jQueryの勘所10選 （jQuery 1.0.4 版）" »

Posted by YungSang at 10:54 AM | Permalink | Comments (0) | TrackBacks (0)

DesignWalker の管理人さんにお願いして、
AoD ! に新たに透過PNGを使ったデザインのテンプレートを追加してもらいました。

透過PNGは、透過GIFと違って透過部分がAlpha処理されて影とかが綺麗なんですね。

でも、IE7以前のIEではCSSでIE独自拡張のfilterを使ったりしないとならなくて、結構面倒かったりします。

そう思っていたら、簡単な解決方法を発見したので、早速試してみました。

使い方は、iepngfix.htc というスクリプトを用意して、
下記のようなスタイルを、使いたいページのスタイルシートに追加するだけ！

<style type="text/css">
* html .iepngfix {
  behavior: url(iepngfix.htc);
}
</style>

* html が付いているのは、IE5.5 とか IE6 にだけ適応させる CSS Hack ですね。
そして、ここでは iepngfix というクラス名がついている 透過PNG が使われている画像に対して htc というスクリプトを適応させています。
しかも、背景画像に透過PNGが使われていても透過にしてくれます！
セレクタに img や div とかを指定してもいいのですが、全ての要素でスクリプトが動くので重くなってしまいます。
ので、なるべく 透過PNGが使われている要素にクラス名を指定すると良いでしょう。

ただし！
※この htc は、ページと同じドメイン／サーバーに無いとエラーになってしまいますので注意が必要です。
※この htc のソースの中にある blankImg の指定行は自分のサーバー内のファイルに書き換えないとなりません。
換えなくても、myselfArchiverさんのところで上手く動いているみたいですね。 でも、出来れば換えて下さい。(2007/01/11 追記)
※指定する要素には、必ず、width と height を指定しないと、変な大きさに変換されることがあります。

さて、でもこれでは上記問題により、AoD !のようないろんなサイトで使用されるスクリプトでは使えません。
各サイトで iepngfix.htc をセットしなければならなくなってしまいます。

そこで、新たな方法を思いついたので、試してみました。

それは、iepngfix.htc を iepngfix.js に改造（＋改良）して、
behavior: url(iepngfix.htc);
の代わりに、
behavior: expression(IEPNGFIX.fix(this));
というように、expression() を使う方法です。
expression() は CSS内でJavaScriptを使用して動的にスタイル指定出来るIEの拡張機能です
。 普通は expression()の中にJavaScriptを書くのですが、外部ファイルの関数も呼べます！

<script src="iepngfix.js" charset="utf-8" type="text/javascript"></script>
<style type="text/css">
* html .iepngfix {
	behavior: expression(IEPNGFIX.fix(this));
}
</style>

これを AoD ! に内蔵しました。
めでたし。めでたし。

と思ったら、通常の使用ではOKだけど、AoD ! のように、
１．透過PNGを動的に差し替えたりした場合、IEPNGFIX.fix() を再度呼んであげる必要があります。
２．透過PNGを背景にしたエリアを動的にロードするような場合は、
ロード後に IEPNGFIX.fixchild() を適宜呼んでやらないと、リンクやイベントがうまく動かないケースがあるようです。

Continue reading "透過PNG と IE と IE7" »

Posted by YungSang at 08:26 PM | Permalink | Comments (2) | TrackBacks (1)

プロパティ（インスタンス）

• Int id
  このインスタンスのページ内で固有のシーケンシャル番号。
• DOM tag
  このインスタンスに対応した AoD ! リンク（<a>）タグのDOMオブジェクト。
• Boolean loaded
  このインスタンスに対応したポップアップウィンドウの表示エリアに情報が読み込み済みかどうかのフラグ。trueの場合は、タグをクリックしても、再ロードは行わず、表示する。
• DOM dom
  このインスタンスに対応したポップアップウィンドウのDOMオブジェクト。
• DOM body
  このインスタンスに対応したポップアップウィンドウ内の表示エリアのDOMオブジェクト。

メンバ関数（プロトタイプ）

• Boolean show(Event event)
  ポップアップウィンドウを開く。loaded が false であれば、情報をロードするために、load() をコーリする。リターン値は常に false。
• Boolean hide()
  ポップアップウィンドウを閉じる。リターン値は常に false。
• Void load()
  タグの rel に対応した情報ソースを呼び出す。
• jQuery loading()
  ポップアップの表示エリアにローディング中のアイコンを表示する。ポップアップの表示エリアの jQuery オブジェクトを返す。
• String title([String subtitle])
  タグの内容から、ポップアップウィンドウのタイトルを生成し、リターン値とする。subtitle があれば、付け加える。
• jQuery empty()
  ポップアップの表示エリアを空にする。ポップアップの表示エリアの jQuery オブジェクトを返す。
• jQuery append(String str|DOM dom)
  ポップアップの表示エリアに str/dom を追加する。ポップアップの表示エリアの jQuery オブジェクトを返す。

メンバ関数（インスタンス）

• Void remove()
  このインスタンスに対応したポップアップウィンドウに関連するイベント／オブジェクトを消去する。

Posted by YungSang at 07:17 PM | Permalink | Comments (0) | TrackBacks (0)

プロパティ

• String version
  使用中のAoD ! のバージョン
• String base_uri
  AoD ! のベースＵＲＬ: 'http://www.isella.com/aod2'
• String charset
  AoD ! のキャラクタセット: 'utf-8'
• Array scripts
  AoD ! が動的にロードしたスクリプトのDOM配列。unload時に削除される。
• Array styles
  AoD ! が動的にロードしたスタイルのDOM配列。unload時に削除される。
• String html
  AoD ! のポップアップウインドウのベースHTML
• Array feeders
  ページ内にあるAoD ! 対応アンカーに対応するFeederのオブジェクト配列。unload時に削除される。
• Array plugins
  追加されたプラグインのオブジェクト配列。unload時に削除される。

メンバ関数

• DOM loadScript(String url)
  urlのJavaScriptファイルを<head>に追加し、そのDOMオブジェクトを返す。
• DOM loadStyle(String url)
  urlのCSSファイルを<head>に追加し、そのDOMオブジェクトを返す。
• LXSAOD2 extend(Object obj)
  objオブジェクトのメンバをLXSAOD2オブジェクトに追加し、追加されたLXSAOD2オブジェクトを返す。
• Void plugin(String name, Object obj)
  objオブジェクトによって定義されたプラグインをnameプラグインとしてLXSAOD2に登録する。nameはa/@relの第一エレメントとして利用される。
• Void init()
  ドキュメントのロード完了（DOM Ready）時に呼ばれる。AoD ! のポップアップウインドウ用のCSSとHTMLをロードする。AoD ! 対応アンカーを探し、Feederオブジェクトを生成する。
• Void unload()
  ドキュメントのクローズ時に呼ばれる。メモリリークを防ぐ為、Feederオブジェクト、CSSとJavaScriptのDOMを削除する。プラグインがあれば、それぞれのプラグインのunload()を呼び出す。

• Int getOffsetLeft(DOM dom)
  dom要素のドキュメント内でのx座標をピクセル値で返す。
• Int getOffsetTop(DOM dom)
  dom要素のドキュメント内でのy座標をピクセル値で返す。
• Int scrollLeft()
  ブラウザウインドウの現在の横方向のスクロール量をピクセル値で返す。
• Int scrollTop()
  ブラウザウインドウの現在の縦方向のスクロール量をピクセル値で返す。
• Int clientWidth()
  ブラウザウインドウの表示領域の横幅をピクセル値で返す。
• Int clientHeight()
  ブラウザウインドウの表示領域の高さをピクセル値で返す。
• Void setCookie(String name, String value[, String expires[, String path]])
  valueをnameという名前のクッキーでセットする。expires（例：'Tue, 31-Dec-2030 23:59:59'）があれば、有効期限を設定する（省略時や''ではブラウザが閉じるまで有効）。pathがあれば、pathディレクトリ以下で有効とする（省略時はカレントパス以下で有効）。
• String getCookie(String name)
  nameという名前のクッキーを取得する。
• Void delCookie(String name)
  nameという名前のクッキーを削除する。

Posted by YungSang at 08:02 PM | Permalink | Comments (0) | TrackBacks (0)

AoD ! オブジェクト (aod2_packed.js)

• LXSAOD2
  AoD ! のメイングローバルオブジェクト。ページ内のフィーダーの管理とユーティリティを含む。
• LXSAOD2.Feeder
  ページ内の個々のタグとポップアップウィンドウに対応するフィーダーオブジェクト。

その他に自動的にロードするオブジェクト

• JSONScriptRequest (jsr_packed.js)
  JSONPに対するリクエストを管理し、コールバック／タイムアウトを返す。
• jQuery (jquery_packed.js)
  AJAX系ライブラリの新星。AoD ! では、Prototypeと混在する為、$$として定義される。
• Prototype (prototype.js)
  AJAX系ライブラリの老舗。エフェクタにScriptaculous系を使用する為。
• Scriptaculous系effects (effects.js)
  AJAX系ライブラリの老舗Scriptaculousのビジュアルエフェクト用ライブラリ。
• Scriptaculous系dragdrop (dragdrop.js)
  AJAX系ライブラリの老舗Scriptaculousのドラッグアンドドロップ用ライブラリ。

Posted by YungSang at 08:03 PM | Permalink | Comments (0) | TrackBacks (0)

AoD 2.0 (開発コード：PYLORI-KIM) の正式版というか、後継、AoD !が登場！
実は、先週末の3日間で0からコード書き直しました(^^v

これを使うと、フォー・トラベルのAPIでマチュピチュのアルバムを表示してみたり。

<script type="text/javascript">
var HelloPlugin = {
    load: function(feeder) {
        $$('<div />').appendTo(feeder.empty()).css({
            'font-size' : '20px',
            'text-align': 'left'
        }).append('こんにちわ！ユンサンとゆいます。');
        feeder.loaded = true;
    },
    unload: function() {}
};
LXSAOD2.plugin('Hello', HelloPlugin);
</script>

と独自のプラグインを作って、あなたへのメッセージを表示してみたり。
出来るんですよ。

こういうのHTML形式のメールに入れたら面白そう。
既存のデコレーションメッセージをここに入れたら。

そのうちプラグイン・プログラミング・ガイドを書いてみようかなぁ。。。
書けるくらいの人は自分でハックしてしまうか(^^

Posted by YungSang at 03:27 PM | Permalink | Comments (0) | TrackBacks (0)