SHOWCASE 無料で簡単に作品を公開できるプラットフォームを創り、 サークル全体の技術力向上の土壌をつくる 東工大デジタル創作同好会traP SysAd班 20230923 技育展決勝戦 作品公開プラットフォーム「NeoShowcase」 toki pikachu eyemono.moe tararira

イントロ Neoshowcase 私たちの目的は、部員のデジタル創作を支えること Discord入退室の通知ボット を作って活用したい 部内ハッカソンで大量の作品を デプロイする必要がある .... .... ChatGPTのAPIで遊んで みたい webアプリケーションを公開し たい メッセージボットを 作りたい 部員に使ってもらうための部員 向けサービスを公開したい オリジナルのサウンドとイラスト で作ったゲームを公開したい Go言語入門のためにつくったア プリケーションを公開したい イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

イントロ Neoshowcase 作ったアプリケーション、公開したいが... クラウドサービス R VerceU R NetlifH R FirebasW R AWD R GC9 R ... イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

イントロ Neoshowcase せっかく作っても、公開は学生にとってハードルが高い クラウドサービス V VerceY V NetlifR V Firebasa V AWH V GCC V ... イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ お金がかかる... クレカもってない... 設定が難しい...

課題 Neoshowcase 「作品を公開したいが、難しい！」という課題を Discord入退室の通知ボット を作って活用したい 部内ハッカソンで大量の作品を デプロイする必要がある .... .... ChatGPTのAPIで遊んで みたい webアプリケーションを公開し たい メッセージボットを 作りたい 部員に使ってもらうための部員 向けサービスを公開したい オリジナルのサウンドとイラスト で作ったゲームを公開したい Go言語入門のためにつくったア プリケーションを公開したい イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ 解決したい！

作品公開プラットフォーム SHOWCASE

作ったもの Neoshowcase 作品公開プラットフォーム「NeoShowcase」 「NeoShowcase」のここがすごい！ 部費によって運用するので、部員は実質無料 ユーザーごとの追加料金等なし！ 見やすいダッシュボードでらくらく設定 簡単な作品からDBを伴う複雑なアプリまで公開可能 簡単なものなら設定を書く必要も無し！ イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

アプリを公開してみる

アプリを公開してみる Neoshowcase 3ステップで簡単に公開できます Gitにアプリケーションのコードをアップロード 簡単なアプリケーションなら、ビルド設定を書く必要はありません！ ダッシュボードからビルドの設定 簡単なアプリケーションなら、ビルド設定不要 自分の作品を公開したいドメインを選択して公開 簡単なものなら設定を書く必要も無し！ Gitea Github イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

アプリを公開してみる Neoshowcase 3ステップで簡単に公開できます Gitにアプリケーションのコードをアップロード 簡単なアプリケーションなら、ビルド設定を書く必要はありません！ ダッシュボードからビルドの設定 簡単なアプリケーションなら、ビルド設定不要 自分の作品を公開したいドメインを選択して公開 簡単なものなら設定を書く必要も無し！ イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

アプリを公開してみる Neoshowcase 3ステップで簡単に公開できます Gitにアプリケーションのコードをアップロード 簡単なアプリケーションなら、ビルド設定を書く必要はありません！ ダッシュボードからビルドの設定 簡単なアプリケーションなら、ビルド設定不要 自分の作品を公開したいドメインを選択して公開 簡単なものなら設定を書く必要も無し！ 公開完了！ イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

ほかにも Neoshowcase 公開したアプリケーションは、様々な設定や管理が可能 ドメイン設定 環境変数設定 権限管理 リソースの閲覧 などなど イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

運用 Neoshowcase 部員による500個以上のアプリケーションが動いており、 サークル全体の開発を活発化。技術力向上の土壌に。 公開済みアプリ 500個 以上のアプリ 累計利用ユーザー数 300人 以上が利用 利用頻度（ビルド件数） 100 〜 500 件/週 のビルド ←部内チャットツールでの投票bot 自作ゲームやwebサービス↓ イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

開発体験、使用技術、デザイン

開発体験 Neoshowcase DevOpsを実践し素早い開発を可能に PRごとの UIプレビュー環境自動構築 レビューをサポート Git上でタグを打つだけで これにより、 完全自動デプロイ リリースサイクルを高速化 GitHub ActionsによるDockerイメージのビルド Renovateによるk8s manifestの自動更新 完全自動デプロイを実現 イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

使用技術 Neoshowcase DockerとKubernetesにより、 小規模な利用から大規模な利用まで「NeoShowcase」は適切にスケールできます バックエンド p Golani p Docker, k8s (k3sf p p p p MariaDd p SQLBoiler p sqldeˆ VictoriaMetrics, Grafana, Lokf traefij Buildkit, Buildpacks フロントエンド p Solid.j p p TypeScrip’ macaron css DevOps周辺 p GitHub Container Registr p p p PR Generator Renovatº ArgoC¯ 通信にはコード生成でき（型安全）かつHTTP/1.1互換のConnect Protocolを使用 イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

デザイン Neoshowcase デザインシステムを構築し、複雑な操作をわかりやすく 「アプリケーションのステータスをわかりやすく表示すること」 「行うべき操作を適切に誘導して誰でも使えるようにすること」 デザインの効率向上やデザイン↔実装の距離を近づける サークルのプロダクト間でブランド統一を図る デザインシステム デザイントークン コンポーネントキット 画面数も機能も多いプロダクトをデザインで統一して 操作を予測 させる。 イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

まとめ Neoshowcase 作品公開プラットフォーム「NeoShowcase」 簡単に自分の作品を ウェブ公開可能 難しい設定や 高い利用料金は不要 既に500以上の作品を 公開済み サークル全体の開発を 活発化 イントロ 課題 作ったもの アプリを公開してみる ほかにも 運用 開発体験 使用技術 デザイン まとめ

SHOWCASE 無料で簡単に作品を公開できるプラットフォームを創り、 サークル全体の技術力向上の土壌をつくる このスライドのリンク Githubへのリンク 東工大デジタル創作同好会traP SysAd班 作品公開プラットフォーム「NeoShowcase」 toki pikachu eyemono.moe tararira