PWA Night CONFERENCE 2020 メモ

PAW Night CONFERENCE 2020

以下のイベントに参加したので、聞いた内容をメモしておきます。 後半ほど集中力が切れてメモが少なくなっているような気がします笑。

conf2020.pwanight.jp

基調講演

Edge of the Web

基調講演 ： Edge of the web(えーじ氏) | PWA Night CONFERENCE 2020

Edge of the Web - memo.md · GitHub

もともとPWAという用語がくる前からService WorkerやPush Notificationの概念はあった。 PWAという用語ができてから、説明しやすくなった。

今あるWebと違うものではない、ちょっとづつ進化させていく。

Forget abount PWA. Just build a "better" website

PWAは上司を説得するにはいい言葉。

一番素晴らしいのはホーム画面にアプリが追加できること。

アプリストアからインストールできたら素晴らしくない？ Miscrosfoftがアプリストアに登録できるようになる。

Trusted Web Activities(TWA)

AndroidアプリにPWAを埋め込むことができる。 ストレージが使える！！！

llama-pack

簡単にTWAを作ることができる。

shortcut

ホーム画面からショートカットを埋めることができる。

Web Share

アプリからアプリにデータを渡すことができる。 AndoridでいうIntent

SMS Receiver API

インドはほとんど電話番号入力-> SMS で完了している。 SMS通知から入力を自動化するような仕組み Appleと合意が取れつつある。

Clipboard API

クリップボード上の画像を扱えるように

Native File System API

ブラウザからOSのストレージにアクセスできる。

Web Authentication

物理的なセキュリティトークンを使用して、簡単に二要素認証が実現できる

この後のWeb

Privacy Aware Web

• 個人情報にセンシティブなWeb?
• Privacyをもっとケアするような動きになる。

3rd party cookie

• ブラウザで開いているURLが 1st party widgetなどは開いているURLと違うので、 3rd party
• 3rd partyにむけて、1st partyのcookie を送るのを防ぐ動きがある。3rd party cookieを制限すると、利便性が損なわれる。 SameSite=None

Mini apps

プログラムのなかで動かせる小さなプログラムが多い みにアプリを動かすプログラムをスーパーアプリと呼ぶ WeChatなど

Webでできる体験を考える会

Webでできる体験を考える会(折原 レオナルド賢氏) | PWA Night CONFERENCE 2020

audio ... Web Audio API 動き ... WebGL URL踏めば遊べる。Webというインスタント性がいい。 Bluetoothあれば色々できる。

Web Assembly と Web Worker - Web Assembly は instanciateStreaming が一覧楽。 - AssemblyScriptがお手軽

WebWorker - 重い処理をJSのメイン処理から外せる - 重いデータはTransferaObjectを使うと良い！

Push API - Firebase Cloud Messageing がお手軽

ScrapboxでのServiceWorkerとCacheの活用

ScrapboxでのServiceWorkerとCacheの活用(飯塚 大貴氏) | PWA Night CONFERENCE 2020

PWA Night Conf: ScrapboxでのServiceWorkerとCacheの活用 - daiiz

Serviceworker

FetchEventでresponseと間に存在するプロキシ

CacheStorage

キャッシュ保存戦略 - Network - Network First - Cache First

静的Assetなど、寿命が長いコンテンツは cache firstが良い。 Promise.raceでTimeoutと競う

PWA x PlayCanvasについて

PWA x PlayCanvasについて(羽賀 流登氏) | PWA Night CONFERENCE 2020

PlayCanvasとは - Javascriptのゲームエンジン。3Dに強い - Three.js と比較される。

進化するHTTP

進化するHTTP(奥 一穂氏) | PWA Night CONFERENCE 2020

HTTP1の限界 - 回線速度が早くなっても、ページロード速度の速さは頭打ちになる。 SPDY(HTTP２の全身) - １本のTCPコネクションで多重性を確保 -> HTTP2に

HTTP2とは - Push - 大量のレスポンスを流せる - HTTP2か1かの判断は、TLSのハンドシェイク時にやってる - HTTP2の方が遅くなる場合もある。特にネットワーク環境が悪い(パケットロス率高い時) -> パケットロスに弱い！！ -> 最適化が肝要

