とろろこんぶろぐ

かけだしR&Dフロントエンジニアの小言

アジャイル開発の本質とは何なのか

はじめに

アジャイルサムライをはじめ、アジャイルスクラムなどに関する記事や文献を読み、アジャイル開発について理解を深めたので、これまでの経験等を含めて備忘もこめて理解したことと考えた内容を書き起こしておく。

アジャイル開発の本質とは何か?

アジャイル開発はウォーターフォール開発とは異なり、仕様の検討から設計、開発、リリースまでを行うサイクルを短く何回も繰り返すものである。この理解は間違いではないが、このことだけがフィーチャーされることも少なくない。じゃあなぜアジャイル開発すべきかという本質まで理解した上で利用されるべきだと思う。例えば、アジャイル開発をすると早くリリースできるんでしょ?という認識は一側面では正しいが、ウォーターフォールモデルで開発されるようなクオリティのものが早くリリースされるとは限らない。正しくアジャイル開発を理解して運用しないと十分な効果を発揮しないため、本質を理解した上で効率的な開発を進めていくことが必要になる。

アジャイル開発の本質的なポイントは、開発しながらリリースするプロダクトを正しい形に導いていくことにある(開発スピードは本質ではない!)。ソフトウェア開発は開発時点では最も不確実性が高く、開発しているプロダクトが求められている納期で求められている品質のものが納入されるかどうか不確実である。この不確実性を高くしている主となる要因は2つで、(1)ユーザーのニーズと、(2)チームの開発力である。これらの不確実性について理解することがアジャイル開発の本質とは何かを理解することに繋がる。

不確実性と向き合う

(1) 不確実性1 ユーザーのニーズ

プロダクト開発におけるゴールは、単にプロダクトをリリースすることではない。ユーザーが求めているプロダクトをリリースすることである。ここで重要なのは、ユーザーが何を求めているか作り始める開発者には分からないことにある。この不確実性を高くしている要因として、ユーザー自身が本当は何を求めているのか理解していなかったり、ニーズが仕様として正しく落とし込まれてない可能性が非常に高いことにある。このアジャイル開発において不確実性を下げるために一番必要なことは、簡単に言えば「作りながらユーザーに何が欲しいか尋ねること」にある。つまりユーザーを開発サイクルに巻き込むことがアジャイル開発の必須要件になる。

チームに立てるプロダクトオーナーは、一番目のユーザーにあたる。開発サイクルの中で、仕様の検討のフェーズと設計、開発を終えた品質確認のフェーズで、プロダクトオーナーに開発サイクルに入り込んでもらってフィードバックを受けることで、正しいプロダクトの形へと導いていくことができる。一つの開発イテレーションを終えるたびに、プロダクトオーナーに動いているプロダクトを見てもらうことで、ユーザーが求めているものなのかどうかが判断され、足りない部分を次の開発イテレーションで仕様に落とし込み開発を進めていく。このようなサイクルを繰り返すことで、ユーザーのニーズという不確実性が下がっていく。

スタートアップのような小規模なWebサービスであれば、短いサイクルで開発したプロダクトを早い段階でパブリックにリリースすることもいいかもしれない。そうすることによって早い段階で、実際にユーザーの評価を得られニーズの理解が可能になる。SNSやユーザーヒアリングによる定性的な情報と、CTRやCVRといった定量的な情報を使ってユーザーの声に耳を傾けながら不確実性の高かった部分を紐どいて小さくしていく。

このユーザーのニーズをチーム内で理解を深め浸透させるようなものとして、インセプションデッキなどのやり方があげられる。

(2) 不確実性2 チームの開発力

プロジェクトの発足と同時に新たに開発メンバーが組まれることがある。チームメンバーごとの開発力が分からないということはチーム全体の開発力が不明ということであり、プロダクトリリースの計画を正しく見積もることができない。一方で基本的にプロダクト開発ではリリースタイミングを見計らう必要があり、開発初期の段階でいつリリースする予定か決める必要がある場合が多い。そのために、開発前の仕様からざっくりとした機能ごとの見積もりを出すことで、最終的なリリースタイミングと機能の絞り込みが行われる。しかしながらだいたいの察しの通り、このざっくり見積もりは到底正しくいかない

上述したようにそもそも仕様に不確実性があるのだから見積もりも正しいものになるわけがないが、仮に仕様が確実なものだとしてもチームの開発力を正しく見積もることができない以上、ざっくり見積もりは期間や機能数が多ければ多いほど、実際にかかる工数との差分が生まれていく。そのために、期間と機能数を絞ってチームで開発を行い、チームの開発力を実績値として測るのである。一つの大きなサイクルでは測れなかった実績値を、細かなサイクルに分けることで小さな単位で実績値を積み上げていくことができる。サイクルを繰り返すことでだんだんと実績値にブレがなくなっていき、本来のチームの開発力が正しく測れるようになる。そうして実績値ベースで工数の再見積もりを行うと、最初に積んだ全体の見積もりから最終リリースに対してどの程度ずれが発生しそうなのか、開発途中で気づくことができる。上述のユーザーのニーズとの兼ね合いを見ながら実装する機能を削ったり変更したりして、あるべきプロダクトの形をリリースに向けて模索していくことができる。

