MS Tech CAMP #24はじめてのアプリ制作 ChatGPTのようなアプリを作ってみよう

MS Tech CAMP #24はじめてのアプリ制作 ChatGPTのようなアプリを作ってみようのイベント資料です。

https://mspjp.connpass.com/event/306104/

1. MS Tech CAMP #24 はじめてのアプリ制作 〜ChatGPTのようなアプリを作ってみよう〜
2. 東京都立大学大学院 情報科学域 2023年10月〜 MLSAとして活動 〜2023年8月 IDEACTIVE JAPAN PROJECT 学生アンバサダー https://x.com/y_a_m_a_y_a ハッカソンが好き！ はじめての人むけのイベントをしたい！ 来月やります！
3. 18:10〜 | オープニング 18:20〜 | 本日の説明・紹介 19:20〜 | アプリをデプロイ 20:20〜 | カスタマイズしたことを共有 休憩 10 mins TODAY’S PROGRAM プログラムの 流れ 18:30〜 | アプリ作成 19:50〜 | 独自でカスタマイズ 〜19:10 | 20:40〜 | クロージング
4. 3ChatGPTアプリの 作成
5. ͸͡ΊͯͷਓͰ΋ΞΠσΞΛܗʹͰ͖Δ DIBU(15Λ࢖ͬͨϋϯζΦϯ Πϕϯτ໨త ͸͡Ίͯͷਓ͕DIBU(15Λ׆༻ͯ͠࡞Δ͜ͱɾಈ͘͜ͱͷָ͠͞ΛຯΘ͏ʂ $IBU(15ʹ࠷ॳͷίʔσΟϯάΛͯ͠΋Β͍ɺमਖ਼ͯ͠ϓϩτλΠϓΛ࡞੒͢Δɻ 本イベントの資料は IDEACTIVE JAPAN PROJECTにて 開催したイベント資料を 更新したものです
6. ここがわかる！ 1. ChatGPTを使ったサイト作成！ 1. ChatGPTみたいなアプリを作成 2. 自分でオリジナルのサイトを作れる・調べられる 1. Azureを使ってWEB上にサイトを公開！ 初心者向けのイベント！ （一部実際の運用としては良くない部分もありますが、初心者向けのイベントなので わかりやすさや工数の少なさを優先しています）
7. Ø )5.-ͱ͸ɺ)ZQFS
   5FYU
   .BSLVQ
   -BOHVBHFͷུͰɺ΢ΣϒϖʔδΛ࡞੒͢ ΔͨΊͷݴޠͷҰͭͰ͢ɻ ΢Σϒϖʔδͷߏ଄Λఆٛ͢Δͷʹ࢖ΘΕɺςΩετɺը૾ɺϦϯΫɺ ϘλϯͳͲͷཁૉΛ௥Ճ͢Δ͜ͱ͕Ͱ͖·͢ɻ )5.-ͱ͸ʁ
8. Ø $44ͱ͸ɺ$BTDBEJOH
   4UZMF
   4IFFUTͷུ Ͱɺ΢ΣϒϖʔδΛσβΠϯ͢ΔͨΊͷݴޠ ͷҰͭͰ͢ɻ )5.-͕จॻͷߏ଄Λఆٛ͢Δͷʹର͠ɺ $44͸ݟͨ໨΍ελΠϧΛఆٛ͢Δͷʹ ࢖ΘΕ·͢ɻ ྫ͑͹ɺจࣈͷ৭΍ϑΥϯτɺഎܠ৭ɺ ഑ஔͳͲΛࢦఆ͢Δ͜ͱ͕Ͱ͖·͢ɻ $44ͱ͸ʁ