そもそもTCPも限界. TCP, TLS で 2RTT いる - TCP汎用化しすぎて、古いけど変えられない。ファイヤーウォールとかネット機器も見てる。OSも使う。

QUIC - もうTCPはいらん。UDPの上に全てのせる。 - ネットワークの環境が悪いところほど効果が出やすいという結果あり

HTTP3どうやって判断する - 初回はHTTP1or2でそのレスポンスヘッダにHTTP3が使える旨の内容が送られる。

Webブラウザは開発版が対応開始 WebTransport

まもなくやってくるVue3

まもなくやってくるVue.js 3(川口 和也氏) | PWA Night CONFERENCE 2020

もまなくやってくる Vue.js 3 - Speaker Deck

Composition API - 関数ベースでのAPI - 大規模環境でコードの再利用性が損なわれる。

Vue2同様, DI(Inject)も提供される。

ポータル - Wdigetを作成できる仕組み

Taking your web app offline (in a good sense)

Taking your web app offline (in a good sense)(Maxim Salnikov氏) | PWA Night CONFERENCE 2020

• ServiceWorkerをマネジメントするの大変
• Workbox を使う。

PWA on Windows

ChromiumベースのEdgeについて

エンディング講演 ： PWA on Windows (物江 修氏) | PWA Night CONFERENCE 2020

確定申告の都合上、４月リリース Edgeと違いUWPでなく、Win32なので、昔のアプリケーションでも動かせる。 内部で実はIEプロセスもあげられるので、IEがないと発狂する人でも安心

所感

どのセッションもとても有意義なトピックで、いかに自分がPWAについて理解していないかと、UXを上げるために 試したいことが増えました。２セッション制でしたが、どちらのセッションに行くか迷うものばかりでした。 manifestだけ入れてPWAを言い張っていた自分が恥ずかしくなりますね。

Auth0 でUserMetadataを使う方法

ユーザに簡単な情報付与したいけどまじめにデータストア用意するまでもないような環境で、なんかいい方法ないかなと 思っていたのですが、Auth0にUser Metadataを付与できる機能があったので試しました。 (結論から言うと, 微妙でしたが...)

Auth0ユーザ詳細画面

Auth0管理画面にUser Metadata なるものを設定できる画面があるから、これを参照したり更新したりできるんだろうと思い、リファレンス見てみました。 以下は試した内容のメモになります。

User Metadataの取得

• userinfoの取得

auth0.com

上記の userinfo のエンドポイントからユーザ情報は取得できそうですが、どうやらuser_metadata はそのままでは返ってこないようです。

以下のような内容がRemarkにかかれています。

If you want this endpoint to return user_metadata or other custom information, you can use rules. For more information refer to User profile claims and scope.

user_metadataがほしければ Rules を作ってスコープを指定しろと、言うことのようです。思ったより簡単にはくれないようです。

Rulesというのは認証後に何かしらのアクションを追加できるようなものらしく、サンプルとして地域によってログインを弾いたり、追加情報を付与するみたいなのができるようです。

あまり詳細はよく分かっていないですが、以下のようなRulesスクリプトを書けば、namespace 以下にuser_metadataが入っている状態でuserinfoを取得することができました。

Rulesスクリプト

どうしてこうなっているかというと、どうもuser_metadataはOIDCの仕様に則っていないから、そのままでは返せない、だからRulesを設定してやればいけるよ、といった感じのようです。

auth0.com

User Metadata の更新

先程の設定でめでたくuser_metadataの取得ができるようになりましたので、クライアントから更新方法を試します。

ユーザ情報の更新は PATCH /users/:id でいけるようです。 auth0.com

ただしそのままでは権限が不足しているので、scope に update:current_user_metadata を追加してやります。

自分はNuxt.js + Auth module で以下のようにscopeを追加します。

   strategies: {
      auth0: {
        domain: 'xxxx.auth0.com',
        client_id: 'xxxxx',
        scope: ['openid', 'profile', 'email', 'update:users', 'update:current_user_metadata']
      }
    },

そしてAPI仕様どおりのフォーマットでPATCHリクエストを投げると、無事更新されました。

更新はされました、が...

