Enjoy Practical Experience

2020年2月に初のカンファレンスを開いて1年と少し経ちました。

新しい体験をつくる次世代のウェブ「PWA」は、技術者の中で「新しい技術」から「自然と実装する」デファクトスタンダードに少しずつなってきているように感じます。

PWA Night CONFERENCE 2021では、多くの人がPWAを正しく使えるように。そして多くの人がウェブの未来を楽しめるように。

そんな楽しい会にしたいと思っています。

みんなでカジュアルに、フラットに情報交換し、ウェブサービス開発にたずさわる人たちが、いまの仕事でPWAという選択肢を持ち、ただしく使っていけるようなカンファレンスにしたいと思います。

多くの方のご参加を楽しみにしています。

開催概要

2回目のカンファレンス開催で、今年はオンライン開催になります！ 東京近郊の方だけでなく、全国からのご参加お待ちしております！ 昨年の様子は公式サイトをご参照ください。

• 開催日時：2021年6月26日（土）12:00〜19:00
• 会場：ONLINE（oVice利用）
• 参加費：無料
• セッション数：15程度

ワークショップ参加の方の事前準備物

１．microCMSのアカウント登録 https://app.microcms.io/signup

２．Netlifyのアカウント登録 https://app.netlify.com/signup

３．Node.js v14の環境用意

ワークショップ開催場所

oVice会場のトラックC（画面右）にて開催いたします。 oVice会場の参加URLは当日connpassにて公開いたしますので、 そちらからご参加ください。

セッション情報

セッション内容・タイムテーブルは公式サイトもご覧いただけます。

• スピーカー： https://conf2021.pwanight.jp/#speakers
• タイムテーブル： https://conf2021.pwanight.jp/#timetable

13:20～14:00

トラック： The State of PWA in 2021 by 宍戸 俊哉@Google

小さな個人サイトから巨大企業のウェブサービスまで、PWA の採用は今や珍しくありません。PWA はフレームワークや CMS にも組み込まれており、エコシステムとして随分と成熟してきたように思います。しかしながら、PWA がより多くのユースケースに応えられるようになるには、ウェブの機能はまだ十分ではありません。このセッションでは、PWA に関する最新のアップデートやケーススタディ、検討されている新しい機能について紹介します。

14:25～14:55

トラックA：Core Web Vitals In Practice ~ 改善の取り組みでみえた苦労とメリット ~ by 原 一成@株式会社サイバーエージェント

よいWebページ体験のためには、初期読み込みのはやさはもちろん、閲覧中や遷移の際の最適化も必要です。Googleは2020年、数が多くわかりにくかったそれらのパフォーマンス指標を「Core Web Vitals」として定義し、その計測結果を検索結果のランキング要素の一部として利用すると発表しました。 Core Web Vitalsが発表されてから、様々なツールや改善のノウハウが提供されていますが、それでもなお実際のプロジェクトに取り込み、改善し、サービス指標の成果につなげるのは難しい面もあります。 Amebaでは今年、各指標の理解に始まり、計測、目標設定、改善の実装をしてきました。その結果、いくつか目に見えてサービスにメリットをもたらしたものも出てきました。本セッションでは、「Core Web Vitals」を利用して、Webサイトの利用体験向上をどのように進めていったのかお伝えします。

▼ 関連ドキュメント

https://developers.cyberagent.co.jp/blog/archives/27752/ https://developers.cyberagent.co.jp/blog/archives/28237/

トラックB：PWAとプロダクトマネジメント by 白石俊平@株式会社テックフィード

プロダクトマネジメントの観点から、PWAのメリットと課題を語ります。 開発の観点から語られることの多いPWAですが、実際にはユーザー価値やビジネス価値にも深く関わるソリューションです。 本講演では、開発者向けオンラインコミュニティサービス「TechFeed Pro」の開発と運営の経験を通じて、プロダクトマネジメントや開発の現場にPWAがどう影響を与えてきたかを、実際の事例を交えてご紹介します。

トラックC：サンプルを通して学ぶPWA開発(PWA Night for Beginners) by 菅家大地@株式会社TAM

