マイブログ リスト

2025年3月25日火曜日

公式ドキュメントを読もう!~WebAPI(ブラウザAPI)編~

 つよつよエンジニアを目指して、定期的に公式ドキュメントを読み漁るシリーズ。

今回はFirefoxでおなじみのmozillaから「Web API|MDN」を読んでみました。

プロジェクトの関係でweb開発に触ることになりまして、HTML、CSS、JavaScriptの部分はある程度分かっているつもりなのですが、ブラウザを介してデバイス機能をつかうようなあたりは良く分かっていないので、このページを読もうと思った次第です。

WebAPIというと、ネットを介してリクエストとレスポンスを送受信するものがイメージされると思いますが、ここのページではブラウザAPIを扱っています。

そもそも、クライアントサイド JavaScript での APIは主に2つに分けることができ、

・ブラウザAPI
 ブラウザに組み込まれたJSで、デバイスの情報を取得したり命令を出したりできる。

・サードパーティAPI
 ブラウザには組み込まれておらず、通信して情報を取得する。

となるそうです。
一般には後者の方を指して、WebAPIと呼んでいるイメージですが、
今回のは前者みたいです。(ならこのページはブラウザAPIと表示すべきでは???)
→詳細はコチラ


ーーー

というわけで、Web API (もといブラウザAPI)のリファレンス一覧を軽く読んでみたので、各項目を簡単に紹介していきます。


  • 位置情報 API
     端末の位置情報を取得する。
     IPロケーションやWi-Fiの低精度なデータと、GPSも利用できる。
     使う場合はユーザの許可が必要。
  • IndexedDB
     ブラウザ側でRDBを保存し利用できる。
  • 画面起動ロック API
     端末が画面を暗くしたりロックしたりするのを防ぐ

  • 画面キャプチャ API
     画面をメディアストリームとしてキャプチャする。
     画面録画や、画面共有に利用する。

  • 画面方向 API
     デバイスの向き(Screen Orientation)を取得する。

  • 決済ハンドラー API
     配送先住所・決済手段などを自動入力しやすくするための規格。

  • 決済リクエスト API
     規格化された決済フォーム機能を提供する。

  • 権限 API
     permissionの状態を照会・取り消しする。(要求は将来機能)
     (位置情報APIや通知APIを利用する場合、権限が必要になる)

  • 交差オブザーバー API
     指定した要素が画面内に入っているか検知する。
     画面スクロール時の遅延処理や、広告が表示されたかどうかを集計する。
  • サーバー送信イベント
     サーバ側からのプッシュ送信をイベントおよびデータとして受信できる。
     ※通常はデータを受け取るためにはクライアントからのリクエストが必要。

  • サービスワーカー API
     サービスワーカーを利用して、別スレッドでバックグランドの処理やプッシュメッセージへの対応を行う。
     サービスワーカーはウェブワーカーの一種で、ブラウザとサーバ間でプロキシサーバのように振る舞う。
     リクエストに介入して、サーバーのモック動作をさせることもできる。

  • CSS カウンタースタイル
     リストに対してカスタムした番号を表示させることができる。
     01. 02. 03 ...
     A)B)C)...
    など、デモはこちら

  • ストレージ API
     ブラウザにデータを保存する。

  • ストレージアクセス API
     クロスオリジンのコンテンツが、ファーストパーティストレージにアクセスできるようにする(Experimental)

  • センサー API 群
     端末のセンサー群を、一貫した形でwebから扱えるように、共通の設計でつくられたインターフェースの集合。
  • 通知 API
     ウェブからシステム通知を行う。
  • DOM
     Document Object Model は、ウェブ文書のためのプログラミングインターフェイス。
     人が見るためのページ表示と、プログラムによる操作を両立させる仕組み。
  • バックグラウンド同期 API
     デバイスがオフラインのとき通信タスクを延期し、オンラインになったときにバックグラウンド通信を行う。

  • バックグラウンドフェッチ API
     動画や音声ファイル、ソフトウェアのような、時間のかかるダウンロードをうまく処理するためのメソッドを提供する。

  • バッジ API
     文書のファビコンやアプリのアイコンにバッジを設定する。

  • パフォーマンス API
     決められたイベント数やレンダリング時間を測定する等。 

  • ビュー遷移 API
     異なるwebサイトのビュー感のアニメーション遷移を簡単に作成する。

  • フェッチ API
     ネットワーク越しの通信を含む、リソース取得のためのインターフェイス。
     XMLHttpRequestをより強力かつ柔軟に置き換えたもの。

  • プッシュ通知 API
     ウェブアプリケーションがサーバーからプッシュ通知 を受信できるようにする。
     ただし、CSRF/XSRF 問題に注意して実装する必要がある。

  • プレゼンテーション API
     パワポのプレゼンのようなケースで、デバイスを大型スクリーンに繋いだ時に効率よく表示ができるようにする。(Experimental)
  • URL API
     URLを構文解析して、素早くアクセスできる。
      let addr = new URL("https://developer.mozilla.org/ja/docs/Web/API/URL_API");
      let host = addr.host;
      let path = addr.pathname;
