App Store Connect のプロモーションコードをカメラで入力できるWebアプリを作りました

starhoshi.github.io

romoco というプロモーションコードをカメラで入力できるWebアプリを作りました。

プロモーションコードを入力するとギフトカードのようにApp Storeアプリのカメラで読み取れる画像が表示されます。

App Store Connect のプロモーションコードは Plane Text で発行されるんですが、これをスマホに手打ちするのはまあまあ面倒なのでカメラで認識できるようにしました。ソースコードはこちら https://github.com/starhoshi/romoco です。

前職ではプロモーションコードを画像として生成する社内Webアプリがあったのですが、転職してからは手打ちしていてカメラで認識したいな〜と思ってました。
前職のは icccig として公開されてはいるのですが、ImageMagick などが使われており構築が大変そうだったのでWebアプリとして動く形で開発しました。romoco では icccig の画像を利用させてもらってます。

使い方は簡単で、

App Store Connect で作成したプロモーションコードを貼り付け
リンクが表示されるのでクリック
- もしくは Markdown 形式でコピって issue に貼り付ける
App Store アプリのカメラでコードを読み取る機能で表示されたコードを読み取る

になります。

プロモーションコードを20個くらい発行して GitHub Issues に貼り付け、チェックボックスで利用したかの管理をすることが多いため Markdown で吐けるようにしています。

セキュリティ的な話

プロモーションコードはリリース前のアプリをDLするためにあるので、流出するとだいぶ良くないです。

romoco は GitHub Pages にデプロイされています。 GitHub Pages は分析機能が貧弱なのでユーザが入力したプロモーションコードを私は知ることができません。GitHub の社員ならアクセスログをみることは可能かもしれませんが...。

セキュリティが気になるけど使ってみたいという方は gh-pages ブランチをセルフホスティングできます。

技術的な話

業務でウェブフロントエンドの開発に参加したく、勉強を兼ねて Next.js 13, TypeScript, CSS Modules で開発しました。

Next.js 13 の app directory も試しましたが、まだベータで利用できない機能が多く (例えば RuntimeConfig や next export)、従来の pages directory で開発しています。GitHub Pages では SSR できないため next export で静的ファイルにして deploy しています。

API も実行していないくらいの小さなアプリですが入門勢としては学びが多く、Next.js チュートリアル一通りやって、TypeScript を導入し、GitHub Pages で利用するために RuntimeConfig の機能を使ったり、多言語化では next-export-i18n を利用したり(Next.jsのi18nはSSGで利用できない)、CSS は CSS Modules で PostCSS を使っています。

7年前に AlcatrazSearch を作ったときに react-github-corner を使ったんですが、同じ npm ライブラリがまだちゃんと動いてて感動しました。