PWAはなんとなく知っていて、PWAの実装方法を知りたいけど何から初めて良いかわからないという初心者向けの内容です。 PWAの機能は段階的に導入していくことが可能なため、既存のWebアプリに機能を追加してPWA化していくことが実装方法を掴む上ではわかりやすいと考えています。 PWAの特徴としてよく紹介されるものに「インストール」「オフライン対応」「ServiceWorkerを使用したキャッシュ(高速化)」などがありますが、これらの機能を実際にソースコードを見せながら実装していき、PWA実装のイメージを掴んでもらえるような話ができればと思います。

15:05～15:35

トラックA：PWAとクラウドゲーミング、そして共に歩むOOPartsのこれから。 by 皆川大樹@Black Inc.

OOPartsは2019年にリリースされたアルファ版の時からPWA対応をしています。サービスの特性上、PWAととても親和性がございます。そして2020年4月に正式版をリリースし1年が経過致しますが、その中でPWAによって得られた知見が様々ございます。そのことを中心にお話しさせていただくのが1点です。 そして、OOPartsはフロントエンドにReactを採用しているのですが、最近Create React AppからNextjsに全て移行いたしました。その中でPWAに関しても自前実装からWorkboxを中心とした対応に変わっています。 その点を含め、これからOOPartsがどのようにしてよりPWAと歩んでいくのかをご紹介できればと思います。 また、過去に登壇したCEDEC2020の内容やPWA Nightの内容と一部被る場合がございますが、基本的に新しい内容で構成いたします。

参考： https://speakerdeck.com/oliver_diary/oopartsniyorupwashi-li-shao-jie https://speakerdeck.com/oliver_diary/kuraudogeminguzui-xin-kai-fa-shi-li-number-cedec2020

トラックB：PWA/SPAでクラウド型POSレジシステム「SPIRE」をオフライン動作させる by 荻野利夫@フィーリックス株式会社

店舗向けの販売管理システムであるPOS(Point of Sale)レジシステムは、たとえ一時的であってもシステムが使えなくなると、販売処理から在庫管理まですべて止めなくてはならず、店舗業務全体に大く影響してきます。 ネイティブアプリではネットワークトラブルが発生しても、ローカルにデータベースさえ持たせておけばオフラインで運用することは容易に実現できたことですが、Webアプリではそうはいきません。 このセッションではPWA/SPAやIndexedDBを活用して、一時的なネットワークトラブルが発生しても業務を止めることなく、オフラインでPOSレジを動作させるための方法について「SPIRE」の事例を紹介します。

トラックC： ワークショップ「microCMS × Nuxt.js で Jamstackブログを作ってみよう」

ワークショップは15:05〜16:15になります 国産ヘッドレスCMSであるmicroCMSとNuxt.jsでJamstackブログを作成できるワークショップです。実際に手を動かして参加者全員が各々ブログを完成させ、Jamstackの仕組みを理解することがゴールです。 Jamstackで構築されたブログ例： https://blog.microcms.io/

15:45～16:15

トラックA：Go To トラベルの電子クーポンでも利用された、ブラウザでの2次元コードリーダーの開発と将来について by 松島 健人@株式会社ギフティ

全国20万店舗で利用可能な電子クーポンを3ヶ月という短い準備期間で実現した知見を是非皆様に共有できればと思います。 電子クーポンとは、ブラウザAPIを利用してカメラを起動し、店舗に設置した2次元コードを読み取ることができる機能です。 弊社では、ユーザがスムーズに電子チケットを利用できる方法を常に模索しております。 これまでは、電子チケットに設置されたフォームに店舗ごとのユニークな文字列を入力する方法や、スマートフォン用スタンプを端末に押下する方法などを採用していました。 しかし、コロナ禍における接触リスクの軽減やコスト削減の観点から、2次元コードリーダーでの利用方法が主流になりつつあります。 現在の標準ブラウザはブラウザAPIが充実しており、ブラウザからカメラを起動する機能は意外にも簡単に実装できます。 また、ブラウザでのコードリーダーに必要なものは、スマートフォンまたはPCのみで、専用機器は不要です。 このように、コードの読み取り機能はコストをかけずに実装できる上、弊社のチケット以外にも様々な業務で役立つと考えています。 そこで、弊社が携わった Go To トラベル 案件を例に、エンジニアがどのようにビジネスサイドと調整して案件を進めていったか、弊社が開発した2次元コードリーダーの解説、そして工夫した点をご説明します。 また、考えうる具体的な業務の改善例をあげながら、弊社の考えるブラウザでの2次元コードリーダーの将来についてお話したいと思います。

