はじめに | 『デジタル創作』同好会traPとは
私たち『デジタル創作同好会traP』は、Webアプリやゲームの制作を中心に活動する、デジタル創作・プログラミングの総合サークルです。
traP
音楽制作、グラフィック、ゲームプログラミング、Web制作などそれぞれの分野に長けた人が「プロジェクト」として集まり、いろいろな作品を日々創造しています。
以下は部員が創作した作品の例です。全て「Showcase」改め「NeoShowcase」を使って公開されています。
Poly
yukikurage
oribe
ikura-hamu
また、部員の作品一覧は次のページから見ることができます。
Pugma 他
作品の公開場所
さて、これはハッカソンやプロジェクトで制作された作品を公開する場所のおはなしです。
素晴らしい作品であれば、より多くの人に見てもらいたいし遊んでもらいたいので、アクセスしやすい場所で公開したいですよね。
世の中には、VercelやAWSのような便利で高機能な「PaaS」や「IaaS」が存在しており、これらのサービスでWebアプリやゲームをインターネット上で公開することができます。
しかし、これらを使うにはサーバーの知識が必要だったり、高機能なあまり設定やドキュメントが難解だったり...
創作を行うすべてのメンバーがこれらのサービスを扱えるとは限りません。
そこで、作品を公開するハードルを下げ、より創作活動を活発に行えるようにする基盤である「NeoShowcase」がtraPには存在します。
作品公開プラットフォーム「NeoShowcase」
内製のサービスである「NeoShowcase」では、traPのクリエイターの創作作品の公開を支援します！
シンプルなWebサイトやWebサービスならば、とっても簡単に公開できます！
部員は無料で使える
「NeoShowcase」はtraPの部費（現在半年2000円！）によって運営されているサーバー上で動いています。使用にあたって追加料金は必要ありません！
適切にスケールができるため、部員がいくら増えても混雑を気にせず、無料で使うことができます！
設定(ほぼ)ゼロで公開
シンプルなWebサイトやサービスは、(ほぼ)設定ゼロで公開できます！
Gitリポジトリにソースコードをアップロードしたら、ダッシュボードの説明に従ってボタンを押すだけで設定が終わります！
最後に、自分の作品を公開したい好きなドメイン名（例: flythm.trap.games）を選んだら設定終了です。
このように、複雑な設定は行わずに作品の公開が行えます。
部内Gitホスティングサービスと連携
traPには、traP IDと連携して簡単・無制限に使えるGitホスティングサービス「Gitea」があります。
こちらのGiteaで開発を行えば、リポジトリ情報の登録や、メンバーの権限管理など難しい設定を行う必要はありません。
公開したいドメイン名や範囲を選ぶだけといった、本質的な公開設定に集中できます。
Pushだけでデプロイ
「NeoShowcase」はリポジトリのブランチを追跡して、新しいコミットがあればその最新のコミットでビルド・デプロイを行います。
クリエイターが行う操作は、普段の「git push」だけであり、更新のたびに難しい操作を行う必要はありません！
こんなにも高機能
シンプルな枠組み・デザインながら、熟練者のユーザーは、より高度な使い方もできます。
複雑なビルド方法に対応するため、Dockerfileからそのままビルド・デプロイが可能です。
MariaDBやMongoDBといったデータベースの使用もネイティブでサポートしています。
また、作品にアクセスするURLパスの細かな制御や、traP IDと連携した認証もワンクリックで設定できます。
さらに細かい高度な設定は、部内Wikiのページから見ることができます。
traQなどの他の内製サービスと同じ場所でドキュメントを管理しているため、比較的容易に見つけられます。
技術的挑戦
「NeoShowcase」では、サービスを使う側の使いやすさだけでなく、サービスを提供する側の体験も重視しています。
継続的なメンテナンス
大学のサークルではメンバーの入れ替わりが最短4年で発生するため、最初の開発者が卒業した後も継続的にサービスを提供できるように工夫を行っています。
技術選定ではサークル内標準であるGo言語や、フロントエンドビルドツールViteなどを選択し、サークルの講習会や他プロジェクトの経験を活かせるようになっています。
また、サークル内標準とは限らない、Solid.jsやKubernetesといった技術も問題解決のために適切に導入しています。
適切な開発・運用ドキュメント、勉強用の資料などを内部Wiki等に残すことで、サークル内標準技術だけを知っているメンバーでも開発に挑戦できるようになっています。
特に「とっつきにくい」と言われるKubernetesに関しても、サークルメンバー向けに勉強用資料を一から書き、引き継ぎ体制を整えています。
motoki317前代Showcaseの問題を解決
「NeoShowcase」（新しい「Showcase」の意）は、Showcaseをリプレースするプロジェクトでした。
traP創設間もなくから存在していたShowcaseは、「部内PaaS基盤」として、部員が作った作品の公開を支えてきました。
しかし、一人の制作者がやや突貫工事気味で作ったシステムは、メンテナンスされず様々な問題を抱えていたり、機能が洗練されていない状態のまま放置されていました。
Showcaseが抱えていた問題の例:
- スケールアウトしない: 単一のサーバーで動くことが主に想定され、スケールアップにより部員や負荷の増加に対応してきました。Showcase本体やビルドプロセスも同じサーバーで動くため負荷に弱く、実際に障害が立て続けにありました。
- メンテナンス性の欠如: コードがかなり読みづらく、型も存在しない生のNode.jsで書かれていました。現在traPではNode.jsはあまり使われないため、メンテナンスし辛い状況が続いていました。
- 証明書の手動メンテナンス: メンテナンスされず、しばらく前からワイルドカード証明書の自動取得が壊れており、手動で取得とWebサーバーへの配置を行っていました。
- 管理画面の使いづらさ: ログを遡ることができない・アプリのCPU/メモリ使用量を見ることができませんでした。また、デザインも他サービスほど練られたものではありませんでした。
「NeoShowcase」では完全に一からShowcaseのリプレースを行い、サービス自体や管理画面を一から再デザインしました！
- スケールアウト可能: 「NeoShowcase」では複数のサーバーにワークロードを分散でき、サーバー台数を増やしてのスケールアウトが可能になりました。いくら部員が増えても、スケールアウトすることで対応が可能です。公開と運用開始からちょうど1年が経ちますが、サービス停止につながる致命的な障害は一度も起きていません。
- 設計とメンテナンス性の確保: traP内で標準で使われるGo言語をメインのプログラミング言語として採用し、設計やドキュメントも整えることでメンテナンス性を確保しました。
- 自動メンテナンス: 可能な限り堅牢なアーキテクチャで設計し、普段のメンテナンスは一切不要で動くシステムを構築しました。もちろん証明書も自動取得するようにしました。
- 管理画面の再デザイン: シンプルさや使いやすさ、他内製サービスとのデザインの一貫性を重視し、部内のデザインチームが管理画面を再設計しました。大変使いやすい管理画面となっています。
このように元の目的や思想は受け継ぎつつ、一から再設計することで使いやすさやメンテナンス性を確保しました。
開発フロー
NeoShowcaseでは、ユーザーである部員のフィードバックを検討し、可能な限り早く「価値」を届けるため、モダンな開発フローを整備しています。
部員のフィードバックは、部内メッセージングサービスであるtraQの1チャンネルに集められます。
このフィードバックはGitHub上のissueにまず整理されます。
開発者が要件を整理し、Pull Requestといった形で修正の提案を行うと、管理画面の変更に関しては全自動でプレビュー環境が立ち上がります。
このプレビュー環境を用いて、誰でもブラウザ上から素早く変更やバグの有無をチェックできます。
技術的には、ArgoCDのApplicationSetを用いて環境の生成を行っています。
（最近では、traQの開発にも同じプレビュー技術を取り入れています。）
変更をmainブランチに取り入れた後は、ChatOpsのbotから、1コマンドでビルド・リリース・デプロイまで行うことができます。
traQ上で開発チームメンバーがコマンドを打ち込むと、5分から10分でリリースから本番環境へのデプロイまで、全自動で行われます。
これらの工夫により、圧倒的な速度でフィードバックから改善までのループを回しています。
デザイン
管理画面のデザインは、「SysAd班 デザイン部」によってデザインされています。
ue他内製プロダクトと同じデザインシステムで設計されており、ユーザーである部員の使いやすさを第一に意識しています。
特にPaaSである「NeoShowcase」では様々な情報や設定が存在するため、「情報を分かりやすく提示」したり、「行うべき操作へ適切に誘導する」ために様々な工夫を施しています。
まとめ
traPでは日々部員によりWebサービスやゲーム等が創作され続けています。
これらの簡単な公開を支援するために、前代Showcaseの良いところを引き継ぎつつ誕生したのが「NeoShowcase」です。
部員は誰でも無料で作品をインターネット上に公開できます。
また、シンプルな枠組みながら高度な使い方もサポートし、様々なWebサービスやゲームを公開できます。
これからも、より使いやすい「作品公開プラットフォーム」としてのあり方を考え、機能改善や引き継ぎを進めていきます！💪