チームの開発力をより正しく測るために、プランニングポーカーなどのやり方があったり、バーンダウンチャートなどのグラフで示す方法があげられる。

アジャイルな開発手法

アジャイル開発手法としては、スクラムエクストリームプログラミングなど、フレームワークがすでに存在している。これらは必ずしも乗っからなければならないものではないが、やり方としてアジャイル開発をしたことがない場合に取り入れやすく、これまでの先人の知恵が取り入れられているため正しい形で進めやすい。しかしながらチームの形やプロダクトの種類、環境によってフィットしたやり方を見つけるのがベストである。

スクラム開発

スクラム開発は、アジャイル開発を行うための1つのフレームワークに過ぎない。スプリントという概念でイテレーションが回され、スプリントごとに行うべきイベントがもう定義されている。

  • 計画を立てる(プランニング)
  • 開発を実施し、毎日進捗を確認する(デイリースクラム
  • 開発した機能をユーザー(プロダクトオーナー)に見せてフィードバックをもらう(レビュー)
  • 開発サイクルに対して振り返りを行う(レトロスペクティブ)

要は上記を行うことなので、本質的には、よく読んでもらえればやって開発でごく当たり前のことを並べているのに過ぎない。しかしながらこういった「ちゃんとやるべきこと」が実際に開発を進めるとおざなりになってしまってきちんと運用されないことが多いのが現実である。そのために、スクラム開発はスクラムマスターを別でロールとして用意することで、これらの「ちゃんとやるべきこと」をきちんとイベントとして実施することが重要である。

エクストリームプログラミング

エクストリームプログラミングの本質はプロダクトを長期に渡って運用することを見越したチームの熟成が必要な場合に使われるべきフレームワークである。簡単に言ってしまえば、その本質は「教育」にある。スクラム開発はスプリントに参加する開発者はある一定の能力を持った開発者が揃っていることが前提にあり、教育的概念を含んでいない。一方で、現実ではチームメンバーの力量はメンバーごとに様々であり、インフラ、バックエンド、フロントエンド全てに精通している優秀なメンバーもいれば、一部のスキルしか持ち合わせていないメンバーもいるようなことがある。これによって、上述した不確実性の1つとして挙げたチームの開発力が、メンバーの流動によって見積もりに大きなブレができてしまう。これを避けるために、ペアプログラミングを基本としたチームの開発力の底上げと均一化を行い、どのメンバーでもどの機能開発もできるようにすることが狙いである。

さいごに

アジャイル開発について学んだことや考えたことをまとめた。アジャイルの本質は不確実性を低下させながら正しいプロダクトを開発することにある。開発手法や個々の場面で使われるべきツール、フレームワークアジャイルサムライをはじめとした様々な文献を読んでより深い理解を深めてほしい。ただ、本質的にはチームやプロダクト、それらの置かれた状況や環境などに応じた、最適な開発手法を探すのが一番だと思う。もしかしたらアジャイル開発に変わる新たな考え方が出てくるかもしれないし、時代に応じた適切な開発手法があるかもしれないので、今後もどういう開発スタイルが良いのか考えながら開発をマネジメントしていきたい。

JSConf JP 2019 参加報告

はじめに

昨日今日と JSConf JP 2019 に参加してきたので、聴講したセッションの内容を紹介します。

本記事は Recruit Engineers Advent Calendar 2019 1日目の記事です。

JSConf JP 2019 とは

JSConf JP は世界的な JavaScript Conference である JSConf の日本開催です。昨年まで日本Node.jsアソシエーションがNode学園祭として開催していた大規模JavaScript イベントが、Node.js に限らず JavaScript に関する内容のお祭りとして変化を遂げ、今年からJSConf JP となった形です。今年は、2019年11月30日、12月1日の二日間で開催されました。リクルートテクノロジーズは、イベントのプラチナスポンサーの1つです。

以下、公式ページからの引用です。

jsconf.jp is a JavaScript festival in Japan powered by Japan Node.js Association. This is the first event of jsconf in Japan. We would love to become a bridge between Japanese Web Developers and International Web Developers.

jsconf.jp

今回の会場は、アーツ千代田 3331 でした。学校を改装した会場で、体育館、地下、屋上を活用した3会場でセッションが講演されました。Wi-Fiネットワークの接続不良や、体育館や特に屋上は寒いといった、少しつらいところもありましたが、学校の教室や体育館を回る感じはなかなかエモくてよかったです。

内容は、1日目、2日目ともに3セッションで開催され、JavaScriptに関わるさまざまなテーマで話されました。スピーカーはおおよそ海外ゲストと日本人ゲストが半分ずつくらいでしょうか。参加者はほとんど日本人で400人を超えていたそうです。海外スピーカーでは Next.js の Guillermo Rauch, Babel の Henry Zhu, Fastly の Andrew Betts など、日本からも t_wada さんや jxck さん、えーじさん、こばさん、kosamariさんなど他にも豪華なゲストが登壇されていました。企業ブースにはリクルートYahoo!JAPAN、メルカリといったブースなどスポンサーに上がっている企業が並んでいました。

僕が聞くことができたセッションの内容を簡単に紹介します。

1日目

The State of JavaScript

初日Keynote は、JavaScript に関わる言語やツール、フレームワークなどのサーベイを行なっている State of JavaScript でした。

サーベイにも参加可能です。以下のようなアンケートになっているので、ぜひ回答してみましょう。

f:id:ka2jun8:20191201170556p:plain
アンケート

昨年のサーベイ結果は見ることができるので、見てみると技術トレンドや傾向が見られて面白いです。

「繋がり」の可視化

続いて、データビジュアライゼーションで著名な方による講演でした。

スライドがいちいちおしゃれでした。

静止画ではなかなか伝わりづらいかと思いますが、記事を読んでいくとスクロールに応じて(記事の内容に関わる数字を示す図として)綺麗にビジュアライズされた情報が表示され、ノードを操作しコネクションを辿ることで求めている情報にたどり着く体験はなかなか味わうことのできない良いUXでした。

どう作るのかとても気になりましたが、発表中にもデータを整形したり作るのが大変、今回の発表にも間に合わなかった部分があるというようなことが言われていたので、まだまだ難しい部分がありそうです。このようなUXがより簡単に作られるようになるといいですよね。

オープンソース」の定義

OSSを使っているエンジニアは99%を超えるとのことです。OSSを仕事として進めることの難しさが問いかけられ、エンジニアにとって考えさせられる発表でした。

OSSに携わっているのは「楽しくてクールだから」とのこと。モチベーションとして、エンジニアである以上開発が楽しくてクールだと思えることは大切ですよね。

夕方のスポンサートークサイボウズではeslintに寄付しました、とのこと。こういった文化も大事だなと感じました。

OSS は世界の縮図であり、レンズ、ミラーであるという話は響きました。便利に使えるものを提供してもらえてること自体が素晴らしいことであるはずです。しかしだんだんそれが当たり前となり、感謝の気持ちを忘れて少しのバグで強い発言をしてしまう、といったことは、エンジニア以前に「人として」考え直さなければならないと感じました。

Building and Deploying for the Modern Web with JAMstack

Next.js の ZEIT の CEO による、今後のWebサービス開発についての登壇でした。

Socket.io や Next.js, Now といったサービス、ツールを成功させているの、本当にすごいですよね。

興味が最近だんだんバックエンドからフロントエンドに寄ってきたとのこと。Node学園祭(Node.js)から JSConf (JavaScript)への変化も同じですね。

発表の内容は、これから時代はSSRではなく静的な HTML を生成し配信することであり、Static + CSR でページのレンダリングを行うべきとのことでした。先日の Chrome Dev Summit 2019 で Next.js はWebフレームワークのデファクトになりつつある現状を踏まえると、JAMStack で Next.js と Now を使ったWebサービス開発がデファクトになっていくのかなと感じさせる発表でした。

実際に SSR の欠点などは勉強になることが多かったので、メリット・デメリットを見つめ直しながらアーキテクチャと技術スタックを選択していきたいです。

Write What Not How

Reactなどを代替する宣言的プログラミングによるhyperapp (hyperscript)というUIフレームワークに関する発表でした。

f:id:ka2jun8:20191201180516j:plain f:id:ka2jun8:20191201180509j:plain f:id:ka2jun8:20191201180501j:plain f:id:ka2jun8:20191201180453j:plain

書き味が若干異なりますが、読みやすく書きやすそうですよね。文量もだいぶ減りそうです。一方でそれ自身が良いとしても言語体系がコミュニティとして広がっていくかどうかは別問題ではないかなと思いながら聞いていました。

github.com

Deno - JavaScript の新たな道筋

ライアンダールが Node を代替するものとして新たに Deno を開発しています。今回はその Deno の紹介でした。

内部的には V8 を動かしているので、そこまで大きく動作や書き味が変わるということはありませんが、

  • TypeScript で書かれる
  • セキュリティが重要視されフラグを立てないとNWやファイルにアクセスできない
  • モジュール解決が node_modules ではなく NW/File path 経由など

が変化としてあげられます。まだ複雑ではないので中身のコードを読むと Node.js の勉強にもなるよと聞きました。 Deno でツールを作ってみたりするのはちょっと楽しそうです。

Headers for Hackers

Fastly の Andrew Betts 氏による HTTP Headers と Cache の話でした。

f:id:ka2jun8:20191201181730j:plain

ヘッダにどんな情報を付けるべきでどういう情報は付ける必要がないのかなど、実際のヘッダを例にあげながら紹介されました。

知らなかった Header などの情報も得られ、学びのある発表でした。

紹介された Header まとめの図は以下です。

f:id:ka2jun8:20191201181757j:plain

-- 以下LT --

予測的 Prefetching によるパフォーマンス改善

GA でよく次に見られるサイトを判断することで、先読みしたページをprefetch を行うことでパフォーマンスの改善を行うツールである、 guess.js の話でした。

Web Components era phase 2

Web Components の紹介でした。標準化から、AMP などで使われるまでに至っているので、(まだ適用に難しい部分はあれど)これから取り入れていきたい技術の1つですね。

Cache Me If You Can

Cache の話です。Cache に関するHeaderをつけたときのキャッシュが更新されるまでの内容が事細かにまとめられており、とても勉強になる発表でした。

Node.js でつくる Node.js - WASM/WASI ミニミニコンパイラー

WASM の話でした。少しコアな内容の話でしたが、開発の楽しさを語ってもらえた良い発表でした。

React アプリのライセンス違反について

React のライセンスが minify で消えませんか?という話で、LT向けの発表でした。

2日目

時間はただの幻想である… JavaScriptにおいては

JavaScript で時間を扱うということについての発表でした。

例えば、Timezone による失敗談や、そもそも概念的な難しさについて紹介されました。

時間を扱う有名なライブラリとして moment.js とともに、 JavaScript の Date オブジェクトについて比較しながら紹介されました。

それに加え Temporal というプロポーザルが出ているとのことでした。

個人的には、 moment.js より date-fns 派ですが、これからは Temporal になっていくのでしょうか。

ストリームの人生

Stream API に関する話でした。Stream は、誤解を生みやすいとのことですが、確かにややこしく難しいイメージがありますね。

node.js の Stream は1 ファイルに 1000行以上あり、そこまで行数のある処理を1ファイルに記述するのがそもそもどうなんだっけという話がまず紹介されました。

そして、発表者のドミニクは100行程度に書き換えて同じことを実現でき、それが今回発表された pull-stream, push-stream でした。

内容的にはだいぶ難解でしたが、興味深い内容でしたね。ベンチも取っていて相当早くなってそうではありました。100行程度だそうなので、読んでみるといいかもしれません...(震え声)。

Web の自重

Jxck さんが会長から無茶振りされて発表に至ったとのことでしたが、Web の今後を語るとても良い発表だったと思います。個人的には一番未来的で刺さる興味深い内容の発表でした。

まず掴みからして面白かったですね。

「Web という仕様はない」は確かにその通りですよね。だからといって Web という世界で好き勝手やっていいとはなりません。

だからこそユーザを守るために、標準化と仕様策定が議論されているのだと認識しました。

そして、タイトルにある通り Web の自重 に繋がります。

いまやもうブラウザという巨大なソフトウェアを一から作るのは相当難しいものになってきています。新規で開発されないということは、Web ブラウザは減るしかない、ということになってしまいます。

ゼロから作られるわけではなく、多様なライブラリを活用し組み合わせることでもう一度ブラウザを作ることが可能なのでは、というところから、Chromium ベースで再開発された Edge の話に繋がります。つまり、ゼロ=基点となるものは Chromium のことだったのです。

そうして、ブラウザとは何か?という本質論になります。

これまでの技術スタックとして、通信プロトコルや言語、レンダリングされるまでの技術は進化を遂げ、ブラウザがより低レイヤな存在となってきており、これからもそうなっていくと考えられます。

ブラウザはこれからより一層 OS のような存在になっていくことが予想されます。そう思うと、ブラウザが Native をブリッジするマルチプラットフォームな OS として、また一種の SDK として働くようになっていくと考えれば、 Google が取り組んでいる Project Fugu も別の見方ができるなと感じました。

Migration from React Native to PWA

Quipper による発表で、 React Native で作っていたアプリを PWA / Hybrid App に移行した話でした。

ちなみに 2018年のサーベイでは React Native は Native 化するツールとしては Electron に続いて2番目の利用率で、2割のユーザが使ったことがあるとのことです。一方、PWAはその肩にも並べられてない新規の技術だそう。

チャット機能のある業務向けアプリで、外部公開するものではなくインストールも Deploy Gate を使っていたアプリなので、PWA 化もインストールをお願いするだけだったという前提がありました。

PWA はまずインストールしてもらう障壁があるのでどうしたんだろうと思ってましたが、そこは業務系であることでクリアされていたんですね。

React Native の問題点について紹介されていました。

iOS については、PWA として機能しないのでハイブリッドアプリ化して対応していました。iOS の PWA 対応はやはり厳しいですよね。

GraphQLを用いたECサイトにおけるパフォーマンス改善

GraphQL を利用しているサイトのパフォーマンス改善を行ない、その改善した内容の紹介でした。当初のサービスは、ruby on rails (CSR) + graphQL だったそうで、それを node.js のレンダリングサーバとして BFF を入れ、そのほかチューニングを行なったとのことでした。

これらのチューニングを行うことで、8点だった lighthouse の点数が 50点程度まで上がったとのことでした。

悪用された npm パッケージの分析

npm モジュールの event-stream がマルウェア化したあの事件についての紹介でした。 npm モジュールの依存関係は複雑で、脆弱性をつく攻撃コードが含まれても気づきづらい特徴があります。(まあ npm に限った話ではないかもしれませんが。)

問題になるまでの経緯はおおよそ以下のような流れです。

偶然にも deprecated な API を使っていたことにより、問題の発見に至ります。

コミュニティやモジュール管理のあり方に関わるので、とても難しい問題だと感じました。

Browser APIs: 知られざるヒーロー達

アメコミヒーローに例えられながら、ブラウザの知られてないマーベラスAPI たちが紹介されました。

位置情報などだけでなく、実はバッテリー情報やネットワークの接続状態を見ることもできるのですよね。

Anatomy of a Click

ブラウザがクリックされたときの挙動について紹介され、発表内容の文脈としては、E2Eが不安定であることでした。

しかしながら、結論は安定的にするのは難しい、という結論でしたね。

イベント処理の解説は難しかったですが、近年だとReact.js での VDOM でのイベントハンドリングが挟まることによって処理伝搬の仕組みがややこしくなっていることだけはわかりました。勉強不足。。。

Recruit Speed Hackathon

最後に、リクルートのスポンサーセッションとして Speed Hackathon が開催されました。題材は JSConf JP のスピーカー一覧が表示されるページを意図的に重くしたものを、制限時間内でどれだけはやくでき、lighthouse の点数100点を目指せるか、といったものでした。

リソースの非同期取得や、画像サイズを適切なものに変え lazyload を適用させるなどして、100点を目指すものでした。ハンズオン形式で、現場のエンジニアと話をしながら技術を学べるセッションがあるのも、一つJSConf JP の特徴と言えるかなと思いました。

まとめ

JSConf JP 2019 の参加報告として、僕が聞いた発表内容を簡単に紹介しました。JSConf のようなどこかの企業や製品に縛られず海外のゲストスピーカーが豪華に揃う会は珍しいので、とても参考になるような話も多く参加できて非常に良かったです。英語の発表でなかなか理解しきれないところもあり悔しい気持ちもありましたが、発表自体は上手な人が多いですしリアルタイムで英語字幕も流れていてなんとか少しは雰囲気を掴むことができて良かったです。来年もぜひ参加したいと思いました。

Chrome Dev Summit 2019 参加報告

Chrome Dev Summit 2019 とは

Chrome Dev Summit is an annual conference where developers can learn about the latest tools and updates coming to the Google Chrome browser.

Chrome Dev Summit は、開発者がGoogle Chrome ブラウザに関する最新のツールやアップデートについて学ぶことができる年に一度のカンファレンスです。

developer.chrome.com

Google I/O よりも小規模だが、Web 系のセッションで埋め尽くされるため、 Web 関連をやっていると CDS の方がよっぽど興味深い。

会場はサンフランシスコのイエルバ・ブエナ芸術センター。特に周辺に観光として見るところはなかったが、かといってさびれた感じもしなかった。若干治安の悪いところもあるらしいが、近づかなかったので問題なかった。

余談

泊まったホテル会場から近いし綺麗だったけど、めちゃくちゃ高かった。

f:id:ka2jun8:20191117181718j:plain
ホテルはきれい

f:id:ka2jun8:20191117181648j:plain
フィッシャーマンズ

1日目

Keynote

  • 先立って2日間の全体のサマリーという感じ。
  • Chrome に新しく追加される機能やAPIなどがざっと紹介された。
  • レイアウトエンジンが高速化されるなどChromeは着々と今も強くなり続けているんだなと感じた。
  • Zeit CEO の next.js の発表があったのがすごかった。

  • Lighthouse ci は使ってみたいと思った。CI そのものだけでなく普通に UI も差分が見やすそうだった。

  • ライブでのSpeed hackathon はimg を data-src に追加しただけだったし用意してたと思うけど、それにしてもすごいなと思わせるものがあった。

  • Chrome の devTools の Source から Overrides で書き換えればそのまま書き換えたコードで lighthouse できる。

  • Auto lazy load 画像や iframe を自動的に lazy load にしてくれる。
  • Accessibility で画像を解析して何の画像かを自動でキャプションする。

余談

  • bigwebquiz.com 普通にリアルタイムで集計して結果表示してトーナメント勝ち進めるUI綺麗だし、動作も安定しててすごいと思った。
    • ただ最初iOS/safariで動かなくて、「safariでテストしてませんでした!!!」って謝罪してたの、まじで演出の1つなんじゃないかと思うくらい笑った。

Protecting users on a thriving web

  • example.com」に見えるが実はnon-ascii が混じったURLでURLバーに表示するフィッシングがあるらしい
  • それに対して、検索でよくアクセスされてる似たドメインを探して、本当はこっちのページではないですか?というwarning を出してくれる

f:id:ka2jun8:20191117182143j:plain

f:id:ka2jun8:20191117182201j:plain

  • 証明書は lock symbol から確認できる
  • Lock symbol は自分自身を証明しているだけにすぎない
    • 安全だったら 2FA なんてしてない
  • パーソナライズしないようにしたads の収益が-52%する

f:id:ka2jun8:20191117182322j:plain

  • Cookie 使わなくても fingerprint はできる
  • Cookie で SameSite つけないとダメだよ話

What’s new in sign-up and sign-in

  • SMS で 2FAするときに、入力をサポートする
  • SMS で 2FA は本当に安全といえるか?
    • 簡潔な答えは「Be careful」
    • 安全だとは言い切れないけど、ないよりはいい。まあそりゃそうだ。
  • Web AuthNの紹介
  • Github の 2FA はSMSではない、ハードウェアの authenticator とかを使えるようになってる
  • Yahoo!JAPAN だと re-auth で 端末の指紋認証とかを2FAで使えるようになってる。FIDOか。

f:id:ka2jun8:20191117182452j:plain

Speed tooling evolutions: 2019 and beyond

  • パフォーマンスの話、lighthouse っぽいアジェンダの書き方になってておしゃれ
  • パフォーマンスのメトリクスがv6で変わる。Largest Contentful Paint が重要視される。これまで以上に大きな要素は作っちゃだめだな。

f:id:ka2jun8:20191117182625j:plain

  • 結果の出力も可能になって spread sheet とかにも出せるっぽいし、サチコンで speed report も見られるようになった。 Lighthouse の結果みるの、これらだけで十分かもしれない。
  • Github Actions 使うのはあり。
  • Extension がどうこう言ってたから、拡張も自分らで作って載せられるかも。
  • LHCI (Lighthouse CI) の紹介。これは使ってみたくなる。

Adoptive Loading - Improving the user-experience for millions on low-end devices

  • 使われる端末によってスペックに大きく差があるので、スペックが低い方に合わせて作る方がいい→弱い端末なら普通、いい端末ならはやくなる
  • 端末のstatus や network の status で adaptive に 描画するものを変更する(強ければリッチにするし、弱ければ低画質だったり機能を削る)
  • で、Low と high で webpack chunk 名つけて、 chunk 分けして、それぞれに対して不要なコードは落とさないようにする。まじかよ。
  • クソ作るの大変そうだけど、まあやったらそりゃいいのはわかる
  • レンダリングだけでユーザイベントをブロックしないようにしたり、フレームレートを自分でいじったりもできるので、そういうのを活かそう(きつい)

f:id:ka2jun8:20191117182905j:plain

The main thread is overworked & underpaid

  • UIを描画する以外のロジックはWorker を使おう
  • Worker に対して操作する名前つけて switch するとか大変だから comlinik が便利
  • Main thread は UI thread だ!

f:id:ka2jun8:20191117183015j:plain

  • Proxx がまあ参考になるらしいけど、あのアプリは化け物級だろ、、、

Next generation web styling

  • Prefer theme で テーマカラーを変えれる
    • Dark | light
  • Margin-inline-start とかで Japanese だったら縦書きとかを再現できるようになる
  • Filter css で画像にフィルターかけられる
  • Js で style の要素を自分で書き加えたり、 js で要素の style をとってきて DOM っぽい TOM を操作できるようにする
  • Animation を worklet で js で書ける

PWA and the installable web

  • PWA の原則は “Don’t be. Annoying”
  • ユーザーに利益がないならやらない。
  • 本当に価値を分かっているユーザのために使うもの
  • OYO で OYO lite として使ってうまくいってる。
  • PWAはとりあえず入れればいいってものではない。きちんと注意して使えよ、という説明になっていたのがよかった。手放しに入れて良いものではない。

f:id:ka2jun8:20191117183138j:plain

Bridging the native app

  • Share API, contacts API, ファイル操作APIなど、ネイティブに近いAPI が使えるようになる
  • 連絡帳が使えたり、エディタアプリみたいなのも作れる
  • このためにエディタ実装してたらまじですごいんだが…。

f:id:ka2jun8:20191117183211j:plain

余談

戦利品です。

f:id:ka2jun8:20191117183315j:plain

2日目

Intent to explain: demystifying the Blink shipping process

新しい機能をChrome に導入し仕様策定にもっていくまでの話。 まず問題点を調査し、それに対する prototype を開発する。 experimental な flag で機能の出し分けを可能にした状態で開発者からのフィードバックを得て iteratable に機能を改善する。 そして最終的に ship / unship を決める。

f:id:ka2jun8:20191117183416j:plain

HTML isn’t done!

フォームの要素を新しくする話。

  • カレンダー新しくなるんだね f:id:ka2jun8:20191117183503j:plain

  • Edge と Chrome でやっているというのがなかなか良い話。 f:id:ka2jun8:20191117183525j:plain

  • なぜ Web エンジニアは フォームの要素を作り直しているのか? こう見ると、やっぱりみんなフォーム嫌いだったんだなと思う。大変だよね。

f:id:ka2jun8:20191117183544j:plain

  • select フォームが嫌い。 f:id:ka2jun8:20191117183630j:plain

  • なぜ嫌いか? 結局どんなフォームの要素だとしても styling が必要になる。 フォームの要素を自分たちで用意できるようにする、といったことを話していたと思う。

f:id:ka2jun8:20191117183707j:plain

詳しくは、 Open UI をみてもらえれば、とのこと。 f:id:ka2jun8:20191117185603j:plain

Advancing the web framework ecosystem

Chrome を取り巻く Webフレームワークの話。 React ならまだしも、 Next.js + Chrome の話が結構多めにあったのが注目すべき点。 Vue も一瞬出てきていたが、やはり世界的には React 一強という感じがした。 next.js に対して Google の開発者たちが contribution しているとのこと。 こういう話を聞くと、 next.js を使うのがデファクトになりそうだなと感じざるを得ない。

f:id:ka2jun8:20191117184020j:plain f:id:ka2jun8:20191117184009j:plain f:id:ka2jun8:20191117183956j:plain f:id:ka2jun8:20191117183948j:plain f:id:ka2jun8:20191117183935j:plain

In which we make loading disappear with and friends

Portals, Periodic Background Sync, Web bundles など、 新たに試用的に開発されている Chrome の機能たちに関する内容。 勢いのある楽しい内容だったし、何よりも Japan 企業たちが例にあがっていたのが特徴的だった。Hatena, Yahoo!JAPAN が発表に現れていて、すごいなと思った。

f:id:ka2jun8:20191117184113j:plain

Portals は簡単に言ってしまえば iframe で表示した next page をシームレスに画面遷移可能にするもの。 URL もシームレスに変更されるので、 MPA で SPA っぽい UX を提供可能になる。 ただ experimental なので、 chrome で flag を true にしないと利用できない。 Portals は Hatena や paypay モール, Yahoo ニュースで試験的に使われているとのこと。 こうやってサービス名出してもらえるのいいな。

f:id:ka2jun8:20191117184143j:plain

Hatena は Background Periodic Sync も使っているとのこと。 Background Periodic Sync は、名の通りバックグラウンドで定期的にデータ同期するAPI

f:id:ka2jun8:20191117184209j:plain

Web bundles は、Web page を bundle して 1 つのファイルとしてダウンロード、配信、展開可能になるもの。 発表とは別に、現地で、どういうケースで使えるだろうかというのをいろいろ議論できたのが楽しかった。 Web bundles は、network が落ちていても bundle されたファイルを横展開で配信できれば、同じウェブアプリを動かすことができる。 Signed exchange を利用できればそのファイルが正しい信頼されたものであると chrome が保証してくれるもの。 日本だと network インフラが整っているので、なかなか展開が難しいよね、という話をした。

f:id:ka2jun8:20191117184231j:plain

On the things you’ll compile - modern WebAssembly

Web Assembly に関する発表もあった。SIMD に対応したらしい。 Web で 3D レンダリング など行えるという話だった。 より早くなり、より使いやすくなっていきそうではあるものの、やはり活用面がピンとこなかった。

f:id:ka2jun8:20191117184301j:plain

Q&A with the Chrome leads

Web as a building block for user experience

Chrome extensions and the world of tomorrow

上記三件、打ち合わせ等のため聴けなかった。

How to make your content shine on Google Search

Google bot に関する最新状況の話。

f:id:ka2jun8:20191117184526j:plain

Google bot が何年ぶりかに UA が update されるとのこと。 バージョン 41 固定にしてる人は変えてね。RegExp とかでみてね。

f:id:ka2jun8:20191117184606j:plain

100% JS のページでも indexing されている実績がある。 CSR のページでも(十分に速ければ)ちゃんとインデクシングされるという紹介。

f:id:ka2jun8:20191117184541j:plain

レンダリングは5秒が中央値。 90%は1分以内にレンダリングされる。 一方、ローディングが "done" の状態が難しい、という話があった。 変に接続・通信が続いた状態になってしまっていると遅いと判断されかねないので注意してほしいとのこと。(networkidle0にする)

f:id:ka2jun8:20191117184553j:plain

まとめ

Chrome Dev Summit 2019 に参加してきた。 思っていた120倍楽しめたので本当に行ってよかった。 サンフランシスコという街はあまり好きになれなかったが、Chrome の最新事情を聴けたり、Chrome や Next.js の開発者と話すことができてよかった。 また来年以降も行けるなら行きたい。

GCP の Cloud Function にアクセス制限をつける

GCP の Cloud Function は誰でも呼び出せる

GCP の Cloud Function で HTTP 関数を作成すると、デフォルトでは誰でもアクセスできてしまう。

(9/25現在。今後変わるらしい。)

アクセス制限をつける

  1. 自身のアカウントに cloudfunctions/admin 権限がついていることを確認(そうでないと、未認証の呼び出しを許可するチェックボックスを操作できない)。また、呼び出す側のサービスアカウントに cloudfunctions/invoker 権限がついていることを確認。

  2. gcloud の CLI からアクセス制限かけられないので、GCPのwebページからGUI で新規作成し、「未認証の呼び出しを許可する」のチェックを外す。

  3. アクセストークンを生成する( gcloud auth print-identity-token ${service account email}

  4. Cloud function へアクセスする際に header の Authorization に Bearer: アクセストークン をつけて呼び出す

上記の操作を行うことで、アクセス制限をかけられる。

アクセストークンは1時間で有効期限が切れる

gcloud の CLI で呼び出す形だと、1時間で有効期限が切れてしまう。 node.js などのプログラム上からトークンを更新しながら呼び出す必要がある。

firebase を利用している場合は、firebase の npm モジュールで、getIdToken 関数を利用することができる。 そうでない場合は、 google-auth-library のライブラリを用いて、JWT を利用した呼び出しを行う。

このサンプルが参考になる。

github.com

target_audience に cloud function のURLを指定して、token を発行してリクエストを行うことができる。

まとめ

GCP の Cloud Function は誰でも呼び出せてしまうので、アクセス制限をつける1方法をまとめた。 今回はサービスアカウントを利用した方法だが、GKE などを利用している場合は、GKE 自体に権限をつけてアクセスを許容することなどもできるっぽい。


Kubernetesを勉強するなら Kubernetes実践ガイド

next.js v8 と v9 で amp 化の動作の違い

Next.js で AMP ページを作る

Next.js では簡単に AMP ページを開発することができる。

Next.js v8 での方法

withAmp の HoC が用意されているので、関数でコンポーネントをはさみこむ。

import { withAmp } from ‘next/amp’
function Home() {
 return <p>Welcome to Next.js.</p>
}
export default withAmp(Home)

Next.js v9 での方法

{amp: true} の config を export する。

export config = {amp: true}
function Home() {
 return <p>Welcome to Next.js.</p>
}
export default Home

AMP optimizer の動作

Next.js v8

amp-optimizer v0.5 系が動作する。

next v8(というか optimizer v0.5.2)だと、optimizerに validAMP というconfigがあって、 validな状態を保持するオプションがあり、query に amp があるときだけ、validAMPをtrueにしてoptimizerを回す。 なので、next v8だと、?amp=1 のときは valid, ついてないときは optimized になっている。

つまり検索エンジンには、 ?amp=1 、直接アクセスしてきたユーザには / にアクセスしてもらうようにしなければならない。

next.js/optimize-amp.ts at 0dbd3b98eca0bee01a05b8414a60c48abba76abd · zeit/next.js · GitHub

amp-toolbox/DomTransformer.js at 03670573760aba03c8ac38b5daaee35ffd629e36 · ampproject/amp-toolbox · GitHub

Next.js v9

amp-optimizer v1 系が動作する。

next.js/optimize-amp.ts at canary · zeit/next.js · GitHub

amp-optimizer v1 では、validAMPオプションはなく、default で AMP validなものとなるようになった。

github.com

つまり、Next.js v8 のときのように検索エンジンに対しては ?amp=1 をつけたhtmlを返すといった対処は必要なくなる。

amp-validator chrome extension は複数回リクエストが走る

AMP Validator のChrome 拡張

Chrome 拡張で AMP validator が提供されている。

chrome.google.com

閲覧しているページに AMP 版のページがあるかわかったり、 開発している AMP ページが AMP-valid かどうか判断できる。

しかし、リクエストが多発する...

next.js で getInitialProps で console.log する amp ページを作り、chrome からアクセスする。

getInitialProps
[ warn ]
[ info ]  ready on http://localhost:3000
getInitialProps
[ warn ]
[ info ]  ready on http://localhost:3000
getInitialProps
[ warn ]
[ info ]  ready on http://localhost:3000
getInitialProps
[ warn ]
[ info ]  ready on http://localhost:3000
getInitialProps
[ warn ]
[ info ]  ready on http://localhost:3000

5回も呼ばれる...。

よくわからないが、amp validator を入れておくと複数回アクセスされてしまう。