Intel xdk導入とhtml5サンプルビルド手順書
4 likes3,644 views
アプリ開発に憧れを抱くも、勉強嫌いな高校生向けへ HTML5 サンプルアプリのビルドを通じて開発体験することを目的にスライド作成しました。
![クールなHTML5アプリケーションを開発したい。
まずは何から始めたらいいですか？
事前学習が必要なのは「なんとなく」わかっているが、
サンプルを誰の助けも借りずに雰囲気を味わってみたい。
[謎の声]
そのほうが興味を持てると思うんですよね
クリックだけで開発できるソフトとか多いじゃないですか
いきなり勉強するのは時間の無駄なんですよね
スルー推奨スライド](https://image.slidesharecdn.com/intelxdkhtml5-140624055641-phpapp01/85/Intel-xdk-html5-3-320.jpg)
![英語よくわかんないので日本語で手順ください
[謎の声]
日本人ですよ、日本語でお願いします。
日本は世界でも優秀な産業国家で世界中から真似
されるくらいですよ。英語で必死になるのは日本を
真似する国だけ。日本にいれば日本語で十分。
だから、早く日本語で手順書くだしあ！くれくれ！！
iPhone5 と Nexus7 以外はユーザ対象外！理由なし！
スルー推奨スライド](https://image.slidesharecdn.com/intelxdkhtml5-140624055641-phpapp01/85/Intel-xdk-html5-4-320.jpg)
![?’ [誤]これが欲しかったんだろ？
自分がソースコードを入力したわけではなく、Demo-hanoi 開発プロジェクトとして
ソースコードがすべて自動で揃った。
それらしく Remarks や画像ファイルを変更すれば、アレオレ量産、ちょろいもんさ！
スルー推奨スライド](https://image.slidesharecdn.com/intelxdkhtml5-140624055641-phpapp01/85/Intel-xdk-html5-18-320.jpg)
![? [正] iPhone5 エミュレート動作確認
早速、[EMULATE]タブ→[DEVICES / Apple iPhone5] を設定する。](https://image.slidesharecdn.com/intelxdkhtml5-140624055641-phpapp01/85/Intel-xdk-html5-19-320.jpg)
![? Nexus7 横向きエミュレート動作確認
[EMULATE]タブ→[DEVICES / Google Nexus 7 / 横向き] を設定する。](https://image.slidesharecdn.com/intelxdkhtml5-140624055641-phpapp01/85/Intel-xdk-html5-20-320.jpg)
![? HTML5 アプリケーション動作確認
Google Chrome 併用「Live Preview」
[DEVELOP]タブ→[BROWSER WINDOWS / Live Preview] をクリックする。](https://image.slidesharecdn.com/intelxdkhtml5-140624055641-phpapp01/85/Intel-xdk-html5-21-320.jpg)
![? ローカルホストのポート状態を確認
> netstat –ant [Enter]
127.0.0.1:21289 が LISTEN （待ち受けポート）となり、
ローカル接続で ESTABLISH （通信確立ポート）が確認できます。](https://image.slidesharecdn.com/intelxdkhtml5-140624055641-phpapp01/85/Intel-xdk-html5-23-320.jpg)
![? 動作確認を終えたらエミュレータ停止
[EMULATE / Stop Emulator] で停止すると
右下のデバイス画面に ’The emulator has stopped’ が表示される。](https://image.slidesharecdn.com/intelxdkhtml5-140624055641-phpapp01/85/Intel-xdk-html5-24-320.jpg)
Intel xdk導入とhtml5サンプルビルド手順書
- 1. XDK導入と HTML5サンプルビルド手順書 公立大学 産業技術大学院大学 産業技術研究科 創造技術専攻 M2 斉藤之雄 公開日 2014年6月25日（水）
- 4. 英語よくわかんないので日本語で手順ください [謎の声] 日本人ですよ、日本語でお願いします。 日本は世界でも優秀な産業国家で世界中から真似 されるくらいですよ。英語で必死になるのは日本を 真似する国だけ。日本にいれば日本語で十分。 だから、早く日本語で手順書くだしあ！くれくれ！！ iPhone5 と Nexus7 以外はユーザ対象外！理由なし！ スルー推奨スライド
- 5. ?概要理解 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 をダウンロード不要
- 6. ①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で 導入検証を実施済
- 7. ②ローカルコンピュー タの管理者権限で インストールする。 ローカルコンピュータの管理者権限って何だ？という方は、ログオン時に学校や職場 から発行されたアカウントでログインしていないか？たいていの場合、ユーザ制限が 施されているので、intel XDK インストールはできないことがある、その場合は諦めて くれ。自ら保有するPCへインストールすること。 136MB 消費 標準インストールパス：C:?Users?UserName?AppData?Local?Intel?XDK
- 8. ③アプリ起動 アプリ検索 ‘intel’ で Intel XDK NEWを クリック この例では、IntelPCSDK が表示されているが、知覚コンピューティング開発などで PerC SDK を導入していない方には表示されないから気にすることはない。
- 9. ④使用するために アカウントを作成する >Need to sign up for an account ? をクリックする。
- 10. ⑤使用するために アカウントを作成する 英語で入力 名前 苗字 電子メールアドレス 電子メールアドレス確認 パスワード（決める） パスワード確認 国名 使用条件許諾 Term and Conditions に 契約書同意という意味 英語でSPAM来た！とか 言わないならチェック入れる パスワード条件 ?8~15半角文字 ?大小文字含める こと ?数字を含めること ?1文字以上の記 号 (表示）を含め ること
- 11. ⑥作成したアカウント でログインする User Name, Password を入力後は SUBMIT をクリックする。 次回からこのコンピュータでログイン状態を維持させたい場合は、左下チェックボックスを 有効にしてもいいが、念のためここでは都度ログインを推奨する。
- 12. ⑦Intel XDK起動 最小表示でも 976 x 530 px 領域を必要としたので 11’ 以上の画面が必要と 考えられる。
- 13. ⑧Work with a Demo 選択 当初の目的通り、サンプル（デモ）ビルドとして「Work with a Demo」を選択する。
- 14. ⑧ キーワードフィルタ Game を指定する 少し、アタマを使うゲームを。解き方は Wikipedia を参照しよう。 → Wikipedia ハノイの塔
- 15. ⑨ キーワードフィルタ Game を指定する Intel XDK へ導入するには GitHub で公開されているソースを1クリックで。 USE THIS DEMO をクリック
- 17. ?プロジェクト作成済み これだけで開発プロジェクトは作成されました。Intel XDK の使い方（英語）を 知りたい方は LET’S DO IT をクリックしよう。面倒な方は NO THANKS をクリック。 （ここでは、NO THANKS をクリックすることを期待している）
- 18. ?’ [誤]これが欲しかったんだろ？ 自分がソースコードを入力したわけではなく、Demo-hanoi 開発プロジェクトとして ソースコードがすべて自動で揃った。 それらしく Remarks や画像ファイルを変更すれば、アレオレ量産、ちょろいもんさ！ スルー推奨スライド
- 19. ? [正] iPhone5 エミュレート動作確認 早速、[EMULATE]タブ→[DEVICES / Apple iPhone5] を設定する。
- 20. ? Nexus7 横向きエミュレート動作確認 [EMULATE]タブ→[DEVICES / Google Nexus 7 / 横向き] を設定する。
- 21. ? HTML5 アプリケーション動作確認 Google Chrome 併用「Live Preview」 [DEVELOP]タブ→[BROWSER WINDOWS / Live Preview] をクリックする。
- 22. ? HTML5 アプリケーション動作確認 Google Chrome 併用「Live Preview」 ローカルホストを参照して ‘Tower Of Hanoi’ 待ち受け状態です。ボタンクリック可能です。 この例では 127.0.0.1:21289 が参照先として指定されています。
- 23. ? ローカルホストのポート状態を確認 > netstat –ant [Enter] 127.0.0.1:21289 が LISTEN （待ち受けポート）となり、 ローカル接続で ESTABLISH （通信確立ポート）が確認できます。
- 24. ? 動作確認を終えたらエミュレータ停止 [EMULATE / Stop Emulator] で停止すると 右下のデバイス画面に ’The emulator has stopped’ が表示される。
- 26. ? まとめ HTML5 アプリとは何かを概念理解に至れば、 最新 Andorid や iPhone だけといった特定環境の開発に 縛られることは少なくなります。 （Native アプリ開発目的の方は別途学習ください） 英語は必要不可欠ですが、英語力は概ね英検３級程度の 読解力で問題はありません。（中学生～高校在学程度） アプリ動作確認は視認性、操作性のみならずネットワーク 参照状態も必要です。Netstat 程度で構いませんので少し 知識を増やしましょう。