Thickboxを導入

画像のサムネイルをクリックすると画面がグレーアウトして、拡大画像が中央に表示されるスタイル。巷ではこれを(最初に実現したスクリプトの名前をとって)Lightbox風と呼んでいるようですが。今回それ系のひとつであるThickboxをSKAに仕込んでみた。なお、以下の説明にはエントリ記述時の最新版であるThickbox 3.1を使用している。

導入方法

設置は非常に簡単。まず公式サイトからthickbox.js, jquery.js, thickbox.css, loadingAnimation.gifの4ファイルをダウンロードする。

次に、thickbox.jsの8行目を、導入環境に応じて書き換える。loadingAnimation.gif(拡大画像のローディング中に表示されるアニメーションGIF)のある場所を指定する部分。

var tb_pathToImage = "thickbox/loadingAnimation.gif";

呼び出し元となるHTMLファイルから見た相対パスで指定する。SKAではHTMLがドキュメントルート直下にあり、loadingAnimation.gifを含むthickboxの構成ファイルはすべてルート直下のthickboxディレクトリに置くことにしたので、上記のような指定となる。

修正がすんだら、先述の4ファイルをサーバにアップロードする。

なおパスを正しく指定したにもかかわらず上記のアニメーションGIFが表示されない(IEなら、×印になる)ときは、アップロードしたファイル名の小文字・大文字を確認してみること。デフォルトではloadingAnimationのAだけが大文字になっているが、たとえばNextFTPを使用していて「すべてのファイル名を小文字に変換してアップロードする」のオプションが有効になっているとこれが小文字になってしまっていて、ハマる。

そして、呼び出し元のHTMLからこれらの構成ファイルを参照するため、HTMLのhead要素内に以下のタグを記述する。

<link rel="stylesheet" type="text/css" href="thickbox/thickbox.css" />
<script type="text/javascript" src="thickbox/jquery.js"></script>
<script type="text/javascript" src="thickbox/thickbox.js"></script>

link要素のhref属性とscript要素のsrc属性に記述するパスは、導入する環境に応じて変わることに注意。SKAでは先述したように、構成ファイルはいずれもルート直下のthickboxディレクトリにあるため、上記のような指定となる。

最後に、Lightbox効果を適用したいimg要素(サムネイル画像)を囲むa要素(リンク)に、「class="thickbox"」を追加する。以下は一例。

<a href="sample1.jpg" class="thickbox"><img src="thumb/sample1.jpg" /></a>

複数の画像をアルバム表示したい場合は、class指定に加えてrel属性で任意の文字列を指定する。同一の文字列を指定した画像が同一グループとして扱われ、順番にアルバム表示することができる。以下は一例。

<a href="sample1.jpg" class="thickbox" rel="album"><img src="thumb/sample1.jpg" /></a>
<a href="sample2.jpg" class="thickbox" rel="album"><img src="thumb/sample2.jpg" /></a>
<a href="sample3.jpg" class="thickbox" rel="album"><img src="thumb/sample3.jpg" /></a>

注意点

  • 動作にJavascriptを利用している。Javascriptを利用するギミックの常として、Javascriptが有効でない環境ではLightbox効果を実現できない。しかしHTML上の記述は単なる画像への(class指定された)リンクなので、リンクをたどれば(サムネイルをクリックすれば)リンク先の画像を表示することができる。
  • 機能の実装のためにthickboxというクラス名を使用するため、導入する環境に同名のクラスがある場合は、誤動作を防ぐために重複しない名前に変更したほうがいいかもしれない。
  • 拡大画像を表示する際のデザインとして独自のCSSを使用しているが、Javascriptが有効でユーザースタイルシートを適用している環境では表示が崩れるかもしれない。

Lightbox.jsとの違い

  • 元祖Lightboxでは拡大画像がブラウザの表示領域より大きい場合ははみ出してしまい、スクロールしないと見られないが、Thickboxでは表示領域内に収まるように適当に縮小して表示される。
  • 拡大画像を表示したままスクロール操作をすると、画像は動かずに、グレーアウトしたリンク元のHTML文書だけがスクロールする。
  • アルバム表示した際に表示される拡大画像下の進む・戻るリンクのパスは、おそらく相対パス。Lightboxのそれはたぶん絶対パス。SKAには絶対パス表記のリンク先を別ウインドウで表示するJavascriptを適用しているので、Lightboxだとクリックするたびにウインドウが開いて閉口した。これがLightboxでなくてThickboxを選んだ理由なのですが……。

