Fusic Tech Blog

Fusion of Society, IT and Culture

Laravel + Vue.jsで開発した社内コミュニケーション円滑化システムの技術スタックを公開します
2022/04/20

Laravel + Vue.jsで開発した社内コミュニケーション円滑化システムの技術スタックを公開します

こんにちは!サラです。
新人研修で社内コミュニケーション円滑化システム「Doggy」を作ったので、社外発信したいと思います。

doggy homepage

目次

背景

1. 社内コミュニケーションを活性化させる施策「1on1on1」

弊社では、社内コミュニケーションを活性化するために、「1on1on1」という、週に1度ランダムに組み合わせた3人のグループで雑談する取り組みを実施しています。
1on1on1についてより詳しく知りたい方はこちらをお読みください。

2. 1on1on1の実施における改善点・要望

1on1on1の運用から3か月ほど経った頃、参加者にアンケートを取ってみました。
ポジティブな意見が多かったですが、下記のような要望もありました。

  • 時間調整をうまいことやってほしい
  • 話題に困ったら話題を提供してほしい
  • 社内コミュニケーションをより活性化させるために、話した内容をグループメンバー以外にも共有できるようにしたい

システム

上記のような背景から社内コミュニケーション円滑化システム「Doggy」を開発しました。

時間候補の提案

グループメンバー全員が空いている時間枠をSlackのDMで提案されます。
参加者は参加できる時間枠に「投票」ボタンを押すだけでいいです。

available time slots

メンバー全員の投票が済んだら、1on1on1の実施日時が自動的に決まり、Outlookに予定が追加されます。

decided time slot

created-outlook-event

提案された時間候補以外の時間に1on1on1を実施したい場合、SlackからOutlookに予定を追加することもできます。

request discuss

「予定をOutlookに登録」ボタンをクリックすると、このようなモーダルが表示されます。

doggy create event modal

必要な情報を入力して「Outlookに登録」ボタンをクリックするとOutlookに予定を追加できます。

話題提供機能

1on1on1の時間になったらランダムな話題が提供されます。

topics dm

Webの「話題ボックス」ページにも話のネタがたくさんあります。 topics page

話した内容をグループメンバー以外にも共有できる

Slack Botのインタビューに答えるだけで、簡単に共有できます。

interview after

回答がWebとSlackの#1on1on1チャンネルに掲載されます。

1on1on1 reviews

post in slack

技術スタック

  • バックエンド

  • フロントエンド

    • Vue.js2
    • Vuesax3 - 簡単におしゃれなボタンやレスポンシブなモーダルなどが作れるのでおすすめです!
    • Tailwind CSS

システム構成

doggy system architecture

Nginx, Laravel, MySQLのそれぞれのDockerコンテナを立てました。
Laravel + Vue.jsで開発する際、いくつかのパターンがあります。

  1. LaravelにVue.jsのコンポーネントをマウントさせるパターン

    • MPA
    • ページごとにSPA・MPAを使い分ける
  2. LaravelとVue.jsが完全に分離するパターン

    • LaravelはAPIのみ、Vue.jsは完全SPA

Doggyでは上記の1のパターンを使用しています。
認証に外部のMicrosoft Graphと連携したいので、認証ページだけMPAにして、他のページをSPAにしました。
SPAでは必要な部分だけを更新するため、ページ遷移が高速になります。
また、「SPAはSEOに弱い」とよく言われていますが、
今回は社内システムであって、SEOを考慮しなくてもよいので、認証以外のページをSPAにしました。

外部連携API

doggy api

使ったAPIメソッドの一部を紹介すると以下のようになります。

デザイン

次の手順でシステムのデザインを決めました。

  1. PinterestDribbbleでインスピレーションを探してムードボードを作る
  2. システムのカラーパレットを決める
  3. Figmaでワイヤーフレームを作成
  4. モックアップを作成

男女ともに好みとして選ばれやすい色である「青色」をメインカラーにしました。

感想

Web開発未経験でしたが、開発していく中で分からなかったことが分かるようになって、自分の成長を実感しました。そして、運用を開始してから、社員がたくさん使ってくれて、ポジティブなフィードバックももらいました。自分が開発したシステムが役に立っていると実感できて、やりがいを感じました。これからも日々勉強を重ねて成長していければと思います!

sarah

sarah

Company : Fusic CO., LTD