kdnakt blog

hello there.

#web1week イベントに参加してオンライン・ファイブフィンガーアプリをリリースした

イベントレポート API Gateway WebSocket GitHub Pages React

Crieitの「１週間でWebサービスを作るイベント」に参加した。

crieit.net

 

作ったサービスはこちら。

kdnakt.github.io

 

 

[参加したきっかけ]

前回同様、きっかけとかはCrieitに書いた。

crieit.net

 

簡単に書いておくとこんな感じ。

  • 前回参加時に実装したかったアプリのリベンジ参加
  • ブラウザ上のJavaScript単体のアプリではなく、Web APIと組み合わせたかった

 

もう少し詳細に書いておく。

 

2020年2月末からコロナ禍の影響でチームメンバーの大半が在宅勤務になっていた。そうした状況下で、チームとしての新たな責任が降ってきたこともあり、もっと良いチームにしていきたいと考えていたところ、『カイゼン・ジャーニー』でも紹介されている「ファイブフィンガー」というプラクティスを思い出した。

note.com

 

ただし、自分のいるチームでは、在宅勤務中に自室をWebカメラで写さない派のメンバーもいるため*1、デイリースクラムで「せーの！」でファイブフィンガーを実施することが難しいという問題があった。

 

そこで、オンライン上でファイブフィンガーを実施できるアプリがあればいいのでは？と考えて実装したのが今回リリースした「5F」である。 

kdnakt.github.io

 

[開発中のあれこれ]

もともと、2020年4月中旬くらいからオンライン・ファイブフィンガーアプリの開発に着手していた。とりあえずローカルマシン上でQuarkusを利用したWebSocketサーバーを実装しつつ、4月中はブラウザ側の実装を進めていた。ゴールデンウィーク前に一通り実装ができたので、ゴールデンウィーク中はQuarkusで実装したサーバーサイドの実装をAWS Lambdaに載せるべく、さらに実装を進めていた。

この時点での実装状態はこんな感じ。

 

そうした中で、web1weekイベントの第2回が開催されることを遅ればせながら5月13日に知った。

イベント期間は5月18日から5月24日までである。最終日にCrieitに記事を投稿することを考えると、前日の5月23日にはすべての実装を終えてアプリを公開できていることが望ましい。というわけで、フロントはほぼ実装できているものの、アプリ公開までの期間は約10日となった。

 

「1週間で」というイベントの趣旨に反する開発期間となってしまった点は申し訳なく思っている。ただ、バックエンドは結局web1weekの期間中に、言語選定からやりなおして全て開発しなおしとなってしまったので、実質「１週間でWebサービス（のバックエンド）を作るイベント」ではあった。

 

バックエンド作り直しの経緯を書いておく。

 

ゴールデンウィーク中はひたすらローカルのエディタ上でのみQuarkus（すなわちJava）を利用したAWS Lambda用のコードを書いていたのだが、AWS Lambda上での動作確認をまったく進めてこなかった。これが敗因である。5月18日(月)のweb1week開始時に、ようやくAWS Lambda上にデプロイするも、全く動作しなかった。

 

問題を解決する見込みが立たなかったため*2、下記の記事を参考にTypeScriptを採用することを決定した。

riotz.works

 

5月20日(水)深夜、すでに日付は21日だったが、ようやくTypeScriptで実装した最初のWeb APIが動作した。そこからなんとかWebSocketの実装を進めるも動かず。いくつかQuarkusで実装していたときとは条件が変わったこともあり、フロントエンドのコードにも修正が入った。

 

5月22日(金)夜、ようやくAPI Gateway+AWS LambdaでWebSocketを動かすことに成功*3。

 

5月23日(土)深夜、OGP用の画像の作成や、名前表示機能の実装、今回のweb1weekイベントのテーマ「Like」に合わせたハートモードの実装を急ピッチで進める。

前回苦戦したOGPには今回は特に苦しまなかったが、本番環境の構築時にCORSの設定をミスってアプリが動作しないなどの問題にぶち当たった。

 

最終的に出来上がったものはこんな感じ。

f:id:kidani_a:20200526020208p:plain

 

今回開発したアプリの元のイメージとなったオンライン・プランニングポーカーアプリと比べると、画面全体のレイアウトとか、部屋を作ってから投票モードを切り替えられる部分とか、改善したい部分はいくつかある。時間的制約を理由にアプリ公開を優先した結果、諦めた技術的チャレンジもたくさんあるので、今後もバージョンアップしていければ、と思う*4。

tools.wmflabs.org

 

[使用した技術など]

今回利用した技術要素を列挙しておく。

 

▼ローカル版 

▼AWS版

 

ローカル版もAWS版も、リポジトリはこちら。

github.com

 

[まとめ]

  • #web1week イベントに参加してオンライン・ファイブフィンガーアプリ「5F」をリリースした
  • 前回のイベントでリリースしたかったやつのリベンジができて嬉しい
  • Web APIを利用したWebサービスを公開する経験を積めた
  • Webサービス開発楽しい！次も何か作るぞ！

 

*1:Webカメラがない、恥ずかしい、なんとなく、など理由は色々あると思うし、写すことを強制する必要もないと思っている。

*2:Quarkus+AWS LambdaでWebSocketを実現する件については、いつかリベンジをしたいと考えている。

*3:この辺も、AWS Amplifyを使ってWebSocketを実現したかったのだが時間的制約を理由に断念した。いつかリベンジしたい。

*4:結局前回リリースした「IPアドレスまちがいさがし」のバージョンアップは全然手をつけられていないが……。