Your SlideShare is downloading. ×
ゲームだけじゃないHTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ゲームだけじゃないHTML5

1,504

Published on

2013/3/21に行われた 豆ナイトPresents「HTML5ナイト~その導入から活用まで~」 の発表資料です。

2013/3/21に行われた 豆ナイトPresents「HTML5ナイト~その導入から活用まで~」 の発表資料です。

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,504
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 豆ナイトPresents「HTML5ナイト ~その導入から活用まで~」 ゲームだけじゃないHTML5 技術本部 システム研究開発センター 下田 修 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 1 2013/3/21
  • 2. 自己紹介 下田 修(しもだ おさむ) 所属はバリバリのSIer…ですがその中の研究所で 技術開発したり案件支援したりしてます 最近はフロントに近いところをメインに見ています  会社ではJava(JavaEE, Seasar2), HTML/CSS/JavaScript, Flex(Flash)やWPF(.Net)など  “hifive”というHTML5ベースの Webアプリケーション開発プラットフォームを開発してます Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 2
  • 3. アジェンダ HTML5に至る流れをさらっとおさらい HTML5×企業システム 「はじめてのHTML5」をやってみたら HTML5×開発一回り とあるSIerの開発基盤、の場合 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 3
  • 4. 思えば遠くへ来たものです <video>• (前史) : IE6長期政権• 2008 : iPhone3G発売、Chrome1.0リリース• 2009 : HT-03A(Android1.6)発売、Packager for iPhone発表• 2010 : Flash vs HTML5 “Thoughts on Flash”、Flash Player 10.1 for Android リリース• 2011 : IE9リリース、Firefoxが高速リリースサイクルを採用• 2012 : ブラウザプラグイン排除の流れ Flash Player for Android提供終了、IE10におけるActiveX P-in廃止• 2013 : HTML5が「第3のモバイルOS」アプリ開発技術の中心 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 4
  • 5. 「HTML5」に対する認識 Flash(特に広告・ビデオ)の代替技術 ゲームプラットフォーム 今日のスコープは スマートフォン向けWebサイト構築技術 こちら マルチプラットフォーム対応 アプリケーション開発技術 「ドキュメント記述言語」(静的)から 「アプリケーションプラットフォーム」(動的)へ Canvas iSVG Video/Audio Forms CSS3 HTML5 XHR Level2 狭義 (Ajax) File API JavaScript with APIs Geolocation Web Workers WebSocket Indexed DB Web Offline (Web SQL Storage DB) App Caching 広義 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 5 5
  • 6. ×企業システム Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.6
  • 7. 企業システムのトレンドクラウド、モバイル、ビッグデータ、ソーシャル BYOD、BI/DSS、コンシューマライゼーション、・・・・場所を選ばない可搬性 - 肌身離さず持っている・直観的な指先での操作性 クラウド ・資料作成(図形・テキスト) ・大きな画面での参照 ・パワフルな計算能力 ・大きな画面での参照 ・緻密な操作性 - 対面での情報共有 ・豊富なアプリケーション ・十分なバッテリー ・直観的な指先での操作性 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 7
  • 8. HTML5って今までと何が違うんだろう…?HTML5を活用したWebシステム よくある社内Webシステム• 視覚的表現 • データを単純表示• ユーザー操作にリアルタイムに反応 • 画面遷移ベースの一括更新• 動的な部分画面更新 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 8
  • 9. 業務アプリ分野におけるHTML5への期待 実現のためのテクノロジ データ可視化、BI • Canvas  高い表現力 • SVG 技術はある!  より良い操作性 • CSS3 (いろいろ大変なことも あるけど…)  リアルタイム(差分更新) • File API  ハイパフォーマンス • データベース (IndexedDB, WebSQLDB) スマートデバイス対応 • XHR2(Ajax) 営業・販売業務の高度化 • WebSocket  B2Cサイトのスマホ対応 • CSS Media Queries  BYOD • デバイス連携 (センサー、カメラ、…)  オフライン動作とデータ同期 • AppCache 互換性向上 • Web Components  ベースラインの確実な動作 • WebRTC etc. Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 9
  • 10. 例 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.10
  • 11. 例:QosmoNavire(コスモナヴィール)の場合 目的  DCにおける障害監視・原因追究  システム構成・状態の可視化 利用技術  SVG  CSS3(CSS Transform等)  その他Ajax、ES5 API、DOM Level3 API 等 特長:高速描画  ノード・エッジ等のレイヤリング  可視範囲外の描画の省略  データ層⇒ビュー層への更新伝搬 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 11
  • 12. 「はじめてのHTML5」をやってみたら Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.12
  • 13.  5人集めてスマホ向けアプリを作ってみた  新人~ふつうのWeb/Javaアプリ開発の経験ありの人  JavaScriptは「バリデータや簡単なスクリプトくらいは…」という程度  jQueryは「勉強会で聞いたことはある…」 アプリの仕様  スマートフォン向けアプリ  基本的なCRUD、Ajax、グラフ描画  jQuery / jQuery Mobile使用  HTML5っぽいものを詰め込む  <video>、WebSQLDB、CSS Animation、Media Queries、 Server-Sent Event、… とりあえず各自調べながら作ってみよう! Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 13
  • 14. スコープを意識しない記述でコンフリクト A.js B.js 同時にJS読み込んだら 動かないんですけど Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.14
  • 15. 業務処理と画面操作の混在db.transaction(function(tr) {var query = "INSERT INTO Food(FoodId, Name, …); DB操作/サーバー通信 tr.executeSql(query, [++lastFoodId + "", name, foodCategory, getFoodScore(calorie, foodCategory), calorie], function(tr, rs) { makeFoodListItem(lastFoodId, name, calorie, foodCategory, getFoodScore(calorie, foodCategory)); 計算ロジック呼出 $("#regist_food_name").val(""); 画面更新 } );}); 「ごめんサーバAPI仕様 ちょっと変えた」 「…どこ変えればいいんだ…」 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 15
  • 16. デバッグコードの混入 「ここボタン押してから重いなぁ」 「調べ、…ますか…」 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.16
  • 17. ビュー生成方法もいろいろvar foodCountDiv = document.createElement("div");foodCountDiv.setAttribute("class", "food_count_div");var downCountButton = document.createElement("input");downCountButton.value = "-";downCountButton.setAttribute("onclick", "downFoodCount(" + foodId + ")");$(‘<div class=“food_count_div”><input value=“’ + DEFAULT_VALUE + ’” onclick=“downFoodCount(‘ + foodId + ’)”>’).appendTo(‘.list’); 「リストにあてるCSSクラス変えて」 「GREP→全置換→動かない…」 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 17
  • 18. イベントハンドラの書き方もバラバラ • <li onclick=“func()”> • $(‘.item’).bind(‘click’, function(){}); • $(‘.item’).click(function(){}); • $(‘ul’).on(‘.item’, ‘click’, function(){}); 「onclickはさすがにNGだよねー」 「ところでbind()とclick()って 何が違うんですか?」 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.18
  • 19. もちろん画面ロード時の初期化処理だって • (function(){})(); • $(function(){}); • $(window).bind(‘load’, function(){}); • init(); 「なぜかちょっとずつ 動くタイミングが違う…」 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.19
  • 20. ×開発一回り Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.20
  • 21. HTML5×開発一回り要件定義 設計 実装 テスト 運用・保守 アーキテクチャ 自動化実現可能性 互換性 見積り 生産性向上 実機動作検証 分業/体制 開発環境 アジャイル 人材確保 サーバーサイドで通ってきた道を 今度はクライアントサイドで Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.21
  • 22. 要素技術の状況要件定義 設計 実装 テスト 運用・保守 アーキテクチャ 自動化 CI実現可能性 MV*フレームワーク テストフレームワーク 情報収集 互換性 やってみる 見積り 生産性向上 JS変換型言語 デバッグツール UIフレームワーク BaaS 実機動作検証 分業/体制 テストサービス 開発環境 HTML5対応 アジャイル IDE&ツール 人材確保 技術面をカバーするツール・ライブラリ・フレームワークは 揃いつつある Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 22
  • 23. 個別要素技術の紹介(設計・実装) DOM操作(&基本的なブラウザ差異吸収)  jQuery、Underscore、… MV*フレームワーク  Backbone.js、Knockout、AngularJS、hifive、… CSSフレームワーク  SCSS、LESS、… ビューテンプレートエンジン  Hogan、EJS、Handlebars、… UIフレームワーク  Bootstrap、jQueryUI、YUI、jQuery Mobile、… 旧ブラウザ対応  IE9.js、html5shiv、… ドキュメント生成  JSDoc3、… デバッグツール  ブラウザ内蔵開発者ツール、Adobe Shadow、… Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 23
  • 24. 個別要素技術の紹介(テスト) テストフレームワーク  QUnit、Jasmine、JsTestDriver、Selenium、… テストモック作成ライブラリ  Sinon.JS、… CI (テストフレームワークとも連携)  Jenkins、Testacular、… カバレッジ計測  JSCover、… ソースコード静的検査  JSLint、JSHint、… JSソースコード最適化  Closure Compiler、UglifyJS、… 実機動作検証サービス  AppKitBox/Remote TestKit for Android(NTTレゾナントさん) Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 24
  • 25. 個別要素技術の紹介(その他) 言語(JavaScriptの問題点を解決)  静的型付け:TypeScript、Haxe、JSX、…  Dart、CoffeeScript、… 開発環境  Sencha、appMobi、…  VisualStudio、WebStorm、…  Adobe Edge、Dreamweaver、… ハイブリッドアプリケーション開発(スマートデバイス向け)  PhoneGap、Trigger.io、… Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 25
  • 26. 技術面をカバーするツール・ライブラリ・ フレームワークは揃いつつある 自分たちのニーズ、HTML5を採用して 得たいメリットを考慮して適切なものを選択 勿論、これがなかなか大変なわけですが・・・ Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.26
  • 27. とあるSIerの開発基盤、の場合 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.27
  • 28. www.htmlhifive.com こんなものを作ってます。 オープンソースです。 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.28
  • 29. 【再掲】要素技術の状況要件定義 設計 実装 テスト 運用・保守 アーキテクチャ 自動化 CI実現可能性 MV*フレームワーク テストフレームワーク 情報収集 互換性 やってみる 見積り 生産性向上 JS変換型言語 デバッグツール UIフレームワーク BaaS 実機動作検証 分業/体制 テストサービス 開発環境 HTML5対応 アジャイル IDE&ツール 人材確保 ある程度以上の規模の案件を成功させるには 整合性のある技術選択と人間系の整備が必須 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 29
  • 30. 協働 • アジャイル・高速プロトタイピング • 分散/分担開発の枠組み 開発者 ユーザー• フレームワーク • サンプルアプリ• 高速・高機能部品 • すぐに使える• 開発ガイド クラウドサービス• 支援ツール • HTML5技術の啓蒙• 開発者教育 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 30
  • 31. hifiveの場合 規約・ガイドツール・テスト 開発コミュニティ チーム開発で 開発環境 困らない (Eclipse) 開発支援ツール サンプル・ JSの書き方 MVC、 チュートリ ・JSDoc 静的検査 疑似的なデータ型定義 アル ・コード補完/アウト(JSLint/Hint) ライン コアフレームワーク ・スコープの考慮 単体テスト ランタイム(自製) (QUnit) サーバーサイド カバレッジ ・REST/JSON(JSCoverage) 言語仕様 ・データ同期機構 実行環境 その他ノウハウ UI(ビュー層)は ・パフォーマンスを 他ライブラリを利用 考慮した記述、etc. Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 31
  • 32. なぜこうしたか? コアアーキテクチャ  画面機能の柔軟な分割/構造化とライフサイクル制御は必須  敷居を低く  JavaScriptのプロ、でなくてもミスしにくいような書き方に誘導  保守・仕様変更時の致命的なデータ不整合を防ぎたい UI  ブラウザごとのサポート度合い・挙動の違いが激しい  基本的なUI部品は他ライブラリに任せる(良いものが既にある)  高速動作/高機能が求められるものは順次開発 まずは使い始めて見る、実行しながらノウハウを蓄える! Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 32
  • 33. 得られたメリット例(技術系) コードの見通しが良くなった  機能ごとに分担して設計・実装 非同期プログラミングのスタイル統一  HTML5な世界では「非同期」の扱いは重要  FWのサポートにより非同期処理のエラー処理を統一 テストしやすくなった  単体テスト/カバレッジ計測が容易 今に始まったことではない、 でも、必要なことを 確実にやってはじめて 規模の増加に対応できる Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 33
  • 34. 例:テストが大変。どうする? hifiveのフレームワークランタイムの テスト環境の組み合わせ:  ブラウザ:5  jQueryのバージョン:10 これらの組み合わせなので…  ビルド:2  IEのDocumentMode:2~4 300パターン  さらに、手持ちのスマホ15機種でテスト 300パターン Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 34
  • 35. CI環境構築例テストホストサーバ テストコード Jenkins ホストサーバ ③ ⑥ ② ① VCS(github) ⑤ 共有フォルダ ⑨ ⑦ ⑧ kill agent • 環境組み合わせごとにジョブを作成 各ブラウザ@VM • VM上の各ブラウザでQUnitテスト Jenkins ⇒1ランナーごと結果をサーバーに送信 Agent ④ テストクライアント ⇒JUnitXML形式に変換して保存 ⇒Jenkinsに吸い上げ • スマホの場合はランナーを順次自動実行 ⇒最後にまとめて吸い上げる Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 35
  • 36. 得られたメリット例(人間系) 見積りの精度向上  アーキテクチャを整備することで計数が可能に  画面数、コントローラ数、イベントハンドラ数、サーバAPI数、…  スクラッチ or Not、1画面内のハンドラ数、…などに応じて 係数をかける 要件の早期収束・“アジャイル”への対応  動きの多い画面はプロトタイプを作る  プロトタイプ自体をより迅速に作る仕組みも整備中 ノウハウの蓄積  古いIE、Android(特に2.x系)はやっぱりつらい  ライブラリにフィードバックし、同じ過ちを繰り返さない Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 36
  • 37. おわりに Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.37
  • 38. おわりに 全てのアプリ、全ての画面、全ての機能を 今すぐ「HTML5化」しなくてもよい  HTML5は今までのWebの延長線上にある。 これは大きなメリット  本当に必要な所から、必要十分性を確かめて取り組む ツール・フレームワーク・開発環境等 必要なパーツは出てきている  “定番化”にはもう少し時間はかかるか  ノウハウ蓄積をそろそろ始めてみませんか? Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 38
  • 39. HTML “Living Standard” Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.39
  • 40. 商標について NS Solutions、NS(ロゴ)、NSSOLは、新日鉄住金ソリューションズ株式会社の 登録商標です。 hifive、hifive(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商標です。 QosmoNavire\コスモナヴィールは、新日鉄住金ソリューションズ株式会社 の登録商標です。 JAVAは、米国ORACLE Corp.の登録商標です。 Windowsは、米国Microsoft Corp.の米国及びその他の国における商標又は登 録商標です。 HTML5 Logo by W3C. その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商 標です。 Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved. 40
  • 41. www.htmlhifive.com Copyright (C) 2013 NS Solutions Corporation, All Rights Reserved.41

×