SofPyon

2021-05-17に更新

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

PHP Laravel Vue 学園祭 PortalDotsの紹介

はじめに

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

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

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

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

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

GitHub : https://github.com/portal-dots/PortalDots
PortalDots 公式ウェブサイト(2020/11/30 公開) : https://dots.soji.dev

私は誰？

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

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

野田地区理大祭公式ウェブサイト : https://nodaridaisai.com/

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

GitHub : https://github.com/portal-dots/PortalDots
- よろしければぜひ Star お願いします…！

開発環境の動かし方

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

2020/06/27 追記 : コマンドの実行順序が間違っていたので修正しました。
2021/05/17 追記 : 開発環境の起動方法の変更を反映しました。

$ git clone [email protected]:portal-dots/PortalDots.git
$ cd PortalDots/

# 必要な Node.js パッケージをインストール
# ※ エラーが表示される場合は、Node.js を最新バージョンにアップグレードした上で、再度 yarn install を実行してください。
$ yarn install

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

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

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

# Docker コンテナ内で必要な PHP パッケージをインストール
$ yarn docker-bash
$ composer install
$ exit

# フロントエンド開発サーバーの起動
$ yarn hot
# → ブラウザで http://localhost にアクセスすると、PortalDots の開発環境が起動する
# → フロントエンド開発サーバーを終了するには Ctrl + C を押す

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

トップページ

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

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

企画参加登録

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

申請フォーム

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

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

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

「フォームエディター」は PortalDots の目玉機能（？） です。

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

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

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

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

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

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

参加企画に提出してもらう各種申請もウェブフォームで受け付けられます。動画のように設問ぐりぐりできます。 pic.twitter.com/5rVFRVnUPd
— Soji — PortalDots (@sofpyon) June 11, 2020

CodeIgniter から Laravel への移行途中です → 完了しました！

2021/05/17追記 : 先日、CodeIgniter のコードを全て削除し、Laravel へ完全移行しました！

ついに #PortalDots のコードが、悲願の 100% Laravel 化達成しました…！CodeIgniter 消します！ pic.twitter.com/vt1RKYDfcL
— Soji (@sofpyon) 2021年5月1日

（以下、追記前）

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

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

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

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