Twitterやってます。
2017.09.04

感想と推薦

UNISON SQUARE GARDEN - UNISON SQUARE GARDEN

THE BACK HORN、GRAPEVINEを聞いていたと言うだけあって、そのテイストが感じられる曲調。3ピースでも音にしっかりとした厚みがあって、バランスが良いと思った。

just A moment - 凛として時雨

その名の通り、切なくて冷たい雨が降る。TK(男性Vo)のハイトーンは好みが分かれるところだが、345(女性Vo)とのツインボーカルが生み出す緊迫感はとても狂おしく、破滅的で情緒に溢れている。

軌道-WARPHOLL

でもね、曲はめっちゃカッコイイス。そういう細かいところを気にするアホウは僕くらいなもんで、良いアルバムに仕上がってますよ。

衝撃の展開に思わず笑みがこぼれる一品 "Stick Stickly" Attack Attack!

いやはや、凄いの見てもーた。基本はスクリーモなんですが、エモが来たと思ったらいきなりエレクトロニカなん?4つ打ちなん?っていう最高の一品です。

On Fire-The Higher

1曲目の「insurance?」からいきなり「It's Only Natural」と似たテイストのノリノリナンバーで、一気に持ってかれてしまいました。全体的に気持ちよく聴けるアルバムに仕上がっています。

SO MANY MUSIC,SO MANY COLORS - Looking For

埼玉産インディーズバンドLooking For。同郷なら応援しないわけにはいかない。とにかくメロディック・メロディックなのであります。まさしく僕好み。ありがとうございます。

NIGHT FISHING - サカナクション

初めて聴いた感想はズバリ「つまらん」。 で、封印しようかと思いつつ、他に聴くものもないし・・・などとループ再生していたところ・・・4,5回目くらいから良くなってきました。

Music is the key-UNCHAIN

僕のファーストインプレッションは、 「んー、フライングキッズ?いや、オリジナルラヴ?」 でした。 前作 rapture が割とアップテンポで勢いのある印象だったので、アップテンポ好きな僕には少し物足りないというか、お子ちゃまな僕の好きな路線とはちょっと違うかなぁという感想。

air feel,color swim - school food punishment

女性Vo.なんですが、彼女の声と曲の世界観が絶妙です。彼女の声を聴いていると、切なくなるような、苦しくなるような、かと思えば一気に解放されるような、フワフワ浮かんでいるような。 クラムボンが好きな人とかすんなり聴けるんじゃないかと思います。

ALBO─Mistral

正統派J-popとでもいうべき非常に聴きやすい作品。メロディーも心地よく耳に残る感じ。無意識のうちに結構気に入っていたらしく、このまえ気付いたら4曲目のサビをひたすら口ずさんでました。
RSS
2009.05.18

Shadowbox.js version 3.0b の設置方法と使い方

FLASHをLightBox風に表示させたいと思い、なにかオールマイティーなそういうライブラリはないかなぁとインターネッツを徘徊してみたところ、いくつかある中から気になったのがShadowbox
Ver3になってコードが大きく変わっているらしく、あまり情報が見あたらなかった(探す気がないともいう)ので、英語力ゼロのアタクシが本家のUsageだけ(!)を頼りにShadowboxの設置方法、Shadowboxの使い方をまとめてみます。

始める前におねがい

このページのhtmlソースをそのままコピっておられるサイト様がいるようなのですが、よそのサイトのjsファイルを安易に読み込むのは大変危険です。jsファイルは自サイトに置くようにしてください。

まずはダウンロードするっすー

 本家のダウンロードページからファイルを落とします。
選択肢がありますが、 buildとzipを選べばOKでしょう。
ちなみにbuildはスクリプトをコンパクト化したもの。sourceはコンパクト化前の可読性の高いものです。ソース読んで勉強したい人はsourceのほうをどうぞ。僕は読んでもワケワカメなんで落としもしませんけれども。

解凍するっすー

「するっすー」がこれほどバカっぽく使えるのは、たぶん高田馬場じゅうを探しても僕だけでしょう。

