はじめに

ネット寄りでは「kisana」、現実寄りでは「koyu」のハンドルネームを使用している27卒私立理系学生です。

このサイトでは、リンクが外部サイトでも現在のタブで開くようになっているので、ctrlキーを押しながらクリックすることをお勧めします。

成果物一覧

  1. ANYUR anyur.com
  2. Amiverse amiverse.net
  3. IVECOLOR ivecolor.com
  4. BeAlive. bealive.amiverse.net
  5. 得句巣 x.amiverse.net
  6. KISANA:ME kisana.me
  7. KISANA研究所 kisana-me.github.io
  8. CIT MC Discord




1. ANYUR

ANYURのスクリーンショット5枚

  • リンク: anyur.com
  • リポジトリ: GitHub
  • 主な開発期間: 2025年4月~/2か月ほど


1. 概要

一番新しいプロジェクト。

複数アカウント同時サインインができる。

Stripeを使ったサブスクプランに加入できる。

他のサービス(現状ではBeAlive.と得句巣のみ)にパスワードレスサインイン(OAuthを利用したSSO)ができる。


1. 使用技術

  • バックエンド Ruby on Rails
  • DB MariaDB
  • 決済 Stripe


1. 作成した背景

個人開発したサービスごとにアカウント管理をするのは大変だろうと思い、一つのアカウントを作成するだけで複数のサービスを利用できるようにしたいと思ったのが始まり。


1. こだわった点

サインイン・サインアップ・お問い合わせなど、フォーム送信時にはCloudflare Turnstileを利用してbot対策を施した。

メールアドレスを変更するにはパスワードが、パスワードを変更するにはメール認証が必須としてセキュリティを高めた。

正しいIDで間違ったパスワードを使いサインインを試行し続けるとロックされる仕組みを実装した。

パスワードを忘れてサインインできなくなっても、再設定メールを送りリセットできるようにした。

Railsのsessionにトークンを配列で記録して複数アカウント同時サインインを実装し、モジュール化してまとめている(モジュール部分のソースコード)。


1. 苦労した点

OAuthの認可・リソースサーバーを完全自作するというのが大変だった(認可とる部分のソースコード, 認可する動画)。

メール認証を必須にしているのでメールサーバーをどうするか悩んだ。このドメインから送信したいが、オンプレ環境ではop25b、SendGridなどは1日100送信まで、などの制約があり、最終的にDKIMを無視し、GmailとCloudflare Email Routingを利用して利用者に送信している(Gmailではスパム判定)。

一時期はVPS上でPostfix+Dovecotの構成で運用していたが無駄な出費と感じ契約を終えた。




2. Amiverse

Amiverseのスクリーンショット5枚


2. 概要

一般的なSNS。ActivityPubに対応していてMisskeyやMastdonと投稿のやり取りができる。

画像や動画を投稿できる。リアクションができる。


2. 使用技術

  • バックエンド Ruby on Rails
  • DB MariaDB
  • オブジェクトストレージ MinIO
  • 画像処理 ImageMagick
  • 動画処理 FFmpeg
  • 全文検索 Meilisearch
  • 形態素解析 MeCab, natto
  • セッション管理 Redis
  • ジョブ管理 Sidekiq
  • フロントエンド Next.js(React)


2. 作成した背景

任天堂のSNSであるMiiverseがサ終して、それを模倣した横長ドット絵を投稿できるSNSを作りたいと思ったのが始まり(この機能は現存)。

Miiverseの亜種ということでAmiverse。

単にSNSを作ってみたかった。


2. こだわった点

ActivityPubを自作実装している。フォローと投稿のやりとり部分までは完成していて、Misskey.ioやMastdon日本鯖からも「@[email protected]」としてアカウントと投稿が確認できる。

フロントにNext.jsを使い、投稿のキャッシュやローディングアニメーション、スケルトンローディング、などなど快適に使うための最適化を各所に施している。

画像と動画の配信はS3互換のMinIOから行っている。Active Storageではファイルのパスを指定できなかったりといろいろ不便な点があったので、ファイル管理部分は自作している(ソースコード)。

形態素解析ツールを使用して頻出単語を探し、Xのようなトレンド機能を実装している(ソースコード)。

Miiverseのような、横長のドット絵を描いて投稿できる仕組みがある。キャンバスは320px × 120pxで白黒のみ。不正を防ぐためにキャンバスの白黒を0,1でサーバーへ送信してサーバー側で画像をレンダリングしている(ソースコード, 動画)。


2. 苦労した点

ActivityPubの実装(より汚いソースコード)はネット上に情報が少なく大変苦労した。misskeyというActivityPub機能があるSNSサーバーのインスタンスを作成してリクエストを飛ばし確認しながら実装していった。

思いついた機能を全て詰め込もうとして開発中に要件定義がブレブレになっていつまで経っても完成しない大失敗作となった。




3. IVECOLOR

IVECOLORのスクリーンショット5枚

  • リンク: ivecolor.com
  • リポジトリ: GitHub
  • 主な開発期間: 2024年2月~/4か月ほど


3. 概要

汎用的なブログシステム。マークダウン形式で記事を書けて、htmlを埋め込める。OGP設定しているのでSNSでリンク送信時にサムネが表示される。


3. 使用技術

  • バックエンド Ruby on Rails
  • DB MariaDB
  • オブジェクトストレージ MinIO
  • マークダウンレンダラ Redcarpet
  • エディタ Action Text
  • 画像処理 ImageMagick


3. 作成した背景

Google Adsenseに合格して広告収入を得たかった(審査落ち)。


3. こだわった点

