コンテンツ開始

2010年02月26日


Shadowbox.js : 3.0.2 が出ました / Shadowbox 内の SWFObject の使い方

詳細としてどこが変わったかは確認できていませんが、自分が投稿した
拡張子が大文字の場合に動作しなかったものを対応してくれたと返事が
投稿されてました。


実は、もうひとつ問題をみつけているのですが、対処が可能かどうかまだテストしていません。
SWFObject の 2.1 を既にロードしているとエラーになりますが shadowboxは動作します。

2.2 なら動くと思うのですが、まだテストしていません。

今日明日のうちに、3.0.2できちんとテストする予定です

で、2.2だと確かにエラーも出ずに使えているみたいですが、気持ち悪いので
shadowbox.js 内の SWFObject を使ってみると、一応使えたので、選択肢は
いくつかあるという事でまあ、納得です。
Shadowbox.flash.embedSWF(
	"http://nurd.up.seesaa.net/file/ggmap.swf",
	"ggmap118013765", 
	"600",
	"500",
	"9.0.0",
	"",
	flashvars,
	params,
	attributes
);





タグ:shadowbox
posted by at 2010-02-26 17:44 | Comment(0) | Shadowbox | このブログの読者になる | 更新情報をチェックする

2010年02月20日


Shadowbox.js のセレクタの使用方法

Sizzle.js を使用しているとの事なので、見に行ってみると、Selectors Level 3
が全て実装されているとの事です。とりあえずいくつか試しましたがたしかに動作します
とても使いやすいと想像できるいくつかのセレクタを以下にで簡単に説明します
( Sizzle では " は省略できるとあります )
=> Sizzle doesn’t require quotes around the specified value in an attribute selector
1) 属性の完全一致 : E[foo="bar"]
例 a[att=a_01_001]
arr という属性を作成してその値が一致する a 要素

2) 属性の前方一致 : E[foo^="bar"]
例 a[att^=a_]
arr という属性を作成してその値が a_ で始まる a 要素

3) 属性の後方一致 : E[foo$="bar"]
例 a[href$=.html]
拡張子が .html の URL をリンクしている a 要素

4) 属性の部分一致 : E[foo*="bar"]
例 a[href*=exteriors]
URL に exteriors が含まれる a 要素

5) 属性の-(ハイフン)より前の一致 : E[foo|="bar"]
例 a[att|=ja]
arr という属性を作成してその値が ja- で始まる a 要素

※ 特に、4) で適当な文字列を使うと、予期しないものが含まれるので注意です




タグ:shadowbox
posted by at 2010-02-20 23:20 | Comment(0) | Shadowbox | このブログの読者になる | 更新情報をチェックする

手書きブログの裏技

プログラマにとっては、「裏」というようなものではありませんが。
なにせ、.js の中に普通に書いてあります。これは、Flash の中に
定義されているメソッドの呼び出しで、Flex やってるものにとって
は普通の処理ですし。

カステムパレットツールを作り始めた時から知ってたので、自分は
時々使っていましたが、気合入れた水彩画を描く場合くらいしか使
わないのでほとんど使わないですが、Transparent の 10 とかはと
ても便利でいい味が出せます。

いまだに pipa が実装する様子も無い中、要望があったので、あら
ためて使ってみると使えるし、というか javascript: で普通に使え
るという発想は今回恥ずかしながら気がついたので。


この処理は、SetTransparent と SetHalftone の組み合わせで実行
されており、通常の50% は以下の処理です。
FlashObj("OEditBlog11").SetTransparent(50);
FlashObj("OEditBlog11").SetHalftone(100);

OEditBlog11 は、ページ毎に違う Flash の名前で、この名前は通常
の編集画面です。通常のハーフトーンは 100,50 となるので、ハーフ
トーンを変えた透過処理も可能です。その他にも
FlashObj(strFlash).SetPen(nWidth);
FlashObj(strFlash).SetSquarePen(nWidth);


というメソッドもあって、おのずと何をするかは一目瞭然です

ブックマークレットとして登録しておけば、実装されたのと同じ
事となります。各ユーザさんで自分の意志で使うかどうかを決め
ればいいと思いますが、一般のツールとして配布するのは良く無い
と思います。

