はじめに
こんにちは！ニフティでは若手メンバーのスキルアップを目的とした「エンジニア定例」という取り組みを行っています。エンジニア定例では様々な技術について学びましたが、その集大成として2泊3日のハッカソンを実施しました。
私たちのチームでは検索と連携した技術メモアプリである「Tech Memo」を作成したので紹介したいと思います。
メンバー紹介
- 佐藤 (広)
- 開発合宿：バックエンド担当
- 普段の業務：社内ITインフラの管理
- 佐藤 (志)
- 開発合宿：バックエンド担当
- 普段の業務：音声系システムのコールフロー管理・運用を担当
- 田村
- 開発合宿： フロントエンド担当
- 普段の業務：@niftyメールのWebメールの開発・運用を担当
- 内海
- 開発合宿：フロントエンド担当
- 普段の業務：占い@nifty等のコンテンツの保守・運用を担当
制作したプロダクトについて
アプリの説明
ハッカソン合宿の前にどのようなアプリを作りたいのかチームで話し合いをする場がありました。
そこで出た案の一つに、「以前調べた技術用語についてすぐ確認できるようにしたい！用語の意味を忘れる度検索して調べるのは手間がかかるし時間の無駄」という意見が出ました。
エンジニアとして働いていく中で、分からない技術用語は多々出てくると思います。その日は調べた用語について分かったつもりでいても、後日忘れて再びその用語について検索をかけるなんてことはよくありますよね。
私たちはこの問題を解決すべく、調べた技術用語を手軽にメモできるようなアプリを制作することになりました！
Tech Memoの使い方
さっそく、トップページにアクセスをして使い方を紹介します。
今回制作したアプリは会員登録を行わないと使えない仕様になっているので、会員登録をクリックして会員情報を入力します。
登録をすると、検索画面に遷移します。ここで調べる単語について検索をします。
例えばですが、ここでは「シェルスクリプト」と検索をしてみましょう。
すると、Googleのページへ飛んで検索した用語に関する記事が出ます。
先ほどの検索画面へ戻り、ヘッダーの「検索ログ」を押してみます。すると、キーワードの下に先ほどの検索ワードが表示されています。仕組みとしては、Googleにリダイレクトしたときに検索ワードがサーバーに登録されて検索ログとして表示されるようになっています。
さらに、検索ワードをクリックすると以下のポップアップが表示されるので、検索ワードに関するメモをテキストボックスに入力して保存を押します。
すると、検索ワードの隣に「メモ：1個」と表示され、クリックすると上記の画面が表示されてメモを見ることができます！
工夫したポイント
ここからは追加で実装した機能について二つ紹介します。
WordCloudを実装して勉強量と勉強内容を可視化
へッダーに「グラフ」とありますが、これをクリックすると今まで検索したワードが表示されます。これはWordCloudという手法を利用したものです。出現頻度の高いワードほど、その頻度に応じた大きさで表示されるようになっています。これを実装することで勉強量や勉強した単語について可視化し、モチベーションの向上を図っています！
Chrome拡張を実装してUXの向上
Chrome拡張の機能を利用して、検索したときに自動で検索ワードのポップアップを表示させるように実装しました！
メモの登録も簡易的に行えるように以下の手順で登録を行えるようにしました。
「メモを登録しました」とポップアップが表示されます！
わざわざ手打ちするのが面倒な場合には、このやり方でもメモを登録できるようになります。
合宿を通しての学び
2泊3日のハッカソン合宿を通して、1つのプロダクトを0から完成までチームで作り上げることの達成感や経験を得られることができました。1人で制作物を作るより、チームで意見を出し合いコミュニケーションを取りながら開発を行うことでアイデアの質も高まると感じました。また、チームメンバーからも学ぶことが多くあり、こんなツールがあるのか！こんなコマンドがあるのか！など知らなかった知識を共有できたことも良かったです。
終わりに
2泊3日という短い期間ではありましたが、チームで1つの成果物を作ることのやりがいや楽しさを実感できました。また、宿泊した旅館の娯楽や食事も充実しており、開発以外の時間も有意義なものとなりました。
今年度に入社する新入社員の皆さんもハッカソン合宿を通してきっと良い経験ができると思うので楽しみにしていてください！
