ELI5という、難しい話を図で説明してくれるスキルを試してみました。

今回頼んだのは「OAuthの仕組みを解説して」。Codexが公式資料を調べて、写真アプリとの連携を例にした図を作ってくれました。

ELI5は「Explain Like I'm 5」の略で、「5歳の子にも分かるように説明して」という意味です。元のELI5は、大きな図と少ない言葉で説明を作るスキルとして公開されています。

自分は、この方針をもとにCodex向けに調整した、eli5-safe という自分用のSKILLを使っています。

「OAuthの仕組みを解説して」と頼んでみる

Codexのチャットでスキルを指定して、こう入力しました。

$eli5-safe OAuthの仕組みを解説して

すると、OAuthの公式仕様とセキュリティ指針、OpenID Connectの仕様を確認したうえで、こんな図ができました。

ELI5で生成したOAuth図解。写真アプリが許可を求め、本人が許可し、認可コードをアクセストークンに交換して写真を読むまでの4段階

図解をHTMLで開く

生成されたHTMLをブラウザで表示した画像です。HTML版は画面幅に合わせて表示が変わるので、スマホで読む場合はリンク先でも確認できます。

OAuthは、別のアプリにデータを使う権限を渡す仕組みです。今回の図では、「写真を読む」ことだけを許可して、写真アプリに自分の代わりに読み取ってもらう流れになっています。

「認可コード」と「アクセストークン」も、それぞれ「一度だけ使う引換券」「APIへ見せる許可証」と説明されていました。APIは、アプリがデータをやり取りするための窓口です。

図の下には、OAuthが扱う「何をしてよい?」と、OpenID Connectが扱う「あなたは誰?」の違いも載っています。

Codexが確認した資料は、次の三つでした。

図には出典も残るので、詳しく知りたい部分は元の資料へ戻れます。今回の図は仕組みをつかむためのもので、実装手順をすべて載せたものではありません。

自分用のSKILLでは、調査もできるようにした

導入するときは、まずCodexに元のスキルの中身を確認してもらい、手動で使える自分用のSKILLを作ってもらいました。

その際、CodexがWeb検索も禁止するルールを加えていました。安全に使いたいと頼んだ結果ですが、これだと説明に必要な情報や最新の資料を調べることもできません。

記事を書きながら設定を確認して、「調べに行ってもいいのでは」と思い、公開情報は必要に応じて調べてよい形へ変更しました。その変更後に試したのが、上のOAuthの図です。

今の eli5-safe には、次のように指示しています。

  • 自分がスキル名を指定したときに使う。
  • 必要に応じて公式資料などを調べ、出典を添える。
  • 「渡した本文だけで」と指定した場合は、追加で調べない。
  • 完成したHTMLは、外部の画像・フォントやJavaScriptを使わずに表示できる形にする。

調べる段階ではWebへアクセスしますが、完成したHTMLは外部へ通信しない作りにしています。図を表示するために、別のサイトから画像やフォントを読み込むこともありません。

今回のHTMLは、Codexで表示と内容を確認し、表示時の通信がないこともチェックしました。スキルの指示を変えただけで、毎回の出力まで保証されるわけではないので、生成後の確認は続ける必要があります。

なお、eli5-safe は自分用につけた名前です。元のELI5を入れただけでは、この記事の入力例はそのまま使えません。元のELI5の使い方は、配布元のREADMEで確認できます。

最初にこのスキルを使ったときは、「AIのSKILLってどうやってうごくの?」と聞きました。そのときはスキルを「レシピ」にたとえた図ができています。

今回はそこから、公式資料を調べてOAuthを図解するところまで試せました。仕組みを知りたいテーマがあれば、一つ聞いてみると、どんな説明ができるのかつかみやすいと思います。