動作は確認できたのですが、ひとつ問題があり、更新後にもう一度 GET /userinfo を投げても更新前の情報が返ってきて、更新直後に反映されません。

いろいろググると、どうやらすぐには反映されず、アクセスキーの再生成が必要なようです.. community.auth0.com

所感

真面目にやるならちゃんとデータストアを別に用意したほうがよさそうです。 さくっとできるのかと思いきや、Rules, Scopeなどいくつか設定の手間がかかるだけでなく、即時にアップデートされなかったり、容量の制約などあるので、 あまり重要でない更新頻度の低いユーザに関連する情報をさくっと入れたいときには良いと思いますが、それ以外の用途では他の手段を検討したほうがよいかもしれません。

その他参考

Manage User Metadata

Nuxt.js の SSR, SPA時のイベント発火の違いを整理してみました

私は去年からNuxt.jsを真面目に触るようになったのですが、とりあえず動くものを作る優先だったので、 挙動の分かりやすいSPAモードでの開発をずっと行っていて、Nuxt.jsのSSRの機能を全く使っていませんでした。 最近になってパフォーマンスをチューニングしたいという話題があり、SSRの使用を検討していたのですが、どうもよくSPAモードでのモードとSSR(universal)モードの挙動の違いが理解できていませんでした。

そこで、universalモードとSPAモードでのイベントの発火状態を以下の表で整理してみました。

SSR, SPAのイベント発火の違い

Webや公式リファレンスを読んだあとに自分の理解の整理で書いただけなので、あっているか分からないですが... ポイントは以下のようなところです。

• SSRは初回ページアクセス時に実行される。それ以外(VueRouterなど)の遷移ではSSRは行われない。その挙動はSPAモードと同じ。
• nuxtServerInitはサーバサイドでのみ実行される。SPAモードには存在しない。
• SSR初回実行時は middleware, validate, asyncData, fetch はサーバサイドでのみ実行され、クライアントサイドでは実行されない。ただし初回アクセス時以降はクライアントサイドで実行される。
• SSR初回実行時は created は サーバサイド、クライアントサイド両方で実行される。

上記をみてこうやって考えると、SPAモードは楽でいいんだけどなぁとも思います(さらにデプロイも超絶に楽)が、パフォーマンスを考えると SSRの選択肢は有力だと思うので、状況を見て取り入れていきたいなぁと考えています。

また、上記の挙動の確認には以下のプログラムを使用させていただきました。 github.com

読書メモ Design It! プログラマーのためのアーキテクティング入門

Design It! ―プログラマーのためのアーキテクティング入門

ざっくり概要

xxx It! 訳本シリーズ訳４冊目(原書は全７冊)。ソフトウェアの根幹となるソフトウェアアーキテクチャをいかにデザインするかを解説する本。 原題は Design It! From Programmer to Software Architect

第一部 ではソフトウェアアーテクチャとは何かについて解説し、第二部ではアーキテクチャを設計するために必要な基礎的な考え方を解説。 第三部では個々の詳細な方法論について解説しています。

参考になった箇所

全部を網羅できないので、私が参考になった、共感した部分を断片的に残します。

ソフトウェアアーキテクチャとは

望まれる品質特性やその他の性質を促進するためにソフトウェアをどう構成するかということに対する、重要な設計判断が集まったもの

デザイン思考

アーキテクチャを設計するにあたり、デザイン思考に則るのが有効。デザイン思考とは以下の４つの原則から成る。

1. 人間性の規則 全てのデザイン活動は究極的に社会的な性質をもつ。

2. 曖昧性の規則 デザイン思考者は曖昧性を保全せねばならない。

   -> 必要最小限のアーキテクチャ 目指す品質特性を促進するために、最小限の設計を行い、責任を持てる限り設計判断を遅らせる。それらは後続の設計者に委ねられる。

3. 再デザインの規則 すべてのデザインは再デザインである。

4. 触感性の規則 手に触れられるアイデアを作ることは常にコミュニケーションを促進する。

例えば、設計に関して言えば、設計は曖昧性を残し、設計を

デザインマインドセット

デザインマインドセットの観点からアーキテクチャを考える必要がある。デザインマインドセットとは以下の４つがある。