9. $IBU(15ͷ࢖͍ํʢΞΧ΢ϯτ࡞੒ɾϩάΠϯฤʣ IUUQTDIBUPQFOBJDPNDIBU ʹΞΫηε MSアカウントあるいはGoogleアカウントを お持ちの場合、アカウントを新規作成せずとも そちらを使ってログインすることも可能です
10. アカウントへのログイン アカウントをまだ作成していない場合
11. IUUQTDPEFWJTVBMTUVEJPDPN ʹΞΫηε 74DPEFͷΠϯετʔϧ ೚ҙ ͋Δͱศརʂ
12. ϑϩʔνϟʔτ $IBU(15Ͱίʔυੜ੒ ϑΝΠϧͷ࡞੒ 74DPEFʹϖʔετ ϒϥ΢βͰදࣔ ׬੒ܗ
13. $IBU(15ʹϓϩάϥϛϯάͤͯ͞ΈΔ ෼
14. ʮJOEFYIUNMʯʮTUZMFDTTʯͱ͍͏ ໊લͷϑΝΠϧΛ࡞੒͢Δ ˞.BD͸ೋຊࢦΫϦοΫɺ8JOEPXT͸ӈΫϦοΫͰ ৽نσΟϨΫτϦΛ࡞ͬͯɺͦͷதʹ্هͷ)5.-ϑΝΠϧͱ $44ϑΝΠϧΛ࡞੒͢Δɻ ෼
15. $IBU(15Ͱੜ੒͞ΕͨίʔυΛίϐʔ ˠʮJOEFYIUNMʯʮTUZMFDTTʯʹϖʔετ ෼
16. ʮJOEFYIUNMʯΛϒϥ΢βʹυϥοάυϩοϓ ෼
17. 4JavaScriptを書いて 動くようにしよう！
18. 今回のアプリケーションは… ブラウザでの表示 Azure OpenAI Service こんにちは！ 返答： こんにちは！ どのようにお手伝いしましょうか？ 今まで作ったところ 次作るところ
19. JavaScriptとは • Webブラウザ上で動作するプログラミング言語 • HTMLに動きを加えたり、処理の実行を行うことができる • Ex: 100 x 20を計算して など • よく聞くJavaとは違うもの… • 詳しい書き方は、MSLearnにわかりやすいドキュメントがあります！ • h9ps://learn.microsoI.com/ja-jp/training/paths/web-development-101/
20. index.htmlを修正して作成してみよう Index.html内に<script></script>で囲った部分を作ると 書くことができます。 中身に書くコードは次のスライドにて
21. JavaScriptを書いてみよう！ ChatGPTに聞いてみよう！ プロンプト例： ＜今まで書いたコードを載せる＞ このコードに、ボタンを押したらテキストを Azure OpenAI ServicesのAPIへリクエストを送り、 返答を受け取り表示するコードを書いて
22. <script> document.getElementById('submit-btn').addEventListener('click', function() { var submitButton = document.getElementById('submit-btn'); var inputText = document.getElementById('input-text').value; var responseContainer = document.getElementById('response'); // ボタンを無効化し、ローディング中のテキストを表示 submitButton.disabled = true; submitButton.textContent = 'Loading...'; fetch('https://mlsa-openai.openai.azure.com/openai/deployments/mlsa-test/chat/completions?api-version=2023-07-01-preview', { method: 'POST', headers: { 'Content-Type': 'application/json', // 危険: APIキーが露出しています 'api-key': ‘<YOUR_API_KEY>' }, body: JSON.stringify({ messages: [{role: 'system', content: 'あなたはチャットbotです。日本語で返答して'}, {role: 'user', content: inputText}], max_tokens: 800, temperature: 0.7, frequency_penalty: 0, presence_penalty: 0, top_p: 0.95, stop: null }) }) .then(response => response.json()) .then(data => { // 応答からassistantのメッセージのみを抽出して表示 if (data.choices && data.choices.length > 0 && data.choices[0].message) { responseContainer.innerHTML = data.choices[0].message.content; } else { responseContainer.innerHTML = '応答が見つかりませんでした。'; } }) .catch(error => { console.error('Error:', error); }) .finally(() => { // ローディングが終了したら、ボタンを再度有効にし、テキストを元に戻す submitButton.disabled = false; submitButton.textContent = 'Submit'; }); }); </script> コピー用
23. 5GitHubの登録
24. GitHubとは… • コードのバージョン管理システム （厳密には、Gitがバージョン管理システムでGitHubは Gitを使えるプラットフォーム） • Azureでデプロイ（公開）する際に使用 • Microsoftの子会社 バージョン管理のイメージ コード書く コミット （保存する） コード書く コミット （保存する） コード書く 戻したい！ も可能
25. GitHubへ登録 https://github.com/ へアクセス
26. ６ GitHubへコードを コミット
27. リポジトリの作成 1. Newボタンを押す 2. 名前を入力・「Private」を選択 1. 今回APIキーを使っているので 必ずPrivateにしてください！ ෼
28. コードをアップロード（コミット） 「uploading an existing file」を選択 ෼
29. 作成したコードをドラッグ&ドロップ Commit changes をおす
30. ファイルが追加されていれば完了
31. 7Azure for Students の登録
32. Azureとは…. • Microsoftが運営しているクラウドサービス • サーバーなどを貸してくれる できること（一例） • ボタンひとつでWordPressのデプロイ・公開 • WEBサイトのデプロイ・公開 • 自分専用のAIを作れる • 松屋の牛丼か判別するAIなど • 最新AIを使える • GPTのAPI・文字起こし・音声合成・翻訳など
33. WordPress環境を簡単に作成可能！
35. Azure Custom Visionをつかえば可能︕ それぞれ 10~15枚程度で 学習が可能！
36. Azure for Studentsへの登録 https://azure.microsoft.com/ja-jp/free/studentsへ アクセス！ 「無料で始める」から登録 以下のようなページが表示されたら完了！
37. 8Azureへ作ったサイトを デプロイする
38. App Serviceを選択する 検索窓にAppと入れてApp Serviceを選択する
39. 静的Webアプリを選択
40. Azure for Studentsを 選択 自由 （ex: <名前>-chatgpt） 自由 （ex: <名前>-chatgpt）
41. East Asiaを選択 GitHubを選択 先ほど作成した GitHubのリポジトリを選択 HTMLを選択
42. しばらく待つとAzure&サイトのデプロイ完了 5分ぐらいかかります
43. 9サイトに パスワード認証を かけよう！
44. 現在の状態だとセキュリティー的に危ない！ APIキーが誰でもみれてしまう… 悪用されるかも….
45. 一般的には、サーバーでの通信や認証をする ブラウザでの表示 Azure OpenAI Service こんにちは！ 返答： こんにちは！ どのようにお手伝 いしましょうか？ 今回の仕組み ブラウザでの表示 サーバー 認証や制限を してアクセス Azure OpenAI Service 一般的な仕組み 発展的な 内容
46. 今回はサイト自体にパスワードをつける
47. Freeから有料プランに変更 認証は油料プランのみ対応
48. 構成より変更 「構成」より、パスワード保護を 「ステージングと運用の両方の 環境を保護」を選択 URLで適用されていることを確認
49. 有料プランからからfreeに変更 設定後であれば、なぜかfreeプランでも認証使える
50. 今後の発展的な内容
51. .4-FBSO ɾ "[VSF
    GPS
    4UVEFOUT ü .4
    -FBSO͸ϚΠΫϩιϑτެࣜͷ ϥʔχϯάπʔϧʢແྉʣ ü "[VSF
    GPS
    4UVEFOUT͸Ϋϥ΢υΛ υϧ෼ແྉͰ࢖͑Δ ü ιϑτ΢ΣΞΛແྉͰμ΢ϯϩʔυ ͢Δ͜ͱ͕Ͱ͖Δ
52. (JU)VC
    4UVEFOU
    %FWFMPQFS
    1BDL ü ϑϧͰ࢖͏ͱສԁҎ্ͷಛయ͕ ΋Β͑Δ ü υϝΠϯ೥ແྉ ϥΠϒ഑৴αʔϏε͕࢖͑ΔͳͲ https://education.github.com/pack
54. (JU)VC
    $PQJMPU ü "*͕ίʔυΛॻ͘ͷΛ ख఻ͬͯ͘ΕΔ ü ΍Γ͍ͨ͜ͱΛ೔ຊޠͰॻ͘ͱ ݴޠʹ߹ΘͤͯίʔυΛੜ੒ ü (JU)VC
    &EVDBUJPOΛਃ͠ࠐΉͱ ݄υϧֶ͕ੜ͸׬શແྉ