解凍後ファイルをアップするんですが、その前に。僕のサイトでは既にjqueryを導入済みなのでスルーしそうになりましたが、Shadowboxを動かすためのベースとなるライブラリが必要です。

ここで驚いたのが、各ライブラリ別にアダプタ用ファイルを用意していて、それを読み込ませることで実装できるという仕様な点です。今まで見たこと無かったタイプなので(つーかそんなに使ってこなかったのでほとんど知らないんですが)、ちょっと感心しました。

ということで使えるライブラリは以下の6つ

色々あるんですね。ちなみに僕はPrototypejquery以外は使ったこともなく。
そんなわけで、ウチのサイトにはjquery導入済みなのでそれを前提に話を進めます。

 解凍すると色々フォルダが出てきます。基本的には全部使うのですが、要らないファイルもあるので、それは消しちゃいます。

adaptersフォルダ・・・shadowbox-base.jsとshadowbox-jquery.js以外削除(jquery を利用する場合)

languagesフォルダ・・・shadowbox-ja.js以外不要です(日本語の場合) 次とか前という表示を英語で出したいときはshadowbox-en.jsです。中国語のときはshadowbox-ca.js・・・以下略

playersフォルダ・・・shadowboxで出したいメディア形式に応じてファイルがあります。基本全部で良いと思うのですが、「うちのサイトはQuicktimeは絶対使わん!」という方はそれを消しても大丈夫です。

・・・。ここまで書いて、「全部まるっとあげちゃえばよくね?」と思いましたが、几帳面なんです。僕。

設置するっすー

やっとここまできた。ファイルをアップします。ウチのサイトの場合は /common/js/shadowbox にファイル一式をアップ。なお、shadowbox.cssは別途HTMLのheadからリンクさせるので、ウチルールに則って/common/cssにアップしました。(基本、几帳面なんで)

次にHTMLの記述。本家Usageに従いまずは<head>内にこれらを追加。

<link rel="stylesheet" type="text/css" href="/common/css/shadowbox.css" />
<script type="text/javascript" src="/common/js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    language:   "ja",
    players:    ["img"]});
</script>

テストするっすー

早速テスト。

まずは本家の教えに従いシンプルに
<a href="/photos/20090512.jpg" rel="shadowbox">My Image</a>
My Image

おぉ。ちゃんとできた。

続いてタイトル表示

<a href="/photos/20090512.jpg" rel="shadowbox" title="実家のねこさん">My Image</a>
My Image

サイズの設定

<a href="/photos/20090512.jpg" rel="shadowbox;height=140;width=400"  title="実家のねこさん">My Movie</a>
ねこさんをわざと横長にしてみます。
My Image
敢えて画像に指定する必要はないのだけれど、本家の例にあるように、たぶんswfやムービーのサイズは明示的に記さないといけないんじゃないかと思う。

動作オプションの設定

<a href="/photos/20090512.jpg" rel="shadowbox;options={animate:false}" title="実家のねこさん">
My Image
このanimate:falseはたぶん表示するときのアニメーションをさせないことで表示パフォーマンスの向上をさせるみたいなことらしいんだけれども、ウチの環境では点滅して表示されるのでなんか格好悪い。そんで、他にもたくさんのオプションがあるようなので、気が向いたら試してみよう。
なお、オプションの記述はJSON形式で書きなさいとあります。

あと、どうしても分からないのが本家Usageのオプションの説明部分で

Additionally, you may set Shadowbox options on a per-link basis.

って書いてあるper-link basisの意味が分からず。詳しい人教えてください。

グループ化

グループ化は複数枚の画像をスライドショーのように次へと進めていける表示形式ですな。 
<a href="/photos/20090512.jpg" rel="shadowbox[nekosan]" title="実家のねこさん1">実家のねこさん1</a>
<a href="/photos/20080111.jpg" rel="shadowbox[nekosan]" title="実家のねこさん2">実家のねこさん2</a>
<a href="/photos/20070523.jpg" rel="shadowbox[nekosan]" title="実家のねこさん3">実家のねこさん3</a>
実家のねこさん1
実家のねこさん2
実家のねこさん3

