スプラトゥーンのプロフィール画像を作れるWebアプリを3日で作った話

Yuji Tsuburaya
Nov 23, 2018 · 7 min read

表題の通りですが、スプラトゥーンのプロフィール画像を作れるWebアプリを3日で作りました。会社の同僚のライトさん( @toshi_moz )と、週末は開発にフルコミットしてクソアプリを作りきるまでやるぞっていう企画、週末ハッカソンの第二弾。今日のブログでは、3日間で何をやったかを時系列ベースで書いていきたいと思います。

成果物がこれ。スプラトゥーンのプロフィールを入力すると画像が生成されて Twitter でシェアできるっていうもの。

成果物 https://splatoon-profile-maker.com/

👨‍💻 事前準備

第一弾のときの反省点として、事前準備を怠りすぎたというのがあったので、今回は少し念入りに事前準備をしてから臨みました。

✨ 作業洗い出し

まずはじめに Dropbox Paper を使って作業の洗い出しをしました。当日までに何を準備しなければいけないか、当日はどの手順で実装を進めていくか、等を書きなぐりました。事前準備を誰が担当するかのアサインもこのタイミングでやりました。

✨ 技術選定と環境構築

また、あらかじめどの技術を使うかを決めておきました。なるべくモダンな技術使いたいねっていうことで、フロントは Vue.js で SPA (Single Page Application) 化。ホスティング先には Firebase を選びました。サーバーサイドの処理もちょこっとだけ入るので、Web サーバも Firebase 上で node.js インストールして Express で API 作りました。

当日は実装だけに専念できるよう、このへんの準備までは前段階で終わらせておきました。リポジトリを作成して共有したりもこの段階で終わらせておきました。

✨ 軽くデザイン

デザインは Adobe XD でやりました。デザインデータも Git にコミットしてお互いに共有できるようにしました。デザインもあらかじめ全体のページ数が分かり、実装工数がなんとなく見積もれるレベル感では完成させておきました。


初日 (金曜日 21:00–27:00)

仕事終わりに僕の自宅に集合し作業開始。

DAY 1

ロジック部分はいったん置いておいて、マークアップとスタイル調整を一気にやりました。見た目を先にやることでなんか出来てきている感が出るので、テンションを持続させやすいという持論があります。

今回は、基本的にすべてペアプロでやりました。区切りの良いところまでコードを書いたら交代、という感じで 2–3 ターン回しました。だいたい1ターン40分くらい。作業を分担してやるよりも、休憩時間が揃ったり、集中力が持続しやすかったりと良いことだらけでした。

この日は一通りHTML / CSS を書き上げて27時くらいに解散。完成度40%くらい。


2日目 (土曜日 19:00–26:00)

ライトさんが日中予定があったので、この日は夜から。とあるオフィスに集合して作業開始。

DAY 2

この日はサービスのメインとなる画像生成部分と格闘しました。Canvas はお互い知識がない部分だったので、ググりながら二人三脚でコードを書いていく感じになりました。改行部分でドハマりしてめっちゃ時間使った気がします。Canvas の改行は鬼……

画像生成

細かいバグは残しつつも、この日でだいたいサービスの全体が完成しました。とりあえずは動く状態になったので一安心。

余談ですが、 bukis.json とか udemae.json とか素敵な json ファイルが生まれてゲラゲラ笑いながら作業してました。いやー面白かった。

bukis.json

途中でゲーム(例によってスプラトゥーン)1時間くらい挟んじゃったけど、この日で完成度70%くらいまでは持っていけたかなって感じがします。

この日はラクーアの前売りチケットを買っていたので、深夜にラクーアまでタクシーで向かい、温泉に入って寝ました。たしか28時くらいだった気がする?深夜のラクーア楽しかった。


最終日 (日曜日 10:00–19:00)

ラクーアで目覚めて、7時ころから活動開始。僕の隣に人のいびきがうるさくて2時間も眠れなかったという致命傷を負いつつも、朝からラクーアで温泉に入って体調整えて、カフェでコーヒーを買い、2日目と同じオフィスで作業スタート。

DAY 3

最終日は細かいバグ修正とTwitter投稿周り、分析の基盤作りなどを作りました。この日は、Twitter投稿周りでハマったり、体力が底を尽きて途中で寝落ちたりしました。と書いたはいいもののこの日はあまり記憶がない……必死にやってたんだと思います。18時には完成度90%くらいまで 持っていけました。本番環境へのデプロイとテストもやり、多少の作業は残しつつも、なんとか形にはなって無事 v1.0.0 ができたなって感じです。

帰りに新代田でソウルフード・グリーンカレーそばを食べて解散したことだけ鮮明に覚えてます。


後日やったこと・反省点

2週間後(このブログを書いているいま)、やりきれなかったタスクを消化しました。ドメイン割り当て作業やらブログ執筆作業やら。作業日からだいぶ間が空いてしまうとモチベーションがどんどん下がっていくっていうことを考慮に入れられていませんでした。マインドシェアが週末ハッカソン企画で占められてるうちに最後までやりきるべきだった。

これを含めて良かった点・反省点をメモ程度に書き残しておきます。

🌝 良かった点

・事前準備やっておいて良かった
・ペアプロ形式が良かった

🌚 反省点

・2日目の睡眠時間もっと確保すべきだった(温泉は良かった)
・途中でゲームに勤しんでしまった(息抜きはダイジだけどほどほどに)
・事後作業をなるべく0にすべきだった 一旦終わっちゃうとモチベも落ちがち。ブログも時間内に書き上げちゃえば良かったし、ドメインも事前作業に回しちゃえば良かった


✨ 総括

全体を通して見てみると、前回の反省点を活かし、よりスムーズに進められてよかったなって感じがあります。力がついてきていて、開発のスピードも上がってるような気がしました。無事リリースもできたし大満足の週末ハッカソン。そんな週末ハッカソンでできたスプラトゥーンプロフィールメーカー、スプラトゥーンやってる人はぜひ使ってあげてください。機能要望フィードバックもお待ちしています。


👨‍💻 追記

エンジニア二人だとデザインにツラミを感じるポイントがけっこうあったので、こういう企画にもし興味があるデザイナーさんいたら僕(@___35d)にDMとかくれたらメッチャ喜びます。一緒にやりましょ〜。

___35d

日報

Yuji Tsuburaya

Written by

株式会社ビズリーチのフロントエンドエンジニア。個人開発もやってます。

___35d

___35d

日報

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade