2020-06-27に更新

大学祭の参加団体向けウェブシステムをOSS化してみた

main_screenshot.png

はじめに

大学祭では、たくさんの参加団体(サークル・部活)が模擬店などの企画を出店し、盛り上げています。

大学祭を成功させるには、実行委員会と参加団体の間の連携が欠かせません。連携するための方法として、実行委員会では、参加団体からの「各種申請」を受け付けています。例えば、大学祭当日に配布されるパンフレットに掲載する内容を参加団体から募集する必要があります。また、実行委員会が貸し出す備品の申請を受け付けることもあります。

こうした申請受付業務は、多くの大学祭では紙による受付であったり、メールや Google フォームでの受付を行っているところが多いかと思います。

紙やメールによる受付の場合、紙・メールに書かれた内容を1枚1枚Excelに入力していく手間がかかります。受付方法によっては対面での対応が必要となり、昨今の状況下では厳しいものがあります。
(そもそも、今年の秋冬に開催される学園祭でも、予定通り開催できるかどうか怪しいところではありますが……)

そのような中、私は大学祭の各種申請などを受け付けるウェブシステムを開発し、今年になってそれを OSS 化してみました。

私は誰?

私は、東京理科大学の野田キャンパスに通う大学生です。大学名こそ「東京」とついていますが、「野田」は「千葉県」にあります。そんな野田キャンパスで開催される学園祭「野田地区理大祭」の実行委員をしていました。

実行委員時代は、PortalDots の開発のほか、公式ウェブサイト・パンフレットのデザイン・実装なども行っていました。

参加団体向けウェブシステム「PortalDots」

PortalDotsのロゴ

開発環境の動かし方

開発環境を動かすには Git、PHP(7.3以上)、Composer、Node.js、Yarn、Docker、docker-compose がセットアップ済みである必要があります。

2020/06/27 追記 : コマンドの実行順序が間違っていたので修正しました。

# 1. PortalDots をクローン
$ git clone [email protected]:portal-dots/PortalDots.git
$ cd PortalDots/

# 2. 必要な PHP パッケージをインストール
# ※ エラーが表示される場合は、エラーの指示に従って、必要な PHP 拡張モジュールのインストールを行ってください
$ composer install

# 3. 必要な Node.js パッケージをインストール
# ※ エラーが表示される場合は、Node.js のバージョンが古い可能性があります。Node.js のバージョンをアップグレードしてください
$ yarn install

# 4. 設定ファイルを作成
$ cp .env.example .env
$ php artisan key:generate

# 5. 開発環境を起動する
$ yarn docker

# 6. マイグレーション(データベースのセットアップ)
$ yarn migrate

# 7. フロントエンド開発サーバーの起動
$ yarn watch
# → http://localhost:3000 にアクセスするとトップページが表示されます
# Ctrl-C で停止

# 8. 開発環境を停止する
$ yarn docker-stop

トップページ

トップページでは、参加団体向け説明会の次回日程の表示機能や、各種お知らせの閲覧、配布資料のダウンロードなどができるようになっています。

企画参加登録の受付期間中は、提出している参加登録の受理状況も確認できます。

screenshot_home.png

企画参加登録

学園祭への企画エントリーもウェブから可能です。

screenshot_circle_register.png

申請フォーム

大学祭の参加団体は、このようなフォームからパンフレット掲載内容などの情報を委員会へ提出することができます。

受付期間を設定することも可能です。

image.png

フォームエディター(Vue.js 製)

「フォームエディター」は PortalDots の目玉機能(?) です。

実行委員は、各種申請を受け付けるフォームを Google フォームのようなノリで作成することができるようになっています。

「じゃあ、Google フォーム使えば良いのでは?」と思われるかもしれませんが、Google フォームではログイン・新規登録機能(※1)は利用できない上、回答内容の編集が容易でなかったり(※2)、1団体あたり1回答までに制限できなかったり(※3)するなど、大学祭の申請フォームとしては不便なところもあります。

PortalDots の「フォームエディター」で作成できるフォームは、回答受付期間を設定できたり、1企画につき1回まで回答可能という設定ができたり、あとから回答を簡単に修正できたりします。

※1 : Google フォームでも、一応 Google アカウントでのログインを必須にすることはできます

※2 : Google フォームでも、回答者に回答の編集を許可することはできます。ただ、編集用の URL を紛失してしまうと編集できなくなってしまいます

※3 : Google フォームでは、1ユーザーあたりの回答数を制限できます。1団体あたりのような制限をかけるのは難しいと思われます

screenshot_form_editor.png

CodeIgniter から Laravel への移行途中です

現在、「CodeIgniter」と「Laravel」という、2つのウェブフレームワークを混在して使用しています。

元々 PortalDots は、私がウェブフレームワーク初心者のころ(大学1年の夏)に開発を始めた物でした。それ以前はフレームワークという物自体を使ったことがなく、プレーンな PHP コードでしか書いたことがなかったのですが、「CodeIgniter というフレームワークは簡単」だという話を聞き、試しに PortalDots の開発で使ってみたのでした。

しかし、CodeIgniter の機能は貧弱である点や、なるべくメインストリームにあるフレームワークを使ったほうが今後のメンテナンスがしやすいだろうということで、Laravel への移行をはじめました。

2020年6月現在、CodeIgniter が使われているのは「スタッフモード」(実行委員用のページ)のみとなっており、それ以外のページは Laravel に移行済みとなっています。

おわりに

OSS 化したので PortalDots はどなたでも自由にお使いいただけるようになりました。

学園祭実行委員会に所属しており、かつプログラミング経験のある方がいましたら、ぜひ使っていただきたいです。また、学園祭関係者でなくても、お試しとして実物を触っていただけると嬉しいです!

ツイッターでシェア
みんなに共有、忘れないようにメモ

SofPyon

最近は PortalDots の開発してます

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

関連記事

コメント