[CSS nite in Kyoto]セッション３：Webプログラミングの今とこれから

CSS nite in Kyoto vol.3まとめ。HTML5でハード・サーバー・アプリすべて動作させたアプリケーションのサンプルや、今後のWebアプリケーション、WoTの展望などについて紹介されていました。

この記事について

CSS nite in Kyoto参加レポートその５です。

セッション中にとったメモに、URLや個別に質問して頂いた情報などを付け加えた内容となっています。

公開されているスライドについても見つかり次第記事内に追加予定です。

その他のまとめ

セッション２：コンテンツマーケティングは恋のライセンス
 GoogleAnalytics&KH coderを活用してSEOに使える「共起語」を見つけよう
 セッション４：Evernoteでも採用されたMaterial Desginの概要と導入方法
 セッション５：UIデザイナーとは何者か？ | WP-kyoto

バスタイムフィッシュ村岡正和さん

3行で

HTML5はハードも動かす
これから注目を浴びるのはWoT（Web of Things）
だからこれからはウェアラブルって言ってるじゃん！

ハイパー宣伝タイム

日本ウェアラブルデバイスユーザー会みんな入ろう！

HTML5最終勧告、別に凄くない

「HTML5」が示す言葉の範囲はとてつもなく広く、ウェブストレージなどまだまだ仕様が定まりきっていない部分も存在する。

そして何よりも「HTML5.1」が既に作られ始めている。

そもそもHTML5って？

HTML5=richでOpenなWebアプリケーションを作成するための技術の総称

HTML5や関連ツールの発達で、「お金が無くても作りたいものを作れる」世界になってきた。
その一方で参入障壁が下がった分、技術力での競争力が求められる「厳しい市場」になっているのも事実。

HTML5を使った凄いサイト4選

最近注目を集めているHTML5系技術

Searvies Workers

Webページのバックグラウンドで動作させることができる、イベントドリブンなWorker技術。
様々な処理を「ページ処理とは別に、非同期で実行する」ことが可能になる。

何ができる？

「オフライン時・オンライン時で表示するページ・内容を出し分ける」ことができる。
->「オフラインだからページが真っ白になる」ということが無くなる。

参考になる記事

Web Component

これはデザイナーも知っておくべき！

「独自のHTMLタグ」を定義し、HTMLで使用することができる技術。
非対応ブラウザが多いが、「Polymer」を使うと先取り可能。

並行して覚えたい「Material Desgin」

Polymerは「Material Desgin」でデザインされている。

Googleが2014年夏に発表したデザインガイドラインで、Androidアプリに限らず多くのサービスで採用され始めている。

Introduction – Material design – Google design guidelines

デザインの共通規格を設けることで、情報・コンテンツへのアクセスしやすさを向上させることが狙いでは無いか・・・とも言われている。

Web Starter Kit — Web FundamentalsでMaterial Desginだけ使うことも可能。

更に注目したいの「WoT(Web of Things)」

多くの場面で使われる「Web技術」

スマートフォン・タブレット

258,4000,000：スマートフォン端末
82,600,000:PC
50,430,000:TV
47,600,000:タブレット端末

2013年、PC/TVよりもスマートフォン端末は出荷された。

ブラウザ・メールだけでなく、ネイティブアプリでもHTML5は使われ始めている。

HTML5で作られたOSも登場

Firefox OS
カメラ・電話などもすべてHTML5で動くプラットフォーム

TVでもHTML5

PanasonicがfirefoxOS搭載のTVディスプレイを開発中。
Mozillaとパナソニックが次世代スマートテレビ向けオープンプラットフォームの開発・推進に合意 | プレスリリース | ニュース | パナソニック企業情報 | Panasonic
Chromecast:ChromeOSを使っているので、HTML5が動作する
Matchstick:ChromeCastのfirefoxOS版
TV Manager API:チューナーをJavaScriptで動かすためのAPI

車にもHTML5！

車載デバイスQMX cat 2やTizenなどでもHTML5は動作する。

Automotive Grade Linux
HTML5で作られている。
Vehicle Information APi

そしてウェアラブル！

GoogleGlass:HTML5で通知を出せる
Timeline Cards inserts
Leap Motion(モーションキャプチャ）
the magic of MYO(ウェアラブル)
pebble(スマートウォッチ)

これからはウェアラブル！

だから日本ウェアラブルデバイスユーザー会みんな入ろう！

WoTとIoTの違いは？

通信プロトコルがHTTP/HTTPSなどならばWoT、それ以外ならIoT。

IoTの中にWoTがあるイメージ。

JavaScriptでハードウェアも操作可能に！

下２つはJavaScriptでしか動作しないハード。

作ってみた：猫のトイレ通知アプリケーション

人感センサーを活用して猫がトイレに出入りした様子を管理するアプリケーション。
クラウドで情報を管理して、ステータスが変わるとプッシュ通知を送信する。

ハード・サーバー・ソフト全部JavaScriptで組み上げた！

中にはWeb Audio APIを使用して「音の振動で動く機械」を組み上げた人も・・・

だからこれからはウェアラブルっていってるじゃん！

日本ウェアラブルデバイスユーザー会にみんな入ろう！

まとめ

HTML5のモチベーションは「既存のあらゆる技術を取り込んでWWWで動作させること」ではないかと思う。

ブラウザ・アプリの中にとどまらず、「One Web」を目指す。