はい、これで次へ前へボタンが表示されて、スライドショーに・・・。スラ・・・?ん?

ここで問題発生

いままで全然全くこれっぽっちも気付かなかったのですが、ボタン類が一切表示されません。
 20090517.jpg

 ってか最初に閉じるボタンが出てないことに気付けよ<自分。
えっと、一応ボタンがあるらしき部分にカーソルを合わせ、クリックすると正しく動作するので、考えられる問題はひとつ。前述のこの部分

なお、shadowbox.cssは別途HTMLのheadからリンクさせるので、ウチルールに則って/common/cssにアップしました。(基本、几帳面なんで)

几帳面さが仇となりました(笑)
ということで、shadowbox.cssの中身を見てみます。

・・・。

ぬをー、build版を落としたせいで、改行やインデントが一つもない!テラヨミニクス

こんな時はダウンロードページからsource版をダウンロード。shadowbox.cssを取り出してみます。
うむ。ちゃんと改行もインデントも、さらにはコメントまで入っている綺麗な読みやすいCSSが出てきました。
ただ、ファイルサイズは倍あります。まぁこのご時世、数KBのファイルサイズに目くじらを立てる必要も無いんでしょうが、基本、几帳面なんで(笑)。

部品の画像ファイルはPNG形式だったので、pngで検索すると、予想通り画像へのパスが記述されている箇所がありました。これを書き換えます。

background-image: url(resources/close.png);

background-image: url(/common/js/shadowbox/resources/close.png);

てな要領で計5カ所を直しました。そして無事ボタンが表示されました!

そして最後の記述例へ

本家Usageの記述例を頭から追ってきましたが、やっと最後の例まできました。正直つかれました。
でも頑張るのです。ということで、異なるメディア形式のファイルをグループ化した例でござる。

っとその前に、初期設定でどのメディア(プレーヤー)を使うかを明示的に記す必要があります。
今回は画像とwmvとswfを使うので、一番はじめに<head>で書いた内容に追記します。

<script type="text/javascript">
Shadowbox.init({
    language:   "ja",
    players:    ["img","wmp","swf"]
});
</script>

<a href="/photos/20090512.jpg" rel="shadowbox[Mixed]" title="実家のねこさん">実家のねこさん</a>
<a href="/archives/pompspop/images/20060111.wmv" rel="shadowbox[Mixed];width=320;height=240" title="WMV動画">WMV動画</a>
<a href="/images/fla/peta/peta.swf" rel="shadowbox[Mixed];width=640;height=480" title="FLASH">FLASH</a>

実家のねこさん
WMV動画
FLASH

まとめ

と、いうことで、何とかやりたかったこと(FLASHの表示)はできました。さらに色んなオプションがあることがわかりました。めでたしめでたし・・・と、言いたいところなのですが、最後の例を作ったことで発覚したのが、「Firefoxでwmvの再生ができない」という点。これについては要調査ですな。
何か情報をお持ちの方は教えてください。

んでは! 


トラックバック(0)

トラックバックURL:

コメント(5)

始めまして。
Firefox3.0.10で見ているのですが、WMV動画見れてますよ~。
しかし、その下のFlashが見れんとですが。。

ちなみにWindowsです。
連投ですみません。。

ご指摘ありがとうございます。
そういえば、先日swfの置き場所を変えたのにここのリンクを直すのをすっかり忘れてました。助かりました。
あと、FirefoxのWMVの件はプラグイン絡みのようです。うちの環境では、他のサイトのWMVがあるページを見に行ってみたらなぜかQuickTimeのアイコンが登場しました(笑)

こんにちは。
管理人さんのおかげで設置することが出来ました。
全然上手くいかなかくて半泣き状態だったんですよぉ(><)
本当にありがとうございました。
windowsXPのfiefoxの3.06バージョンで
wmvもswfも他の画像ファイルもちゃんと見ることが出来ましたよ!

無事設置できたようでなによりです。
お役に立てて嬉しいです。

コメントする

お名前 Eメイル
URL ログイン情報を記憶