YsIII FC音源版

懲りもせずまたFC音源でゲーム音楽をコピーしてみました。こんどはPC-8801シリーズ版イースIII(厳密にはワンダラーズフロムイース)から2曲。イースのIやIIとくらべるとややマイナーなものの、なつきにとっては青春時代の思い出のゲームのひとつで。

  • YsIII / イルバーンズの遺跡
    哀愁漂うメロディーラインがいいかんじの曲。ドラムパターンにこだわってみました。ってもPSGノイズですが。
  • YsIII / バレスタイン城
    IIIの中ではいちばん有名で人気の高い曲、かしら。原曲のはじけるギターを再現しきれずにちっちゃくまとまってます。

zip圧縮ファイルにMP3・NSF・MMLを同梱してます。NSFファイルが曲データ。NSF対応のFCエミュレータ(VirtuaNESなど)かプレイヤー(KBMedia Playerなど)で聴けます。MP3はNSFを録音したもので、単体で聴けます。

詠美ちゃん様ぱんつ絵

詠美こみっくパーティーより詠美ちゃん様こと大庭詠美さん。……うん、「また」絵の更新なんだ。 済まない。仏の顔もって言うしね、謝って許してもらおうとも思っていない。でもこのぱんつを見た時、君は、きっと言葉では言い表せない「ときめき」みたいなものを感じてくれたと思う。殺伐とした世の中で、そういう気持ちを忘れないで欲しい、そう思ってこの絵を描いたんだ。じゃあ、好みのぱんつの柄を聞こうか。

イカ娘絵 feat. Moe

イカ娘「侵略!イカ娘」のイカ娘、を萌え絵的手法で描いてみた。や、イカ娘は原作からしてすでに萌えキャラなのですが。おもに行動が。

作業はいつものごとくラフまでを紙に、ペン入れから先はPC上で描いてます。そういえば愛用のペイントツールSAIがいつのまにか有料化してて、スキャナで取り込んでさあペン入れだ、って時になってレジストしないと使えないことに気づいてあせった。モチベーションが続いてるうちに作業できないとつらいので速攻カード決済しましたが。5,250円。お絵かきは紙と鉛筆さえあればできる安上がりな趣味だなーと思ってたけど結局経費かかってるやん。

ブラウザレンダリング比較

MacOSX 10.3.9

iMac G5(M9249J/A)を購入。ねんがんのMacをてにいれたぞ!MacIEが動く♪MacIEが動く♪表示確認ができるっ♪というわけでMacIEを含めたいくつかのブラウザのレンダリング状況を比較検証。使用したブラウザは以下のとおり。

SKA on MacIE5SKA on WinIE5.5SKA on WinIE6WinFireFox2

SKAのトップページ。MacIE5は右上のロゴ上部に数ピクセルずれが見られるものの、おおむね良好なレンダリング。WinIE5.5はCSSで要素の横方向のmarginをautoに指定しても要素がセンタリングされない不具合があるため、本体が左寄せに。IE6でも同様の不具合はあるものの、HTML文書の先頭に適切なDOCTYPE宣言を記述し、標準モードで動作させることで不具合を回避できる。

MSN on MacIE5MSN on WinIE5.5MSN on WinIE6MSN on WinFireFox2

MSN Japan公式(2008/8/22現在)。MacIE5のひどさが際だつ。MacIEのレンダリングがどうしようもないのか、MacIEを切り捨てたMSNが非情なのか。両方か。

要素にoverflowプロパティを指定すると要素自体が消滅するなど深刻な不具合には枚挙にいとまのないMacIEですが、生みの親のMSにすら対応を放棄されてるのを見てちょっとかわいそうになってきた。

こみっくパーティー ファミコン版

写真1写真2

5/12は高瀬瑞希嬢の誕生日!というわけでこみっくパーティーをファミコンに移植してみました。……嘘だけど。

いや本当は瑞希ちのドット絵だけ描いて終わる予定だったのですが、インパクトに欠けるのでタイトル画面とネームエントリ画面をドットエディタででっち上げ。ついでにファミコンぽいOPテーマをつくってみましたがこっちは激しくやっつけ感漂う仕上がりに。

本来なら弊社の瑞希ちにアレとかソレとかしてもらうべきなんですが、彼女、今年の冬に生まれ故郷に里帰りしたっきりなかなか戻ってこないので。誕生日を一緒に祝えないなんて寂しいなあ弊社は。……とにかくおめでとう瑞希。遠くから見守っています。

