CSS niteEvent

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

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

広告ここから
広告ここまで

この記事について

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

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

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

その他のまとめ

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

CSS Nite in KYOTO, Vol.3「Web制作作業最前線」
バスタイムフィッシュ 村岡正和さん

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

車にもHTML5!

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

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

そしてウェアラブル!

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

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

WoTとIoTの違いは?

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts