2013year技術動向

  • 2,696 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • This is the documentation that was used in-house training. It is a summary of the information to date from Jun-2012, could hear from the study, such as conferences and meetings.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,696
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
1
Likes
1

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. 最近の技術動向 2013年
  • 2. 自己紹介
  • 3. Name: 佐川 夫美雄 @albatrosary http://ameblo.jp/sgw3a/Users Group: Tokyo.R/html5j.org/jsug/mybatis-users /(ソフトウェア品質技術者のための)データ分析会
  • 4. 様々な勉強会に出席したときの内容を まとめます
  • 5. 今日聞いた内容は自己責任原則でお願いします。信用して損失を被ったとしても一切の責任は負いかねます。エンジニアの皆様が自らのリスク判断でその行為を行い、その損失は自らの負担で行って下さい。
  • 6. アジェンダ
  • 7. マネージメント 開発 開発インフラ HTML5/ JavaScript/ Native git/github:E 分析 CSS HTTP2/SPDY Jenkins WebSocket JUnit/DBUnit品質管理 Mixer2 maven R言語 Python,Ruby,Java
  • 8. インターネット技術 の歴史
  • 9. SGML(standard Generalized Markup Language) 1986年 HTML(HyperText Markup Language) 1989年HTTP 0.91993年HTTP 1.0 CSS 1 HTML 4.0(HyperText Markup Language)1996年 1996年 1997年 CSS 2 XML(eXtensible Markup Language) 1998年 1998年HTTP 1.11999年 XHTML(eXtensible HyperText Markup Language) 2000年 CSS 2.1 2004年 SPDY CSS 3 XHTML 2.0(eXtensible HyperText Markup Language) 2011年 2011年 2010年 打ち切りHTTP 2(draft) Googleサービスの HTML 5.0(HyperText Markup Language)2012年 90%がSPDY化 2012年
  • 10. ここ10年技術変革が無かった!
  • 11. 大きく動こうとしている
  • 12. いまのHTTPの問題
  • 13. ・1回のコネクションにつき1リクエストしか遅れない・リクエストがクライアントからしか開始できない・リクエスト/レスポンスヘッダが非圧縮のためヘッダサイズが大きい・ヘッダが冗長・データ圧縮の使用が強制ではない
  • 14. 既存のHTTPを拡張し通信の高速化を目指したプロトコル単一のSPDYセッションで複数のリクエストを送受信することが可能
  • 15. サーバヒントクライアント側からコンテンツをダウンロードする際に、コンテンツの展開に必要と思われる付属データを提案するサーバプッシュサーバ側からクライアントに対しデータをプッシュする
  • 16. すでにあります
  • 17. Google Chrome, ChromiumMozilla FirefoxOperaがSPDYを用いた通信に対応
  • 18. Jetty が v7.6.2/v8.1.2 で対応Apache に SPDY モジュール(mod_spdy)がある
  • 19. 実際に確認してみるchrome://net-internals/#spdyFirefoxではabout:config
  • 20. ブラウザ 最大接続数 IE6 2 IE7 2 IE8 6 IE9 6Firefox 6Chrome 6Safari 6
  • 21. HTTP 2.0
  • 22. SPDY が HTTP 2.0 の規格ベース
  • 23. HTTPbisワーキンググループでHTTP 2.0 を策定する作業を公式に開始
  • 24. 圧縮方法多重化通信TLSの必須化クライアントプルとサーバプッシュフロー制御WebSocket
  • 25. SPDY 対 WebSocket
  • 26. このふたつのプロトコルは相補的です。WebSocketsはサーバとの最初のハンドシェイクをHTTPで行い、ws://プロトコルがサポートされているかどうかを調べます。一方、SPDYはHTTPリクエストのヘッダを圧縮しキャッシュすることで最適化を図ります。したがって、SPDYを使い、リアルタイムの通信にはWebSocketsを使うのが、RESTfulなリクエストをベースにしたウェブの理想的なかたちです。このふたつのプロトコルは似ています。 by Brit GArdner
  • 27. より早く、双方向に
  • 28. HTML5の特徴いっぱいあります!!
  • 29. header, footer, articleなど記述部分がどこか区別されるようになったaudio.video,canvasタグにより、動画編集が可能になったアップルがflashを採用しない
  • 30. CanvasCanvas テキストビデオビデオフォーマットローカルストレージWeb Workersオフライン Web アプリケーションGeolocationinput タイププレースホルダフォームのオートフォーカスマクロデータ
  • 31. タグを見てみよう http://diveintohtml5.info/examples/blog-original.html
  • 32. DOCTYPE<!DOCTYPE html public -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ><!DOCTYPE html>
  • 33. ルート要素<html xmlns= http://www.w3.org/1999/xhtml lang= en xml:lang= en ><html lang= en >
  • 34. 文字エンコーディング<meta http-equiv= Content-Type content= text/html;charset=utf-8 ><meta charset= utf-8 >
  • 35. リンクタイプrel= stylesheetrel= alternaterel= archivesrel= authorrel= externalrel= start , rel= prev , rel= nextrel= uprel= iconrel= licenserel= nofollowrel= noreferrerrel= pingbackrel= prefetchrel= searchrel= sidebarrel= tag
  • 36. 新しい意味要素<section>文書またはアプリケーションの汎用的なセクションを示す<nav>別のページまたはページ内の別の場所にリンクするセクションを示す<article>例えばフィードなど独立して配布または再利用されることを意図した文書、ページ、アプリケーションまたはサイト中の自己完結した構成物を示す<aside>その周りのコンテンツにあまり関係ないコンテンツから構成されるページのセクションであって、周りのコンテンツから離れていると見なされるものを示す<hgroup>セクションの見出しを示す<header>導入またはナビゲーションの助けとなるグループを示す<footer>その一番近い祖先のセクションを構成するコンテンツまたはセクションを構成するルートのフッターを示す<time>24時間表示の時刻、または補外グレゴリオ暦による日付(時刻とタイムゾーンを含むことができる)を示す
  • 37. ヘッダー<div class= header ><h1>My Weblog</h1><p class= tagline >A lot of effort went into making this effortless.</p></div><header><h1>My Weblog</h1><p class= tagline >A lot of effort went into making this effortless.</p></header>
  • 38. Article 要素<div class= entry ><p class= post-date >October 22, 2009<p><h2><a href= # rel= bookmark title= link to this post >Travel day</a></h2></div><article><p class= post-date >October 22, 2009<p><h1><a href= # rel= bookmark title= link to this post >Travel day</a></h1></article>
  • 39. 日付と時間<div class= entry ><p class= post-date >Ovtober 22, 2009</p><h2>Travel day</h2></div><time datetime= 2009 pubdate>October 22, 2009</time>timeタグは3つの部分に分けられる・検索可読なタイムスタンプ・人間が読むためのテキスト・オプションのpubdate フラグ<time datetime= 2009-10-22 >last Thursday</time>機械可読な日付やタイムスタンプが datetime 属性が指定されていればテキストは何でもよい
  • 40. ナビゲーション<div id= nav ><ul><li><a href= # >home</a></li><li><a href= # >blog</a></li><li><a href= # >gallery</a></li></ul></div><nav><ul><li><a href= # >home</a></li><li><a href= # >blog</a></li><li><a href= # >gallery</a></li></ul></nav>
  • 41. フッター<div id=footer><p>&#167;</p><p>&#167; 2001&#8211;9 <a href= # >Mark Pilgrim</a></p><div><footer><p>&#167;</p><p>&#167; 2001&#8211;9 <a href= # >Mark Pilgrim</a></p></footer>
  • 42. イメージ
  • 43. HTML4 HTML5
  • 44. inputタイプ検索ボックススピンボックススライダカラーピッカー電話番号Webページのアドレスメールアドレスカレンダーやデートピッカー月の入力週の入力時刻の入力詳細な日時や時刻の入力自分のいる地域の日付と時刻
  • 45. http://www.tohoho-web.com/html/index.htm
  • 46. イケテルサイト
  • 47. http://mudcu.be/sketchpad/http://php5.xoop.jp/html/index.html#/starthttp://everytimezone.com/#2013-2-6,1425,6be
  • 48. Geolocation API に よる位置情報通知
  • 49. position オブジェクトのプロパティcoords.latitudecoords.longitudecoords.altitudecoords.accuracycoords.altitudeAccuracycoords.headingcoords.speed
  • 50. geo.js は W3C の Geolocation API や Gears のAPI 各種モバイルプラットフォームの提供するAPI の間の違いを吸収するオープンソースのライブラリ
  • 51. スマフォの Chrome で天気予報を検索すると見れます
  • 52. Web SQL Database
  • 53. Web SQL Database ではSQLite ベースの SQL によってデータにアクセス
  • 54. 中小規模用組み込み型データベース
  • 55. デモ<script type= text/javascript ><!--function test() { var db = openDatabase("testDB", "", "Test Database", 1000); db.transaction( function(tr) { tr.executeSql("SELECT * FROM test", [], function(rt, rs) { print("SELECT: SUCCESS"); for (var i = 0; i < rs.rows.length; i++) { var row = rs.rows.item(i); print(row.id + " / " + row.name); } } ); }, );}//--></script>
  • 56. 特定のソフトウェア(SQLite) の実装に基づくのは 中立性に欠ける
  • 57. Google Chrome 8Opera 10.6Safari 5モバイル(Android/Safari)
  • 58. 仕様策定が停止!!
  • 59. Microsoft はたぶん取り込みません
  • 60. Indexed Database API を利用することを推奨
  • 61. ここでちょっと ブラウザお話
  • 62. いきなりですが
  • 63. WebKit
  • 64. Apple が中心となって開発されているオープンソースのHTMLレンダリングエンジンHTML, CSS, JavaScript, SVGを解釈
  • 65. Chromiumベース→ Google ChromeWebKit2→ Safari
  • 66. Internet Explorer は?
  • 67. IE9でやっとHTML5準拠
  • 68. Flash はお荷物
  • 69. ブラウザって HTML5対応 どこ まで出来てるの?
  • 70. 点数をつけてみよう!http://html5test.com/
  • 71. Indexed Database API
  • 72. W3C により仕様策定が行われている値とオブジェクトをローカルデータベースに保持する標準インターフェース
  • 73. 特徴インデックスを張るトランザクション処理
  • 74. オブジェクトindexedDBIDBTransactionIDBKeyRangeIDBCursor
  • 75. 実際にはめんどくさい
  • 76. 理由は・・・
  • 77. Indexed Database APIは、まだ仕様が完全には確定しておらず、 現時点では、実装されているブラウザで利用する場合でも、そのブラウザに合わせたベンダープレフィックスを付けてやる必要がある
  • 78. chrome webkitIndexedDBFirefox 4.8 moz_indexedDBFirefox 4.9 mozindexedDBie10 msIndexedDB
  • 79. で!こうなります
  • 80. var indexedDB = window.indexedDB ¦¦ window.webkitIndexedDB ¦¦ window.mozIndexedDB ¦¦ window.moz_indexedDB ¦¦ window.msIndexedDB;var IDBCursor = window.IDBCursor ¦¦ window.webkitIDBCursor ¦¦ window.mozIDBCursor ¦¦ window.moz_IDBCursor ¦¦ window.msIDBCursor;var IDBTransaction = window.IDBTransaction ¦¦ window.webkitIDBTransaction ¦¦ window.mozIDBTransaction ¦¦ window.moz_IDBTransaction ¦¦ window.msIDBTransaction;var IDBKeyRange = window.IDBKeyRange ¦¦ window.webkitIDBKeyRange ¦¦ window.mozIDBKeyRange ¦¦ window.moz_IDBKeyRange ¦¦ window.msIDBKeyRange;
  • 81. きもくね?
  • 82. Web Storage
  • 83. W3C により仕様策定が行われているkey-Value型
  • 84. sessionStoragelocalStorageのストレージが用意されているIE8から使える
  • 85. クッキーの大きなもの
  • 86. クッキーと比べてデータ保存容量が大きい有効期限がない
  • 87. 比較 別ウィンドウの データの有効期 サーバへのデー データ量の上限 データ共有 限 タ送信 指定期限まで有 サーバへのアククッキー ○ 4KB 効 セスごと 別ウィンドウ/session タブを閉じるま 5MB jsにて で有効 local ○ 永続的に有効 5MB jsにて
  • 88. インターフェースlength:保存されているデータ数key(n):保存されているn番目のkeygetItem(key):keyに対応するvaluesetItem(key, value):keyとvalueのペアでデータを保存removeItem(key):keyに対応するvalueを削除clear():データをすべてクリア
  • 89. データの同期は?
  • 90. Online/Offline eventsNetwork Information API Shared Worker
  • 91. オフラインの状態if ( navigator.onLine ) { console.log( ONLINE );} else { console.log( OFFLINE );}
  • 92. オフラインイベントwindow.addEventListener( online ,function(e)) { // 同期処理}, false);
  • 93. デモhttp://html5-demos.appspot.com/ static/navigator.onLine.html
  • 94. Shared Worker バックグラウンドでJavaScriptを動作させる
  • 95. オブジェクトの 検出方法
  • 96. (1) グローバルオブジェクト(window や navigtorなど)に特定のプロパティがあるかチェック(2) 要素を作成し、次にその要素に特定のプロパティが存在するかチェック(3) 要素を作成し、その要素に特定のメソッドが存在するかチェックし、次にそのメソッドを呼んで戻り値をチェック(4) 要素を作成し、プロパティを特定の値に設定し、次にそのプロパティが設定した値を保持しているかチェック
  • 97. ところで jsp って めんどくね??
  • 98. Mixer2
  • 99. Mixer2 is a template engine forjava application. You can writetemplate by XHTML. 100% pure,XHTML and CSS. You can alsouse html5 with xml syntax.
  • 100. いつものように Helloworld
  • 101. Mixer2Engine m2e = new Mixer2Engine();Html html = m2e.loadHtmlTemplate( new File("/Users/albatrosary/Documents/workspace/Mixer2Sample/src/sample.html"));html.getById("msg",Div.class).getContent().clear();html.getById("msg",Div.class).getContent().add("Hello World !");File file = new File("/Users/albatrosary/Documents/workspace/Mixer2Sample/src/sampleout.html");PrintWriter pw = null;try { pw = new PrintWriter(new BufferedWriter(new FileWriter(file))); pw.println(m2e.saveToString(html));}finally { if(pw!=null) pw.close();}
  • 102. テンプレート<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> <div id="msg">here comes message.</div></body></html>
  • 103. こーなります
  • 104. Spring + Mixer2
  • 105. サンプルhttps://github.com/nabedge/mixer2-sample/tree/ master/mixer2-fruitshop-springmvc
  • 106. SAStruts + Mixer2
  • 107. サンプルhttps://github.com/nabedge/mixer2-sample/tree/ master/mixer2-fruitshop-sastruts
  • 108. Super Agile Struts(SAStruts)は、Strutsを使った開発をSuper Agileに行なうためのフレームワーク設定ファイルを書かなくて良いようにしてます http://sastruts.seasar.org/
  • 109. Java EE 7
  • 110. 簡単開発というポリシーの元・Java Caching・Batch Application・JSON・WebSocket・JSF:コンポーネント・ベース開発(View とロジックを分離して開発)
  • 111. JSPは捨てられました
  • 112. こんな風に書けます<input jsf:id= jsf:value= />
  • 113. でも・・・これなら Mixer2 の方がいいような・・・
  • 114. Swing の未来!!
  • 115. ありません
  • 116. なくなります
  • 117. Swing は JavaFX に統合WebKit ベースのブラウザ WebView コンポーネントがあります
  • 118. ちょっと戻ります
  • 119. Node.js
  • 120. http://nodejs.org/サーバサイドJavaScriptNon-blocking I/O環境
  • 121. Node.js(WebSocket)でリアルタイムWebの実現
  • 122. 他にもあります
  • 123. jaxser(http://www.jaxer.org/)RingoJS(http://ringo.org/)v8cgi(http://code.google.com/p/v8cgi)
  • 124. Node.js の導入$ wget http://nodejs.org/dist/node-v0.6.9.tar.gz$ tar zxvf node-v0.6.9.tar.gz$ ./configure$ make$ sudo make install$ node -vv0.6.9 http://lab.informarc.co.jp/javascript/websocket_real_time_web.html
  • 125. とりあえず node を動かしてみる
  • 126. console.log( Hellow World );$ node helloworld.js
  • 127. var http = require("http");http.createServer( function(req, res) { res.writeHead(200, {"Content-Type": "text/plain"}); res.write("Hello World"); res.end(); }).listen(8080);$ node server_helloworld.js
  • 128. WebSocket
  • 129. 従来のXMLHttpRequest(Ajax)の欠点を解決する技術Ajax は pushWebSocket は push/pull
  • 130. Ajax の復習
  • 131. Webブラウザ内で非同期通信とインターフェースの構築などを行う技術の総称。XMLHttpRequest(JavaScript)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるAsynchronous JavaScript + XML
  • 132. WebSocket の 前に Socket
  • 133. サーバ Java Application Java.net.Socket クライアントFlash(ActionScript3.0) flash.net.Socket
  • 134. Flash(クライアント)から Java(サーバ)へ送信public static const TALK:int = 0x000;public functionwriteData(bytes:ByteArray):void { var bytes:ByteArray = new ByteArray(); bytes.writeByte(TALK); bytes.writeUFT(message); bytes.writeUnsignedInt(color);}
  • 135. Java(サーバ)で受信public static final short TALK = 0x000;public class TalkData implementsCommandData { public void readData(ByteBuilder in) { byte commandId = in.getByte(); String message = in.getUTF(); int color = in.getInt(); talk(user, message, color); }
  • 136. Flash(クライアント)の受信public static const TALK_RESULT:int = 0x001;public function readData(bytes:ByteArray):void { commandId = bytes.readUTF(); message = bytes.readUTF(); color = bytes.readUnsignedInt(); id = bytes.readUTF(); name = bytes.readUTF();}public function talk(msg:String, color:unit):void { _chat.addBubble(new ChatBubble(msg, color));}
  • 137. これからは WebSocket
  • 138. WebSocket < Socketリアルタイム・ウェブをもたらす技術 →つなぎっぱということです!!
  • 139. (1) クライアントから HTTP GET で接続(2) ヘッダー情報に「WebSocket だよ」情報が入っている(3) さっきも言った通り つなぎっぱ!
  • 140. これにより双方向通信が可能になります!!
  • 141. URLは ポートはws:// ws:80wss:// wss:443
  • 142. Node.js に websocket.io を入れてみる$ npm install websocket.io
  • 143. WebSocket の デモhttps://developer.mozilla.org/ja/demos/tag/ tech:websockets
  • 144. 最後です
  • 145. 分散型バージョン管理システム
  • 146. github:E が出てきて爆発的な人気者
  • 147. github:E を使っているところ GREE クックパッド はてな ペパボ DeNAその他多数(知りません)
  • 148. それぞれのファイルの差分を個別に管理スナップショットとしてデータを管理
  • 149. 集中型バージョン管理システム
  • 150. こんなことある?
  • 151. ねぇねぇ、この前、学校のグループワークのレポートを作ってたら、共有ファイルサーバに保存したファイルがグループのほかの人に上書き保存されてたんだー。せっかくレポートに書いた内容が、消えて、また書き直さなくいけなくなっちゃって大変だったんだよ(T_T)。
  • 152. http://www.atmarkit.co.jp/fjava/index/index_scrum.html
  • 153. アジャイルは女子高生が教えてくれます
  • 154. cherry-pick が楽ソーシャルな環境が手元にくる自分(開発者)中心分散しているのでリポジトリがなくなっても何とかなる
  • 155. ちなみに
  • 156. gitgithubgithub:E(github Enterprise)これ違うものですよ
  • 157. git は 分散型バージョン管理システムgithub は git を使うためのハブgithub:E(github Enterprise) は githubの イメージ(VMを含め)をローカル環境に置けるもの
  • 158. 世の中どのくらい git が気になっているかトレンドhttp://www.google.com/trends/explore#cat=0-5&q=Git%2C%20Subversion&cmpt=q
  • 159. Github は 現代のアレクサンドリア図書館
  • 160. ご清聴ありがとう ございました