XDK導入とHTML5サンプルビルド手順書

公立大学 産業技術大学院大学

産業技術研究科 創造技術専攻 M2

斉藤之雄

公開日 2014年6月25日（水）

本スライドの対象者

HTML5 アプリ開発に興味を持つ、学習が嫌いな方。

高校教科「情報」で基本アプリ宿題を済ませたい方。

アプリ開発できれば就職に有利だと思い込んでいる方。

HTML5アプリを開発したぞ！と周囲に見せびらかせたい方。

スルー推奨スライド

クールなHTML5アプリケーションを開発したい。まずは何から始めたらいいですか？

事前学習が必要なのは「なんとなく」わかっているが、サンプルを誰の助けも借りずに雰囲気を味わってみたい。

[謎の声]

そのほうが興味を持てると思うんですよね

クリックだけで開発できるソフトとか多いじゃないですか

いきなり勉強するのは時間の無駄なんですよね

スルー推奨スライド

英語よくわかんないので日本語で手順ください

[謎の声]

日本人ですよ、日本語でお願いします。

日本は世界でも優秀な産業国家で世界中から真似されるくらいですよ。英語で必死になるのは日本を真似する国だけ。日本にいれば日本語で十分。

だから、早く日本語で手順書くだしあ！くれくれ！！iPhone5 と Nexus7 以外はユーザ対象外！理由なし！

スルー推奨スライド

⓪概要理解Intel XDK

Intel ® XDK 概要

・無償の HTML5 モバイル・アプリケーション用のデスクトップ・ベースのビルドおよびエミュレーション・ツールである。

・開発者は、iOS, Android, Windows 8 ストア, Windows Phone 8, Tizen, Amazon, Nock, WebApp, Chrome および Facebook 向けにクロスプラットフォーム・アプリケーションを開発することが可能となる。

Intel ® XDK 主な機能

• エディター、デバイス・エミュレーターおよびデバッガー

• ワンデバイス・テスト用アプリケーション

• モバイル向けに最適化されたJavaScript UI ライブラリー

• Canvas のパフォーマンスを最適化したい ゲーム開発者向けの API

• GUI によるクイックスタート・ウィザード

• Microsoft Windows*, Apple OS X*, Ubuntu* および Linux へインストール機能

• 様々なアップストア向けのインテルのクラウドベース・ビルドシステム

• ネイティブ・プラットフォーム SDK をダウンロード不要

①Intel に感謝し開発ツールをダウンロードする

Windows 7 を含め、最新の Windows 8.1 環境にも対応している。

http://xdk-software.intel.com/

Macユーザは Mac OS X 10.7 以降http://xdk-software.intel.com/#mac

