パスキーハッカソンに参加してみた #ヌーラボ真夏のブログリレー2024

ヌーラボのsuzukiです。このnoteは、ヌーラバー真夏のブログリレー2024の3日目の記事として更新しています。

はじめに

2024/6/21にGoogle主催で開催されたパスキーハッカソンというイベントに参加しました。
このブログではパスキーハッカソンにどんな風に取り組んだかをざっくりまとめたいと思います。

ヌーラボチームが、2024年6月21日(金)に開催される「パスキーハッカソン東京」に参加します

チームを作った

イベントの説明では
一日かけてパスキーを使った何かを制作して頂きます。自社製品のプロトタイプ開発の機会にぜひご参加ください。
とあります。
これは面白そうだと集まった6人のメンバーで参加することになりました。
メンバー6人の構成は以下の通り、部署も所属オフィスも様々です。

• matsuyama (情報統括部、福岡オフィス)

• aso (サービス開発部 Apps課、東京オフィス)

• suzuki (サービス開発部 Apps課、東京オフィス)

• fujimori (サービス開発部 Apps課、東京オフィス)

• miura (サービス開発部 Apps課、東京オフィス)

• sakai (サービス開発部 Backlog課、京都オフィス)

部署、所属オフィスが異なるメンバーで結成したチームですが、フルリモートで働いてる我々にとっては全く問題ありません。場所にとらわれずにワークするための環境やノウハウは整っています。

支援制度があった

ハッカソン当日は渋谷のGoogleオフィスで一日作業することになります。一部のメンバーは福岡、京都から出張してくる必要があります。ここで使ったのが コミュニティ活動支援制度 です。この制度は、外部のイベントに登壇するヌーラバーのコミュニティ活動を支援する制度で、出張費用を全額負担してもらえます。今回のハッカソンはこの制度を受けられるということで活用させていただきました。

何でやるの？

イベントの説明では 自社製品のプロトタイプ開発の機会にぜひご参加ください。とのことですが、ヌーラボは既にパスキーには対応しています。
だがしかし、パスキーハッカソンに参加したいのだ！
という欲望を正当化するために以下のようにまとめました。

ヌーラボアカウントは昨年10月にパスキーを導入しました。
しかし、パスキーの導入のしやすさ、わかりやすさにはまだ多くの改善すべき課題があると感じております。より多くのユーザーに安心してパスキーを使っていただけるよう、パスキーハッカソンを通じて様々な検証をさせていただきたいと思ってます。

業務優先だよ！

さて、このようなイベントの参加は自己啓発というものになるかと思います。当然ですが ハッカソンに参加することにしたので仕事抜けます というわけにはいきませんね残念ながら。業務優先でいきましょう ということで約1ヶ月間パスキーをハックする取り組みが始まりました。

冒頭にあるように、イベントの説明では 一日かけてパスキーを使った何かを制作して頂きます とあります。言葉のまま受け取ると
「何をやるか考えるのは事前にやっといて、当日皆でガッ！とやる」
みたいな感じですかね。

しばらく考えて それは、もしかしたら、無理なのでは、と思いまして、イベント当日までに8割くらい完了している状態にしよう、ということでメンバー合意しました。
（今思うと「当日ガッ！」にしなくて本当に良かったと思います。集まった各チームの完成度をみると当日ガッのチームは皆無という印象でした）

取り組み方で工夫したのは以下の点です

• ミーティングは30分

• 課題を小さく分割して取り組みやすくした

• 開発環境を分離した

ミーティングは30分

毎週月曜日に30分のミーティングの時間を取りました。皆で集まって話すのはそれだけです。30分しかないので連絡事項がメインになります。具体的な議論は別途少人数でミーティングしてもらうようにしました。それ以外のコミュニケーションは Backlog や Typetalk で十分です。非同期でやるほうが効率的だったりします。

課題を小さく分割して取り組みやすくした

ヌーラボはパスキー対応済みなんで、もっとこういう機能をつけたら改善するんじゃないか、というのをリストアップしました。
（パスキーの専門用語が出てきてわかりづらいと思いますスミマセン）

パスキーの実装に関わる取り組み
1. ログイン時、パスキーAutoFillだけでなく「パスキーでログイン」ボタンでログインする機能
2. 複数のパスキーを登録したときに、どれが何のパスキーなのかわかりやすく表示する機能
3. 登録したパスキーが「同期パスキー」なのか「デバイス固定パスキー」なのかわかる、そしてその違いがどういうことを意味するのかユーザーにわかるようにしたい

パスキーに関連する取り組み
4. アカウント新規登録時、ログイン時にパスキーをリコメンド・登録する機能
5. 特に漏洩したパスワードを使っているユーザーにはパスキー導入を強く勧める機能
6. パスキーでログインできなくなったときのアカウントリカバリー方法
7. 機密データへのアクセスにパスキー認証を必要にするオプション機能
8. パスキーを登録してもパスワードでログインするルートを残していると結局そこが穴になるんじゃないか対策
9. パスキーを登録したらパスワードの削除を推奨する機能
10. パスキーを登録したら面白い何かが起きる機能（パスキーの登録を推進するために、登録するといいことがあるようにする）

パスキーを登録したら面白い何かが起きる機能に全リソースを投入したい 気持ちをグッと抑えて、すべての課題を分担して取り組んで行こうということにしました。
取り組み方はこんな感じです。

• 課題毎に主担当を決める、その人が自由に考えて実装もする

• 行き詰まったら「手伝ってほしい」という

• 興味があれば「手伝いたい」という

一つ一つの課題は割と小さめ（か？）なのでこれらを自由に取り組んで行こうということにしました。

開発環境を作る

ハッカソンの取り組みは プロダクションで動いているヌーラボアカウントをベースにしよう となりました。ハッカソンは通過点であってゴールは製品のアップデートです。

が、プロダクションのコードベースをつかうとなるといろいろ問題があります。

• いろんな部署から集まっているので、ヌーラボアカウントのことを知らない

• そもそもパスキーのことをあまり知らない

• そんな軽い気持ちで業務で使っている製品のコードをいじるのは事故の元

• 間違って本番系のブランチに修正をマージしたとんでもないことになる

• でもハッカソンなのでリスク無しで何をやってもいい状態にしたい

• だいたいコードレビューとかテストとかやってらんない、スピードが命

というわけで、普段業務で使っている開発環境のコピーを作りました。

• Respoitory のコピー

• DBのコピー

• 開発環境構築手順をまとめる

ハッカソンの取り組みはコピーの方で行います。業務で取り扱っている環境とは完全に分離した開発環境を作って通常業務に影響がないようにしました。これが地味に大変でした。

どんなものができたの？

パスキーをハックする取り組みは混沌としてきます。意気揚々と取り組み始めたメンバーは行き詰まりはじめます。他のメンバーの取り組みとコンフリクトします。コードはコピペとスパゲッティになっていきます。エラートラップなどやってられません。テストは落ちまくります。そもそも何をやろうとしていたのかわからなくなります。終わりが見えないまま迎えたハッカソン当日は軽いパニック状態です。
最高に楽しいですね！

最終的に出来上がった成果は以下のとおりです。

タイトルと概要だけだとちょっとよくわからないと思いますが、細かい内容は各メンバーがブログなどで書いてくれるでしょう。

まとめ

めちゃめちゃ楽しかったです！

記念写真

Googleグッズを頂きました