エンジニア&企画合同社内ハッカソンでの学び – 誰に質問すれば良いのか分からない時答えを得られるWEBサービス「ちえぶくろ」を制作して

はじめに

先日、エンジニア育成の一環として「1人で1からWebサービスを作れるようになる」ために、WEBサービス開発合宿を行いました。
合宿の風景はこの記事をご覧ください。

若手メンバーで2泊3日のハッカソン合宿@おんやど恵に行ってきました!

 

この記事では、タグ付け質問投稿サービス「ちえぶくろ」についてサービス内容や使用した技術、学んだことをご紹介します!

チーム紹介

このサービスは以下の3人で制作しました。
・松居(PO、普段は不動産サービスアプリ開発担当)
・播磨(普段は求人サービス企画)
・金(普段はニュースサービス企画)
チームメンバーのうち2人が企画職で、全員が普段WEBサービス開発には携わっていない状態で少し不安なところもありました。

 

サービスの紹介

どんな課題を解決したいか?

社内の仕事に役立つサービスを作るというのが今回のお題です。

いま社内でどんなことで困っているか、いろいろ考えてみると次のようなことが出てきました。

  • 質問をしたいけど誰がどの分野に詳しいのかわからない
    • SEOに詳しい人は誰だろう?
    • ○○さんって何に詳しいんだろう・・・
  • 違うチームの人に質問しづらい
    • あまり話したことないから聞きづらい
    • 忙しいかどうかもわからないから直接連絡とりづらい

そこで、いろいろ聞きたいことはあるけれど、先輩に質問しづらい、気を使いがちな若手社員向けに、気軽に質問ができるサービスをつくることにしました。

必要な機能の検討

基本的には質問を投稿すると、誰かが回答をする掲示板の形をとることにします。
気軽に質問できるように、質問者は回答者を意識することなく、質問ができるようにします。
回答が早くつくように、回答が可能そうな人には質問があることを知らせてあげる必要がありそうです。
質問と回答者を結びつけるには、質問の投稿にタグをつけてあげると、どんな質問か分類できてよさそうです。
そんなかんじで、機能を整理すると以下のような機能が必要となりそうでした。

  • 基本的な掲示板の機能
    • 質問を投稿することができる
    • その質問に対して、回答を投稿することができる
    • 質問の一覧と質問・回答の表示ができる
    • 誰が質問・回答したのかがわかるように投稿者を記録する
    • タイトル・本文からキーワードで質問を検索できる
  • タグ機能
    • 質問にタグをつけることができる(SEO・Swiftなど)
    • タグのついた質問を一覧表示できる
  • ユーザー機能
    • ログイン機能をつける
    • ユーザーのプロフィールに回答可能な分野のタグを登録する機能をつける
    • 自分のタグのついた質問一覧を表示できる
    • タグをつけているユーザーの一覧がわかる
  • 通知機能
    • 自分のタグのついた質問が投稿されたら通知する

「ちえぶくろ」の紹介

※一般公開はしておりません。

 

タグ付きの掲示板です。気軽につかってもらえるようにやさしい画面イメージを心がけました。
キーワードによる検索、タグ・投稿者による絞り込みができます。

 

マイページでは自分の回答できるタグ、マイタグを登録できます。
登録したマイタグに関する質問が一覧できますので、回答がしやすくなります。
また、自分が強くなりたい分野のタグを設定しておくと参考にもなります。
時間の都合で通知機能は実装できませんでしたが、それ以外の機能についてはなんとか盛り込むことができました!

 

開発について

企画2人+PHP未経験のエンジニア一人のチームだったので、全員の開発環境の足並みを揃えることを重視して開発していました。
今回はPHPフレームワークのLaravelを使って開発したことによって、開発環境の障壁を減らすことができました!

Laravelとは?

Laravelは海外でも人気の高いWebフレームワークです。
今回の合宿ではフレームワークを使った開発を学ぶという意味合いでLaravelを使うことになっていましたが、
初心者でも使いやすく、スムーズに開発をすることができました。
特に便利だった機能を紹介します。

 

データベースの設定

チーム3人のローカルの開発環境に、同じデータベースを作ってダミーデータを入れておく必要がありました。
Laravelでは、テーブルの定義を書いたマイグレーションファイルと、ダミーデータが書いてあるシーダーファイルを1つ作成しておけば
コマンド1つで簡単にローカル環境のデータベースの設定ができました!
(マイグレーションファイルとシーダーファイルの書き方についてはこちらをご覧ください)