YsI・II・スキーム FC音源版

1年以上ぶりにDTM熱が再燃しまして。めずらしく3連休でまとまった時間ができたので、いっきに4曲打ち込んでみました。選曲がどうにもかたよってますが興味がおありでしたら聴いてみてください。チープな音源が生み出す無限の可能性!

……ここ着ぐるみサイトだよね?(自問)

  • Ys / First Step Towards Wars
    パソコンアクションRPGの金字塔・イースから、フィールド曲。なつきのDTMの歴史もここからはじまったわけで。感慨深い。曲としてはオーソドックスな4パート構成なので(FMメロディ+FMベース+SSGコーラス+SSGドラム)、同じく4声構成なFC音源の打ち込み入門曲としては最適かと。
  • YsII / TO MAKE THE END OF BATTLE
    イースIIのオープニング曲。出だしがエジプト風なので金字塔はこっちかな?ピラミッドだけに。原曲の音の厚みは再現しきれてませんが、流れるような雰囲気は出てるかも。
  • YsII / ICE RIDGE OF NOLTIA
    同じくイースIIから、ノルティアの氷壁。原曲は同ゲーム中でも1、2を争う人気曲。耳コピは比較的すんなりいきましたが、後半力強さがやや足りない気が。ガッツがたりない!
  • The Scheme / Challenging Tomorrow
    ゲーム内容はアレだけど名曲ぞろいなザ・スキームから、エンディング曲(サウンドボードII版)。最初に作ったのでいまいち練り込みが足りない。好きな曲なのに。

zip圧縮ファイルにMP3・NSF・MMLを同梱してます。NSFファイルが曲データ。NSF対応のFCエミュレータ(VirtuaNESなど)かプレイヤー(KBMedia Playerなど)で聴けます。MP3はNSFを録音したものです。最近のパソコンなら特別な準備がなくとも聴ける……はず。MMLはNSF変換前のテキストファイルで、再生には必要ありません。

またまたリニューアル

そんなわけで懲りずにまたリニューアルをかましてしまいました。極めてかもしだ。かもすぞ。最近更新が少なかったのはリニュ作業に没頭してたからなのですねー。

見た目はさほど変わってないですが、内部処理ががらっと変わってます。処理効率を高めてオーバヘッドを減らしたので、レスポンスが従来よりも良くなってるはずです。たぶん。あと細かいところで実装が変わってます。コメントが承認なしで投稿できるとか。今年初めからの懸案だった検索機能も近々追加できます。

成瀬川18歳絵

写真01ひっさびさに絵。麻帆良学園中等部制服の成瀬川。絵そのものは去年10月末にすでに描き終わってたのですが背景を描くのに飽きたびろーんをぐりーんにどよーんだったので今までマイドキュメントのpsdフォルダで眠ってた。……成瀬川の誕生月まで温存してたってことにしときます。描いてて痛感しましたが赤松絵って似せるの難しいですね。見上げてるのだから顔はもう少し大きく描いても良かったか。
なお今回から、下書き以外はすべてPC上で作業。ペン入れはsaiのペン入れレイヤーを使用。線の強弱がつけられるパスツールみたいな感じ。デジタルなので手書き線の味はありませんがこれはこれで独特の雰囲気が。新しい画材の一つと考えればよいかな?

RSSノススメ

先週あたりからこっそりRSS配信してます。IE7だとページ表示時にフイッ♪とか音がしてRSSアイコンがオレンジに変わるので気づきやすいと思いますが、FirefoxでもOperaでもそのほかのRSSリーダーでも、RSS auto-discovery対応であれば検知してくれるはずです。たぶん。

このauto-discoveryという仕組みを以前は知らなくて、なんでブラウザはRSSの存在を検知できるんだろうと悩んだりもしたけれど私は元気です。力任せに総当たり検索してるのではないか――そう考えていた時期が私にもありました。

SKAアンテナも、RSSを配信しているページはRSSを更新の判断材料にしています。最近はRSS配信ページも増えました……ほとんどブログですが。ブログはたいてい標準で配信機能がついてますからね。

逆に個人サイトでブログ以外でRSS配信してるサイトってほとんどない。この機会にRSSの配信にチャレンジしてみるのはいかがでせうか皆さん?とりあえず作ってみるだけならRSSエディタ Headline-Editor Lite版が参考になりますお。継続的に配信していくには手動ではつらいのでCGI(PerlとかPHPとか)の導入が必須ですが。