HTMLとJSとCSSだけでスクリーンセーバーが作れるHTMLScreenSaverBuilderを作った

作った

表題のとおりで、HTML と JavaScript と CSS の知識があればMacのスクリーンセーバーを作れるツールを作りました。Xcode も不要です。
html でできることは大概できるので、flash 貼るとか audio ダグで音をならすとか、WebGLで3Dで遊ぶとかかなり何でも出来るのではナイかと思っています。

ダウンロード

下のリンクからどうぞ！HTMLScreenSaverBuilder 本体と、サンプルで作った ScreenSaver が入っています。
HTMLScreenSaver.zip

作り方

HTMLを準備

全画面表示されても、綺麗に表示されるような HTML を書きます。必ず名前は index.html にしてください。例として、はてなフォトライフの人気の写真を表示する HTML を書きました。

https://github.com/kurain/HotFotolifeSlideshow

HTML だけでなく、JSとCSSを使って実装します。上記の例だと、CSSで画像の中央寄せを行なって、jQuery + YQL で最近人気の写真一覧を取得しています。

一つのディレクトリに

HTML と付随する必要なファイルをひとつのディレクトリ以下に収めます。index.html より下位にあれば、ディレクトリをつくっても大丈夫です。

.
├── index.html
├── jquery-1.6.4.min.js
├── main.css
└── main.js

buildする

ダウンロードした、HTMLScreenSaverBuilder を起動します

こんな画面なので、名前を決めて、Local HTML file を選んで、上で用意したディレクトリを選択します。
あとは "build" をクリックするだけです。できた screen saver はホームディレクトリ以下の、~/Library/Screen Saver に格納されるます。システム環境設定を起動して、スクリーンセーバーの設定画面にいけば、作ったスクリーンセーバーが一覧に出ているはずです。あとは、テストするなり、設定して楽しむなりご自由に。