で、結論として30% の透過にしたい場合は、アドレスバーで以下を入力します
javascript:void(FlashObj("OEditBlog11").SetTransparent(30));
メッセージの返信で既存の部分を消したい場合にはこれが必要ですね
javascript:void(FlashObj("OEditMessage3").SetPen(200));
聞かれたのでプロフィールをT50で
javascript:void(FlashObj("OProfile2").SetTransparent(50));
※ ▼ 手動でのお気に入りへの登録例 Ura_01 関連する記事 JavaScript : ブックマークレットに必要な戻り値を戻さない処理の実装方法 Firebug lite 1.2 ブックマークレット (少し日本語化+少し改造版) 手書きブログ用アドレスバーコマンド : 透過度変更 : IE拡張メニュー IE や Firefox で手動でブックマークレット(JavaScriptで動くアプリケーション)を登録する方法 ▼ 聞かれたついでに、実装されている内部関数の一覧 SetColor() SetGradientColor() SetPen() SetPenWidth() SetPenShape() SetSquarePen() SetTransparent() SetHalftone() StartUpload() Undo() Redo() ▼ さらに、実験中の新バージョン(OEditBlog12_1)で追加された関数 checkBrowserScroll() SetZoom() ※ これらはすべてソースコードに書かれている内容を元にしているので、 ※ 予告なく仕様が変更されて使えなくなります。
posted by at 2010-02-20 12:00 | Comment(3) | 開発琴線 | このブログの読者になる | 更新情報をチェックする

2010年02月18日


Shadowbox.js 3.0.1 初期化サンプル

いくつかのバリエーションですが、実際ギャラリーで動作しています。

Shadowbox.init は文字通り初期化用のメソッドで、全体で共通の環境を設定
した上で、コールバック関数を指定して個別の設定を行う関数を第二引数に
指定しています。ここではインラインで指定していますが、関数を別に定義
して関数名を指定する事もできます。

ここで全体指定は一般的に言われる「連想配列」のような書式で一括で渡
されており、counterLimit は、表示するページリンクの最大数です。読み込
む時に全体を覆うペース色を overlayColor で黒を指定し、その時の透過度
を overlayOpacity で指定しています。オリジナルのデフォルト値と説明は
こちらにありますShadowbox.setup は、単純にはクラス毎のグループで設定を行うメソッドで
厳密には第一引数でセレクタを指定します。例では、a.クラス名 でグループ
化していますが、オリジナルページでは、'a[title="Sweetness"]' というよう
な指定も行っており、これは外部ライブラリのSizzle.js を使用しているとの
事です。

第二引数はやはり「連想配列」のような書式で一括でプロパティをセットし
ており、gallery が shadowbox[ギャラリー名] に対応する値になります。
continuouscounterType はセットで使い、ページリンクを作成して直接
リンクを作成すると同時に最後から最初、最初から最後とループして順に移動
できる事を意味します。

widthheight はそれぞれ指定できますが、両方指定しているのはサイズ
固定の Google ストリートビュー用です、横幅のみ固定は外部のブログを内部
に表示しています。YouTube 用はさらに player で SWF を直接埋め込む事を
意味します。

最後のセットでは、slideshowDelay を指定してスライドショーの時間を指定
していおり、デフォルトの 0 ですとスライドショーにはなりません。スライド
ショーの時のみ一時停止/再生アイコンが表示され、スペースキーで切り替わり
ます。


ちなみに、ウインドウを閉じるのは ESC か Q か X です。
Shadowbox.init(
{
	counterLimit:20,
	overlayColor:'#000000',
	overlayOpacity:0.6
},
function () {
	Shadowbox.setup("a.light", {
		gallery: "light",
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.ggpano", {
		gallery: "test",
		width: 800,
		height: 600,
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.blog", {
		overlayColor: "#123456",
		width: 1075,
		gallery: "blog",
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.youtube", {
		gallery: "youtube",
		width: 835,
		height: 505,
		player: "swf",
		continuous: true,
		counterType:"skip"
	});

	Shadowbox.setup("a.main", {
		gallery: "main",
		continuous: true,
		counterType:"skip",
		slideshowDelay: 6
	});
});





