セッション
6トラック30セッションで開催します。
なお、セッション時間や内容は予告なく変更することがあります。ご了承ください。
タイムテーブル
セッション一覧
基調講演
基調講演
吉川徹、えーじビデオメッセージ
東京電機大学学長 安田浩教授メッセージ
東京電機大学総合研究所特命教授・サイバーセキュリティ研究所長 佐々木良一
https://cysec.dendai.ac.jp
サイバーセキュリティのより一層の充実は、社会を安心・安全・豊かにするための喫緊の課題です。東京電機大学ＣｙＳｅｃプログラムは、社会ニーズに応えるべく、社会人向けにサイバーセキュリティ意識の高揚を先導する、高度サイバーセキュリティ専門家を大学院レベルの授業により養成します。ご興味がある方、ご賛同頂ける方のご連絡をお待ちしております。IoTとWEB技術が支える社会・大学としての人材育成の役割
岩井将行カンファレンススポンサーによるライトニングトーク大会
カンファレンススポンサーたちが繰り広げる渾身のLT大会ッ！Web技術者に対する、企業たちからの魂の叫びを聞けッッ！！
会社の看板を背負った猛者達による、笑いあり涙ありの5分間を見逃すなァッッッ！！！！
株式会社 ディー・エヌ・エー／株式会社サイバーエージェント ／株式会社ドリコム／日本事務器株式会社／グレープシティ 株式会社／株式会社 日本経済新聞社
先着240名で締め切ります。（特典付き）
ZOZOのグローバルECのフロントエンドアーキテクチャ設計
プライベートブランド「ZOZO」のグローバルECサイトを新規に立ち上げるにあたり、2018年の今考えた、フロントエンドから見た理想のアーキテクチャと現実としてどのようなアーキテクチャを採用したかについてお話します。
「それ、AMPで作りませんか？」--- RichでResponsiveかつ**PWA**なAMPの作り方
- AMP
- PWA
2015年より多くのウェブサイトで使われてきたAMPですが、時が経つに連れ、その役割も変わってきました。最初はできることも限られていましたが、今や豊富なWeb Componentライブラリとパフォーマンスを最適化するランタイムを活用し、Webサイト全体をAMP化し、さらには「AMP as PWA」を実践する事例も増えてきています... ひょっとするとあなたのサイトはAMPで十分かもしれませんよ？当セッションでは、AMPの最新情報と共に、主にカノニカルでPWAなAMPの使い方を取り上げたいと思います。奮ってご参加ください！
Yahoo! JAPANアプリ上で動くWebVIewサービス開発〜Web技術で動くライブクイズ「ワイキュー」〜
- WebView
- React
- TypeScript
Yahoo! JAPANアプリではWebViewによって表示されるページやサービスがいくつもあります。
本セッションでは9/26から配信が開始したライブクイズ「ワイキュー」をもとに、ネイティブアプリとWebアプリを共存させる開発スタイルについてご紹介します。
アプリ内WebViewによる開発のメリット・デメリット、アプリとの情報の受け渡し、WebアプリとしてのReact/Redux/TypeScript開発について知見などについてお話したいと思います。
コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践
- WebAssembly
WebAssembly(以下Wasm)がモダンブラウザで使えるようになってから一年以上
経過しました。Wasmの登場でJSを書かなくても良くなるのでは、と思っていた時期が私にもありましたが、そんなことにはなりませんでした。しかし言語好きとしては、もうちょっとターゲット言語として広く使われて欲しいところです。
この発表では、まずWasmをターゲット言語とするプログラミング言語を作った経験を共有します。WEBで使う汎用プログラミング言語の設計について簡単に紹介し、TypeScriptを使ったコンパイラ実装について話します。その過程でWasmバイトコードの仕様と、AssemblyScriptなどの他の言語の実装もリファレンスとして紹介します。
そして後半は、そのプログラミング言語をLINEでの業務において実践した内容について紹介します。パフォーマンスについてだけでなく開発経験も含め、Wasmのターゲット言語としての可能性について話します。
HTTP の今と未来 ー BBR, HTTP/2, QUIC の基礎から 5G 試験ネットワークでのブラウザベース評価試験まで
- HTTP/2
- QUIC
お馴染みの "https://" が今まさに生まれ変わろうとしています。旧来の HTTP とそれを支える TCP はインターネットの誕生以来大きな変化なく使われていましたが、ネットワークの複雑化と高速化に対応するため抜本的な変更が行われています。
2015 年の HTTP/2 を始めとして BBR, TLS 1.3 そして間もなく IETF QUIC と、従来の HTTP とは大きく異なる通信が Web を支えるようになり、その通信環境もモバイルが中心となりましたが、現在のLTEと比較し更なる大容量・低遅延・多数接続を実現する5Gが来年以降導入されていきます。
最新のプロトコルと輻輳制御の基礎知識から「HTTP の今」を知り、MEC など 5G 時代の新しいネットワーク構成や、ソフトバンクの 5G x IoT スタジオを利用した 5G 実ネットワーク環境での評価試験を踏まえて「HTTP の未来」を考えてみましょう。
Web サービスの開発・提供側ももう「HTTP から下は知らない」では済まされません。サーバのプログラムを変えるよりプロトコルや輻輳制御を変える方が大きいことも少なくありません。BBR や QUIC などの最新状況が知りたい方や 5G ネットワークと Web の関係に興味のある方は勿論、全ての Web エンジニアの皆さんのお越しをお待ちしております。
光を超えるためのパフォーマンスチューニング/アーキテクチャ
- Performance
PWAのオフライン技術や、キャッシュフレンドリーなアーキテクチャ設計によって如何にしてユーザー体験を改善していくか。将来的な仕様と、現実的なソリューションから考えていきます
FIDO認証によるパスワードレスログイン実装入門
- FIDO
- Web Authentication
FIDO（Fast IDentity Online）とは、パスワード認証への依存度を減らし、利便性と安全性を向上させる認証技術です。WebアプリケーションにFIDO認証を導入することで、パスワードレスな認証を実現することもできます。
当セッションでは、FIDOの概要やFIDO2プロジェクトを構成する技術仕様（WebAuthentication + CTAP）についてお話しします。
PWAの導入で得られた成果と見えてきた課題
- PWA
PWAに関するブログや事例を見聞きすることは増えてきましたが、実際にプロダクションに導入してみて得られた発見や運用面での課題について語られることは少なかったのではないでしょうか。
この発表では、PWAを導入して1年以上経つ日経電子版の開発を通じて得られた知見を交えつつ、PWAの現在地や今後の可能性について考えてけたらと思います。
Node.js まとめ
- Node.js
Node.js のv11とLTSであるNode.js v10で追加された機能について解説します。また、Node.jsのエコシステムがどう変わってきたか、今後はどうなるかについても予想を交えて回答します。
webpackのいままでとこれから
- webpack
今やフロントエンドの世界では、JavaScriptのmodule化が一般的となりました。
このセッションでは、多くの開発で使われているwebpackの歴史を辿りながら様々な仕組みを紹介していきます。
TypeScript Evolution
- TypeScript
エコシステムからちょっとニッチな機能まで、TypeScriptの魅力を語ります
2018年のHTMLやCSSやAPIとか
- Web Standards
常に新しい機能が提案・実装されているウェブですが、今年はどんな機能があったのでしょうか。HTML、CSS、APIそれぞれから紹介します。
Web Components のリアル
- Web Components
Web Components を活かしたコンポーネント開発のリアルな手法について。バニラのほか lit-html や lit-element などを使った手法にも言及します。
Web プラットフォーム再考 ～PWA のもたらす未来の光と影 ～
- PWA
Progressive Web Apps (PWA) により Web はネイティブアプリと同等の機能を手に入れます。PWA はアプリ ストアの割高な販売手数料や毎年の開発者登録費、不自由な審査も必要ありません。レガシーからリッチブラウザまで、あまねくユーザーにサービスを届けられる PWA はまさに新しい時代の解放されたアプリ プラットフォームと言えるでしょう。
このようにメリットばかりがとりざたされる PWA ですが、ほんとうにメリットばかりなのでしょうか?
このセッションではPWAがもたらす光と影について紹介します。
Angular 製 高機能グリッドのパフォーマンス問題に立ち向かった（ている）話 - IE11、お前もか・・・ -
- Angular
エンプラ向けWebアプリでは、大量データを扱いたいという要望が多く、パフォーマンスが非常に重要です。Angular Material では満たすことの難しい要望に対して、インフラジスティックスが開発している Ignite UI for Angular の高機能グリッドがどのようにしてハイパフォーマンスを実現しているかについて、お話しさせていただきます。
また、エンプラ向けWebアプリでは、今だに IE11 をサポートしなくてならないといった声が根強くあり、パフォーマンスを念頭において設計してあったグリッドでさえも IE11 上ではパフォーマンス問題として顕在化してきます。それにどのように立ち向かった（ている）かについて、共有させていただきます。"
持続可能なプロダクト開発のために - フロントエンドと新陳代謝の話
- Vue.js
Webフロントエンドの開発は日々進化していますが、徐々にそれも落ち着きつつあります。
それと同時に、 Web フロントの進化によって生まれた特有の事情とアーキテクチャ上の課題が私たちには残されました。
全ての要件の落としどころとなることが多いフロントの世界で、ソースコードの秩序を保ちつつ、持続可能なプロダクトを開発するためには何が必要か。
Vue.js による具体例を交えつつ、マイクロサービス文脈にも通ずる「捨てやすい」と「作り変えやすい」をテーマにした、フロントエンドのこれからについて考えてみます。
組み込みブラウザとMediaの仕様あれこれ
- Browser
ブラウザはPCやスマートフォンだけでなくテレビ、車載、ゲームと様々な機器に搭載されています。
最近は組み込みの世界でもMediaがホットトピックなので、組み込みでのMediaの使われ方やMSE/EME/DRMについて紹介します。
TechFeedのつくりかた 2018
- TypeScript
Angular, Ionic, Cordovaを用いて、iOS/Android/Web/Mobile Web環境すべてを1ソースで構築しているTechFeedというサービスの開発の裏側を語ります。
TechFeedは、エンジニア向けのニュースキュレーションアプリ。世界中から自動的に技術情報を収集し、ランキング、クラスタリング、パーソナライズを行っています。
開発のハマりどころや悩みから、TypeScriptを用いたサーバサイドとクライアントサイドのコード共有促進の取り組み、果ては会社経営をTypeScriptでプログラミングしてみるというチャレンジまで、経営陣全員エンジニアならではのスタートアップの中身を赤裸々に語ります。
Angularを使用したWebアプリケーションの最新設計手法
- Angular
Angularを使用したWebアプリケーションの設計手法について、周辺ライブラリやトレンドを踏まえてお話します。近年複雑化しつつあるWebアプリケーション開発に対して、コンポーネントやデータ構造をどのように設計し開発することができるか、最新の技術を紹介しながら解説します。
Reactにおけるパフォーマンスチューニング
- React
- Redux
- SPA
Web，特にReact/Redux製SPAにおけるパフォーマンス改善についてご紹介します．
開発者の環境と顧客の環境の違いに触れながら，各種ツールの特徴，利用方法を解説します．
また，実サービスにおける実例もご紹介します．
ブラウザでARとAIを動かした話
- AR
- AI
どうやったらブラウザ上でVRやARを動かせるのか？機械学習の推論させることができるのか？具体的な実装を交えてお話させていただきます。
これらの技術に興味があり、これから始めたい方の手助けになれば幸いです。
使い倒そうVisual Studio Code!
- Visual Studio Code
VOXELCANVAS：WebGLでのボクセルモデリングツール開発 ~ 開発ノウハウとブラジルの小学校で使ってもらえた話
- WebGL
趣味で開発を始めたWeb上で動作する3Dボクセルモデリングツール「VOXELCANVAS」を世界中の人に使ってもらうまで試行錯誤した苦労話をお話します。趣味で作り始めた技術デモからサービスまで昇華させていく過程を中心に、海外ユーザーへの対応や、クロスプラットフォームで動かすための対応，WebGL/PlayCanvasでの大量描画を実現するためのプロシージャル手法，Google maps APIがゲーム向けにリリースする前にゲーム利用した話なんかをさせていただきます。
あんずフォト：PlayCanvasでリッチアドコンテンツを開発して発信してみた
- WebGL
- PlayCanvas
WebGLゲームエンジンのPlayCanvasは、ゲームを作るだけのツールでは無く、最近流行りのインタラクティブ広告やリッチアドをスマートに構築することも可能です。
今回は実際にPlayCanvas運営事務局でTwitter Player Cardと組み合わせて開発したリッチアドコンテンツ「あんずフォト」を題材に、PlayCanvasでのインタラクティブな3D広告の作成手法の話をします。
デザイナー/エンジニアのそれぞれのワークフロー、Analyticsとの連携・効果測定、UX向上のためのアセット非同期ロード、3Dオブジェクト管理(メッシュ/ピボット/保存内容等)、アニメーション管理(ボーンアニメ/頂点アニメの特徴)、物理ベースレンダリング(PBR)を基としたマテリアルへの各種テクスチャの設定等のお話をさせていただきます。
PlayCanvasでリッチアド、始めてみませんか！
WebXR: Beyond WebGL
- WebXR
VR、AR、MRを統合したApi、WebXRがWebにやってきました。これによりWebは現実世界とつながり、ユーザーの体験は大きく変わります。このセッションではWebXR の基本やユースケース、コードに触れ、新しいWeb体験を紹介します。
デザインを共有するための言語化あれこれ
- Design
Webやアプリを世に出すにはエンジニアの力が欠かせませんが、競争が激しくユーザーの要望も高まっている現在、デザインは大きな差別化に繋がります。
同じモノ作りをする職業ですが、課題解決の取り組み方から評価の仕方まで違いがあります。その違いが誤解に繋がることもあれば、「よく分からない」と遠ざけてしまうことになります。お互いの力を合わせることでより良いプロダクトが生まれるはずですが、機会を失うことになります。趣向・感覚が違うという単純な話で片付けることはできません。
本セッションでは、エンジニアとデザイナーが協働していくためのアプローチと「相手に何かを伝える」というコミュニケーションの仕方を紹介します。
アクセシビリティ、はじめよう! 〜「できない」から脱出するための20（仮）のネタ🍣〜
- Accessibility
最近流行の兆しを見せつつある「アクセシビリティ」、取り組んでいますか?
まだ何もしていない、何をしていいかわからない、というあなたに向けて、アクセシビリティの基本的な考え方、取り組む理由などについてゆるーくトークしていきます。
これから取り組んでいく、周りの人を巻き込んでいく際のヒントになるかも?
困っている方からの質問も大募集します!
「セマンティクスの作り方、これまで、今、そして未来」
- HTML
- WAI-ARIA
- AOM
HTMLによるネイティブセマンティクスからWAI-ARIAによるセマンティクスの補強、そしてAOM（Accessibility Object Model）によってJavaScriptからアクセシビリティツリーを更新できる未来。
ウェブのセマンティクスの作り方について、これまでと現在を振り返りながら未来についてもご紹介いたします。
開発体制に合わせたCSS設計
- CSS
CSS設計手法は、BEMやFLOCSSなど代表的なものから、ECSSやRSCSSなど種類も増えてきました。サイト規模や開発体制という視点から見たとき、どういったCSS設計が望ましいのかをお話します。
さらに便利になった最新版SketchとMaterial Theme Editor
- Sketch
- Material Design
進化し続けるUIデザインツール「Sketch」。ver.52で一段と便利になりました。これまで、プラグインや他ツールを併せて使うのが当たり前だったSketchですが、だんだんとそれらが不要になってきました。
一方で、Googleが「Material Theme Editor」というSketchプラグインを出してきました。Sketchが一気にパワフルなマテリアルデザインツールに！
最新のSketchとMaterial Theme Editorでどんなことができるようになったのかをお話しします。
スペシャルセッション
