こんにちは、技術部でバックエンドエンジニアをしている金子です。 某メーカから、エンジニアに転職して早3年が経ち、前回のブログからも1年が経ちました。 昨今のコロナ禍の影響で、皆さんも生活や仕事に影響が出ていると思います。
そんな中、5/1にロコガイドはテイクアウト・デリバリー情報サービス「トクバイ テイクアウト」をリリースしました。
「トクバイ テイクアウト」とは?
まず、作成したサービスの紹介をさせてください。 トクバイ テイクアウトはご自宅近くの テイクアウト情報を見つけることができるサービスです。 飲食店の店先貼り紙などの情報を、スマートフォン等を使って素早く・簡単に・無料で、情報検索することが可能です。 こちらから、ぜひお近くのテイクアウト情報をゲットしてみてください 🙏 サービス開始時は約1,000店からのスタートでしたが、現在(2020/08/07)時点で50,000件を超え、 日本最大級のテイクアウト情報サイトに成長しました。
また、ユーザー登録をすると自分でテイクアウト情報を投稿することもできます。 是非、お近くのテイクアウトをやっている飲食店の情報を投稿し、みんなで飲食店を応援していきましょう〜
なぜ、つくったの？
外出自粛の中、テイクアウトを行う飲食店さんも増えてきたため、この情報が家の近くでまとまっていたら
便利だろうということでつくりはじめました。
イメージとしては、テイクアウトの張り紙がペシペシ貼ってある街の掲示板です。
そのため、開発コードネームは harigamiとしました。
また、コロナ第一波の中、GWを控えたタイミングでの開発開始だったため、可能な限り最速でリリースをしようという方針が立ちました。
どうやってつくったの？
最速でリリースするために、以下の点を工夫しました。
結果として1週間でリリースできたのですが、その要因として以下の点が挙げられます。
- 最速でリリースするための技術選定
- 課題の見える化とその共有
- 全社を巻き込むための取り組み(投稿ツールの作成とその共有)
1. 最速でリリースするための技術選定
今回は以下の方法を採用して、実装を行いました。
配信方式: AWS S3での静的ホスティング
静的サイトジェネレータのフレームワーク: middleman
配信方式
まずは以下のオプションで検討を開始しました。
- Railsアプリで実装する
- 静的ホスティング
今回作成したサービスは トクバイの一部となっており、 トクバイサービス自体が、Railsで作成されているので、まっすぐに考えるとRailsで実装するのが自然でした。 しかし、
- 動的にコンテンツを表示させる必要がない
- 表示させるコンテンツは飲食店情報と投稿された写真がメインで、リアルタイムに更新を反映する必要がない
- 静的ホスティングの方が工数的に有利
- 実装工数だけでなく、仕様変更などに対する変更コストを低く抑えることができる
- 機能充実を図る段階で動的(Railsでの実装)に移行することが可能
という点から、S3の静的ホスティング機能で行うことにしました。
次で説明する静的サイトジェネレータを利用し、各ページを作成、S3上へアップロードすることで実現しています。
静的サイトジェネレータ
今回は middleman を使用して開発を行いました。
静的サイトジェネレータは、React.js製の Gatsby, Go製の HUGO,Ruby製の Jekyllなどがありますが
社内で導入実績があり、学習コストが低い middleman を選定しました。
今回、作成した静的サイトジェネレータのワークフローが下記になります。
ワークフロー
①別アプリケーションから、API経由でテイクアウト情報の抽出
② ①のデータを元に、各ページのテンプレートから各データを使って、slim形式のファイルを作成
③ ②のデータをhtmlに変換
④ S3の対応バケットへアップロード
テイクアウト情報自体は、別アプリケーションで管理しているため、その情報を抽出して 以下のようなコードで、slim形式のファイルを生成しています。
def build slim_string = ERB.new(File.read(template_file)).result(binding) File.open(source_file, 'w') do |f| f.write(slim_string) end end
S3へのアップロード用のhtmlファイルの作成はmiddlemanのコマンドで行います。
$ middleman build
また、ファイル作成からS3のファイルアップロードまでの一連の流れはRakeタスクとして実装し サーバー上へ配置、定期実行しています。
namespace :production do task :deploy do Rake::Task["slim_build"].invoke # テイクアウト情報の読み込みとslimファイル作成 sh 'bundle', 'exec', 'middleman', 'build' # htmlファイルの作成 sync BUILD_PATH, PRODUCTION_S3_PATH # S3へのアップロード end end def sync(path, s3_path) sh 'aws', 's3', 'sync', '--delete', path, s3_path end
2. 課題の見える化とその共有
実装を進めていく中で、詳細な仕様やデザインなども同時並行で決めていく必要がありました。 そのため、役割別の課題や、ブロッカーが見えにくいなどの懸念があったため、以下のようにやっていきました。
① 課題の見える化 以下のフォーマットで、各項目ごとに課題の見える化を行いました。
ここでのポイントは違う業種の人も見るため、できるだけ平易な言葉で、誰が見ても何が課題かが分かるように書くことです。
② 共有 ①で書いた課題表の共有です。今回は毎日、定時にミーティングを開き、各自の課題の共有と進捗確認を行いました。
これにより、ディレクター、デザイナー、エンジニア間での共通認識ができ、定例で共有した課題の方針が すぐに決まり、また、定例メンバーだけでは決まらない上位レイヤの判断が必要なこともタスクとして積むことが できたため、非常に有用でした。
課題表画像のNo.21は実際の事例なのですが、このように仕様作成時には決まっていなかった細かな仕様の確認やその実装なども、 このシートを介して行っていきました。
デザイナー、エンジニアでの認識のすり合わせなどもこのシートで行えるので、このシート記入後、すぐに実装に入り 対応することが可能でした。
3. 全社を巻き込むための取り組み(投稿ツールとその共有)
テイクアウト情報の拡充にあたって、社員の投稿を促進していくために社内用の投稿ツールを作成しました。
ユーザー投稿機能と同じように、店舗情報と写真を投稿してもらうと自動的にテイクアウトページに反映されるようにしています。
また、投稿を活性化させるために、Slackで誰が投稿してくれたかが分かるように連携しました。
結果、公開当初のテイクアウト画像のうち約半数が社員の投稿となり、この取り組みが大成功しました。
反省点
運用フェーズにおいては、投稿ツールの使いにくさなどの課題が見えてきました。 こちらについては、
- 運用メンバーにも、定例に入ってもらい事前に意見をもらう
- 仕様共有フローを予め決めておく
などの改善点が考えられますが、より良い方法を模索しながらやっていきたいと思います。
まとめ
多くの人の力を借りつつ、最速でリリースすることができました。 スピード感を持って取り組み、新しいサービスを作れたのは非常に良い経験になりました。
技術だけでなく、今後も問題解決という大きなくくりで技術の向上に努めていきたいと思います！
ロコガイドにはこのようにスピード感をもって取り組める仕事があります! ガンガンサービスつくりたい！という方は、是非、一緒に新しいサービスつくっていきましょう！