タグ:shadowbox
posted by at 2010-02-18 23:26 | Comment(0) | Shadowbox | このブログの読者になる | 更新情報をチェックする

2010年02月17日


Shadowbox.js : 3.0.1 使用時の注意事項

Shadowbox 3.0.1 は、2010/02/16 バージョンです。3.0 Final で、Flash が表示
されない不具合に対応されたものですが、作者さんの配布時のミスのようですが、
細かい事を言うと 3.0 Final のほうで対応されていた事が欠落しています。

1) Japanese でダウンロードした場合、使用時に charset="utf-8" が必要です

これは、作者さんが「コンパイラ」による作業行ってるせいだとは思いますが、
3.0 Final 内では日本語がコード化されていたのに対して( \u8aad\u8fbc\u4e2d )
3.0.1 では、生のUTF-8の日本語で書かれているので、発生します。

利用ページが UTF-8 以外だと問題が出ます
( ブラウザ別の検証はしていませんが・・・ )

これは、利用者側で対応できるので Forum には書き込んでいません。


2) 画像ファイルの拡張子が大文字の場合、画像と認識せずにHTML扱いになる

これについては Forum に書き込みましたが、小さな事なので当分変わらない
だろうとは思います。先の Flash はすぐ対応されましたが、これは自分のように
デジカメで撮った画像データを使い慣れていなかったせいで発生したので誰も
あまり気にしてないでしょうし。でも、3.0b では対応されていたんですが。


3) 3.0b で動作していたrel内で書く options= が動作しない

これは、メインページのサンプル的に言うと仕様変更ぽいのですが、他の説明
ページでは特に言及されていません。3.0b の時も、Flash のオプションはrel
でうまく行かなかったし、Flash は誰もそういう使い方をしなかったでしょうが、
options={counterType:'skip',continuous:true} という使い方は利用していた
人も居ると思うので注意です。

それにこれに関しては代替方法があるのでそちらで対応するのが今後のメンテ
ナンスも効率が格段に良くなります。

以下が現在自分が使っているコードのサンプルです
<script type="text/javascript">
function setAll() {
	Shadowbox.setup("a.light", {
		gallery: "light",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.ggpano", {
		gallery: "test",
		width: 800,
		height: 600,
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.story", {
		gallery: "story",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.gimp", {
		gallery: "gimp",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.mono", {
		gallery: "mono",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.blog", {
		overlayColor: "#404040",
		width: 1075,
		gallery: "blog",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.garou", {
		overlayColor: "#404040",
		width: 1075,
		gallery: "garou",
		continuous: true,
		counterType:"skip"
	});
	
	
	Shadowbox.setup("a.tegaki", {
		gallery: "tegaki",
		continuous: true,
		counterType:"skip"
	});
	
	
	Shadowbox.setup("a.youtube", {
		gallery: "youtube",
		width: 835,
		height: 505,
		player: "swf",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.review", {
		gallery: "review",
		continuous: true,
		counterType:"skip"
	});
	
	Shadowbox.setup("a.main", {
		gallery: "main",
		continuous: true,
		counterType:"skip",
		slideshowDelay: 6
	});
}
Shadowbox.init(
	{
		counterLimit:20,
		overlayColor:'#000000',
		overlayOpacity:0.6
	},
	setAll
);
</script>



関連する記事とページ


タグ:shadowbox
posted by at 2010-02-17 15:37 | Comment(0) | Shadowbox | このブログの読者になる | 更新情報をチェックする

2010年02月16日


Shadowbox 3.0.1 で、IE は問題なく動きます。

今解ったのですが、今朝早くに作者さんが修正かけてくれたのでなおってます。
現在バージョンは 3.0.1 になっています
以下はそれを知る前に書いた記事です

比較的非力な PC で、IE8 で動かすと、アニメーションが良く無いです。
実は、ソースコード的には、IE7とIE6 でテストした形跡があるのですが、
IE のフラグがあるにもかかわらず、常に false になっています。それで
IE8 が動く以上、ブラウザ間の差がかなり無くなったという事なんだと思います
が、IE を嫌ってた人たちはここぞとばかりに、IE7( IE6 ) を駆逐にかかる
んでしょうね。この Shadowbox がいい例です。

