Terminalから複数の画像(png)を「Quick Look」で開くには？

アップしました。Show Lyrics II 本体も差し替えてください。テーマは、フリーサイズと500x500サイズの二種類を同梱。Show Lyrics II のパッケージ内にある make_lyrics.scptd を手動で差し替えてください。

ーーーーー

で、カスタマイズですが、jQuery を組み込むとフェードイン等のアクションを実現できます。

しかしながら Webkit (OmniWeb 5、Safari 5.0、Safari 5.1) との相性があまり良くない？ようで、ブラウザのリロード時にチカッとフラッシュしてしまいます。ダメもとで Apple には報告済み。

ちなみに Camino ではこの問題がありませんが、CSS3 への対応半ばで終わっちゃったし...。

このようにいくつかの制約があるものの、工夫次第で結構かっこ良くできると思うので、オリジナルテーマを作ってみてください。

アップしました。Show Lyrics II 本体も差し替えてください。

早速いただきました・・・が、Show Lyric IIが「壊れているため開けません」となります。テーマファイルは問題なく使用できました。ありがとうございます。

で、カスタマイズですが、jQuery を組み込むとフェードイン等のアクションを実現できます。

なんだか敷居が高そうなので、とりあえず下記を参考にどうにかできないかと思っています。

CSS（スタイルシート）でフッターをフェードアウトさせる｜Webpark

make_lyrics.scptd/Contents/Resources 下にbottom-fade.pngをおいてそれを参照させることができれば・・・と思うのですが、ファイルのパスの指定がわからず・・・。

自分でダウンロードしてみましたが、こちらでは大丈夫のようです。とりあえず別ファイルとして再アップしました。（Show Lyrics Suite - 再）

Gatekeeper に撥ねられてる可能性もあるので、アプリを許可する作業をもう一度してみてください。

それでダメだったら、下記のページからスクリプトファイルを一つずつ作成してみてください。注意点としては現在のものに上書きではなく、新規ファイル/アプリとして保存。

今回のものは清書しただけなので、最悪アップデートしなくても大丈夫ですが、何が問題かを把握しておく必要がありそう。

Show Lyrics II.app：iTunes の歌詞を OmniWeb で表示

http://www.geocities.jp/caminito_ja/page004.html#Anchor004-003

お手数ですがよろしくお願いします。

Gatekeeper に撥ねられてる可能性もあるので、アプリを許可する作業をもう一度してみてください。

ビンゴです。Gatekeeperが原因でした。失礼いたしました。

解決して良かったです。

ーーーーー

ファイルパスの指定は、関数 path_to_js_library_as_url() を使ってください。css で背景画像を指定するならこんな感じ。注意点としては、関数とファイル名の間にスラッシュを入れないでください。

background-image: url(" & path_to_js_library_as_url() & "xxx.jpg);

# 関数名が変ですね。そのうち気が向いたら変更します。

ファイルパスの指定は、関数 path_to_js_library_as_url() を使ってください。

何となくそれも試していたのですが、ファイル名をカッコ内に入れていました。使い方を間違っていたのですね (^^;

早速試してみたところ思ったような結果が得られませんが、多分私の理解不足だと思います。勉強しつつボチボチ頑張ってみます。

で、カスタマイズですが、jQuery を組み込むとフェードイン等のアクションを実現できます。

テキストのフェードインは結局挫折したのですが、情報を探す過程で下記を見つけたので歌詞のオートスクロールができるようにしてみました。

JavaScriptでボッス要素を自動スクロールする方法

使いようによっては便利だと思うので、粗だらけですが参考までに。

Hiro.Sさんが公開しているオリジナルの make_html.scpt を下記の内容で一部変更しました。いくつかの曲で試しましたが結構ちゃんと歌に合わせて歌詞がスクロールされます。

＃曲によっては速すぎたり遅すぎたりというのはあるので、カーソルを持っていったらオートスクロールが止まるようにもしたかったのだけど、うまくいかず・・・

-- 現在の曲の時間（秒）を取得（"tell current track" の後に挿入)

set rtime to duration as integer

-- 他、表示サイズとかもちょこちょこいじっているので、環境によって多少数字を変える必要はあるかもしれません

<script type='text/javascript'>

window.onload = function () {

autoScroll();

}

var $scrollY = 0;

function autoScroll() {

var $lyrics = document.getElementById( 'lyrics' );

var $weight = 800 // 数字が大きいほどスクロールは遅くなる

var $br = 14 // 歌詞の前に挿入した空行の数

var $time = " & rtime & " * $weight / ( $lyrics.scrollHeight - $br*24) ;

$lyrics.scrollTop = ++$scrollY;

setTimeout( 'autoScroll()', $time );

}

</script>

-- delayを挟む方法がわからなかったので歌詞の前に改行を多めに挿入

<div id='lyrics'>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />" & nl2br(current_lyrics) & "

</div>

歌詞のオートスクロールができるようにしてみました。

これは面白いですね！音を聞きながら歌詞を眺めてたら知らぬ間に二時間もたってました。(笑)

テキストのフェードイン

ええと、こんな感じで良いですか？

↑↑↑白文字から透明へのグラデーション↑↑↑

歌詞

歌詞

歌詞

↓↓↓白文字から透明へのグラデーション↓↓↓

これは面白いですね！音を聞きながら歌詞を眺めてたら知らぬ間に二時間もたってました。(笑)

