feature image

2020年3月17日 | 作品紹介

部内製アンケートサービス anke-to の紹介

こんにちは、@60です。
こちらは、traP SysAd班で運用中の 部内アンケートサービス anke-to の紹介記事になります。開発に至るまでの経緯、サービスの概要、開発の流れについてお話ししていきます。
traPの部内サービスやSysAd班の開発に興味のある方などに読んでもらえると嬉しいです!

(SysAdは "System Administrator" の略語で、この班では部内向けサービスの開発・運用を行っています。詳しくは SysAd班の紹介ページ をご覧ください!)

もくじ

  1. 開発までの経緯
  2. サービスの概要
  3. 作成されたアンケートの例
  4. 開発について
  5. anke-toのこれから

開発までの経緯

背景

traPでは、メインのコミュニケーションツールとして、部内製チャットサービスのtraQを使用しています。(traQについての詳細は、ブログ記事 部内製チャットサービス「traQ」UIのこれまで および 部内製チャットサービス「traQ」UIのこれから をご覧ください。)

traQにはLINEやSlackのようなアンケート機能は無く、ちょっとした日程調整などはtraQのスタンプ機能を、それ以外でアンケートをとる際は Google Forms を使っていました。

しかし、これにはいくつかの問題点がありました。

などです。

これらの問題を解決するために、SysAd班では部内向けのアンケートサービス anke-to を開発することになりました。

anke-to導入後

anke-toが運用されている現在、上記の問題はすべて解決しています。

また、 Google Forms を使用していた頃に比べ、誰でも気軽にアンケートを作成できるようになりました。

そのため、真面目な調査以外にも、大喜利のようなゆるい内容のアンケートがたくさん作成され、traQとはまた違った形でメンバー同士のコミュニケーションの場となっています。

