概要

Vue Fes Japan 2018 には各方面から魅力的な CFP が届いたものの、非常に限られた枠での選考となり、残念ながら採択に至らなかったセッションが多くあります。

Vue Fes Japan 2018 Reject Conference は、そんな惜しくも不採択となってしまったセッションを、多くの Vue.js ユーザーと共に楽しむための Vue.js 日本ユーザーグループの公式イベントとなります。

Vue Fes Japan 2018 では話題に上がらなかったあんなテーマやこんなテーマ、ちょっとニッチな領域まで、 Vue Fes Japan 2018 の余韻に浸りながら、聴講しませんか？

登壇者

Takahiro Saeki

Vue.js with Web Components

Vue.jsとWeb Componentsの共存について、Web Componentsとして作られているコンポーネントをVue.js上の環境でどう扱うか、またそのメリットやデメリットも含め、サンプルを通して説明します。

• Twitter: https://twitter.com/hirodeath
• GitHub: https://github.com/takahiro-saeki

onigra

Identiry Provider Keycloakの紹介と、それを用いたNuxt.jsでのOpenID Connect認証機能の実装

昨今のクライアントサイドアプリケーションは、Firebase AuthenticationやAuth0のようなIdentity Providerを利用し、OAuth2.0やOpenID Connectなどを用いて認証機能の実装をすることが一般的になりました。

私は現在、Identiry ProviderにKeycloakを用いたマイクロサービスのクライアントサイドアプリケーションを、Nuxt.jsで開発しています。Keycloakは高機能なオープンソースのIdentiry Providerを提供するミドルウェアで、上記のようなIdentiry Providerを自前で立てることができます。

日本では採用事例が少ないですが、認証基盤を自社で用意し、それを軸としたシステムを構築する際には非常に有力な選択肢と感じています。

本発表では、Keycloakを用いたOpenID Connect認証をNuxt.jsで実装した際の知見を、サンプルアプリケーションを交えてお話したいと思います。

• Twitter: https://twitter.com/onigra_
• GitHub: https://github.com/onigra

lulzneko

Vue.js/Nuxt.js で 実現できた PWA の リアルタイム動画ラップ・バトル・アプリ

Web 技術を使ったアプリとしてPWA (Progressive Web Apps) が期待されてきています。

私たちは、全国規模のモバイルアプリ開発ハッカソンの予選で、あえてPWAにこだわって開発し優秀賞を受賞しました。24時間という開発期間で、リアルタイムな動画配信を使ったラップのバトルと観戦が同時に行え、観戦者がリアルタイムにフィードバック・エフェクトを返せるアプリを、チーム５人のところ３人で作り上げました。

ネイティブ系開発チームに対して、唯一 PWA系で 受賞できたのは、Vue.js/Nuxt.js の 活用といって過言ではないでしょう。

本セッションでは Vue.js/Nuxt.js で PWA の リアルタイム動画ラップ・バトル・アプリ を いかにして作り上げたのか、デモを交えて ご紹介します。 ・PWA(Progressive Web Apps) の 概要 ・Vue.js/Nuxt.js を 使った PWA な モバイルアプリ の 開発手法 ・GitHub、CircleCI、Pages を 使った 常にアクセス可能なプロトタイプ環境を持つ PWA アプリ開発環境

• Twitter: https://twitter.com/lulzneko
• GitHub: https://github.com/lulzneko

小堀輝

Vue.js×TypeScript×Blockchain Ethereumで作るアプリケーションをはじめからていねいに

Blockchain Ethereumを使いアプリケーションを作成し、Web3、Vue.js、TypeScriptを通して一つのサービス構築までの軌跡をはじめからていねいに説明させていただくセッションです

• GitHub: https://github.com/anneau

小山田晃浩

Non-DOM components with WebGL in Vue.js

シミュレーター、画像エディタ、ゲーム...Webアプリケーションには、DOMだけでは実現できない表現が求められることもあります。そうした、アドバンスドな表現のソリューションの一つにWebGLがあります。

