« 2011年01月 | メイン | 2011年03月 »

2011年02月 アーカイブ

2011年02月10日

WebSocketを使ったKeynote '08でもiPhoneから操作できるKeynote08Remote

Keynoteは、Apple製のMac OS X向けプレゼンテーションアプリケーションです。
このKeynote、Keynote RemoteというiOSのアプリケーションでiPhone等から操作することが可能です。
ところが、リモート操作に対応しているのは、残念ながらKeynote '09以降からとなっています。
私の手元にあるKeynoteのバージョンは'08、Keynote Remoteは対応していません。
非常に悔しい思いをしていたところ、iOSのサファリがWebSocketに対応したり、自分のJavaのスキルが上がってきたことで、Keynote Remoteに似たアプリケーションを作成できる算段が整ってきました。
本当は年末までにリリースする予定が、ここまで遅れてしましましたが...。
次のリンク先からダウンロードできます。
余談ですが、今回はMac専用ということもあり、かなり凝ったアイコンを作成しました。
仕組み
以前作ったWebSocketRemoteをiOSに対応させたときと同じような仕組みになっています。
WebSocketRemoteの時は、WebSocketに対応しているJettyというJavaで実装されたWebサーバと、JavaVM実行環境を操作できるRobotオブジェクトを使い、「Safari on iOS <=(WebSocket)=> Jetty <=(Java)=> Robots」のように連携させました。
Robotは、カーソル操作だけでなくキーボードも操作できるため、その仕組みを強引に使用すればKeynoteを操作することも可能かもしれませんが、今回のKeynote08Remoteは、JavaからRubyやRhino上のJavaScript等を実行するための仕組みであるScriptEngineを使いました。
ScriptEngineは、AppleScriptにも対応しており、KeynoteはもちろんAppleScriptから操作が可能です。
「Safari on iOS <=(WebSocket)=> Jetty <=(Java)=> ScriptEngine <=(AppleScript)=> Keynote」のように連携させています。
使い方
サーバとなるMac上で、Keynoteのファイルを開き、Keynote08Remoteを起動します。
サーバと同じネットワークに参加しているiOSのSafariから、「http:[server address]:40320/ios.html」にアクセスします。
画面下に表示されるボタンをタッチすると、プレゼンテーションを開始することができます。
画面上部に発表者ノートの内容が表示されます。
ボタンは、左から「前のスライド」「スライドショーを終了」「スライドショーを隠す」「スライドスイッチャーを表示」「次のスライド」となっています。
「スライドスイッチャーを表示」をタッチするとKeynoteは次のような表示になります。
Safari上は次のように表示が変化します。
ボタンは、左から「前のスライド」「スライドスイッチャーを閉じる」「選択されているスライドに移動」「次のスライド」となっています。
その他の技術
今回のクライアントは、iOS上のSafariだけのため、ブラウザの互換性の面からこれまで使えなかった技術を惜しみなく使用しました。
ボタンの画像は、これまでPNGを使用してきましたが、iPhone4やiPadでも滑らかに表示されるように、SVGを使用しています。
ボタンの表示切り替えのアニメーションは、これまでであればJavaScriptでタイマー処理して実現していましたが、CSS3のTransitionという機能で実現しています。
iPhone等を横に向けた際のレイアウト調整は、JavaScriptからCSSやclass属性を変更するのではなく、HTML5の「独自データ属性("data-"で始まる属性)」とCSS2の属性セレクタで対応しています。
(色々なノウハウ&バッドノウハウがあったのですが、別エントリーで書くかもしれませんし書かないかもしれません...。)
また、並行して「メタプログラミングRuby」を読んでいたため、JavaScriptのコードがかなり影響を受けています。
今後の方針
Keynote Remoteのようにスライドそのものを表示する機能は、WebSocketRemoteで使用したキャプチャ画像を転送する手法で可能です。
しかし、WebSocketがまだ正式版になっておらず将来的にJettyのバージョンを変更する必要があること、転送データが増えるとSafariが不安定になること、今回は実用面を重視したため不安定な挙動は避けたかったこと等から対応していません。
また、スライドショーが実行されていない時に、WebSocketRemoteのようにマウス操作をエミュレートできると非常に便利だと思うのですが、マウス操作のためのエリア+スライド表示+発表者ノートを全て表示させることを考えると、画面レイアウトがかなり厳しくなってしまうため、悩んでいるところです。
発表者ノートの文字数が多いと表示領域からはみ出てしまうため、そのうちスクロール機能等で対応したいと思っています。
その他
Keynote '08よりも前のバージョンのKeynoteでも操作できると思いますが、環境がないため調査していません。
Google

タグ クラウド