一旦以上!
これでも「API仕様書日本語索引」の部分だけにしています。
知らないうちに色々なapiを使っていたんだなあ、としみじみ思いました。

まだ、「API仕様書英語索引」と「インターフェース」の部分が残っていますが、続きを書くかは未定です。


2024年10月18日金曜日

スマホアプリの課金システムを実装して大変だった話

初めてのブログです!🌷

最近は暑かったり寒かったり、ついこの前まで夏だったじゃん!って感じですね〜
実はまだ衣替えが追い付いてなくて、秋服に入れ替えている間に冬になりそうな雰囲気を感じております〜☃️

さて、突然ではありますが、
私自身、月島に入ってからスマホアプリの課金システムの実装を2回経験して、
課金実装の大変さを実感したので、その経験を軽めの感じでまとめてみようと思います💪

※始めに...この記事ちょこっと長めなのと、課金のかなーり表面的な上澄のようなお話なので、その二点、あらかじめご了承ください🙇‍♀️


早速課金システムのお話を始めていこうと思います🙇‍♀️

まず、課金システムといっても大きく分けて下記の2パターンの実装方針があります。

  • ストアフロント
    • すでに完成している課金システムを組み込む
    • 開発コストが抑えられる(システムの組み込みだけ)
    • 指定されている決済方法以外使えない(仕様変更に対応しずらい)
    • 通常の運用コスト(サーバーや人件費)にプラスでシステムの使用料がかかるため運用コストが上がる
  • フルスクラッチ
    • ゼロから全て自前実装
    • 開発コストがかかる
    • AppleやGoogleの仕様内であれば自由な設計ができるので、サービスの仕様変更にも対応しやすい
    • 通常の運用コスト(サーバーや人件費)で抑えられる

私が経験した課金システムの実装はいずれもフルスクラッチだったので、
今回はその視点から課金システムの実装の大まかなざっくり説明と、大変だったポイントをまとめてみます。


課金アイテムがあるスマホアプリを使ったことがある方はなんとなくイメージしやすいかもしれませんが、課金システムは大きく分けて2つの機能を実装する必要があります。

  • 都度課金実装
  • サブスクリプション実装


それぞれの概要を簡単に説明するとこんな感じになります。💰

【都度課金】

  • 買い切りのアイテム
  • お金がかかるのはその時のみ

【サブスクリプション】(以下サブスク)

  • 定期購読
  • 購入したサブスクに設定された期間毎に自動で更新・請求される


続いて、上記課金アイテムの主な処理は下記のようになります👇

【都度課金】

ユーザー購入時:

  • ユーザーが課金アイテムを購入
  • ストアで購入処理が完了
  • レシート情報が受け取れる
  • レシート情報を検証(正しくない情報の場合は処理しない)
  • 該当のアイテム等をユーザーに付与する