お問い合わせフォームに独自のBOT対策として計算問題を実装したが、普通に突破されている。

Amiverseで作成した画像配信技術を転用している。


3. 苦労した点

Adsense審査が厳しい。




4. BeAlive.

BeAlive.のスクリーンショット5枚


4. 概要

「BeReal.」というSNSを真似て作った。

キャプチャ画面で撮影を押すと、3秒カウントダウン→撮影→カメラ切りかえ→3秒カウントダウン→撮影、というようにしてフロントカメラとバックカメラで2枚の写真を撮影する。これを色んな人と共有するというSNS。

アカウントを持つ人がリクエストを発行でき、そのリクエストURLを他人になんらかの方法で送る。送られてきた人はサインインしていなくても撮影ができる。


4. 使用技術

  • バックエンド Ruby on Rails
  • DB MariaDB
  • オブジェクトストレージ MinIO
  • 画像処理 ImageMagick


4. 作成した背景

「BeReal.」との差別化で、だれでもいつでもリクエストを送信出来たら面白そうと思った。

この仕組みで高齢者の生存確認ができるのではないかとも思った。そこからサインインしていなくてもリクエストがあれば簡単にWeb上で撮影できる仕組みを思いついた。


4. こだわった点

Amiverseで作成した画像配信技術を転用している。

Web上で撮影が完結するところ。

ANYURアカウントでOAuthを使ったSSOができるところ(ソースコード, SSOする動画)。


4. 苦労した点

Web上でカメラを扱うのが難しかった。加えてフロントエンドは最近のRailsに組み込まれているStimulusを初めて使ったので新技術を扱うという労力があった。




5. 得句巣

得句巣のスクリーンショット5枚


5. 概要

漢字しか使えないSNS。投稿へのリアクションは｢良｣｢可｣｢不可｣。返信もできる。


5. 使用技術

  • バックエンド Ruby on Rails
  • DB MariaDB


5. 作成した背景

個人開発から生まれた｢対多｣という漢字しか使えないSNSアプリがバズっていて、これは正規表現のバリデーションかけるだけで簡単に作れるのではないかと思い、作った。

｢対多｣との差別化として、ネイティブアプリで作成するのではなくてwebアプリとして作成し、サインイン等を必須としないことで誰でも気軽に使えるようにできるのではないかと思った。


5. こだわった点

最近のRailsに追加されたHotwireの機能を使ってシームレスなタイムラインを作成した。1番下で読込ボタンを押すと続きが画面遷移無しに読み込まれる。

BeAlive.で作成したコードを転用してANYURアカウントでOAuthを使ったSSOができるようになっている。


5. 苦労した点

正規表現で漢字の範囲を選択するところ。




6. KISANA:ME

  • リンク: kisana.me
  • リポジトリ: GitHub
  • 主な開発期間: 2023年3月~/未定


6. 概要

ポートフォリオサイトです。


6. 使用技術

  • フロントエンド Next.js


6. 作成した背景

SNS上で独自ドメインのポートフォリオサイトを自作している人が多く作ってみたいと思ったから。


6. こだわった点

メニューからダークモードやテーマカラーを選べる。テーマカラーはhueで320?段階から選べる。


6. 苦労した点

MDXに対応したかったが、ライブラリ等使い方が分からなかったので断念。現在はmarkdown-itでマークダウン記述できる。




7. KISANA研究所


7. 概要

HTMLやCSS、JSなどのテストをしています。


7. 使用技術

  • ホスティング GitHub Pages


7. 作成した背景

素のHTML、CSS、JSで作成した成果物を置いておく場所が欲しかったから。


7. こだわった点

ニューラルネットワークをJSで作ったりした。


7. 苦労した点

蛇ゲームと接続して強化学習させようとしたが上手くいかなかった。




8. CIT MC

  • リンク: Discord
  • リポジトリ: なし
  • 主な開発期間: 2025年4月~/半月ほど


8. 概要

弊学生のみが参加できるマインクラフトサーバー。30人程がDiscordサーバーに、22人程がマイクラサーバーに来てくれた。


8. 使用技術

  • GoogleのOAuth
  • DBにPostgreSQL
  • バックエンドにExpress
  • ランタイムはNode.js
  • マイクラサーバーはPaper
  • 独自の認証プラグイン「MyAuth」


8. 作成した背景

マインクラフトをしたかった。


8. こだわった点

弊学生には特定のドメインのメールアドレスとそれを使うGoogleアカウントが配布されている。ここに着目して、GoogleのOAuthを使ってメールアドレスを取得し、特定のドメインであれば参加を許可するという仕組みを作成した。

プレイヤーがマイクラサーバーに参加しようとすると、認証済みであるかどうかをWebエンドポイントにHTTPをたたいて確認する仕組み。

この認証を行うプラグインをJavaで簡単に開発した。


8. 苦労した点

真夜中のアクセスが多く、その時に不具合などあると対応できない。

SpiGot系プラグインの作り方についての参考資料がネット上に少ない。

簡単な認証システムなのでExpressとポスグレを採用したが使うのが初めてで苦労した。




まとめ

AmiverseでActivityPubの実装が1番大変でAPI実装力がついたと思う。

悪い点

lintを使っていない。tsが苦手。testを書かない。GitHubのIssuesやPR、Gitのブランチなど使い切れていない。ライブラリを使わなすぎる。CSSを直書きしすぎる。

良い点

Ruby on RailsとNext.js(React)を使ってどんなWebシステムでも自作できるような気がした。

機能をまとまりでモジュール化して他のシステムに転用するやり方を習得した。