健常者エミュレータ事例集を支える技術
AI要約
健常者エミュレータ事例集はWordPress+LightSailを中心に、Next.js製投稿フォーム、dbt+BigQuery分析基盤、Lambda製X通知Botの4構成で運用されており、各技術選定の経緯と長短を解説している
はじめに
- この記事では、健常者エミュレータ事例集を構成する技術について記述します。
- 健常者エミュレータ事例集を構成する技術について俯瞰的に見たのち、個々のコンポーネントについて触れ、技術選定をした歴史的経緯などについてもちょびっと書きます
- Wordpressの異常な使い方として参考になれば幸いです
システム全容
健常者エミュレータ事例集を構成する技術
健常者エミュレータ事例集の本体のほかにも3つのコンポーネントがあり、それぞれ本体とREST API経由で接続されています。順を追ってみていきます。
健エミュ投稿フォーム
External Linkhpe-form-v2.vercel.app健常者エミュレータ事例集Wiki投稿フォーム v2.5hpe-form-v2.vercel.app
作られた背景
-
事前知識
-
External Linkwiki.seesaa.jpSeesaa Wiki（ウィキ）- ゲーム攻略に便利な無料Wikiwiki.seesaa.jp
-
Seesaa Wikiにはテンプレート投稿機能があり、事前に作成されたテンプレートを使って記事を作成することが可能だったが、PCからしかテンプレート投稿機能が使えない欠点があった
-
当時、健常者エミュレータ事例集WikiのPV数は9割をスマートフォンが占めていた
-
-
健常者エミュレータ事例集の理念を実現するためには、スマートフォンから記事を投稿できない状況を解消し、新規投稿を促進する必要があった
構成
- Next.js + Vercel
- 長所：無料枠の範囲内でできる
- 短所：オーバーエンジニアリングな点
- 正直Next.jsを使うほどではなかったかもしれないので、今はReact + Cloudflare Pagesで作り直そうとしている
- 構成の欠点ではないが、作った当初はフロントエンドが全く分からず適当に作ったため、技術的負債がたまっている。現在では新規に機能を追加するのが難しい状態になっている
健常者エミュレータ事例集本体
- Seesaa Wikiの機能が不足していたため、2023年の2月にWordpressを中心にする構成に移行した
構成
-
Amazon LightSail + Wordpress + Route 53
-
長所：料金が定額であり、過剰な料金がかかることがない
-
短所：過剰なアクセスが集中すると落ちる
- 実際Xでバズって落ちたことがある
- CDNを挟めば何とかなるかもしれない
利用しているプラグイン
- wpDiscuz : コメント機能
- WP Mail SMTP : ユーザー登録時のメール配信
- Taxopress : タグ管理
- Sassy Social Share : SNSシェアボタンの作成
- Like Button Rating ♥ LikeBtn : 「いいね」「よくないね」ボタンの作成
- Ivory Search : 検索機能
- Advanced Random Posts Widge : ランダム記事リストの作成
健エミュ分析基盤
- 健エミュ内に蓄積されたデータを分析するために作成された
構成
- dbt Cloud + BigQuery + Looker Studio
- 長所：激安。ほぼ無料に近い
- 短所：特になし
参考：
健エミュX通知Bot
-
作った背景：Seesaa Wikiを使っていた当初、Seesaa WikiにビルトインされているTwitter（当時）連携機能が不十分だったため自作した
-
10分に一回REST APIをたたき、新しい記事があったらスクレイピングして投稿画像を作成し、X APIを使って投稿する仕組みになっている
-
コードはこちら
構成
- AWS Lambda + Serverless Framework + Python
- 親の顔より見たPythonで作った
- 長所：激安
- 短所：特になし
おわりに
- 追加で知りたいことがある方はこっそり教えてください