Office 8 では YUI を採用!
こんにちは、岡田です。
来春リリース予定の Office 8 では、機能の豊富さや拡張性を考慮し、JavaScript のライブラリに YUI (Yahoo! User Interface Library) を採用しました。
Office 8 の開発が始まった頃 YUI のバージョンは 2.5.0 でしたが、数か月の間に 2.5.0 → 2.5.1 → 2.5.2 → 2.6.0 とバージョンアップがあり、Office 8 でもその都度ファイルを更新してきました。
YUI を更新することにより、Office 8 で正常に動作しなくなるところが出てくるといけないので毎回変更箇所のチェックを行っていますが、今回は YUI 2.6.0 の変更箇所のうち Office 8 の動作に影響があったコンポーネントをご紹介します。
モーダルダイアログを表示する際、ダイアログの後ろにあるリンクやボタンを無効化する(フォーカスがあたらないようにする)処理が変更になりました。
2.5.2 までは、Tab キーでフォーカスがあたる HTML の全要素(全ての a, button, select, textarea, input 要素)に onfocus イベントハンドラをセットし、フォーカスがあたったらすぐ blur() するようになっていました。
しかし、要素数が多いと onfocus イベントハンドラをセットするだけで数秒かかってしまってダイアログがなかなか表示されない…、といったことが起こってしまいます。
2.6.0 では keydown イベントハンドラのみをセットし、Tab キーが押された時にフォーカスする要素をブラウザ任せではなく JavaScript で強制的に制御するようになりました。
これにより、要素数に関係なくモーダルダイアログを軽快に表示できるようになりました。
ツリー上で keydown イベントが発生したらどのキーが押されたかを判別し、サブフォルダを開閉する処理が追加されました。ツリーのノードにフォーカスをあてて、矢印キーや「+」「-」キーを押してみてください。(あまり使わないかもしれませんが…。)
今回ご紹介した2つ以外にも、Office 8 では Drag & Drop や Menu など、様々なコンポーネントを利用してリッチな UI を実現しています。パソコンの操作に慣れている方にもそうでない方にも、使っていて楽しいと思っていただけるような操作性をご提供できるよう、これからも新しいことにどんどんチャレンジしていきたいと思います。