Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

8.026 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

最近の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

×