実際は、IE7 と IE6 でまだうちのサイトでは半分以上のシェアがあります。
(ブラウザ比率 in SQLの窓)

とうぶんこんな事よく起きそうですね・・・・



というか、Google の円グラフのライブラリが IE8 でうまく
動いてないようですが・・・。
クリックしたらデータが表示されるはずなのに出ないですね。
で、互換モードアイコンをクリックすると動くのですが、そもそも
もともと DOCTYPE 書いて無かったので、互換のはずなのですが、
DOCTYPE を書いて標準モードにしたら、最初からうまく表示されました。
その場合、Firefox と表示が同じで、互換モードにしても完全に
IE6 の表示とは同じにならないですね。



めんどくさいなぁ:-(
関連する記事とページ


タグ:shadowbox
posted by at 2010-02-16 08:36 | Comment(0) | Shadowbox | このブログの読者になる | 更新情報をチェックする

2010/02/16 オリジナルがアップデートされたので問題解決です( 旧題 : Shadowbox 3.0 final を IE7(IE6) で Flash を使えるようするには )


2010/02/16
オリジナルを修正してくれたようです。3.0.1 になって現在動いてますね
ソースコードがけっこうごっそり変わってました。

この3日ほど、うちのギャラリーで相当テストしました。
Flash は全く問題無く動いてます。

IE8 は、明日仕事場でテストしますが、IE8 ではもともと動くような予感が
します。いくらなんでも、作者さん IE でまったく動かなかったら IE に恨み
あるとしか思えませんですけど。ま、実際にあるでしょうけど、この手の
アプリ作るデザイン系の人なら解らないでも無いです。

自分は、windows2000+IE6 と、WindowsXP+IE7 で自宅は動かしているので、
IE6側は相当非力で、それでも今回の Shadwbox は、 IE でスムーズに動きます。

逆に Windows2000+Firefox はまともにアニメーションしませんが、今時の
PC なら機嫌よく動くと思います。今回テストして思ったのは、外部 HTML を
IFRAME で読み込む処理で、外部 HTML の ロードが何らかの理由で止まると、
ロード完了を待つ Shadowbox がだんまりになるので、そういうページ内の
問題をなるだけ排除する必要があると感じました。

たまたま、別サーバのコンテンツがサーバが落ちたらしく、.js が取り出せ
ずに見事に固まりました。ま、固まらなくてもまともにページ表示できていま
せんでしたが、Shadowbox は 真っ黒の状態で固まるのでなんだか解りません。

後、不思議な IE の仕様が発覚しました。

そもそも、本体側の Shadowbox の処理が IFRAME の表示に影響出るのがおか
しいのですが、外部 HTML の BODY 部分に背景色を明示しておかないと、
Shadowbox を通して見るとそのページの背景が黒くなってしまいました。

ブログページを表示したので間違いありません。これは、良く覚えて無い
ので、Firefox でどうだったかは・・・確証がありません。

他にも不具合が IE の場合はまだあったのですが、ブログ側の表現を変えて
対処しました。いや、いろいろあるもんです。


▼ オリジナルが修正されたので必要無いです
// 変更前
if(typeof g.id==i)g.id=o;if(v.ie&&v.win)
// 変更後
if(typeof g.id==i)g.id=o;if(((window.navigator.userAgent.toLowerCase()).indexOf("msie") > -1)&&v.win)



関連する記事とページ


タグ:shadowbox
posted by at 2010-02-16 02:28 | Comment(0) | ブログパーツ | このブログの読者になる | 更新情報をチェックする

2010年02月13日


最新の shadowbox が 2/11 にリリースされていたのでテストすると Flash が動かないので Forum に投稿してみました

そもそもの始まり、3.0b を使っていて、IE7環境で使っている shadowbox
が 他の Flash と喧嘩して「インターネットサイトが表示できません」という
IE のよくある現象が出たのがはじまりで、この問題は IE の問題なので、
記述する位置や構造で変わるので対症療法しかありません。

でも、shadowbox がバージョンアップしていたらどうにかなってるかも・・
と思って見に行ったら( 2/12 )、前日の 2/11 に Version 3.0 Final が
出ているという偶然にぶちあたったわけで。

で、実装してみると Flash が動きません。いろいろ変わっていて、ロード
時のアニメーションがスムーズになっているし、日本語対応だし、IEが標準
モードでなくても動くので「やった!!」と思ったのですが、残念・・・
( flv プレーヤーも同梱されます )

なもんで、なんとかしようと思ってコード読んで Flash に関しては正しく
動くように変更できたのですけれど、大きなサイズの画像をリサイズする時
に( Firefox も ) 右端に空白空いてスクロールバーが出てみっともない状態
になります。しかたないので、今さっき Forum に投稿してきました
IE7(IE6) 
Flash does not work. 
v.ie is always false; 
I think IE needs classid for OBJECT element. 
I changed it. 
And then work. 

More. 
Width is not resized with a relatively big image definitely 

sorry my english. 
ひでぇ英語ですが、背に腹は変えられません・・・



関連する記事とページ


タグ:shadowbox
posted by at 2010-02-13 15:25 | Comment(0) | Shadowbox | このブログの読者になる | 更新情報をチェックする

2010年02月10日


ハリー・ポッターと謎のプリンス

ハリー・ポッターと謎のプリンス 特別版(2枚組) [DVD]



Amazon のレビューは商品毎に付くので全て見ていませんが、今回の作品が
非常に抑えていて、多分フィナーレへと向かうであろう布石として作られ
ているのを、皆さん好意的にとらえておられたのでホッとしました。
原作読んでいる人が多いという事もあると思いますが、つまりそれなりの
クオリティを保ちながら抑えていたという事だと思います。

自分自身、何か「魔法日記」のようなものを淡々と読まされているような
気がして、ずっと違和感を感じていたのですが、長いわりに退屈は全くしま
せんでしたが、どうもエピソード的には原作ファンを意識しているのかな?
と思わせるような妙な話が多かった気もします。

しかし、何より印象的だったのはやはりラストで、結構へこんだのですが
何か釈然としないまま観終えました。

よーーく考えると、見た目通りの結果であれば必要無いであろう演出が
3シーンほどあったので、もうこれは最後をきっちり盛り上げる為の役割
で作られたとしか思えなくなって来ました。

当然ハリーは勝たなければならないわけだし、現実の俳優のタイムリミット
もあるはずなので、もう今回では無く完全に「次回」を見据えての忍耐の
限りを尽くした「謎のプリンス」で間違い無いと決めました。


です。


どんな物語でも必ず終わりが来るのは寂しいかぎりですが、
ずっと観てきた自分の時間軸の思い出も同時に蘇るシリーズが
あったというのはとても嬉しい事ですね。



ダンブルドア




タグ:DVD VideoMovie
posted by at 2010-02-10 18:07 | Comment(0) | VIDEO : 映画 : ファンタジー | このブログの読者になる | 更新情報をチェックする

ナイトミュージアム2 / なんでもありだけど、それだけは・・・

ナイト ミュージアム2 (特別編) [DVD]



単なるドタバタになってるのを懸念してましたが、

「ほーーー」


と言わせる事のできる続編です。
冒頭の主人公の表情が最後への伏線になっているとはさすがに
気がつきませんでしたが、あの可愛い女性飛行士からもきちんと
後押しされてラストを迎えます。うん、よく出来てる。

で、自分的には少し切ない気もしました。
これだけなんでもありのお話( ラストに至っては、笑ってしまいます )
なのですが、世界観の不文律と言うか、それだけはどうにもならんなぁ・・・

なんて思って観ていると、


ちゃんとそっちの落ちまで付けてくれました。
いや、ほんと良くできてる。

主人公の性格がまじめだという設定がいいですね。
なんか感情移入しやすいです。





タグ:DVD VideoMovie
posted by at 2010-02-10 04:38 | Comment(0) | VIDEO : 映画 : ファンタジー | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
コンテンツ終了
右サイド開始
コンテナ終了
base 終了
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX