「みんなであいうえお作文!」をリリースしました。
友人と2人での開発で、実質的な開発期間としては2か月ほどでしょうか。
(集中してやれば1~2週間ほどでいけた気はしますが、2人とも本業やプライベートが忙しく、時間の確保に苦労しました)
フロントとバックをそれぞれ担当する形で実装を進めましたが、うまく分業できてスムーズに進めることができたと思います。
何ができる?
- あいうえお作文をオンラインのみんなで作れる
- お題の投稿
- 他の人が投稿したお題に参加して作文を書く
- 作文を「いいね」できる
- 作文をブックマークできる
- いいね、ブックマーク、投稿、参加した作文、を絞って表示できる
- 作文をTwitterに共有できる
遊び方
1.右下プラスボタンからお題を投稿!
2.一文字目の作文を書いて、他の人が続きを書いてくれるのを待とう!
技術スタック
Reactで作成したSPAをFirebase Hostingで公開しています。
作文の登録や更新などは、Cloud Functionsの関数をAPI経由でキックすることで処理しています。
また、作文の更新状況をリアルタイムで反映するためにFirestireのSDKを利用しています。
フロントエンド
- React
- Recoil(状態管理)
- Emotion(Style)
- Firebase Hosting
- Cloud Firestore SDK
- Cloud DNS (GCP)
- Cloud Domains (GCP)
バックエンド
- API Gateway (GCP)
- Cloud Functions (GCP)
- Firestore (Firebase)
サイト内広告について(AdinPlay)
個人開発する動機といえば、みなさんほぼ間違いなくお金儲けですよね。
今回のようなしょぼい素朴なWEBゲームの場合、流石に課金は見込めないので広告に頼ることにしました。
広告といえば Google AdSense ですが、あちらは審査が厳しいらしくゲームサイトではほぼ確実に審査が突破出来ないようです。
どうしようかと悩んでいたところ、アドセンス公認パートナーの AdinPlay なるものを知りました。これを利用すると、マージンを取られるかわりに、めちゃくちゃ緩い審査でアドセンスを利用することが出来るようです。
ただし、英語でメールのやり取りが必要だったりと導入までが中々面倒だったので、手順についてメモを残しておきます。
- 公式ページの Sign up ボタンから申請する。
- My monthly pageviews → 適当に 100 とかにしてみた
- Message → 何を書けば良いのかよく分からず、空欄にしてみたが特に問題はなかった
- 数日後、グーグルアドマネージャーのアカウントを作成して AdinPlay からのリクエストを承認するよう依頼のメールが送られて来る。
- 上記処理完了後、完了した旨をメールで返信する。
- 添付ファイル (ads_XXX.txt) を WEB サイトに配置するよう返信が来る。同時に、必要な広告種別とサイズを聞かれる。
- コンテキストルート直下にリネーム (ads.txt) して配置する。
- 完了した旨と必要な広告種別、サイズを返信する。
- 広告の ID や導入手順が送られてくる。
- 手順に従い広告を配置し、完了した旨を返信する。
- ローカルで動作確認した際は広告が表示されなかった
- 申請時に指定したドメインじゃないと広告が表示されないのかもしれない
- AdinPlay からアカウント作成完了のメールが届くので、メールのボタンをクリックしてパスワードを変更する
- 自分の場合は迷惑メール扱いになっていた
- パスワードを変更すると、サインインページからサインイン出来る
- username は登録したメールアドレス
振り返り
- Cloud Functionsを使うメリットがあまりないかもしれない
- 更新処理もフロントから直でFirestoreを編集しちゃってよかったかも
- フロントとバックできれいに領域が分かれるので作業分担はしやすかった
- Twitter(X)連携がネック
- 自動投稿とかやろうとするとAPIの制限を気にしないといけないのでつらみがある
- 画像投稿は一旦アップロードを挟まないといけないし、どうしたものか……
- 比較的短期間でリリースまでできたのはよかった
- Firebaseの楽さに助けられた
- GitLabでリリースのPipelineを回してFirebase Hostingにデプロイする設定をしていたので、修正反映も楽にできた
これからの課題
あいうえお作文をみんなで遊べるという基本的な機能は満たしているものの、あったら便利な機能も追加していければと考えています。
具体的には下記のような機能です。
- ユーザー登録機能
- Lineとの連携で作文の完成が通知される
- ユーザー毎のいいねランキングなんかも表示できたらよい
- 新しいお題が投稿されたら、あいうえお作文のTwitter(X)アカウントに自動投稿される
- これはTwitter(X)のAPI制限上、お金をかけずに実装するのが難しいかもしれませんが……
- Twitter(X)に共有した作文のプレビューをツイート内に表示する
- 作文ページのプレビュー、もしくは作文の画像が表示できたらSNSで共有しやすいなと思っています