Laravel 5.6 データベース:マイグレーション

Laravel 5.6 データベース:シーディング

データベースのマイグレーション(テーブル定義を自動的に作成

テーブルにダミーデータを入れる

 

マイグレーションファイルとシーダーファイルをチーム内で共有すれば、
上記のコマンドを打つだけで全員同じ環境にすることができました。
Laravelの便利な機能を使うと、3人の開発環境を一気に整えられたので実際の開発の時間を長く確保することができました!

 

Artisanコマンド

ArtisanはLaravelに含まれているコマンドラインインターフェイスです。
データベース作成の時にも登場しましたが、
LaravelでWebアプリケーション開発をする際に便利なコマンドがたくさんあります。
「ちえぶくろ」は、質問を一覧に表示させたり、質問を作成したり、マイタグを更新したりと、データベースを操作する作業が大半でした。
そこで質問を出し入れするための「QuestionController」を作ったのですが、
この時にArtisanが活躍します!

 

コマンドを打つと、「app/Http/Controllers/QuestionController.php」が作られます。
しかも、データ操作に必要なメソッドを自動生成してくれるのです!

 

コントローラー作成で作られるメソッドについては
Laravel 5.6 コントローラをご覧ください。
Artisanコマンドを使うことによって、LaravelやPHPに詳しくなかった私たちも、スムーズに開発することができました!
(実際に開発中に、一緒のチームだった企画職の方も「Laravelはコマンド打つだけでいろいろやってくれるから便利だよね~」と言っていました!)

 

ログイン機能

「ちえぶくろ」は自分のアカウントがあり、質問した人の名前やマイタグの設定などをできるようになっています。
Laravelではアカウントを作ってログインするという機能も簡単に実装できます。

 

このコマンドで、ログイン画面やアカウント作成画面、認証部分のロジックなども自動で作ってくれます!
あとは画面の修正をしたり、ルーティングをサービスにあわせるだけで、ログイン機能が完成します。
アカウント情報はusersテーブルに格納されているので(パスワードはハッシュ化されています)、
別の画面でアカウント名を出したりすることも可能です。

 

学んだこと

仕様作成の大事さ

チームメンバー全員がWEB開発の経験が浅かったため、とにかく動作するものを作成することがメインのゴールになっていました。
ざっくりのサイト動線は考えましたが、細かい仕様をちゃんと決めてないまま作業に入りました。
その結果、最初全体の仕様が決まっていれば1回で終わったはずの作業が、ページごと一々作業することになり無駄な工数が発生しました。
WEBサービスを制作できたことは良かったですが、今後は無駄な作業を減らすためにも最初から仕様をちゃんと考えたいと思います。

 

状況の共有と把握の大事さ

チームメンバが隣で作業していた環境でもあり、各自の作業については基本口頭でざっくりした共有しかしませんでした。
その結果、作業に余裕ができた人が他の人の作業を手伝おうとしても作業の進捗や状況把握まで時間がかかりました。
今後は作業の状況把握と共有することを心にかけて、作業内容をwikiなどにて共有することで無駄な作業時間を減らしたいと思います。

 

限られている作業時間の使い方

作業の優先順位は決めていましたが、実装が厳しそうな場合にどれくらい時間をかけるかなどの取捨選択について、ちゃんと話しあいができていませんでした。
そのため、予想より実装が難しかった作業に対して、周りからもアドバイスを受けて勉強にはなりましたが、非常に時間が掛かってしまい他の作業に手を入れることができませんでした。
今後の業務でも時間が限られていることが多いと思うため、作業時間はちゃんと計画を考えた上に柔軟に時間を使いたいと思います。

 

おわりに

今回の合宿では普段の業務から離れ、開発担当と企画担当が同じゴールに向けてサービスを開発することができた良い機会でした。
短い期間の中解決したい課題が沢山あり悩みも多かったですが、みんなで話合って協力し少しづつサービスが改善していくことを見ると非常に嬉しかったです。
この合宿を通じて開発担当も企画担当もお互いの考え方や仕事のやり方について理解を深めることができたので、今後の業務にもこの経験を活かしてより効率も良くなると思います。
とにかく最後まで楽しく開発することができましたので、今後もこのような機会を全社的に広げて行きたいと思います。