ハッカソン合宿制作記⑦|Slackの絵文字を共有するサイト作りました!

はじめに

こんにちは。

ニフティグループでは新人の技術向上のため、
毎年「エンジニア定例」という勉強会を行っています。

そこで学んだ技術を披露するため、2泊3日のハッカソン合宿に行ってきました。

この記事では私たちのグループで作った「Shamoji」について紹介します。

Shamojiは、Slack・Share・Emojiの3つの単語の組み合わせです。

メンバー紹介

大川

  • 今回はフロント周りを担当(画像登録(トリミング)、マイページの修正
  • 業務ではGoでバックエンド担当

福田

  • 今回はフロント周り、サポート
  • 業務ではVue.jsでフロントエンド担当

  • 今回はバック(API)周りを担当
  • 業務では二つのサービス開発および運用を担当

添野

  • 今回はバック、DB周りを担当
  • 業務では開発・運用作業を担当

制作物について

皆さん、普段の業務や日常でSlackは使っていますか?

は普段コミュニケーションツールとしてかなり活用しています。

私がSlackを活用している中で感じたSlackの良さは、カスタム絵文字だと考えています

このような考えのもと私たちは、Slackの絵文字を共有できるサービスがあればいいなと思いSlack絵文字共有サービス「Shamoji」を作ることにしました。

 

Shamojiのホーム

使用方法はとても簡単です。

登録されているカスタム絵文字をダウンロードしたい場合は、
カスタム絵文字の画像をクリックするだけでダウンロードできます。

 

カスタム絵文字をアップロードしたい場合はログインをして、
右下の”+”ボタンを押すとカスタム絵文字投稿モーダルが開きます。

 

ここでは、画像のトリミングとカスタム絵文字の命名を行います。

 

アップロードされた、ファイルはマイページでも確認ができます。

 

システム構成図は以下の図になります。

環境はNginxとMysqlを使ったDockerコンテナで構成されていて、
サーバーサイドはLaravelで実装しました。

フロントはシングルページアプリケーションとして作りたかったので、
LaravelのBladeではなくReactで実装しています。

 

開発をして感じた点

2泊3日チームプロジェクトを経験し、いろいろな勉強をすることができました。
感じた点は本当に数えきれないほどありますが、
その中で一番感じたことについて書きたいと思います。

今回の合宿では普段業務で触らない技術を学び、
いろいろな経験をすることができました。

例えば普段バックエンドを開発しているエンジニアがフロントエンドに触ることによって
普段フロントエンドエンジニアが何を考えているのかを知ることができました。
また、Laravelのようなフルスタックフレームワークに触れることができて、
視野を広めるいい機会になりました。

一方で普段あまり触らない技術を導入することによって生まれる問題もありました。

今回の合宿は使う技術に対して多少不安がありました。
研修で学んだとはいえ完全には慣れていないLaravel、
大分前に少し触ったことがあったReactとかDockerなど・・。

そのような点を考慮せず、
画像データの送信などの今まであまり触れていない技術を取り入れてしまいました。

最初は大丈夫だと思いましたが、いざ結合の段階になるといくつか問題が生じました。
最終的には完成しましたが、慣れていない技術に触れていたためだいぶ時間を使い、
最後には時間が足りない感じでした。

新技術・初めて触る技術は面白そうだし、響きもとても魅力的だと思います。
しかし、今回のように開発期間が短い場合はそういった技術を取り入れる前に、
きちんと実現可能かを調査しておくべきだと思いました。

 

最後に

今回の合宿を通し、学びとともにいろいろなことを経験することができました。

緑が多くゆっくりできる環境で、美味しい食べ物を食べて

宿の可愛い猫と一緒に開発ができたので、新鮮な気持ちで作業できました。

合宿で学んだことを今後業務に生かしていきたいと思います。