トラックB：PWAで覗き見るSSI（自己主権型アイデンティティ）の世界 by 髙橋 翔太@LasTrust株式会社

「Self Sovereign Identity（SSI）」という概念をご存知でしょうか。SSIは自身のデジタルIDを管理主体の介在なしに、自分自身でコントロールするという考え方であり、web標準団体のW3Cが中心となって研究が進められています。またマイクロソフト社をはじめとした世界中の企業からも注目を集めています。弊社LasTrustはデジタルクレデンシャル専業のスタートアップであり、未来のクレデンシャル技術でもあるSSIの調査・研究を進めてきました。今回はSSIの基幹技術であるDIDとVCをPWAに実装した例をご紹介したいと思います。また、前例の少ない先端技術を実装する中で経験した、壁や迷いポイントもご紹介していきたいと思います。

16:30～17:00

トラックA：GYAO!トップページの表示パフォーマンス改善 〜 GraphQLアーキテクチャへの移行 by 浜田 真成@ヤフー株式会社

映像サービスのバックオフィスを含む大規模な構成変更と、その成果として得られたスケーラビリティ・ページの表示速度の向上についてをお話しします。今回は、ブログだけでは語りきれなかったシステムの裏側やその後の展開についてにも触れ、ノウハウを共有致します。

トラックB：UIT INSIDEの運用を通してわかったWebと音声メディアの可能性 by 花谷拓磨@LINE株式会社

LINEのフロントエンド開発組織UITでは、2019年よりUIT独自で運営するPodcast「UIT INSIDE」を公開しています。音声メディアという少しだけ特殊なコンテンツをPWAで公開することについて、技術的な面からご紹介します。また、2年半継続して公開し続ける上での取り組みについても深堀りします。

トラックC：海外スピーカー予定

17:20～17:50

トラックA：Chrome パフォーマンス問題解決の最後の砦、chrome://tracing 機能のご紹介 by 紀平 拓男@スマートニュース株式会社

Chrome でパフォーマンスの問題は、大抵 DevTools で詳細に調査することが出来ます。しかし稀に、DevTools のプロファイラでは詳細が確認出来ない問題に出くわすことがあります。以前私はスマートニュースの開発でそのような問題を解決し、その顛末を技術ブログ(https://developer.smartnews.com/blog/2021/03/chrome_tracing/) で公開しました。今日は、実際にスクリーンシェアをしながら Chrome の tracing 機能を使ったデバッグをして、その手法をご説明してみようと思います。

トラックB：Jamstackで失敗した3つのこと by 中村 享介@株式会社ピクセルグリッド

JamstackでWebサイトやWebアプリケーションが作られることも増えてきました。 このセッションでは、まずJamstackとはなにか、特徴とそのメリットをあらためて確認します。その上で「自社メディアCodeGridをJamstackで作った際に、失敗した3つのこと」を紹介しながら、Jamstackを採用する際のコツを伝えます。

トラックC：海外スピーカー予定

18:00～18:50　LT（5分×6セッション）

18:50～19:20　クロージング

19:20　閉場

※タイムテーブルは、運営の都合上変更になる可能性があります。

【運営】

PWA Night

• 公式サイト： https://conf2021.pwanight.jp
• Twitter：https://twitter.com/pwanightconf
• Facebook：https://www.facebook.com/PWA-Night-Conference-106270890798827/
• slack：https://bit.ly/pwanight-slack

【イベントに関するお問い合わせ】

こちらのフォームより受け付けております。