最近のWeb関連技術の動向あれこれ

5,411 views

Published on

11月CC研で話した内容です。
ほぼ箇条書きで並べただけなので、口頭でのフォローが無いと誤解されるかも。。参考程度にとどめておいてください。

Published in: Technology

最近のWeb関連技術の動向あれこれ

  1. 1. 最近のWeb関連技術の動向 あれこれ 2014/11/21 CC研究部会 高岡大介 Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 1
  2. 2. Agenda • Concept • Architecture • Back-end Technology • Front-end Technology • Development • Programming Language/Paradigm • Next Spec Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 2
  3. 3. Concept 最近のWeb開発の考え方 • モバイルファースト • 数年前から • オフラインファースト • 昨年くらいから ⇒ モバイル中心の考え方 Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 3
  4. 4. (Mobile) Architecture Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 4
  5. 5. MEAP • Mobile Enterprise Application Platform • 3つ以上のモバイルアプリをサポートしている • 3つのモバイル用OSをサポートしている • 少なくとも3つのバックエンドのデータソース(既存システム とか)と連携が必要 • Product • IBM Worklight • SAP Mobile Platform • Kony • Sencha Space Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 5
  6. 6. MADP • Mobile application development platform • 2013年からガートナーがまた言い出した。 • MEAPに加え、アプリケーションの開発、配布、 保守管理までを含む。 • 参考: モバイルアプリ開発を効率化する切り札「MEAP」と「BaaS」を徹 底解説 http://businessnetwork.jp/Detail/tabid/65/artid/3372/ Default.aspx Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 6
  7. 7. BYOD(Bring Your Own Device) が一つのきっかけ。 バラバラの端末でも業務システムを 使えるようにするためのアーキテクチャ。 Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 7
  8. 8. ところが、 BYODは終わったという話しも Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 8
  9. 9. • アップルとIBMが提携「BYOD」市場は終焉へ http://diamond.jp/articles/-/56772 • さようならBYOD、企業が気付いた「会社がスマホを 支給した方が何かと便利」http:// techtarget.itmedia.co.jp/tt/news/1408/15/ news03.html デバイスやOSが統一されると、MEAPとか不要? ⇒ まぁケースバイケースですね Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 9
  10. 10. Back-end Technology Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 10
  11. 11. (X)aaS • IaaS、PaaS、SaaS と色々あります • 次は ⇒ (m)BaaS!? • Mobile Backend as a Service • 主な提供プレイヤー • Parse(facebook傘下) • Kinvey(Google提携) Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 11
  12. 12. 抽象的なサービス/APIで疎結合が Backendの主流になるか? と、思いきやそうでもない。 やっぱり自前でインフラ用意したい Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 12
  13. 13. Infrastructure As Code • インフラをコードで表す。 • Chef, Puppet, Vagrant • Immutable Infrastructure • 自動化、バージョン管理、複製、再現性 Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 13
  14. 14. Docker • Docker • コンテナ型の仮想化ソフトウェア • マシン仮想化ではなくプロセス仮想化。chrootに近い • 仮想マシンと比べて軽量高速 • 続々と対応 • Google Compute Engine、Google App Engine • Amazon EC2 Container Service • Microsoft AzureとWindows Server も対応 Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 14
  15. 15. Front-end Technology Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 15
  16. 16. フロントエンド開発のツール • CSSプリプロセッサ • Sass(Less)、Compass • AltJS • CoffeeScript, TypeScript, Hexe, Dart, ClojureScript,,, • パッケージ管理: • bower • モジュールローダー • requireJS、CommonJS, Browserify • テスト: • jasmine、PhantomJS、karma • タスクランナー • Grunt, gulp, broccoli • ジェネレーター • Yeoman Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 16
  17. 17. JSフレームワーク • MV* フレームワーク • Backbone • Knockout • AngularJS • Ext、Ember、etc • Angular本命かと思いきや最近disられ気味。 • ⇒ Vue.js、React Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 17
  18. 18. 開発環境 • LAMP から MEAN スタックへ • MongoDB • Express • AngularJS • NodeJS まだケースバイケース。 • そもそもレイヤー合ってない。OSレイヤーどこいった Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 18
  19. 19. Programming Language/ Paradigm Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 19
  20. 20. 関数型言語 • 最近、関数型が人気(Scala, Haskel、Ocaml、Erlang) • エアバスはOcamlで飛んでいる。 • Facebook、Twitter でErlang採用(一部) • 特徴 • ファーストクラス関数、高階関数 • Immutable(副作用なし) • 参照透過性 • 型安全、宣言的、遅延評価 • バグが少ない(入りにくい)、保守性など • Java8 でもエッセンスを取り込み(ストリーム+ラムダ式) Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 20
  21. 21. リアクティブ • Reactive Programming • エクセルとかの例 • 今のとこ要するにデータバインディング • View - (View)Modelのバインド • AngularJS、Vue.jsなど • React Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 21
  22. 22. FRP • Functional Reactive Programming • リアクティブを関数的に • Model自体をストリームでリアクティブに扱う。 • http://latentflip.com/bacon-talk-realtimeconfeu/ • ライブラリなど • RxJS • BaconJS • Elm Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 22
  23. 23. Next Spec Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 23
  24. 24. Web Components • 要素 • Custom Elements • Shadow Dom • Templates • Imports • Decorators • 現状の実装 • Polymer • (余談: Material Design) Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 24
  25. 25. HTML5.1 • 先日、HTML5がようやく勧告に! • HTML5で入りきらなかったものが5.1に。入るかもしれないのを一部紹 介 • Service Workers • ネットワーク割り込みでキャッシュ • http://html5experts.jp/myakura/8365/ • http://html5experts.jp/iwase/7006/ • Navigation Controllerから改名 ⇒ Web Workerと紛らわしいから元のでよかったのに。。。 • Canvas 2D Context Level2 • WebGL 2 Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 25
  26. 26. ES6/ES7 • ECMA Script 6/7 • アロー記法 • ブロックスコープ • 分割代入 • クラスとモジュール • iterators • generator(yield) • Object.observe • Promise • WeakMap/Set Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 26
  27. 27. CSS • CSS Regions/Exclusions • 任意の形状にコンテンツを流し込み。排他。 • CSS4 • セレクタの拡張。親指定など多数 • メディアクエリの追加修正 Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 27
  28. 28. おわりに • やっぱりモバイル大事 • iOS8でWebGLサポート。3D、VRが本格的にWebにくる。 • 一部よりもどしが起きている。歴史は繰り返す • BaaS ⇒ Docker • Angular ⇒ React(E4X!?) • OOP ⇒ Functional(Lisp!?) • 色んなレイヤで仮想化が進む。 Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 28
  29. 29. http://aitc.jp https://www.facebook.com/aitc.jp ハルミン AITC非公式イメージキャラクター Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 29

×