• 理解
• 探求
• 作成
• 評価

良い名前を使う(７Stage of naming)

"Good Naming Is a Process, Not a Single Step" という記事(?) において、名前づけは７段階あり、上のステージほど設計物の理解を反映している。

1. 名無し 名前がない状態
2. 無意味 名前に意味はないものの、つけられている状態
3. 的確 要素の責務について 少なくとも１つ表している状態
4. 的確かつ完全 要素の全ての責務を直接表している状態
5. 適切な行い 要素の責務を進化させるという意識的な決定が名前に反映されている状態
6. 意図 名前には要素の責務だけでなく目的も表わされている状態
7. ドメイン抽象 個々の要素を超えた新しい抽象概念が作成されている状態

所感

ここでは内容を断片的にしか書けていないですが、ソフトウェアの設計に関する知見を幅広くカバーしています。アーキテクチャパターンなど技術的なトピックから、ミーティングの開催方法などチームビルディング的なところまで多岐に渡ります。 自分は現在そこまで大きなチームで開発しているのわけではないので、本書に記載のあったチームビルティングやアーキテクチャのドキュメント化方法など、そこまで実感のわくものではなく、ほーそうなのねというレベルでしたが、プロジェクトの規模が変わると再度立ち返れば良いかなと思います。

日頃ソフトウェア設計をやっていれば、やっぱそうだよねと思う部分があります。上記の内容と重複しますが、取り扱う内容がかなり広範なので、何かしら得るものはありそうです。

東京東エリアのおすすめ１日利用のコワーキングスペース

週末などはカフェで作業していることが多いのですが、 半日〜1日がっつり作業するときは近くのコワーキングスペースを利用していています。

備忘も兼ねて、わたしの行動範囲内の東京都の東側エリアでよく行くコワーキングスペースをメモしておきます。

コワーキングスペース茅場町 Co-Edo

www.coworking.tokyo.jp

• 料金: 1000円/１日
• 雰囲気: 静か
• 飲食: 可
• 貸し出しモニタ: 一部あり
• フリードリンク: なし

東西線茅場町から徒歩三分ぐらでいける良立地。 １日 1000円で作業できるのはなかなか良いです。 勉強会などもけっこう開催されており、それによって貸し切りになっている場合もあるので、事前にスケジュールをチェックするのが良いです(上記のリンクから確認できます)。

パセラのコワーク 東神田店

https://www.pasela.co.jp/coworking/higashi-kanda/

• 料金: 2500円/１日
• 雰囲気: 静か
• 飲食: 可
• 貸し出しモニタ: あり
• フリードリンク: あり

パセラグループが運営するコワーキングスペース。２０１９年５月ごとにオープンして比較的新しいです。 コーヒーなどのドリンクもついており、パンや味噌汁、ワインもありました。 モニタも自由に使用でき、比較的料金は高めですが、ガッツリ作業するのに向いています。

江戸遊 湯work

https://www.edoyu.com/ryougoku/yuwork

• 料金: 2750円/１日
• 雰囲気: ややにぎやか
• 飲食: 館内で購入
• 貸し出しモニタ: なし
• フリードリンク: なし

銭湯スパの江戸遊のなかにあるコワーキングスペースです。料金はややお高めですがもちろんスパも入れます。リラックスできる環境ですが、スパに思ったより長く入っていたり、酒が飲みたくなったりと、集中を妨げる要素が多いのでガッツリ作業には向いていないかもしれません。スパメインでのんびりと作業するのに向いています。 銭湯スパなので、明け方まで滞在できるのも特徴です。残念ながら途中退出はできないので、入るタイミングには注意が必要です。

パズル浅草橋

https://puzzle-scs.jp/akb

• 料金: 500円くらい（１ドリンク）
• 雰囲気: イベントやってるとにぎやか
• 貸し出しモニタ: なし
• フリードリンク: なし

秋葉原、浅草橋の近くのイベントスペースです。 何かしらのイベントをよく開催しています。 ドリンク１杯頼めばドロップインで作業できます。 さくっと作業するのにちょうどよい環境です。

まとめ

電源とWi-Fiがある環境でそこそこしっかり作業したい場合は、コワーキングスペースのドロップインがおすすめです。