(いくつかを後述の #作成されたアンケートの例 で紹介します。)

サービスの概要

基本機能

traPのメンバーは誰でもアンケートを作ることができ、作成されたアンケートは誰でも回答することができます。
また、送信前の回答を 保存 しておくことも可能です。

質問の形式は以下のものから選べます。一般的なアンケートツールに備わっている質問形式はだいたい揃っています。

また、質問ごとにその質問が回答必須かどうかを決められます。

new_questionnaire-1
new_questionnaire_2-1
new_response-1

特徴・工夫したところ

対象者・管理者の設定

traPメンバーの一覧から、アンケートの対象者と管理者を選ぶことができます。

対象者には、トップページでそのアンケートが表示されるようになったり、アンケート作成時にtraQで通知が飛んだりします。(後述: traQとの連携 (自動投稿))

トップページ

トップページには、前述したように、自身が対象になっている (回答するべき) アンケートの一覧が表示されます。
また、アンケートごとに回答状況が記号で表示されるため、どのアンケートが未回答なのかが分かります。

----------2020-03-17-1.56.37

回答の閲覧

アンケートの詳細画面には自分の回答の一覧があり、そこから回答した内容を見られます。

また、アンケートの結果 (自分以外のメンバーの回答) も閲覧可能です。

結果はデフォルトでは全体に公開されるようになっていますが、管理者が設定することにより、 管理者のみ や、 そのアンケートに回答した人のみ が見られるようにすることもできます。
一部の人にだけ結果を共有したい時は管理者のみにしたり、たくさんの人に回答してほしい時は回答した人のみにしたり、などのように使われています。

traQとの連携 (SSO)

traQはSysAd班が管理する全ての部内向けサービスに対してSSOを実現しており、anke-toもこれによってユーザーの認証を行っています。
アクセスごとにユーザーを識別できるため、送信された回答に対しても自動的にその人の traQ ID を結びつけることができます。

traQとの連携 (自動投稿)

新しいアンケートが作成されると、traQの特定のチャンネルに自動でアンケート情報が投稿されます。(traQにはWebhookによってメッセージを投稿できる機能があり、これを使うことで実現しています。)

このとき、アンケートの対象者にはメンションが飛ぶので、通知機能の役割も果たしています。

img

作成されたアンケートの例

新たに部員どれくらい増えるかな?

最も数字が近い人が優勝

去年 (2019年度) の新入部員数の予測アンケートです。実際の入部数は193人で、最も値が近かったのは @Yosotsu でした。

----------2020-03-14-17.30.32_2

好きなプログラミング言語は?

定番ですね。
C++, TypeScript, JavaScript, Python あたりが人気でした。

また、「その他」では、Julia, Lua, MoonScript, Visual Basic, Elixir, Idris, Clojure, Emojicode などが挙げられていました。

----------2020-03-15-0.52.07

traPに入った理由・きっかけ

アンケート名の通り、traPに入るまでの経緯を聞くアンケートです。熱の入った長文回答も多く、読みごたえがあります。
全ての回答をここに載せることはできないのですが、いくつか抜粋します。結果が気になる方はtraPに入ってから見てみてください!

200個目のアンケートですね

というわけで300個目のアンケートのタイトルを予想しましょう
300個目が作られた時点で回答を公開します

大喜利です。

----------2020-03-15-1.05.31_2

実際の300個目のアンケートは「300個目のアンケートですね」ではありませんでした。

ちなみに、現時点 (運用開始から一年) のアンケート数は約550個です。

開発について

構成

ソースコードはGitHub (traPtitech/anke-to: traP部内アンケートシステム) で公開されています。

サーバーサイドは Go によって実装されていて、REST API を提供しています。データベースは MariaDB です。
クライアントサイドは Vue.js によって実装された SPA で、CSSフレームワークとして Bulma を導入しています。

開発記

anke-toの開発は以下のメンバーで行いました。

企画・設計 (2018.7〜)

まず必要な機能を洗い出し、仕様を決めていきました。サービス名の anke-to は比較的早い段階で決まりました。

次に技術選定を行いました。@mds_boy, @60 ともに初めてのwebアプリケーション開発だったため、SysAd班内での知見が多い Go, Vue.js を使うことにしました。その後、データベースの構成を決めたり、Swaggerを用いてAPIの定義を書いたりしました。

この当時は部内Gitホスティングサービス (Giteaを使っています) にリポジトリを置いていて、masterブランチの更新によって Showcase (部内PaaS基盤) で自動デプロイが走るようにしていました。 [4]

実装 (2018.8〜)

サーバーサイド・クライアントサイドそれぞれを実装していきました。各々が開発ブランチで実装を進めつつ適度なタイミングでmasterにマージする、という形で進めていました。
途中で虚無期間を挟んだりしつつ、サーバーサイドは12月、クライアントサイドは2月に完成しました。

運用開始 (2019.3〜)

当初予定していた機能を実装し終えたので、traQでアナウンスを出し、traPメンバーに使ってもらえるようにしました。

----------2019-10-27-16.57.58

この時はまだ前述のShowcase上で運用していました。

運用開始後、ありがたいことにメンバーからのフィードバックをたくさんもらったので、それに基づいて改善や機能追加を行っていきました。

開発メンバーが増える (2019.6〜)

継続的に運用していくにあたり、 @60, @mds_boy 以外のメンバーにも開発に参加してもらう必要がありました。
Issueを整理したり開発用ドキュメントを書いたりDockerで開発環境を立ち上げられるようにしたりした後、SysAd班内で募集をかけました。

以降、メンバーに担当するIssueに対してそれを解決するPRを出してもらい、サーバーサイドは @mds_boy, クライアントサイドは @60 がレビューしてマージ、という流れで改善が進んでいきました。

サーバー移行 (2019.9)

その後もしばらくはShowcaseを使ったデプロイを続けていましたが、 (traQなどの他のサービスと同じく) SysAd班が管理するサーバー上で運用できるよう、移行作業を行いました。

やったことは以下の通りです。[5]

  1. リポジトリをGiteaからGitHubに移す
  2. SysAd班が管理しているサーバー群のプロビジョニングコード (Ansibleを使っています) に、anke-toのデプロイ処理を書く
  3. データベースの移行 (Showcase管理下のDBからConoHaのDBに)
  4. 旧URLから新URLにリダイレクトするよう設定 (旧ドメインのDNSレコードを書き換え)

devOpsBot対応 (2019.12)

@takashi_trap さんが作ってくださったDevOpsBot (SysAd班が管理するサービスのデプロイを行うtraQのbot[6]) にanke-toも対応するようにしてもらいました。

----------2020-03-14-16.49.12

これによって、サービスごとに実行権限を持つ人が手軽にデプロイを行えるようになりました。

また、この時、anke-toのDockerイメージも GitHub Actions で生成し、GitHub Packages Registry にpushするようにしました。

GCPへのログ出力 (2020.2)

これもtraQ等と合わせるために、@mds_boy がアクセスログ・エラーログをGCPの Stackdriver Logging で保存するようにしました。

anke-toのこれから

課題

機能面

現行のanke-toはそれなりの役割を果たしてはいるものの、運用開始から一年経った今、様々な問題や不便な点が浮き彫りになってきました。

などです。

これらに対して、改善するための機能の追加を考えてはいますが、中にはそれなりのコード変更・追加が必要になるものもあり、他プロジェクトと並行しつつの開発では追いつかなくなってきています。

技術面

また、運用開始までの実装を@mds_boyと@60だけでやっていたこともあり、ソースコードの全体を把握しているのがこの二人しかいないこと、ソースコードがあまりきれいではないこと、などの問題があります。

anke-to v2

これらの問題を解決するために、anke-toのサーバーサイドの機能追加・クライアントサイドの作り直しをしよう、というプロジェクトが anke-to v2[7] です。

を行います。

来年度の前期 (次の新入部員が入って最初のSysAd班集会後) から始動予定で、anke-toの機能追加・改善と、次の代への引き継ぎを目的としています。

終わりに

以上でこの記事は終わりになります。長い文章をここまで読んでくださってありがとうございます。

anke-toは自分にとって初めてのwebアプリケーション開発だったため反省点も多くありますが、「技術で不便を解消する」を実現できたこと、作ったものを多くの人に使ってもらえてフィードバックをもらえたことなど、得難い経験をたくさんできました。

traP SysAd班、開発や機能改善に関わってくださった方、anke-toを使ってくれた多くのtraPメンバーに感謝しつつ、このような環境や開発基盤を維持していけるようこれからも頑張っていきたいです。

新しく開発中の内製サービスも他にいくつかあるので、これらも完成し次第、紹介ブログが投稿されていくと思います。お楽しみに!


  1. traPのメンバーはそれぞれ固有のID (traQ ID) を入部時に決め、部内では基本的にお互いIDで呼び合っています。 ↩︎

  2. : プログラミングのこと。 ↩︎

  3. JK16: 2016年度に入学した情報工学系の学生のこと。 ↩︎

  4. Showcase は部内向けのPaaS基盤で、15代の @kaz さんが開発し、現在はSysAd班が運用しています。Giteaのリポジトリに設定ファイルを置くだけで、特定ブランチの更新をトリガーとするデプロイが走るようになります。部員の認証・識別や部外者の閲覧制限も簡単にできます。 (少し古いですが、 @kaz さんによる発表資料が こちら です。)
    ログの閲覧やDB構成の変更なども手軽にできるため、SysAd班でも開発用のデプロイ環境としてよく使っています。 ↩︎

  5. 実際にはこれらを行う前に、 anke-toの移行に合わせて @takashi_trap さんが traPtitech/caddy-trap-auth というCaddyのプラグインを作ってくださっていました。
    Showcaseには独自のtraP部員認証・部外者の閲覧制限機能があり、anke-toではこれを利用していたのですが、上のプラグインを利用することによりアプリケーション側のコードを変更することなくそのままで部員の認証・識別を行えるようになりました。 ↩︎

  6. traPtitech/DevOpsBot ↩︎

  7. コードネームは anke-two らしいです。 ↩︎

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

ユト (60°) 主にSysAd班とデザイン部で活動しています

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

ゲーム制作や競技プログラミングをしています

この記事をシェア

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

関連する記事

2022年4月7日
traPグラフィック班の活動紹介
annin icon annin
2021年3月19日
traPグラフィック班の活動紹介
NABE icon NABE
2022年4月5日
アーキテクチャとディレクトリ構造
mazrean icon mazrean
2021年7月8日
じゃぱりぱーく・おんらいん
suzushiro icon suzushiro
2021年5月16日
CPCTFを支えたインフラ
mazrean icon mazrean
2019年5月16日
Party Kingdom
Double_oxygeN icon Double_oxygeN
記事一覧 タグ一覧 Google アナリティクスについて