【サブスク

ユーザー購入時:

  • ユーザーが課金アイテムを購入
  • ストアで購入処理が完了
  • レシート情報が受け取れる
  • レシート情報を検証(正しくない情報の場合は処理しない)
  • 該当のサブスク情報のステータスをユーザーに付与する

更新時:

  • ストア側でユーザーの購入処理が完了
  • webhookから更新したレシート情報が送られてくる
  • 受け取ったレシート情報を検証する(正しくない場合は処理しない)
  • レシート情報から該当のユーザー情報を取得する
  • レシート情報をチェックして、正しいステータスに更新する
    • この時に解約している場合もある

定期バッチ更新:

  • 更新漏れがないかチェック
  • 課金ユーザーの最新のレシート情報を取得
  • レシート情報を検証
  • 受け取ったレシート情報を元にユーザーのステータスと照合
  • 正しくないステータスのユーザーがいた場合は正しいステータスに更新する

この説明から分かるように、サブスクの実装は単純に処理することが多いのと、ユーザーのステータスを保持しておかないといけないのでその点も実装上でややこしくなってくるポイントになります。


都度課金の実装については、おおよそシンプルなものになるので、今回は省略して、これ以降の「課金システム」というのは主にサブスクについてのまとめになります。


ます、サブスクはその仕様によって難易度が天と地ほどの差が出てきます。

サブスクの仕様について、パッと思いつく限りのだと

  1. 1つのプランのみのパターン
    • (例:スタンダードプランなど)
  2. 2つ以上のプランで、グレード(金額)が異なるパターン
    • (例:スタンダードプラン、プレミアムプランなど)
  3. 2つ以上のプランで、グレードは同じだが期間が異なるパターン
    • (例:1ヶ月、3ヶ月、6ヶ月、のプランがあるやつ)
こんなパターンの仕様があるかなと思います。
難易度的には、体感「1<<<<2<3」みたいな感じかなと🤔
アップグレードやダウングレードなどのプラン変更の概念が絡んでくると一気に実装が難しくなる印象です。


ここから少しだけ実装面のお話になります。(軽ーくなので、詳細は省きます🙇‍♀️)

【おすすめのサーバー構成】

サーバーの構成は実装が少しだけ楽になるものを記載してます!

※AWSを使うと想定した場合で文言使います

  • APIサーバー
  • バッチサーバー
  • webhookサーバー
  • DB
  • メイン処理サーバー (SQSとLambdaの連携)
ざっくりとしたシーケンス図載せておきます🙇‍♀️(かなり省略気味...)

【購入処理】

【webhook処理】

【バッチ処理】


このサーバー構成がおすすめの理由としては、

  • SQSとLambdaを使うとDBの処理をまとめられる!
  • 仕様変更などにも対応しやすい
  • コード量が少なくなる
  • デッドロックを回避できる

となります。

APIサーバー、バッチサーバー、webhookサーバーそれぞれでデータの更新処理をするパターンも実装しましたが、仕様変更やバグ修正の対応の際に修正漏れがあったりしてかなり大変でした。
なので、SQSなどのメッセージ処理のサービスを使って、Lambdaなどで処理をまとめてしまうのが圧倒的に楽(なはず)です!


ここで、私が実装した時のストアから受け取れる、レシート情報とwebhookの通知を少しだけ簡単にまとめます🍋(レシート情報は変更が入る可能性が高いので最新の情報は公式HPを参考にしてくだいさい!)

【レシート情報】

Google:

  • linkedPurchaseToken(一連の購入処理で一意、解約すると変わる)
  • purchaseToken(購入ごとに一意。購入ごとに変わる)
  • startTimeMillis(購読開始日時。サブスク最初に購入した日時)
  • expiryTimeMillis(購読の有効期限。次の更新タイミング)

Apple:

  • originalTransactionId(ユーザーごとに一意、アップルアカウントに紐づくので解約しても変わらない)
  • transactionId(購入ごとに一意。購入ごとに変わる)
  • original_purchase_date(サブスクを最初に購入した日時)
  • purchase_date(購読購入/更新日時)
  • expires_date(購読の有効期限。次の更新タイミング)

レシート情報の中身は、普通にスーパーなどで買い物をした時にもらうレシートを思い出していただくと、イメージしやすいかと思います!
お店毎にレシートの書き方が違うように、課金システムで各ストアから受け取れるレシート情報もGoogleとAppleでレシートの内容が違うのがわかるかと思います....
ユーザーごとのデータも持ち方が変わってくるので、その管理方法のテーブル設計もよく考える必要がありそうです。


次に、サブスクの更新時にwebhookから送られてくる通知情報を軽く説明します。

【webhookの通知情報】

Google:

  • (1)SUBSCRIPTION_RECOVERED
    • 定期購入がアカウントの一時停止から復帰した。
  • (2)SUBSCRIPTION_RENEWED
    • サブスクの定期更新時に来る通知。
    • 一番良く来る通知の種類。
    • アクティブな定期購入が更新された。
  • (3)SUBSCRIPTION_CANCELED
    • サブスクがユーザーまたはシステム側でキャンセルされた。
    • 自発的なキャンセルの場合、ユーザーがキャンセルしたときに送信されます。
  • (4)SUBSCRIPTION_PURCHASED
    • 新しいサブスクが購入された。
    • サブスク解約後、期限が切れてからの再購入もこの通知。
  • (5)SUBSCRIPTION_ON_HOLD
    • アカウントの一時停止を許可している場合にのみ来る通知。
    • サブスクでアカウントが一時停止された。
  • (6)SUBSCRIPTION_IN_GRACE_PERIOD 
    • 猶予期間の設定をしている場合にのみ来る通知。
    • サブスクが猶予期間に入った。
  • (7)SUBSCRIPTION_RESTARTED
    • ユーザーが [Play] > [アカウント] > [定期購入] からサブスクを再開した。
    • サブスク解約後、ユーザーが再開した時点でまだ期限切れになっていない場合に来る通知
  • (8)SUBSCRIPTION_PRICE_CHANGE_CONFIRMED
    • サブスクの料金改訂時に対象ユーザーに通知をした場合に来る可能性がある通知。
    • サブスクの料金変更がユーザーによって確認された。
  • (9)SUBSCRIPTION_DEFERRED
    • サブスクの契約期間が延長された。
  • (10)SUBSCRIPTION_PAUSED
    • サブスクが一時停止された。
  • (11)SUBSCRIPTION_PAUSE_SCHEDULE_CHANGED
    • サブスクの一時停止スケジュールが変更された。
  • (12)SUBSCRIPTION_REVOKED
    • 有効期限前にユーザーがサブスクを取り消した。
  • (13)SUBSCRIPTION_EXPIRED
    • ユーザーが解約した後、期限切れになったタイミングで来る通知。
    • プラン変更でアップグレードをした時に、前のプランがサブスク有効期限切れとしてこの通知も来る。
    • サブスクが期限切れになった。
  • (20)SUBSCRIPTION_PENDING_PURCHASE_CANCELED
    • 保留中の取引 は解約されました。

