Web標準+MT+Nakedで作る「ワンソース・マルチユース」なWebSite (Naked Slide + MTプラグイン公開)。

Web標準+MT+Nakedで一体何ができるのか

WebSigのプレゼンの時にも使いましたがアルファサードのウェブサイトでも使っているXHTMLベースのスライドショーシステム Naked Slide (XHTML+CSS+JavaScript) を公開しました。

アルファサードのウェブサイトのトップ及び主要な各ページの右上に「閲覧モード」のボタン群を付けているわけですが、一番右側の「プレゼン」ボタンクリックで新しいウィンドウでプレゼンテーションスライドが開始されます (各ページ上でクリックすると該当ページが表示されます)。

JavaScriptが有効である必要があります。

使用しているCSS+JavaScriptとスライド用にClass指定をするためのMTプラグイン、また使用しているMTのテンプレートも同梱しました。

ダウンロードは当社のウェブサイトから行えます。

• XHTMLベースのスライドシステム Naked Slide を公開 (Alfasado, Inc.)

Slidy や S5 等が既に同様のツールとして公開されているわけですが、 Naked Slide の名前からも想像できる通り、ウェブコンテンツ・テキストバージョン・ジェネレーター(Naked Beta) の1つのモードとして、同一のHTMLから様々なバージョン (音声ブラウザ最適 / 携帯電話向け / ルビ付きバージョン / スライドプレゼンテーション用) を自動生成して動作させることを最終的な目的として作成したものです(まだこの部分は出来ていません)。

既存のソリューションと比較してテキスト量が多くなった時にスクロールできるようにして情報が画面サイズによって欠損してしまうことがないように (情報が溢れた場合は) スクロールバーが表示されるようにしているとか、出来ることも限られていますがその分指定が簡単とか、その辺を意識しています。

アルファサードのウェブサイトでは 今回のリニューアルにあたって Movable Type を導入しましたが、スライド用のテンプレートを別に作り、スライドに表示させたい部分を excerpt (概要(抜粋)) 部分に入れること、且つスライド用のタグ(クラス)設定にはMTのプラグインを書くことによって自動的にClassを振るようになっています。

これによって、通常PCやMacで閲覧する画面デザインの他、MT拡張アプリによる携帯版、Nakedゲートウェイを利用した音声読み上げに適したテキストバージョン、濃い背景色に明るいテキストの色反転バージョン、ルビ付きバージョンに加えてプレゼンテーションバージョンをMT上に登録された完全に同一のデータから生成することが可能になりました(MTのテンプレートとプラグインも一緒にダウンロードしていただけるようになっています)。

「完全に同一なソースからどこまで多様な表現が可能なのか」を分かりやすい形で示そう

もちろんMT(CMS) のアーカイブを適切に設定してやればテキストバージョン等の同時生成は可能ですが、今回は当社でこれまでに取り組み開発して来た様々な技術をフルに実装して「Web標準+MT+Nakedで一体何ができるのか」を「クリエイティブを犠牲にすることなく」実現することを狙って構築しました (今後も改良を加えて行く予定)。

これからも仕事「内」「外」で色々とWeb技術に関する面白いものをリリースしていきたいと思っているので、このブログの読者の方は是非ウチの会社のサイトのRSSもCheck It!

* そのために「Labs」なんてページも作りましたし!