（笑）　私も何かをする片手間に歌詞を眺められるようにとしたはずが、気がつけば手が止まっているので困りものです (^^;;

↑↑↑白文字から透明へのグラデーション↑↑↑

歌詞

歌詞

歌詞

↓↓↓白文字から透明へのグラデーション↓↓↓

そうです。歌詞が端でブツ切れになるのが美しくないかな・・・と思って、1行分くらいでいい感じにフェードイン＆フェードアウトしてくれるといいなと思うのですが、うまい方法が見つからず（見つけてもうまく実装できず・・・）。

良いアイデアがあればヨロシクお願いします。

＃あと、オンマウスでオートスクロールが止まる方法もわかれば是非。

＃実現さえできればjQueryでも何でも・・・と思うのですが、なんせ知識も技術もないに等しいので暗礁に乗り上げてます (-_-;;

一応、イメージとしてはこんな感じ？

歌詞の上下をフェードイン/フェードアウト...をアップしました。ついでに曲変更時にフェードイン/フェードアウトのアクションも追加。(trial.dmg.zip)

フェードインアクションのために HTML の初期表示は「真っ黒」です。ファイルの編集/確認の際は、make_html.scpt にある opacity: 0; をコメントアウトする良いでしょう。

グラデーションの調整は、一旦次のようにするとやりやすくなります。調整するのは background の % と、その上の方にある height。画像は使わず CSS のみです。

background: -webkit-gradient(linear, left bottom, left 70%, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 1)));

# スクロールバーを消しきれないのはご愛嬌ということで。

ーーーーー

オートスクロールをオンマウスで...は、アートワークをクリックするとオートスクロールを一時停止/再開...としてみました。もうちょっと作り込みたいとこですが、とりあえず動くレベルです。

注意点は $time ではなく time、それと document.body のところ。document.body は「歌詞の上下に...」バージョン用です。

<script type='text/javascript'>     timerID = null;     window.onload = function() {         __省略__     }     __省略__     function autoScroll() {         var $lyrics = document.body;         __省略__         time = " & rtime & " __省略__;         __省略__         timerID = setTimeout('autoScroll()', time);     }     function myClick() {         if (timerID == null) {             timerID = setTimeout('autoScroll()', time);         } else {             clearTimeout(timerID);             timerID = null;         }     } </script>

<div id='img_wrapper'>     <a href='javascript:myClick()'><img src=__省略__ /></a> </div>

ーーーーー

HTML 中の改行連打は make_html.scpt にある #lyrics の padding で調整すると良いと思います。JavaScript による delay は理想的ですが、結構難しそう...。あと、global rtime と set rtime to duration as integer を忘れずに。

歌詞の上下をフェードイン/フェードアウト...をアップしました。ついでに曲変更時にフェードイン/フェードアウトのアクションも追加。(trial.dmg.zip)

すごい　イメージ通りです！　ありがとうございます。

ただ、表示されてからは問題ないのですがなぜか切り替わりに1分30秒くらいかかってしまいます。

OS X Mavericksだからなのかどうかもよくわかりません。とりあえずどうすれば原因が特定できるかもよくわからないので指示いただければ動作確認してみますが可能でしょうか？

オートスクロールをオンマウスで...は、アートワークをクリックするとオートスクロールを一時停止/再開...としてみました。

こちらについてはばっちりです。

＃最初、歌詞が全部リンクになってびっくりしたけど、後ろの </a> を付け忘れていただけでした (^^;

贅沢を言うなら、オートスクロールを再開したときに一からではなく現在のスクロール位置からの再開にしたいのですが可能でしょうか？

var scrollPosition = document.getElementById("area").scrollTop;

でスクロールの現在値が取得できるみたいなので、それを$scrollYに設定すればいいのかなとやってみたもののそれぞれの構文の意味をきちんと理解できていないのもあってうまく導入できずやっぱり手詰まり・・・😢

ただ、表示されてからは問題ないのですがなぜか切り替わりに1分30秒くらいかかってしまいます。

とりあえず、下記の二行を外すとすぐに表示されるのでグラデーション部分の描画に原因がありそうです。

<div id='mask_top'></div>

<div id='mask_bottom'></div>

自己レス。

オートスクロールを再開したときに一からではなく現在のスクロール位置からの再開にしたいのですが可能でしょうか？

function myClick() のところに、scrollY=lyrics.scrollTop; と一行入れたらうまくいきました (^^)

＃いまいちなぜこれでうまくいったのか理解できてないですけど・・・ (^^;;

function myClick() {

if (timerID == null) {

scrollY=lyrics.scrollTop;

timerID = setTimeout( 'autoScroll()', time );

} else {

clearTimeout( timerID );

timerID = null;

}

}

表示されてからは問題ないのですがなぜか切り替わりに1分30秒くらいかかってしまいます。

こちらについては、どうもdivの入れ子がよくないみたい（よくわかってないけど）なので、Hiro.Sさんのアイデアをヒントにlyric_wrapperの入れ子を解除し、mask_topとmask_bottomにfloatを使ったら一応なんとなくそれっぽくなったような・・・

#mask_top {

margin: 40px 40px 0px 480px;

width: 100%;

height: 24px;

position: fixed;

top: 0px;

float: top;

background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)));

}

#mask_bottom {

margin: 424px 40px 0px 480px;

width: 100%;

height: 24px;

position: fixed;

top: 0px;

float: bottom;

background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)));