WebGLは、canvas要素の中ですべてが完結し、canvas内に展開される表示オブジェクトはDOMではありません。それでは、どのようにVueのコンポーネントを作ればいいのでしょうか？また、どのようにVuexとつなげればいいのでしょうか？

このセッションでは、DOMではないWebGLのコンポーネントの実装例、Vuexとの相性、注意点、失敗談などを共有し、Vue.jsアプリケーションへのWebGLの応用を提案します。

• Twitter: https://twitter.com/yomotsu
• GitHub: https://github.com/yomotsu

鈴木健太

レガシーアプリケーションのリニューアルにNuxt.jsで戦う

約10年前にリリース後、メンテナンスが難しくなり大きな技術的負債になっていたアプリケーションをNuxt.jsを使ってリニューアルしました。

リニューアル対象のアプリケーションはtoB向けで業務システムに近く、大量の項目を持つ登録・検索フォームが存在するレガシーなJavaアプリケーションです。時代と歴史を考えると仕方がないのですが、jQueryに加えJSPやXSLTのテンプレートが混在しており表示ロジックを読み取ることも大変な状態でした。

リニューアルではバックエンドAPIにSpringBoot(Kotlin)、フロントエンドにNuxt.jsを使うアーキテクチャに変更し、特にフロントエンド側ではTypeScriptを用いて一部型のサポートを得る工夫などを行っています。

とはいえ当然キラキラした良いことばかりではありません。本発表では、Nuxt.jsを含めた技術選定の理由、業務システムでは避けられないエラーハンドリング、サーバ側APIとの連携、SSRをやるかどうかの判断、悩まされたブラウザ間の差分など、開発のなかで得られた現場のNuxt.js / Vue.jsの知見をお話します。

• Twitter: https://twitter.com/suusan2go
• GitHub: https://github.com/suusan2go

日時

2018/11/10 (土)

主催

Vue.js 日本ユーザーグループ

会場スポンサー

Plaid inc.

ツールスポンサー

• esa.io
• Slack

参加方法

一般参加枠

Vue Fes Japan 2018 Reject Conference の 勉強会(各発表の聴講) に参加したい方は、以下のいずれかからお申込ください。

• 一般参加枠 (先着) : 参加枠の決定は申込の先着順です。
• 一般参加枠 (抽選) : 参加枠の決定は抽選になります。

ブログ書く枠

「ブログ書く枠」は、イベント後参加レポートのブログを書いてくださる方の枠です。

この枠で参加された方はイベント後開催後、参加内容のブログ記事を書いて公開された上で、このイベントページのコメントでご報告お願いします！

スタッフ枠 (注:Vue.jsスタッフonly)

「スタッフ枠 (注:Vue.jsスタッフonly)」は、その名の通り、今回のVue Fes Japan 2018 Reject Conference 運営のためのスタッフ専用枠です。通常参加の方はお使いいただけませんのでご注意ください。

アンケートについて

イベント参加時に簡単なアンケートがありますので、ご協力お願いいたします！今後のイベントの参考にさせていただきます。なお、アンケートで回答して頂いた情報については、イベントの今後の企画・改善のためのみに利用させていただきます。

タイムテーブル

スケジュールの順番や内容は当日変更される可能性があります。

開始時間	発表時間	内容	発表者
12:30		開場
13:00	10分	開始 (オープニング)	@kazupon
13:10	30分	Vue.js with web components	Takahiro Saeki
13:40	30分	Identiry Provider Keycloakの紹介と、それを用いたNuxt.jsでのOpenID Connect認証機能の実装	onigra
14:10	10分	休憩
14:20	30分	Vue.js/Nuxt.js で 実現できた PWA の リアルタイム動画ラップ・バトル・アプリ	lulzneko
14:50	30分	Vue.js×TypeScript×Blockchain Ethereumで作るアプリケーションをはじめからていねいに	小堀輝
15:20	10分	休憩
15:30	30分	Non-DOM components with WebGL in Vue.js	小山田晃浩
16:00	30分	レガシーアプリケーションのリニューアルにNuxt.jsで戦う	鈴木健太
16:45頃		懇親会
18:00頃		終了
18:30頃		完全撤収

