web1weekに参加して「Achievementalist - リアルライフ実績解除」というサービスをリリースした顛末
1週間でWebサービスを作る「web1week」というイベントが、9月7日から9月13日まで開催されていました。いろいろ打算あり、作りたいものありで参加して、それなりなWebサービスをひとつリリースした顛末。
Web1week is何？
1週間でWebサービスを作るオンラインハッカソンです。今回で3回目になります。簡単なお題が開始時の12時に発表され、そこから1週間期間があります。
お題はあるもののそこまでキビしい制約はなく、こじつけでもOKですし、なんなら期限過ぎてもOKなゆるい感じです。
作るものもHello WorldレベルでもOKとされておりとても敷居の低い参加しやすいイベントです。
とはいえ参加者はそれなりにお題にのっとり、期限以内にやる人が多く、見ために凝る時間はないものの面白いアイデアのものが毎回でてきます。
作ったもの
今回、わりとガチで作りに行きできたものはコレ。
リアルライフ実績解除Achievementalist（アチーブメンタリスト）と言います。
ゲームの実績解除を日常にも取り入れて、なにかできたときの喜びをさらに大きくしようという思いで作りました。
仕組みとしては、実績を自分で登録し、達成したらロック解除を実行して、それをTwitterなどでシェアするというものです。
ここから先は、参加報告記事とほぼ同じ内容です。
動機
もともと参加しようと思いたってから、お題を待たずに準備していました。
というのも、Achievementalistの種となるアイデアは以前からもっていました。
そこになんかRailsでWebサービス作りながら知見を増やしたいという思いと、このイベント、そして違うイベントでもこのサービスが使えることのタイミングとかいろいろあって参加しました。
Web1weekはとても良い機会を提供してくれるイベントの反面、企画も含めて一人で0-1をやらなきゃいけないツラさがあって、思いつく発想力は技術力とあまりリンクせず、ひらめきを待つ間にどんどん開発にかけれる時間が減るというジレンマがあります。
今回のお題は「2」でしたが、上手くハマるお題が来れば万歳。こじつけられれば十分という感じで決めうちです。もちろん良いアイデアを閃いてバシっと作るのが一番良いのですが、今回は「作りきる！」にプライオリティを置いてました。
Achievementalistに込めた思い
以前からゲーミフィケーションに強い関心があって、楽しみながら何かをやる仕組みを作れたらと思っていました。
それと同時に若いころ、人生の100のリストという本に出会い、人生でやりたいこと、やってみたいことのリストを書きました。
それは今でも何度も見かえしておりそのうちの幾つかは達成していたり、考えが変わって書きなおしたりしながら、今でも僕の価値観、人生の道標となっています。
そして少し前にバケットリストという言葉をたまたま良く聞く機会があって。これはまさしく100のリストだな、と思いました。
そこでこの100のリストとゲームの実績ってかなり似ているのを感じてこれらを組み合わせてなにかできないか、というのがアイデアの出発点です。
多くの人にできるかできないかはひとまず脇に置いておいて、本当に自分が死ぬまでにやってみたいことを真剣に考える機会の提供と、本当にそれができるんだと思ってほしい、そう僕は思っています。
使ってる技術
- サーバーサイドはRuby on Rails
- サーバーはHeroku
- 画像のストレージはCluddinary
という構成です。Railsでやることは決まってましたが、サーバーとストレーはギリギリまで迷いました。
Herokuは考えることが少なく、とても良いサービスである反面、それが故に知見を増やすという目的にはあまり向いてません。ただ、Railsで今後の運用まで考えると楽に越したことはないですね。まずは小さく。大事。
今まで使ってなかった実装レベルで使った技術としては
- CSSはTailwind CSS
- JSはStimulus
にしました。Tailswindは一度は使ってみなければと思っていたのでそのお試しと、今回の要件にハマりそうだったので。CSSフレームワークはVueとかReactとかjQueryとか前提なものも少なくないのでこういうCSSオンリーで扱えるものは良いですね。
JSは冒険的にStimulusにしました。リッチにしていくならVueなりを使うほうが良いんですが、まずは小さく最小限にというところと、Achievementalistの要件的にそんなにリッチにしなくて良さそうに思ったので知見を増やすためにも使ってみました。
顛末
web1week(2020-09-07 - 2020-09-13) 進捗記録 として毎日記録をとってみました。
ざっくり見直すと
1. day0(開始前数日）: あらかじめ環境構築、認証実装などの素振りをしておく。TwitterのAuth用の申請もあらかじめやってました。
2. day1: 環境構築、Twitter認証経由のユーザー登録実装。Staging環境のセットアップももうやっちゃった。デプロイファースト大事。
3. day2: できてるところにどんどんスタイルを当てていく。それとともに実装されている認証まわりをちょっと修正。
4. day3: Achievemnt（実績）の登録とロック解除の実装。とりあえずタイトルとか必須項目だけで動くように。
5. day4: 仕事が遅くなりすぎてほとんどできず。スタイルちょっと弄ったぐらい。あとドメイン取得した。
6. day5: スタイルの調整、登録できる項目の追加と実装、編集機能を追加、トップページに情報追加
7. day6: OGP対応、画像アップロード対応、スタイルの修正など。Cloudinaryをぶっつけで使ってみたけどなんとかなった
8. day7: クエリの修正、本番構築&デプロイ、説明の追加してリリース。本番環境のDNSまわりで無駄につまったので危なかった。
と、こんな感じでした。
環境構築、登録認証あたりを素振りしておいて本当によかった。このあたりはどのプロジェクトにも必要なくせに無駄に詰まりやすいので。
逆に、本番環境で
- herokuではIPが固定されないらしい
- （僕がドメイン取得した）Google DomainのDNSはルートにANAME/エイリアス作れない
という相性がわるかったんですが、GogleDomainのDNSがANAME持てないのの対応でかなり詰まりました。
できない！ と確定情報がなかなかみつからず、できるもんだと一生懸命実現する方法を探して時間が溶けてしまった。
結局CDNとしてCloudFlareを噛ませてDNSとして使うことで回避しました。
そして、今回ものすごく役にたったのがこのドキュメント
Achievementalist ユーザーストーリー MVP
特に簡易的にユーザーストーリーベースのMVP（やる/やらないリスト）を作ったのがかなり効を奏して、フォーカスがブレなかったのが良かったですね。
まとめ
こじつけの決め打ちスタートに近いかたちなので、少しズルした気がしなくはないものの、一応使えるレベルまで期間内に仕上げれたのは良かったです。
個人的には一定のレベルでの動く成果物を出すというのは今後も重要視していきたいです。
リリースを前提としないと得られない知見が多いと思ってます。
その上で、感じたのは
- どんな状況でも通じる素振り大事
- 挑戦とすでにある知見のバランス感覚大事
- スタイルにかける時間がバカにできない、が、おろそかにしたままだと使ってもらえないジレンマ
- やること、やらないこと、ちゃんと見極めて、現実的に期間内に終われるように設定する
あたりは大事だなーと思いました。
リアルライフ実績解除 / Achievementalist は今後もブラッシュアップしながら機能追加しながら運営していくつもりです。
是非、日常の小さなことでも、人生をかける大きな目標もゲームのような実績として登録してみてください。
そして、晴れて実績のロックを解除できたらTwitterなどでシェアしてみてください！