Apple:

  • INITIAL_BUY
    • サブスクの初回購入時に来る通知。
    • 同じアップルアカウントでは1度しか来ない通知。
  • CANCEL
    • Appleカスタマーサポートによって返金などの理由で解約されたとき
    • または別のサブスクへアップグレードしたとき
    • ユーザーが手動で購読の自動更新を停止した場合は来ない。
  • RENEWAL
    • 過去に更新に失敗した期限切れのサブスの自動更新が成功したとき 
    • deprecateなので、今は来ない通知のはず。
  • INTERACTIVE_RENEWAL
    • ユーザーがアプリ内、またはApp Storeからサブスクを更新したとき
  • DID_CHANGE_RENEWAL_STATUS
    • サブスクの更新ステータスが変更されたとき
    • 解約したときにも通知される
    • プラン変更の場合はこの通知が来る。
  • DID_CHANGE_RENEWAL_PREF
    • ユーザーがサブスクリプションプランを変更したとき
  • DID_FAIL_TO_RENEW
    • 購読中のサブスクの更新時に、決済の問題で更新に失敗したとき
  • DID_RECOVER
    • 更新に失敗した期限切れのサブスクの自動更新が成功したとき
  • PRICE_INCREASE_CONSENT
    • サブスクリプションの価格が値上げされるとき
    • この通知の際に受け取れるレシート情報で、ユーザーが値上げに同意したかどうかが分かる
  • DID_RENEW
    • サブスクの定期更新時に来る通知。
    • 一番良く来る通知の種類。
    • サブスクリプションの自動更新が成功したとき
  • REFUND
    • App Storeからユーザーへの払い戻しがあった時に来る通知
    • sandboxではテスト不可

通知の種類をざっと簡単に書きましたが、googleとappleそれぞれで10個以上の通知の種類があり、それに対応した実装とテストが必要となるため、これも大変な部分になります...😭


では実装面のお話はこれくらいにして、ここから話を少し変えて、実装を経験して大変だったポイントをまとめていこうと思います!

【課金実装での大変なポイント】

  • 各ストアで仕様が異なる
    • 先ほどのレシート情報の通り、レシートの情報が各ストアで違うので、OSごとにユーザーのデータの持ち方が異なってきます
  • 金額設定の最低金額が違う
    • Googleは99円
    • Appleは160円(2022年に120円から値上げ)
    • つまり、iosもandroidも対応する場合は最低金額は160円以上に設定する必要があります
  • sandboxが想定通りに動かない
    • 同じアカウントを使い回すと、想定通りに動かないことがあリマス
    • 払い戻しや支払い失敗などのマイナー系のテストがsandboxではできないです
  • テスト用アカウントは基本使い捨て(最新の情報は不明)
    • テスト用のアカウントを使い回すとなぜか新規扱いになったり、すでに課金アイテムを購入したことがあるユーザー判定されてしまったりと安定しないことが多かったです
    • appleでは、同端末で違うappleアカウントを使っていても、同一ユーザーとみなされてしまうことがあったので、iphoneでのテストは1回テストをしたら一定時間おいてから次のテストをしてました...
    • 以前はgoogleアカウントをいくつも作成することができたが、今は1端末1アカウントになっているようなので、この辺りの解決方法はまたそのうち考えようと思います
  • googleの残金充当期間についての理解
    • サブスクでアップグレードをした際に、前のサブスクのグレードの残金分(アップグレードしなかったら継続されていた期間分)をアップグレードしたプランに充てて、プランを切り替えるもの
    • Appleにはない概念(appleはアップグレードしたら残金分は払い戻される)
    • そもそも両ストアともの仕様で、アップグレードしたら即時アップグレードプランへの切り替えをしなければならないです
    • ※残金充当期間についてはややこしいので、機会があれば別の記事で詳しく説明しようと思います!!!

大変なポイントはまだまだありますが、大きなものであげるとこんな感じでした。

以上が、私が課金システムの実装をして得た知識(ほんの一部)と大変だったポイントのお話でした☺️


今回はフルスクラッチ実装のお話でしたが、フルスクラッチは単純に時間と労力がかかるものなので、既存の課金システムのサービス(もちろん有料)を使える場合は、そちらを使うことも検討してみるといいかもしれません。

とにかくオリジナルの課金実装は時間がかかります...
想像の倍はかかると思っていてもらってもいいかもしれません😵
テストも含めて、半年〜1年くらいは実装期間見ておくと少し余裕が持てるかもと思いましたが、サブスクの仕様にもよるので一概には言えないところでもあります。