Linux (Ubuntu 12.x 以降推奨）ユーザ向け ただし64bit版

http://xdk-software.intel.com/#other

リリースノーツはココ（英語なので、 translate.google.com などで併用推奨）https://software.intel.com/en-us/html5/articles/release-notes-information-intel-xdk

本スライドはWindows 8.1 x64で導入検証を実施済

②ローカルコンピュータの管理者権限でインストールする。

ローカルコンピュータの管理者権限って何だ？という方は、ログオン時に学校や職場から発行されたアカウントでログインしていないか？たいていの場合、ユーザ制限が施されているので、intel XDK インストールはできないことがある、その場合は諦めてくれ。自ら保有するPCへインストールすること。

136MB 消費

標準インストールパス：C:¥Users¥UserName¥AppData¥Local¥Intel¥XDK

③アプリ起動アプリ検索 ‘intel’ でIntel XDK NEWをクリック

この例では、IntelPCSDK が表示されているが、知覚コンピューティング開発などでPerC SDK を導入していない方には表示されないから気にすることはない。

④使用するためにアカウントを作成する

>Need to sign up for an account ? をクリックする。

⑤使用するためにアカウントを作成する

英語で入力名前

苗字

電子メールアドレス

電子メールアドレス確認

パスワード（決める）

パスワード確認

国名

使用条件許諾Term and Conditions に契約書同意という意味

英語でSPAM来た！とか言わないならチェック入れる

パスワード条件

・8~15半角文字

・大小文字含めること

・数字を含めること

・1文字以上の記号 (表示）を含めること

⑥作成したアカウントでログインする

User Name, Password を入力後は SUBMIT をクリックする。

次回からこのコンピュータでログイン状態を維持させたい場合は、左下チェックボックスを有効にしてもいいが、念のためここでは都度ログインを推奨する。

⑦Intel XDK起動

最小表示でも 976 x 530 px 領域を必要としたので 11’ 以上の画面が必要と考えられる。

⑧Work with a Demo 選択

当初の目的通り、サンプル（デモ）ビルドとして「Work with a Demo」を選択する。

⑧ キーワードフィルタGame を指定する

少し、アタマを使うゲームを。解き方は Wikipedia を参照しよう。→ Wikipedia ハノイの塔

⑨ キーワードフィルタGame を指定する

Intel XDK へ導入するには GitHub で公開されているソースを1クリックで。

USE THIS DEMO をクリック

⑩開発プロジェクト名を設定しよう

エミュレート機能やビジュアル機能を持った統合開発環境では、開発プロジェクト名を設定することで間髪に必要な情報や資源を管理している。

Demo-Hanoi として Enterキーを押下しよう。

⑪プロジェクト作成済み

これだけで開発プロジェクトは作成されました。Intel XDK の使い方（英語）を知りたい方は LET’S DO IT をクリックしよう。面倒な方は NO THANKS をクリック。

（ここでは、NO THANKS をクリックすることを期待している）

⑫’ [誤]これが欲しかったんだろ？

自分がソースコードを入力したわけではなく、Demo-hanoi 開発プロジェクトとしてソースコードがすべて自動で揃った。

それらしく Remarks や画像ファイルを変更すれば、アレオレ量産、ちょろいもんさ！

スルー推奨スライド

⑫ [正] iPhone5 エミュレート動作確認

早速、[EMULATE]タブ→[DEVICES / Apple iPhone5] を設定する。

⑬ Nexus7 横向きエミュレート動作確認

[EMULATE]タブ→[DEVICES / Google Nexus 7 / 横向き] を設定する。

⑭ HTML5 アプリケーション動作確認Google Chrome 併用「Live Preview」

[DEVELOP]タブ→[BROWSER WINDOWS / Live Preview] をクリックする。

⑮ HTML5 アプリケーション動作確認Google Chrome 併用「Live Preview」

ローカルホストを参照して ‘Tower Of Hanoi’ 待ち受け状態です。ボタンクリック可能です。

この例では 127.0.0.1:21289 が参照先として指定されています。

⑯ ローカルホストのポート状態を確認> netstat –ant [Enter]

127.0.0.1:21289 が LISTEN （待ち受けポート）となり、ローカル接続で ESTABLISH （通信確立ポート）が確認できます。

⑰ 動作確認を終えたらエミュレータ停止

[EMULATE / Stop Emulator] で停止すると

右下のデバイス画面に ’The emulator has stopped’ が表示される。

⑱ ファイル実体確認何度も書かねばならないことがあります。

STOP アレオレです。これはGitHubに公開されたソースをデモ引用しただけであって

貴方が開発したものではありません。コードリーディングなど、ここから学習の第一歩と

なれば幸甚です。

ファイルパス：C:¥Users¥UserName¥Documents¥Demo-hanoi

⑲ まとめ

HTML5 アプリとは何かを概念理解に至れば、最新 Andorid や iPhone だけといった特定環境の開発に

縛られることは少なくなります。

（Native アプリ開発目的の方は別途学習ください）

英語は必要不可欠ですが、英語力は概ね英検３級程度の読解力で問題はありません。（中学生～高校在学程度）

アプリ動作確認は視認性、操作性のみならずネットワーク参照状態も必要です。Netstat 程度で構いませんので少し知識を増やしましょう。