2012年8月19日日曜日

Office用アプリとしてテトリスを実装してみた

【最初に】
完全に出落ちです。
「読んで損した!」という気分になること請け合いなので、その辺よろしくお願いします。

【やったこと】
Office用アプリって、つまるところ

 HTML5のsandbox属性がついたIFRAME + Office操作用API (office.js)

なので、単純に『HTML製のアプリを動かすための箱として(IFRAMEの機能だけ)利用したって問題ないよね。』ってことで、HTML5だけで完結してるようなアプリを探してきて移植してみました。「Office操作用のAPIを一切使わない」という清々しいまでにOfficeと全く関係のないOffice用アプリの完成です。

これで仕事中に堂々とテトリスができますね!(できません)



【実装したコード】
コードリーディングに最適!たった200行で作れるHTML5製テトリスのプログラミング学習ムービー
で紹介されているテトリスのコードを使いました。99% そのままです。何のひねりもありません。

実際に動かしてみたい場合は、GitHubからオリジナルのコードをダウンロードして、下記のファイル(HelloTetris.html, HelloTetris.xml)と同階層に、
  • 「style.css」
  • 「js」というフォルダ
をコピーしてください。
また、HelloTetris.xmlの ***Catalog*** の部分は、(Office用アプリ用の)カタログに使うフォルダを指定してください。


【移植する上でつまづいたところ】
HTMLファイルのヘッダ部分の、
  • 1行目: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 2行目: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  • 4行目: <meta charset="UTF-8" />
  • 5行目: <meta http-equiv="X-UA-Compatible" content="IE=9"/>
あたりは、必須事項…かも。
今回Office用アプリを作るにあたって、適当に省略してみたところ、アプリの読み込みはできるものの、作業ウィンドウ(task pane)に何も表示されないという残念なことになりました。