XDKを使ってみる

HTML5の開発環境Intel XDKをインストールしたので試しにアプリケーションを作ってみました。
といっても単なるテストなので何も期待しないでください。

ページ上部のツールバーの[START NEW]アイコンで新しいプロジェクトを生成します。
適当なプロジェクト名(例えば"test")を付け、あとはデフォルトのままにして[NEXT]をクリックし
ウィザード形式でプロジェクトを作成していきます。
"Nav"と呼ばれるボタンを作って、それに対するページ(動作)を作成するっぽいです。
ウィザードが完了した時点でエミュレータ上でアプリケーションはすでに動いています。

ページ上部のツールバーの一番左のアイコンをクリックすることで
EMULATORモードとEDITORモードの切り替えができます。
EMULATORモードだと選択したHTML5アプリケーションはいつでも動いています。
EDITORモードではソースの編集が行えます。
生成したファイルを見ると、XDKにはJava scriptのフレームワークが含まれていることがわかり、
これはIntelが買収したappMobiが開発したものであるようです。

ではこれをサーバ上で動くようにしてみましょう。
ツールバーの[Build for app store]-[Build Only]メニューを実行すると別タブが開きます。
その[BUILD AS A MOBILE APP]をみると
iOS、Android、Amazon、Nook、Windows8 Store、Windows8 Phoneの選択肢がありますが、
こちらは置いておて、今回は[BUILD AS A WEB APP]のChromeとWebAppを実行してみます。

WebAppは一般的なウェブサーバに置くための設定と思われます。
アイコンとして96×96ピクセルの画像ファイルが必須で、
私はPNG形式で適当につくって読み込ませました。
あとは[Site Name]を設定したほうがいいみたいですが、
どのように使われているのかはよくわかっていません。
ビルド(というかパッケージ化)はクラウド側でやってくれ、
自前サーバで運用するなら[Download]リンクからzip形式の圧縮ファイルを取得します。
これを展開し、適当なウェブサーバにコピーしてパーミッションなんかを調整すれば
ウェブブラウザからアクセスして実行できるようになります。
私が動作確認したのは、Windows版Chrome、IE、iPhone/iPadのブラウザ、
Androidのブラウザ(Chromeじゃないやつ)、WiiUで、特に問題なく動作しているようです。
Nintendo3DSについてはちょっと動作がおかしいところがあります。

次にChromeアプリケーションにしてみます。
ビルドページから[Chrome]を実行して[Chrome App Name]に適当な名前をつけ、
128×128ピクセルの画像ファイル(私はPNG形式を使用)を登録すると、
WebAppの時と同様にzip形式の圧縮ファイルがダウンロードできます。
これを展開して、中にあるファイル"chrome-icon.png"の名前を
"chrome_icon.png"に変更します。
こうしないと読み込めないのですが多分単なるバグです。
で、Chromeに読み込ませるのですが、
Chromeから"chrome://extensions"を開き[拡張機能]ページで[デベロッパーモード]をチェックし、
[パッケージ化されていない拡張機能を読み込む]ボタンをクリックして、
先に展開したフォルダを指定して[OK]をクリックするだけです。
Chromeアプリケーションとして普通に使えます。
ちなみにパッケージにするには先のページで[拡張機能のパッケージ化]ボタンをクリックし、
[拡張機能のルートディレクトリ]に先に展開したフォルダを指定して[OK]をクリックするだけです。
このあたり詳しくは昔の記事を参照ください。

なお、ツールバーの[API documentation]からAPIのリファレンスなどが見られるので、
とりあえずはここを見ながら開発することになりそうです。