一般参加枠の参加費について

参加費1000円 は会場入館の受付時に集めさせていただきます。

参加費はできるだけお釣りがないようにご協力お願いいたします。

当日勉強会だけ参加されて、懇親会は参加されない方においても、集めさせて頂きますのでご了承ください。

領収書は発行いたしませんので、ご了承ください。

集めさせて頂いた参加費につきましては、当日懇親会の軽食とお酒・ソフトドリンク代とさせていただきます。

参加者の方へ

あらかじめ充電の上お越しいただきますようお願いします。 - 宣伝や採用のみを目的とした方のご参加はご遠慮ください。 - 懇親会での飛び込みLTは歓迎です。

発表者の方へ

• プレゼンに使うコンピュータはご持参ください。
• 宣伝や採用に終始する内容の発表はご遠慮ください (少し含む程度は OK)。

入館方法について

会場：株式会社プレイドGINZA SIXオフィス : 東京都中央区銀座6-10-1 (GINZA SIX 10F) https://plaid.co.jp/company.html

当日は7階オフィスエントランスにイベント用の受付を設けるので、そちらで来訪者カードをお受け取りください。

懇親会について

勉強会(発表の聴講)後に行われる懇親会については、イベントに参加されたみなさまが参加できます。

当日の連絡方法

Twitterでハッシュタグ #vuefes_reject をつけて Tweet お願いします。当日スタッフが対応いたします。

Slack

Vue.js 日本ユーザー向けの Slack もあります。興味がありましたら、どうぞ！
http://vuejs-jp-slackin.herokuapp.com/

アンチハラスメントポリシー

ハラスメント行為には、性別、性同一性、性別の表現、性的指向による差別、障害の有無による差別、外見、身体の大きさによる差別、人種、民族、宗教による差別、技術選択による差別、公共空間での性的な映像表現、意図的な脅迫、ストーカー行為、つきまとい、写真撮影や録音などによる嫌がらせ、トークやその他のイベントなどに対して繰り返して意図的に中断させる行為、不適切な身体接触、そして望まれない性的な注意を引きつける行為を含みます。

参加者は、これらのハラスメント行為を止めるように求められた場合、すみやかに従わなければなりません。

スポンサーもまた、ハラスメント防止ポリシーの対象です。特に、スポンサーは性的な関心を引き起こすような映像表現、活動、資料、あるいはその他の物品を使用すべきではありません。ボランティアを含め、ブースのスタッフは、性的な関心を引き起こすような服装 / 制服 / コスチュームを使用すべきではありませんし、その他の手段で性的な関心を引き起こす様な環境を作るべきではありません。

参加者がハラスメント行為を行っている場合、Vue Fes Japan 実行委員は当該行為を行っている者に対して我々が適切と判断した範囲で、警告や参加費の払い戻しなく退席していただくなどの措置を講じることがあります。

もしハラスメント行為を受けている場合や、誰かがハラスメント行為を受けていることに気づいた場合、またはその懸念がある場合は、すぐにお近くの Vue Fes Japan 実行委員スタッフに連絡してください。

Vue Fes Japan 実行委員スタッフは、ハラスメント行為を受けた人に安全な環境を守るためにホテル・会場の警備や警察に連絡すること、付き添い人の提供、およびその他のあらゆる支援を行います。私達にとってあなたの参加が何もよりも大切なことであり、常に私たちはハラスメント行為を受けた人の味方でありつづけます。

私たちは、すべての参加者が会場やワークショップ、Vue Fes Japan に関連するソーシャルイベントにて、これらのルールに従うことを期待しています。