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 に格納されるます。システム環境設定を起動して、スクリーンセーバーの設定画面にいけば、作ったスクリーンセーバーが一覧に出ているはずです。あとは、テストするなり、設定して楽しむなりご自由に。

ほかのHTMLの例


https://github.com/kurain/HatenaTweets

これは、Twitter 検索APIで、"はてな"を含む Tweet を全画面で表示する例。JSで実装できると、各種WebAPIとの連携が簡単にかけるのが非常に便利です。また、jQuery も当然使えるのでアニメーションなども plugin を駆使することでかなり簡単に書くことができます。

終わりに

webデザイナーさんとか、綺麗なサイトを作れる方々に遊んでいただけたら幸いです。このツールで作成されたスクリーンセーバーの再配布について制限は特にありません。有償で配布されても結構です。

ダウンロード(再掲)

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

ではでは。どうぞご利用ください。