feature image

2020年8月13日 | ブログ記事

部内向けイベント管理サービスknoQの紹介~クライアント編~

こんにちは,wasabiです.僕はSysAd班という部内向けのサービスの開発・運用を行っている班に所属しています.

こちらはSysAd班で運用中の 部内向けイベント管理サービス knoQ の紹介とクライアントサイドの開発についての記事になります.

目次

サービス概要

タイトルにもある通りknoQは部内向けのイベント管理サービスになります. knoQという名前はドアのノックから来ていて@mazreanさん考案です. ロゴは@spaさんに作っていただきました. 感謝~

knoQでは具体的には以下のリストにあるようなことができます.

それではどのように使うかを見ていきましょう.

使い方の概要

ダッシュボード

ダッシュボード

このページには, まず今日の進捗部屋・今日のイベントのリストがあります. knoQのトップページであるダッシュボードにこれらを配置することで, 「今日何があったっけ?」と思ったらすばやくその情報にアクセスできるようにしました. このページには他にも, イベントやグループを新規に作成したり, それらを編集したりするページヘのリンクとなる, 「あなたのイベント」・「あなたのグループ」の表示があります.

イベント一覧

イベント一覧

イベント一覧ページでは, その名の通り登録されているイベントの一覧リストが表示されます. そして, このリストは条件をつけて絞り込みをすることができるようになっています. 現在はイベントについているタグと, 終了したイベントを表示するかどうかの2つしか条件に含めることができませんが, 今後柔軟な絞り込みを行えるよう拡張していくつもりです.

イベントやグループの作成・編集フォーム

イベント作成フォーム

イベント・グループに対してそれぞれ作成フォーム・編集フォームがあります. イベントやグループの説明はMarkdownで書けるようになっているほか, さらにイベントに対してはタグもつけることができます.

開発について

ソースコードはGithubで公開されています.

構成

使った技術・フレームワーク・ライブラリは以下のリストのようになっています.

他の部内向けサービスもVue.jsを用いているものが多く知見がたまっているため,Vue.jsを採用しました.

コードを書く際の方針・気を付けたこと

ビジネスロジックはなるべくコンポーネント内に書かない

APIから取得したデータやフォームから得られたデータを加工するなどのロジックをmethodや computedに記述してしまうと,コンポーネントがだんだんと肥大化してしまったり, コードの意図をつかみにくくなってしまいます. これを避けるためにその処理をコンポーネントの外の関数などに記述して, コンポーネントではそれを利用するだけという形をとりました.

複雑なフォームページのコンポーネントの分割

イベントを作成する際にはイベントの内容だけでなくそれの日時や場所など様々な情報を指定する必要があります.それによってフォームページのコンポーネントもやはり大きくなってきます.そこで時刻の入力欄などの共用できる部分をコンポーネントとして切り出すなどをして,フォームページのコンポーネントはそれらを利用するようにしました. またそれらのコンポーネント間のデータのやり取りはv-modelやv-bind.syncを用いて実装しており,双方向のデータバインディングを実現しています.

knoQの今後

機能面

knoQでは以下の改善を今後施していきたいと思っています.

「他にもこんな機能があったらいいんじゃない?」と思ったらこのブログのコメント欄やGithubのissueまでご意見をお願いします!

技術面

Vueコンポーネントの粒度がバラバラだったりフォーム周りのコードが汚かったりするので, 順次リファクタリングをすすめていきます. またVue3がそろそろ正式にリリースされそうなので, 技術を学ぶためにも, それへの書き換えも検討しています.

終わりに

今回のこのプロジェクトで初めてWebアプリケーションの開発に携わったので, いろいろ手間取ってしまいましたが, 作ったものが実際に動いて活用されているのを見てとても感動しました. このような貴重な体験をできたのは一緒にknoQを開発した他のメンバーやtraP SysAd班の皆さんのおかげで, 感謝の念に尽きません. ありがとうございました!

今後knoQを更に使いやすくしていくために, 今回学んだものを糧に頑張っていきたいと思います.

wasabi icon
この記事を書いた人
wasabi

東京工業大学 18 情報工学系所属. Haskell, React, Rust勉強中です.

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2019年12月22日
部内製チャットサービス「traQ」UIのこれから 【AdC2019 53日目】
sigma icon sigma
2020年5月1日
爆☆誕 traQ-S【新歓ブログリレー2020 54日目】
spa icon spa
2019年12月4日
部内製チャットサービス「traQ」UIのこれまで 【AdC2019 35日目】
spa icon spa
2019年12月1日
traP部内サービス「booQ」で発見した脆弱性でOSSコントリビュートした話
nagatech icon nagatech
2019年11月26日
部内製チャットサービス「traQ」とPaaS基盤「Showcase」の障害対応の話【AdC2019 25日目】
to-hutohu icon to-hutohu
2019年11月2日
traQのmarkdownのパースをWeb Workerでやるようにした話【AdC2019 3日目】
sappi_red icon sappi_red
記事一覧 タグ一覧 Google アナリティクスについて