ノンプログラマーがchat GPTを問いつめてChrome拡張機能を作った話（２）―「Twitchの配信情報をXにシェアするためのツール（ベータ版）」OAuth認証 編
はじめに
きっかけはTwitch配信をするたびに「配信をもっと簡単にシェアできないかな」と考えていた事でした。最初はStreamDeckに「Xに投稿」ボタンを作ろうと考えましたが、仲の良い友人はStreamDeckを持っていなかったため、Chromeの拡張機能として作成するに至りました。
この記事では「Twitchの配信情報をXにシェアするためのツール」の開発過程とアップデートの内容をChatGPTにおんぶにだっこで書いていきます。
課題と目標
前回のバージョンではツール導入の手順が複雑すぎました。導入してしまえば便利なのですが、これでは友人たちに使ってもらうどころか敬遠されてしまいます。
ユーザーがクライアントID、クライアントシークレット、アクセストークンを取得してコードに入力する作業を省くことが今回のバージョンの課題となりました。Chromeウェブストアへの公開も視野に入れていたため、コードに触れることなく導入できることが今回の必須条件でした。
知識の限界
日々、ChatGPTを問いつめて課題解決に励んでいたのですが、煮詰まってしまっていました。ChatGPTに簡単にTwitchへのログインができる方法を聞いてもサーバーが必要だと言われるなど、私には到底難しい方法ばかりが提示されていました。
わからないなりにも設定画面を作成しました。設定画面ではユーザー名を入力することができ、完了ボタンをクリックすると、そのユーザーの配信情報を表示・コピー・シェアすることができます。
新しい知識
いつものように配信しながらChatGPTを問いつめていると、有識者たちがコメント欄に現れて必要な知識を教えてくれました。まったく知識のない私に根気強く、ゆっくり、丁寧に、教えてくれました。
有識者たちに促され、他のTwitch関連の拡張機能を見てみると、OAuth認証のながれを体験することで理解が深まりました。それは私が目指していた最初から最後までユーザーがコードに触れることなく完結できる仕様でもありました。
ここでようやく私は認証とログインの違いをやんわりと理解しました。これを理解していなかったことが煮詰まっていた大きな要因だったと思います。
私が理解した”認証”
私が理解した認証の流れはこのような感じでした。あってますでしょうか？この仕組みを理解しただけでも一歩前進した気持ちになりました。
アプリ（拡張機能）からユーザーへ情報提供の申請をする
「これらの情報を利用しますが承諾してくれますか？」みたいな表示が出る
アプリがユーザーから情報提供の許可をもらう
ここで必要であればログイン
ユーザーが承諾ボタンを押す
アクセストークンが発行される
TwitchAPIにアクセスして情報を取得する
アクセストークンを使ってTwitch APIに「配信情報をください」とリクエストを送り情報を得る
OAuth認証とは
OAuth（オーオース）は、サービス間で安全に情報をやりとりするための仕組みです。たとえば、Twitchで配信情報を取得するためには、Twitch側に「このアプリは安全ですよ」と証明する必要があります。そのための手段がOAuth認証です。（とChatGPTが申しております。）
認証の流れを作る
拡張機能のポップアップ画面にTwitchと連携するボタンを追加。ボタンをクリックすると、Twitchの認証画面（必要であればログイン画面）が開き、ユーザーが認証を行う流れを作りました。
問題点
開発環境ではうまく作動していたのに、何名か友人知人にzipファイルを送って同じように認証してもらったところ、うまく動作しませんでした。有識者に調査してもらったところ、デベロッパーモードで拡張機能を読み込ませるたびに異なる拡張機能IDが振られていることが原因とわかりました。
その際、設定画面（モーダル）に正しくユーザー名を入力して完了ボタンをクリックした際に、モーダルを閉じるかどうか？の議論もあり、UIに興味のある私にはとても楽しいフィードバックでした。
解決策
拡張機能IDが変わってしまうとリダイレクトURIの不一致というエラーが起きます。リダイレクトURIには拡張機能IDが含まれているからです。googleの記事の通りに拡張機能IDを固定して解決しました。
UIデザインの調整
全体的に統一感を与えるためUIに変更を加えました。また今後、ストアに公開して不具合などの報告が来たときのことを考え、バージョンを表記しておくことにしました。その他、ドネーションのリンクを設置するなど、細かい調整を行いました。
今回のアップデートまとめ
ユーザー認証の導入
✔ 認証についての知識を得た🆕
✔ 認証ボタンを設置して裏側でアクセストークンを取得
✔ 有識者のフィードバックを得て問題点の特定・改善
✔ ChatGPTが生成したコードを少しずつ調整設定画面の追加
✔ 取得したい配信情報のユーザー名を記入できるようになった🆕UIの調整
✔ ボタンのデザイン統一
✔ 情報の優先順位を意識したレイアウトに変更
✔ ドネーションリンクの設置🆕
✔ バージョンの表記
さいごに
認証についての理解とその実装が今回の最大の難関でした。表に見えない処理を整えていくのは知識のない私にはとても難しく感じました。
こうして何とかみんなに使ってもらえそうな仕様の拡張機能ができあがりました。このバージョンも現在友人知人に使ってもらい、フィードバックをもらっているところです。
次回は、フィードバックの内容を盛り込み、Chrome Web Storeへの審査に合格するまでを報告できればいいなと思っています。
このツールを使いたい方は、筆者のX、Discord、Twitchいずれもお気軽にご連絡ください。感想お待ちしてます。
いいなと思ったら応援しよう！
