今日（１１／３）
HappyBirthday HTML5!
https://atnd.org/events/71001
を聞いてきたので、その内容をメモメモ
（表題の講演は、真ん中あたりにある）
■あいさつ
注意事項
人脈づくり
■ＨＴＭＬ５はたのしいよ！
・ＨＴＭＬ５で自己紹介
Ｖｉｄｅｏ，ａｕｄｉｏ
ＣＳＳ
Ｊａｖａｓｃｒｉｐｔ
・ＨＴＭＬ５誕生日 ２０１４年１０月２８日（Ｗ３Ｃ勧告）
・広義のＨＴＭＬ５
狭義のＨＴＭＬ５
ＣＳＳ３（デザイン）：リッチ変形、アニメ、３Ｄ
Javascript（プログラム）：計算，ＧＰＳ，ＡＰＩ
・editable属性
・こんなこともできるＨＴＭＬ５
・すくー？シンセサイザー
・３次元ＣＳＳ３ preserve-3D,perspective
アニメーション linear,rotate
・３次元ＣＳＳをJavascriptで操作 divで回転
■いまさら聞けない超基本 チームで使うコーディングルール
・自己紹介：
５０社落ちまくり、面接までたどり着けない。子供はどうするんですか？
東京アプリワークショップに参加した
実は初登壇
・コーディング自己流だと、後輩が入ってきたら焦る
・テーブルレイアウトって、もう使わないんですね・・・使わないです
１．コーディングこれはだめ編
・テーブルレイアウト、だめです
要素を追加するのすごい大変
柔軟性ない
・テーブルレイアウトっぽいレイアウトもだめです
→背景が１枚の絵とか
・安易にheightを指定しちゃだめです
余白はmarginやpaddingで調整
・安易にabsoluteを使っちゃだめです
ループ等、動的な仕様をつけ足せないのでだめ
・ＩＤ／クラス名を色名にしちゃダメです
light-pink；やっぱり青でとか言われたら終わる
・自分ルールの記号や番号にするのもだめ
→番号付けはガイドラインをつける
・デバイス幅が狭いとき、中身が飛び出るコーディングはだめです
・ＨＴＭＬファイル内にＣＳＳを記述してはだめです
ＣＳＳの優先度がわからなくなる。!importantを使うはめになる
・大きなimageはだめです（ＣＳＳで小さくするのは）
ページが重くてユーザーが離脱するのでだめ
２．コーディングこうしよう編
・コメントはいっぱいつける
Ｈｅａｄ内のコメントは割と重要
・ＩＤ、クラス名は意味のある英単語にする
・ＨＴＭＬの意味が破たんしないよう、構造を考えてマークアップする
・ユーザーの行動を想像しながら、ページ全体の仕様を細部まで予測する
３．もっと楽しく仕事するために編
・人と会おう
開催側にもまわってみよう
悪い人には気をつけよう
・セミナーの内容をシェアしよう
アウトプットすることで、知識が定着する
・役立つ本や記事もシェアしよう
・なかしまあ先生の講座をすすめよい
・仲間の情熱を信じよう
覚えていますか？はじめてＨＴＭＬで何かを作った日のことを
自分がだめになりそうな時こそ、チームメンバーの作る力を信じてみよう
・Google HTML/CSS Style Guideより おわりのことば
一貫性を保て
・基本のルールを意識しながら仲間と（ごめん、以下自分のメモが読めん・・・＾＾；）
■ＬＰＩ Ｊａｐａｎからあいさつ
・せまんくん、１０こ、あげます（はやいものがち）。
■ＷｅｂＡＰＩでつくるロボットライフ
・自己紹介
ゲスト：コミュニケーションロボット ２つ
・第三次ロボットブーム
第一次ロボットブーム １９７０ｓ～１９９１ 産業用ロボット
→バブル崩壊で終了
第二次ロボットブーム ２０００ ～２００８ 民生用ロボット
ＡＳＩＭＯ，ＡＩＢＯなど→リーマンショックで崩壊
第三次ロボットブーム サービス分野におけるロボット
Ｊｉｂｏ：クラウドファウンディング
・いままでのブームとの違い
インターネット通信 環境の発達
クラウドの登場・・・Ｗｅｂエンジニア参入可能
Ｍａｋｅｒブーム ＬＰＣ1768，えじそん、Ａｒｄｕｉｎｏ、らずぱい
Ｊａｖａｓｃｒｉｐｔのハード進出
Johnny-five,cyron-js,mraa→ネイティブコードのラッパー
TESSEL,KinomaCreate Espruino
デバイス連携に相性のいいＷｅｂＡＰＩ
→クラウドの登場
・開発環境もクラウド
データ取得
解析してデータを返す
デバイスの制御
ロボットの制御
クラウドに情報を挙げて処理
ロボットを介してデバイス制御、ロボットに返す
セキュリティ化（見守りロボット）
例１：コミュニケーションロボット ＢＯＣＣＯ
例２：そうじロボット だいそん eye 360 ,COCOROBO
・便利なＡＰＩがたくさん登場
画像認識ＡＰＩ
Ｄｏｃｏｍｏ画像認識ＡＰＩ
Microsoft Project Oxford
Ｗａｔｓｏｎ
音声認識
Ｄｏｃｏｍｏ音声認識ＳＤＫ
Google Speach API
Ｍｉｃｒｏｓｏｆｔ Ｏｘｆｏｒｄ ＳｐｅａｃｈＡＰＩ
音声合成
Ｄｏｃｏｍｏ 音声合成
シナリオ対話ＡＰＩ
Twillo（とうーりお）
ＩｏＴ制御ＡＰＩ ＣＯＣＯＲＯＢＯ ＡＰＩ
・Ｗｅｂ標準のＡＰＩ
マルチメディア ＷｅｂＭＩＤＩ，ＷｅｂＲＴＣ，ＷｅｂＳｏｃｋｅｔ
デバイスＷｅｂＡＰＩコンソーシアム
・だけど、自分好みのデバイス制御を簡単にしたくないですか？
ＩＲ Ｋｉｔ→赤外線→いろいろ（エアコンとか操作）
・手順
デバイス情報の取得
ＩＲ ＫＩＴのＩＰアドレスを取得
赤外線情報の取得
データ送信
・外から操作
Ｃｌｉｅｎｔ Ｔｏｋｅｎ情報
Ｄｅｖｉｃｅ ＩＤとＤｅｖｉｃｅ Ｋｅｙ
データ送信
・Ｒ２Ｒ（ロボット ツー ロボット）
・ＷｅｂＡＰＩ
入出力開発しなくていい
マルチプラットフォーム
再利用
・クラウド上での開発環境
再利用 ＲＯＳ：Ｕｂｕｎｔｕほぼ一択
Ｒｅｎｖ：連舞（れんぶ）
・ロボット
Ｘデバイス
Ｘ万能
○コミュニケーションの対象
○失敗ゆるせる
Ｘ便利だから
○愛情持てるから
■ＨＴＭＬ５とその先 新技術は「使える」のか
・自己紹介
ＥＣＭＡ２６２ （エディション）５．１ 勉強会
・はじめに
ＨＴＭＬ５
ＨＴＭＬの仕様としてのＨＴＭL5
ＷｅｂテクノロジーのパラダイムとしてのＨＴＭＬ５
・レガシーなＷｅｂ
リクエスト→レスポンス→画面遷移
・モダンなＷｅｂ例
ＡＰＩ→シングルページＷｅｂアプリケーション→非同期通信
・ＨＴＭＬ５
狭義のＨＴＭＬ５ まわりにいろいろ 全体でモダンなＷｅｂ
・仕様の進化
What WG Living Standard
W3C HTML5.1
W3C HTML/next より先へ
Javascript
ECMAScript 2015 ６月標準化
ECMAScript 2016 ＥＣＭＡ６
CSS
W3C css3/css4
・実装状況
HTML5 http://caniuse.com/#cats=HTML5
１００％はない。Opera miniは機能制限版
Javascript
ECMAScript 5はほぼ１００％
ECMAScript ６はまだまだ マイクロソフトのedgeがいい成績
kangax.github.io
・ユースケース
Web site
Gmail
YouTube(HTTP2→edge,chrome,Firefoxが対応）
outlook.com
企業サイト
ＰＣ用ローカルアプリケーション
Electron
スマートフォンアプリ
Firefox OS
Real Time Communication(WebRTC)
Twillo,SkyWay
Serverside Javascript node.js
・まとめ
ＨＴＭＬ５はＷｅｂテクノロジーのパラダイム
ＨＴＭＬ５は永久進化する
ＨＴＭＬ５はあなたのそばで活躍している
■これからのモバイルＷｅｂと最新動向
・自己紹介
・モバイルアプリ隆盛の時代、ネイティブシフト
アプリストアにおける登録アプリの数 １５０万アプリ
これからもどんどん Google Play 倍々で
ネイティブアプリ ８６％
消費時間 ゲーム３２％、ソーシャル２８％、ブラウザ１４％
・Facebook ＨＴＭＬ５に賭けたのは失敗
ゲーム業界はネイティブシフトの動き顕著
・ネイティブアプリはゼロサムゲーム
ランキング上位に入らなければ儲からない
インストールしているアプリの平均３６
過去３０日に使用したアプリの数８
８０％のアプリが３日で使われなくなる
・ネイティブアプリの問題
宣伝広告費の増大
ブースと広告に挙げられるランキング操作等
プラットフォームに依存するリスク
審査でりじぇくと
リリースに時間かかる
手数料
利用率、離脱率
・Ｗｅｂの良いところを取り込もうとする流れ
ランキング外
→Ｗｅｂからの検索などでアプリへの導線をよりスムーズに
・３つの手法
Deeplink/Universal link
下層のほかのページに飛ぶ→androidマニュフェストに書く
App Indexing
アプリのコンテンツを検索結果に表示
AppLinks
Facebook アプリの中からアプリ起動→アプリ連携
ＷｅｂはＵＲＩで自由に移動
同じようにアプリも自由に往来
→In-App Browserのように逆に囲い込もうとする流れも
・モバイルＷｅｂの最新動向
Ｗｅｂ ＶＳ ネイティブ
従来から劣っていると言われた３つのポイント
ＵＸ（主にスピード／パフォーマンス）
オフライン
リエンゲージメント
Ｗｅｂのスピードパフォーマンスが遅いというのは、過去の話
差はかなり縮まっている
ネイティブのよいところを取り込もうとする流れ
ＵＸ：ホーム画面の追加、インストール花＾表示、フルスクリーン、テーマ適用
WebAppマニュフェスト―Ｗ３Ｃで標準
オフライン／リエンゲージメント
：Service Worker（オフライン動作／プッシュ通話によりリエンゲージメント）
・サービスワーカー
Ａｐｐキャッシュに代わる仕様
ローカルプロキシとしてバックグラウンドプロセスで動作
いまのところhttps上でのみ動作
個別ファイルごとにキャッシュするかＪＳで制御
・サービスワーカーの３つの機能
offline
Push Notification
バックグラウンドSync
Ｗｅｂさーばー⇔サービスワーカー ｜ サーバー
↑↓
キャッシュ
オフライン時
サービスワーカー非対応ブラウザ：いままでと同じ
・デモの例
Google I/O 2015
Push Demo
事例
Facebook
Pinterest
Medium
Google I/O
今後
Sream APIの追加
サービスワーカーの相互連携
・ハイブリッドアプリの動向
blink
crosswalk
react native
electron
Ｊａｖａｓｃｒｉｐｔ高速
web Assembly asm.js
SIMD.js
・まとめ
ネイティブアプリとモバイルＷｅｂはクルマの両輪
HappyBirthday HTML5!
https://atnd.org/events/71001
を聞いてきたので、その内容をメモメモ
（表題の講演は、真ん中あたりにある）
■あいさつ
注意事項
人脈づくり
■ＨＴＭＬ５はたのしいよ！
・ＨＴＭＬ５で自己紹介
Ｖｉｄｅｏ，ａｕｄｉｏ
ＣＳＳ
Ｊａｖａｓｃｒｉｐｔ
・ＨＴＭＬ５誕生日 ２０１４年１０月２８日（Ｗ３Ｃ勧告）
・広義のＨＴＭＬ５
狭義のＨＴＭＬ５
ＣＳＳ３（デザイン）：リッチ変形、アニメ、３Ｄ
Javascript（プログラム）：計算，ＧＰＳ，ＡＰＩ
・editable属性
・こんなこともできるＨＴＭＬ５
・すくー？シンセサイザー
・３次元ＣＳＳ３ preserve-3D,perspective
アニメーション linear,rotate
・３次元ＣＳＳをJavascriptで操作 divで回転
■いまさら聞けない超基本 チームで使うコーディングルール
・自己紹介：
５０社落ちまくり、面接までたどり着けない。子供はどうするんですか？
東京アプリワークショップに参加した
実は初登壇
・コーディング自己流だと、後輩が入ってきたら焦る
・テーブルレイアウトって、もう使わないんですね・・・使わないです
１．コーディングこれはだめ編
・テーブルレイアウト、だめです
要素を追加するのすごい大変
柔軟性ない
・テーブルレイアウトっぽいレイアウトもだめです
→背景が１枚の絵とか
・安易にheightを指定しちゃだめです
余白はmarginやpaddingで調整
・安易にabsoluteを使っちゃだめです
ループ等、動的な仕様をつけ足せないのでだめ
・ＩＤ／クラス名を色名にしちゃダメです
light-pink；やっぱり青でとか言われたら終わる
・自分ルールの記号や番号にするのもだめ
→番号付けはガイドラインをつける
・デバイス幅が狭いとき、中身が飛び出るコーディングはだめです
・ＨＴＭＬファイル内にＣＳＳを記述してはだめです
ＣＳＳの優先度がわからなくなる。!importantを使うはめになる
・大きなimageはだめです（ＣＳＳで小さくするのは）
ページが重くてユーザーが離脱するのでだめ
２．コーディングこうしよう編
・コメントはいっぱいつける
Ｈｅａｄ内のコメントは割と重要
・ＩＤ、クラス名は意味のある英単語にする
・ＨＴＭＬの意味が破たんしないよう、構造を考えてマークアップする
・ユーザーの行動を想像しながら、ページ全体の仕様を細部まで予測する
３．もっと楽しく仕事するために編
・人と会おう
開催側にもまわってみよう
悪い人には気をつけよう
・セミナーの内容をシェアしよう
アウトプットすることで、知識が定着する
・役立つ本や記事もシェアしよう
・なかしまあ先生の講座をすすめよい
・仲間の情熱を信じよう
覚えていますか？はじめてＨＴＭＬで何かを作った日のことを
自分がだめになりそうな時こそ、チームメンバーの作る力を信じてみよう
・Google HTML/CSS Style Guideより おわりのことば
一貫性を保て
・基本のルールを意識しながら仲間と（ごめん、以下自分のメモが読めん・・・＾＾；）
■ＬＰＩ Ｊａｐａｎからあいさつ
・せまんくん、１０こ、あげます（はやいものがち）。
■ＷｅｂＡＰＩでつくるロボットライフ
・自己紹介
ゲスト：コミュニケーションロボット ２つ
・第三次ロボットブーム
第一次ロボットブーム １９７０ｓ～１９９１ 産業用ロボット
→バブル崩壊で終了
第二次ロボットブーム ２０００ ～２００８ 民生用ロボット
ＡＳＩＭＯ，ＡＩＢＯなど→リーマンショックで崩壊
第三次ロボットブーム サービス分野におけるロボット
Ｊｉｂｏ：クラウドファウンディング
・いままでのブームとの違い
インターネット通信 環境の発達
クラウドの登場・・・Ｗｅｂエンジニア参入可能
Ｍａｋｅｒブーム ＬＰＣ1768，えじそん、Ａｒｄｕｉｎｏ、らずぱい
Ｊａｖａｓｃｒｉｐｔのハード進出
Johnny-five,cyron-js,mraa→ネイティブコードのラッパー
TESSEL,KinomaCreate Espruino
デバイス連携に相性のいいＷｅｂＡＰＩ
→クラウドの登場
・開発環境もクラウド
データ取得
解析してデータを返す
デバイスの制御
ロボットの制御
クラウドに情報を挙げて処理
ロボットを介してデバイス制御、ロボットに返す
セキュリティ化（見守りロボット）
例１：コミュニケーションロボット ＢＯＣＣＯ
例２：そうじロボット だいそん eye 360 ,COCOROBO
・便利なＡＰＩがたくさん登場
画像認識ＡＰＩ
Ｄｏｃｏｍｏ画像認識ＡＰＩ
Microsoft Project Oxford
Ｗａｔｓｏｎ
音声認識
Ｄｏｃｏｍｏ音声認識ＳＤＫ
Google Speach API
Ｍｉｃｒｏｓｏｆｔ Ｏｘｆｏｒｄ ＳｐｅａｃｈＡＰＩ
音声合成
Ｄｏｃｏｍｏ 音声合成
シナリオ対話ＡＰＩ
Twillo（とうーりお）
ＩｏＴ制御ＡＰＩ ＣＯＣＯＲＯＢＯ ＡＰＩ
・Ｗｅｂ標準のＡＰＩ
マルチメディア ＷｅｂＭＩＤＩ，ＷｅｂＲＴＣ，ＷｅｂＳｏｃｋｅｔ
デバイスＷｅｂＡＰＩコンソーシアム
・だけど、自分好みのデバイス制御を簡単にしたくないですか？
ＩＲ Ｋｉｔ→赤外線→いろいろ（エアコンとか操作）
・手順
デバイス情報の取得
ＩＲ ＫＩＴのＩＰアドレスを取得
赤外線情報の取得
データ送信
・外から操作
Ｃｌｉｅｎｔ Ｔｏｋｅｎ情報
Ｄｅｖｉｃｅ ＩＤとＤｅｖｉｃｅ Ｋｅｙ
データ送信
・Ｒ２Ｒ（ロボット ツー ロボット）
・ＷｅｂＡＰＩ
入出力開発しなくていい
マルチプラットフォーム
再利用
・クラウド上での開発環境
再利用 ＲＯＳ：Ｕｂｕｎｔｕほぼ一択
Ｒｅｎｖ：連舞（れんぶ）
・ロボット
Ｘデバイス
Ｘ万能
○コミュニケーションの対象
○失敗ゆるせる
Ｘ便利だから
○愛情持てるから
■ＨＴＭＬ５とその先 新技術は「使える」のか
・自己紹介
ＥＣＭＡ２６２ （エディション）５．１ 勉強会
・はじめに
ＨＴＭＬ５
ＨＴＭＬの仕様としてのＨＴＭL5
ＷｅｂテクノロジーのパラダイムとしてのＨＴＭＬ５
・レガシーなＷｅｂ
リクエスト→レスポンス→画面遷移
・モダンなＷｅｂ例
ＡＰＩ→シングルページＷｅｂアプリケーション→非同期通信
・ＨＴＭＬ５
狭義のＨＴＭＬ５ まわりにいろいろ 全体でモダンなＷｅｂ
・仕様の進化
What WG Living Standard
W3C HTML5.1
W3C HTML/next より先へ
Javascript
ECMAScript 2015 ６月標準化
ECMAScript 2016 ＥＣＭＡ６
CSS
W3C css3/css4
・実装状況
HTML5 http://caniuse.com/#cats=HTML5
１００％はない。Opera miniは機能制限版
Javascript
ECMAScript 5はほぼ１００％
ECMAScript ６はまだまだ マイクロソフトのedgeがいい成績
kangax.github.io
・ユースケース
Web site
Gmail
YouTube(HTTP2→edge,chrome,Firefoxが対応）
outlook.com
企業サイト
ＰＣ用ローカルアプリケーション
Electron
スマートフォンアプリ
Firefox OS
Real Time Communication(WebRTC)
Twillo,SkyWay
Serverside Javascript node.js
・まとめ
ＨＴＭＬ５はＷｅｂテクノロジーのパラダイム
ＨＴＭＬ５は永久進化する
ＨＴＭＬ５はあなたのそばで活躍している
■これからのモバイルＷｅｂと最新動向
・自己紹介
・モバイルアプリ隆盛の時代、ネイティブシフト
アプリストアにおける登録アプリの数 １５０万アプリ
これからもどんどん Google Play 倍々で
ネイティブアプリ ８６％
消費時間 ゲーム３２％、ソーシャル２８％、ブラウザ１４％
・Facebook ＨＴＭＬ５に賭けたのは失敗
ゲーム業界はネイティブシフトの動き顕著
・ネイティブアプリはゼロサムゲーム
ランキング上位に入らなければ儲からない
インストールしているアプリの平均３６
過去３０日に使用したアプリの数８
８０％のアプリが３日で使われなくなる
・ネイティブアプリの問題
宣伝広告費の増大
ブースと広告に挙げられるランキング操作等
プラットフォームに依存するリスク
審査でりじぇくと
リリースに時間かかる
手数料
利用率、離脱率
・Ｗｅｂの良いところを取り込もうとする流れ
ランキング外
→Ｗｅｂからの検索などでアプリへの導線をよりスムーズに
・３つの手法
Deeplink/Universal link
下層のほかのページに飛ぶ→androidマニュフェストに書く
App Indexing
アプリのコンテンツを検索結果に表示
AppLinks
Facebook アプリの中からアプリ起動→アプリ連携
ＷｅｂはＵＲＩで自由に移動
同じようにアプリも自由に往来
→In-App Browserのように逆に囲い込もうとする流れも
・モバイルＷｅｂの最新動向
Ｗｅｂ ＶＳ ネイティブ
従来から劣っていると言われた３つのポイント
ＵＸ（主にスピード／パフォーマンス）
オフライン
リエンゲージメント
Ｗｅｂのスピードパフォーマンスが遅いというのは、過去の話
差はかなり縮まっている
ネイティブのよいところを取り込もうとする流れ
ＵＸ：ホーム画面の追加、インストール花＾表示、フルスクリーン、テーマ適用
WebAppマニュフェスト―Ｗ３Ｃで標準
オフライン／リエンゲージメント
：Service Worker（オフライン動作／プッシュ通話によりリエンゲージメント）
・サービスワーカー
Ａｐｐキャッシュに代わる仕様
ローカルプロキシとしてバックグラウンドプロセスで動作
いまのところhttps上でのみ動作
個別ファイルごとにキャッシュするかＪＳで制御
・サービスワーカーの３つの機能
offline
Push Notification
バックグラウンドSync
Ｗｅｂさーばー⇔サービスワーカー ｜ サーバー
↑↓
キャッシュ
オフライン時
サービスワーカー非対応ブラウザ：いままでと同じ
・デモの例
Google I/O 2015
Push Demo
事例
Medium
Google I/O
今後
Sream APIの追加
サービスワーカーの相互連携
・ハイブリッドアプリの動向
blink
crosswalk
react native
electron
Ｊａｖａｓｃｒｉｐｔ高速
web Assembly asm.js
SIMD.js
・まとめ
ネイティブアプリとモバイルＷｅｂはクルマの両輪
アクセス
トータル
ランキング