ちなみに、課金システムについては、どんどん情報が更新されていって、2年前と現在でもレシート情報がアップデートされていたりするので、情報を追うのも実際に実装をするのもとても大変だと思います。
appleだと、レシート情報のバージョンがv1→v2にアップデートされて、v1で使っていたレシート情報や通知が非推奨になっていたり使えなかったりすることが多々あります。
ただ、課金はかなり奥が深く、ユーザーが使う機能に直結する部分なので、とてもやりがいは感じますし、私自身は課金システムにかなり引き込まれてしまいました☺️
また機会があれば課金システムの実装に携わりたいと思いますし、もっと知識を深めていきたいなと思っています!

最後になりますが、ここまで読んでいただいてありがとうございました!🌷

2024年9月13日金曜日

C#の公式ドキュメントを通して読んでみた。

 

以前、Unityの公式ドキュメントを通して読んでみて(以前の記事はコチラ)、結構学びがあったので、今回はC#言語そのもののドキュメントを読んでみたいと思います。

実際に読んだのは、こちらページです。
https://learn.microsoft.com/ja-jp/dotnet/csharp/tour-of-csharp/overview





サイトの構造が分かりにくいのですが、サイドバーの「はじめに」~「C#プログラミングガイド」まで、ざっくりと目を通しました。


ただし、Unityドキュメントで既に読んだことが大部分で、それ以外の部分はUnityではまだ扱えなかったりするので、業務上の収穫は少なめでした。

面白いなと思った部分を下記に共有したいと思います。



1.Delegateの設計ミス

・対象ページ:System.Delegate と delegate キーワード

Delegeteとは、ごく簡単に言うと、関数を保存しておける変数のようなもの(私訳)

C#では関数を1つ保存できるDelegeteと、複数同時に保存できるMulticastDeleteが明確に区別されて設計されていますが、プログラミングの実用上、この2つは曖昧になってきたらしいです。

そこで下記の一言。

この区別は、実際には当初考えていたよりも役に立たないことがわかりました。 

これは脆弱性を生んだりするような設計ミスではありませんが、公式ドキュメント上に間違いを認めるような文言が載っている、というのは珍しい感じがして、ちょっと面白くないですか?(私だけ?)



2.パターンマッチング

・対象ページ:パターンマッチング

「あ、これ使いたいかも」と直感的に感じた機能。
※誤解を生みやすい名前ですが、Regex.Match()とは別物です。


公式の例はコードコチラ


    int? maybe = 12;

    if (maybe is int number)
    {
        Console.WriteLine($"The nullable int 'maybe' has the value {number}");
    }
    else
    {
        Console.WriteLine("The nullable int 'maybe' doesn't hold a value");
    }
   

if条件がかなり口語的で分かりやすく、nullチェックをしながら数値に変換できる、と凄く使いやすそうな感じがします。


そしてそれを使ったSwitch文がコチラ


    public State PerformOperation(string command) =>
        command switch
        {
            "SystemTest" => RunDiagnostics(),
            "Start" => StartSystem(),
            "Stop" => StopSystem(),
            "Reset" => ResetToReady(),
            _ => throw new ArgumentException("Invalid string value for command", nameof(command)),
        };

めちゃめちゃ見やすくないですか?

いちいちbreak;を書かずに、処理の分岐を羅列できる。
まさにSwitch文の「ブレークスルー」やぁ~(古い)


3.レコード

・対象ページ:レコード

レコードとは、DBのデータのようなものを扱いやすいように、少し機能を加えた特殊なクラスです(私訳)

classの代わりにrecordとし、宣言すると、


    public record Person(string FirstName, string LastName);

それだけで、下記のボイラープレートコードを勝手に実装したクラスが出来上がります。

・Equals()

・GetHashCord()

・すべてのプロパティを引数にしたコンストラクタ


レコードはC#9.0で実装された機能のため、Unity目線では新しい技術です。

C#10で機能追加されてレコード構造体がサポートされたりと、進化を残している部分もあります。

(現在のUnityはC#9.0まで対応)