2013year技術動向
DESCRIPTION
TRANSCRIPT
最近の技術動向2013年
自己紹介
Name:
佐川 夫美雄@albatrosary
http://ameblo.jp/sgw3a/
Users Group:Tokyo.R/html5j.org/jsug/mybatis-users/（ソフトウェア品質技術者のための）データ分析会
様々な勉強会に出席したときの内容を
まとめます
今日聞いた内容は自己責任原則でお願いします。信用して損失を被ったとしても一切の責任は負いかねます。エンジニアの皆様が自らのリスク判断でその行為を行い、その損失は自らの負担で行って下さい。
アジェンダ
HTML5/JavaScript/CSS
HTTP2/SPDY
WebSocket
git/github:E
開発インフラマネージメント
R言語 Python,Ruby,Java
JUnit/DBUnit
Jenkins
品質管理
分析
maven
開発
Mixer2
Native
インターネット技術の歴史
SGML(standard Generalized Markup Language)1986年
HTML(HyperText Markup Language)1989年
HTML 4.0(HyperText Markup Language)1997年
XML(eXtensible Markup Language)1998年
XHTML(eXtensible HyperText Markup Language)2000年
HTML 5.0(HyperText Markup Language)2012年
CSS 11996年
CSS 21998年
CSS 2.12004年
CSS 32011年
HTTP 1.11999年
HTTP 1.01996年
HTTP 0.91993年
HTTP 2(draft)2012年
SPDY2011年
Googleサービスの90%がSPDY化
XHTML 2.0(eXtensible HyperText Markup Language)2010年 打ち切り
ここ１０年技術変革が無かった！
大きく動こうとしている
いまのHTTPの問題
・１回のコネクションにつき１リクエストしか遅れない・リクエストがクライアントからしか開始できない・リクエスト／レスポンスヘッダが非圧縮のためヘッダサイズが大きい・ヘッダが冗長・データ圧縮の使用が強制ではない
既存のHTTPを拡張し通信の高速化を目指したプロトコル単一のSPDYセッションで複数のリクエストを送受信することが可能
サーバヒントクライアント側からコンテンツをダウンロードする際に、コンテンツの展開に必要と思われる付属データを提案する
サーバプッシュサーバ側からクライアントに対しデータをプッシュする
すでにあります
Google Chrome, ChromiumMozilla FirefoxOperaがSPDYを用いた通信に対応
Jetty が v7.6.2/v8.1.2 で対応Apache に SPDY モジュール（mod_spdy）がある
実際に確認してみる
chrome://net-internals/#spdy
Firefoxではabout:config
ブラウザ 最大接続数IE6 2IE7 2IE8 6IE9 6Firefox 6Chrome 6Safari 6
HTTP 2.0
SPDY が HTTP 2.0 の規格ベース
HTTPbisワーキンググループでHTTP 2.0 を策定する作業を公式に開始
圧縮方法多重化通信TLSの必須化クライアントプルとサーバプッシュフロー制御WebSocket
SPDY 対 WebSocket
このふたつのプロトコルは相補的です。WebSocketsはサーバとの最初のハンドシェイクをHTTPで行い、ws://プロトコルがサポートされているかどうかを調べます。一方、SPDYはHTTPリクエストのヘッダを圧縮しキャッシュすることで最適化を図ります。したがって、SPDYを使い、リアルタイムの通信にはWebSocketsを使うのが、RESTfulなリクエストをベースにしたウェブの理想的なかたちです。このふたつのプロトコルは似ています。
by Brit GArdner
より早く、双方向に
HTML5の特徴
いっぱいあります！！
header, footer, articleなど記述部分がどこか区別されるようになったaudio.video,canvasタグにより、動画編集が可能になったアップルがflashを採用しない
CanvasCanvas テキストビデオビデオフォーマットローカルストレージWeb Workersオフライン Web アプリケーションGeolocationinput タイププレースホルダフォームのオートフォーカスマクロデータ
タグを見てみよう
http://diveintohtml5.info/examples/blog-original.html
DOCTYPE<!DOCTYPE html public “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html>
ルート要素<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<html lang=”en”>
文字エンコーディング<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
<meta charset=”utf-8”>
リンクタイプrel=”stylesheet”rel=”alternate”rel=”archives”rel=”author”rel=”external”rel=”start”, rel=”prev”, rel=”next”rel=”up”rel=”icon”rel=”license”rel=”nofollow”rel=”noreferrer”rel=”pingback”rel=”prefetch”rel=”search”rel=”sidebar”rel=”tag”
新しい意味要素<section>
文書またはアプリケーションの汎用的なセクションを示す
<nav>
別のページまたはページ内の別の場所にリンクするセクションを示す
<article>
例えばフィードなど独立して配布または再利用されることを意図した文書、ページ、アプリケーションまたはサイト中の自己完結した構成物を示す
<aside>
その周りのコンテンツにあまり関係ないコンテンツから構成されるページのセクションであって、周りのコンテンツから離れていると見なされるものを示す
<hgroup>
セクションの見出しを示す
<header>
導入またはナビゲーションの助けとなるグループを示す
<footer>
その一番近い祖先のセクションを構成するコンテンツまたはセクションを構成するルートのフッターを示す
<time>
２４時間表示の時刻、または補外グレゴリオ暦による日付（時刻とタイムゾーンを含むことができる）を示す
ヘッダー<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>
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>
日付と時間<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タグは３つの部分に分けられる・検索可読なタイムスタンプ・人間が読むためのテキスト・オプションのpubdate フラグ
<time datetime=”2009-10-22”>last Thursday</time>機械可読な日付やタイムスタンプが datetime 属性が指定されていればテキストは何でもよい
ナビゲーション<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>
フッター<div id=footer><p>§</p><p>§ 2001–9 <a href=”#”>Mark Pilgrim</a></p><div>
<footer><p>§</p><p>§ 2001–9 <a href=”#”>Mark Pilgrim</a></p></footer>
イメージ
HTML4 HTML5
inputタイプ検索ボックススピンボックススライダカラーピッカー電話番号Webページのアドレスメールアドレスカレンダーやデートピッカー月の入力週の入力時刻の入力詳細な日時や時刻の入力自分のいる地域の日付と時刻
http://www.tohoho-web.com/html/index.htm
イケテルサイト
http://mudcu.be/sketchpad/http://php5.xoop.jp/html/index.html#/starthttp://everytimezone.com/#2013-2-6,1425,6be
Geolocation API による位置情報通知
position オブジェクトのプロパティcoords.latitudecoords.longitudecoords.altitudecoords.accuracycoords.altitudeAccuracycoords.headingcoords.speed
geo.js は W3C の Geolocation API や Gears のAPI 各種モバイルプラットフォームの提供する API の間の違いを吸収するオープンソースのライブラリ
スマフォの Chrome で天気予報を検索すると見れます
Web SQL Database
Web SQL Database ではSQLite ベースの SQL によってデータにアクセス
中小規模用組み込み型データベース
デモ<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>
特定のソフトウェア（SQLite）の実装に基づくのは中立性に欠ける
Google Chrome 8Opera 10.6Safari 5モバイル（Android/Safari）
仕様策定が停止！！
Microsoft はたぶん取り込みません
Indexed Database API を利用することを推奨
ここでちょっとブラウザお話
いきなりですが
WebKit
Apple が中心となって開発されているオープンソースのHTMLレンダリングエンジン
HTML, CSS, JavaScript, SVGを解釈
Chromiumベース→ Google Chrome
WebKit2→ Safari
Internet Explorer は？
IE9でやっとHTML5準拠
Flash はお荷物
ブラウザって HTML5対応 どこまで出来てるの？
Indexed Database API
W3C により仕様策定が行われている値とオブジェクトをローカルデータベースに保持する標準インターフェース
インデックスを張るトランザクション処理
特徴
indexedDBIDBTransactionIDBKeyRangeIDBCursor
オブジェクト
実際にはめんどくさい
理由は・・・
Indexed Database APIは、まだ仕様が完全には確定しておらず、 現時点では、実装されているブラウザで利用する場合でも、 そのブラウザに合わせたベンダープレフィックスを付けてやる必要がある
chrome webkitIndexedDBFirefox 4.8 moz_indexedDBFirefox 4.9 mozindexedDBie10 msIndexedDB
で！こうなります
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;
きもくね？
Web Storage
W3C により仕様策定が行われている
key-Value型
sessionStoragelocalStorageのストレージが用意されている
IE8から使える
クッキーの大きなもの
データ保存容量が大きい有効期限がない
クッキーと比べて
比較
別ウィンドウのデータ共有
データの有効期限 データ量の上限 サーバへのデー
タ送信
クッキー ○ 指定期限まで有効 4KB サーバへのアク
セスごと
session ×別ウィンドウ／タブを閉じるまで有効
5MB jsにて
local ○ 永続的に有効 5MB jsにて
length:保存されているデータ数key(n):保存されているn番目のkeygetItem(key):keyに対応するvaluesetItem(key, value):keyとvalueのペアでデータを保存removeItem(key):keyに対応するvalueを削除clear():データをすべてクリア
インターフェース
データの同期は？
Online/Offline eventsNetwork Information API
Shared Worker
オフラインの状態if ( navigator.onLine ) { console.log(‘ONLINE’);} else { console.log(‘OFFLINE’);}
オフラインイベントwindow.addEventListener(‘online’, function(e)) { // 同期処理}, false);
デモ
http://html5-demos.appspot.com/static/navigator.onLine.html
Shared Worker
バックグラウンドで JavaScriptを動作させる
オブジェクトの検出方法
(1) グローバルオブジェクト(window や navigtor など)に特定のプロパティがあるかチェック(2) 要素を作成し、次にその要素に特定のプロパティが存在するかチェック(3) 要素を作成し、その要素に特定のメソッドが存在するかチェックし、次にそのメソッドを呼んで戻り値をチェック(4) 要素を作成し、プロパティを特定の値に設定し、次にそのプロパティが設定した値を保持しているかチェック
ところで jsp ってめんどくね？？
Mixer2
Mixer2 is a template engine for java application. You can write template by XHTML. 100% pure, XHTML and CSS. You can also use html5 with xml syntax.
いつものように Helloworld
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();}
テンプレート
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body> <div id="msg">here comes message.</div></body></html>
こーなります
Spring + Mixer2
サンプルhttps://github.com/nabedge/mixer2-sample/tree/
master/mixer2-fruitshop-springmvc
SAStruts + Mixer2
サンプルhttps://github.com/nabedge/mixer2-sample/tree/
master/mixer2-fruitshop-sastruts
Super Agile Struts(SAStruts)は、Strutsを使った開発をSuper Agileに行なうためのフレームワーク設定ファイルを書かなくて良いようにしてます
http://sastruts.seasar.org/
Java EE 7
簡単開発というポリシーの元
・Java Caching・Batch Application・JSON・WebSocket・JSF:コンポーネント・ベース開発（View とロジックを分離して開発）
JSPは捨てられました
こんな風に書けます<input jsf:id=”” jsf:value=”” />
でも・・・これなら Mixer2 の方がいいような・・・
Swing の未来！！
ありません
なくなります
Swing は JavaFX に統合
WebKit ベースのブラウザ WebView コンポーネントがあります
ちょっと戻ります
Node.js
Node.js（WebSocket）でリアルタイムWebの実現
他にもあります
jaxser(http://www.jaxer.org/)RingoJS(http://ringo.org/)v8cgi(http://code.google.com/p/v8cgi)
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
とりあえず node を動かしてみる
console.log(“Hellow World”);$ node helloworld.js
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
WebSocket
従来のXMLHttpRequest（Ajax）の欠点を解決する技術Ajax は pushWebSocket は push/pull
Ajax の復習
Webブラウザ内で非同期通信とインターフェースの構築などを行う技術の総称。XMLHttpRequest(JavaScript)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換える
Asynchronous JavaScript + XML
WebSocket の 前に Socket
サーバJava ApplicationJava.net.Socket
クライアントFlash(ActionScript3.0)flash.net.Socket
Flash(クライアント)からJava(サーバ)へ送信
public static const TALK:int = 0x000;public function writeData(bytes:ByteArray):void { var bytes:ByteArray = new ByteArray(); bytes.writeByte(TALK); bytes.writeUFT(message); bytes.writeUnsignedInt(color);}
Java(サーバ)で受信public static final short TALK = 0x000;public class TalkData implements CommandData { public void readData(ByteBuilder in) { byte commandId = in.getByte(); String message = in.getUTF(); int color = in.getInt();
talk(user, message, color); }
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));}
これからは WebSocket
WebSocket < Socket
リアルタイム・ウェブをもたらす技術→つなぎっぱということです！！
(1) クライアントから HTTP GET で接続(2) ヘッダー情報に「WebSocket だよ」情報が入っている(3) さっきも言った通り つなぎっぱ！
これにより双方向通信が可能になります！！
URLはws://wss://
ポートはws:80wss:443
Node.js に websocket.ioを入れてみる
$ npm install websocket.io
WebSocketの デモ
https://developer.mozilla.org/ja/demos/tag/tech:websockets
最後です
分散型バージョン管理システム
github:E が出てきて爆発的な人気者
github:E を使っているところ
GREEクックパッドはてなペパボDeNA
その他多数（知りません）
それぞれのファイルの差分を個別に管理
スナップショットとしてデータを管理
集中型バージョン管理システム
こんなことある？
ねぇねぇ、この前、学校のグループワークのレポートを作ってたら、共有ファイルサーバに保存したファイルがグループのほかの人に上書き保存されてたんだー。せっかくレポートに書いた内容が、消えて、また書き直さなくいけなくなっちゃって大変だったんだよ（T_T）。
http://www.atmarkit.co.jp/fjava/index/index_scrum.html
アジャイルは女子高生が教えてくれます
cherry-pick が楽ソーシャルな環境が手元にくる自分（開発者）中心分散しているのでリポジトリがなくなっても何とかなる
ちなみに
gitgithubgithub:E(github Enterprise)
これ違うものですよ
git は 分散型バージョン管理システムgithub は git を使うためのハブgithub:E(github Enterprise) は github の イメージ（VMを含め）をローカル環境に置けるもの
世の中どのくらい git が気になっているかトレンド
http://www.google.com/trends/explore#cat=0-5&q=Git%2C%20Subversion&cmpt=q
Github は 現代のアレクサンドリア図書館
ご清聴ありがとうございました