大阪産業大学 電子計算研究部（電研）の公式サイトと部員ポータルです。
公開ページ（部の紹介・ブログ・実績など）と、部員がログインして使う各種機能をまとめて提供しています。
- サイト: https://osu-denken.net or https://osu-denken.github.io
- ブログ: https://osu-denken.net/blog/ or https://osu-denken.github.io/blog/
- 部員ポータル: https://osu-denken.net/portal/ or https://osu-denken.github.io/portal/
# クローン
git clone https://github.com/osu-denken/osu-denken.github.io --recursive
# --recursiveを忘れた場合（サブモジュールの更新）
git submodule update --init --recursive- トップページ … ターミナル風の画面で部を紹介します
- ブログ … 部員が書いた記事を公開しています
- 実績 / 部の紹介 / アクセス … 活動実績や部の情報、部室の場所を掲載しています
ログイン後、部員ポータル /portal/ から次の機能が使えます（使えるものは権限によって変わります）。
- ブログ編集 - 記事の作成・編集。画像はエディタに貼り付け（Ctrl+V）やドラッグ＆ドロップで追加できます
- 非公開記事 - 部員だけが読める記事の作成・閲覧
- 画像管理 - アップロード済み画像の一覧・並び替え・Markdownコピー・削除
- 固定ページ編集 - 部の紹介ページやトップのターミナル文面の編集
- 招待コード作成 - 新しい部員を招くためのコード発行
- 部員管理（幹部）- 名簿の編集、入部申請の承認・却下、役職や権限の割り当て
- SwitchBot操作（幹部）- 部室の SwitchBot（スマートロック）の施錠・解錠
- 操作ログ閲覧（幹部）- ログイン・編集・招待などの操作履歴の閲覧
- 各種設定 - ユーザー名の変更、パスワード設定、Google連携、2段階認証、GitHub連携
- 入部申請ページ https://osu-denken.github.io/register/ を開きます
- 大学のGoogleアカウントでログインします（初めての方はそのままアカウントが作成されます）
- 大阪産業大学のGoogleアカウント（
@ge.osaka-sandai.ac.jp）のみ登録できます - メールアドレスと学籍番号は Google アカウントから自動で取得されるため、入力は不要です
- 大阪産業大学のGoogleアカウント（
- 氏名、フリガナ、生年月日などのフォームに入力します（趣味・やってみたいこと・連絡事項などは任意）
- 「申請する」 を押すと仮登録が完了し、部のメールアドレスへ申請内容が通知されます
- 幹部が内容を確認し、入部案内メールをお送りします。承認されると、ポータルの各機能が使えるようになります
大学のGoogleアカウントがまだ使えない方へ
幹部から受け取った招待コードがあれば、入部申請ページのリンクから学籍番号、パスワードでの登録もできます。登録後、あらためて入部申請を行ってください。
あとで Googleアカウントが使えるようになったら、ポータルの設定からGoogle連携を追加できます。
- 学籍番号、パスワード または 「Googleでログイン」 のどちらでもログインできます
- 初めての方は、まず上記の「入部申請」からお願いします
- 希望者は 2段階認証（ワンタイムパスワード） を有効にできます
- Google でアカウントを作った方は、設定画面からパスワードを設定すると、以降はパスワードでもログインできます
- すでにパスワードで使っている方は、設定画面から Google連携 を追加すると、以降はどちらでもログインできます
- パスワードを忘れた場合は、ログイン画面から パスワード再設定 メールを送れます
部員の権限は、役職に応じて自動で付与されるほか、幹部が一人ひとりに個別に付与できます。
| 権限 | できること |
|---|---|
| 部員閲覧 | 構成員名簿を見る |
| ブログ編集 | ブログ記事を作成・編集する |
| 画像追加 / 画像削除 | ブログ用の画像をアップロード / 削除する |
| 非公開記事閲覧 / 非公開記事編集 | 部員限定記事を読む / 編集する |
| ページ編集 | 固定ページやターミナル文面を編集する |
| 招待コード作成 | 入部用の招待コードを発行する |
| 部員管理 | 名簿の編集・入部申請の承認/却下を行う |
| 部員権限変更 / 部員役職変更 / 部員削除 | 他の部員の権限・役職・在籍状態を変更する |
| Discord招待コード閲覧 | Discord への招待リンクを見る |
| SwitchBot操作 | 部室の SwitchBot を操作する |
| ログ閲覧 | API の操作ログを閲覧する |
Next.jsを用いてGitHub Pagesへデプロイしてフロントエンド側を作成
- バックエンド - https://github.com/osu-denken/web-api
- ECRD Fake Terminal - https://github.com/osu-denken/ecrd-fake-terminal
-
CSSが適用されない こちらはNext.js 15 + GitHub PagesでCSSが反映されない問題を解決した話（App Router対応・Tailwind・TypeScript） - Qiitaを参考に修正した。
-
about/ へアクセスできない デフォルトでの静的エクスポートでは about.html として作成されます。
そのため https://osu-denken.github.io/about/ として開くには next.config.ts を以下のように変更しました。
import type { NextConfig } from "next";
import { env } from "process";
const isExport: boolean = process.env.IS_EXPORT === "1";
const nextConfig: NextConfig = {
[...]
trailingSlash: true,
};
module.exports = nextConfig;この手順を踏まなくても基本的には勝手にActionsでGitHub Pagesにデプロイされます
npm run exportを実行して静的サイトとしてビルドする- 各種gitコマンドを実行してビルドされたファイルをGitHubにプッシュする
git add .git commit -m "..."git push origin main
npm run devを実行してローカルサーバーを起動- ブラウザで
http://localhost:3000にアクセスする
/portal/admin/members/ から部員名簿を管理できます。MemberManage 権限を持つ部員のみ開けます。
- 在籍状態 (すべて / 承認待ち / 在籍 / 卒業 / 退部) でタブを切り替えられます。タブは
?tab=としてURLに載るので、リロードや共有をしても同じタブが開きます - 一覧では、その部員が電研ポータルのアカウントを作成済みかどうかも確認できます
- 部員を選ぶとダイアログが開き、名前、メアドなどをまとめて編集して保存できます
- 承認待ちの部員は、このダイアログから承認・却下できます
- 電話番号は重大な個人情報のため、幹部のみが閲覧・編集できます。一覧には表示されません
- 役職と権限は独立したビットフラグです。役職のデフォルト権限ですでに満たされている権限は、追加する権限の選択肢には現れません
名簿の実体はバックエンドの D1 データベースです。
権限や在籍状態の詳細は web-api の README を参照すること。
/portal/ の設定タブから、ワンタイムパスワードによる2段階認証を有効にできます。
- 設定タブでQRコードを認証アプリ (Google Authenticator など) に読み取らせ、表示された6桁のコードを入力すると有効になります
- 有効化したときに、リカバリコードを10個発行します
- リカバリコードは使い捨てです。1個使うたびに減ります。残りの個数は設定タブで確認できます
- 解除にも認証コード (またはリカバリコード) の入力を求めます
2段階認証を有効にしている部員がログインすると、パスワードの照合に成功した時点ではまだトークンを受け取れません。
バックエンドがFirebaseのトークンを一時的に預かり、認証コードを検証してから引き渡します。預かりは5分で切れ、コードの入力は5回まで試せます。
シークレットは SECRET_KEY で暗号化してKVに保存します。リカバリコードはハッシュしか保存しません。
一度受理したコードは、有効期間内であっても使い回せません。
/portal/ のブログタブから記事を作成・編集できます。BlogEdit 権限を持つ部員のみ編集できます。
エディタには画像を直接貼り付け (Ctrl + V) たりドラッグ&ドロップしたりできます。アップロードした画像はブログリポジトリの images/ に入ります。
/portal/ の非公開記事タブから、部員だけが読める記事を作成・編集できます。閲覧に PrivatePostView、編集に PrivatePostEdit 権限が必要です。どちらも部員の標準権限に含まれます。
公開されるブログ記事と違い、本文はGitHubのリポジトリではなくCloudflareのD1データベースに保存されます。
静的サイトには出力されないため、記事を読むには必ずログインと権限の確認を経ます。誰がどの記事を読んだかはログに残ります。
/portal/ の画像タブから、アップロード済みの画像を一覧・削除できます。Markdownの記法をクリップボードにコピーすることもできます。
記事から参照している画像を削除すると、その記事では表示されなくなります。削除する前に確認してください。
トップページのターミナルに表示される welcome.md は、ブログタブのリンクからブログと同じエディタで編集できます。PageEdit 権限が必要です。
welcome.md の実体は ecrd-fake-terminal にあり、このリポジトリにはサブモジュールとして取り込まれています。
そのため保存しても即座には反映されず、次の順で公開されます。
- web-api が
ecrd-fake-terminalへコミットする - コミットが載ってから、web-api がこのリポジトリの
deploy.ymlをworkflow_dispatchで起動する - Actions がサブモジュールを
--remoteで取り込み、再ビルドしてデプロイする
反映まで数分かかります。
また --remote で main の先頭を取り込むため、ecrd-fake-terminal へ直接pushした変更も、次のサイトのビルド時に反映されます。