KMC 春プロ2024 GoogleAPI体験

KMCの2024年新歓で使用したスライドです。

Transcript

1. GoogleAPI体験 情報学科4回生 mikan
2. 自己紹介@mikan • 2021年 工学部情報学科入学 • KMC45代 • 趣味でWeb開発 • Ruby on Rails • React • Golang • kubernetes • アニメ好き ポートフォリオ→ https://www.piny940.com
3. 今日やること • 環境構築 • デモ実行 • JavascriptでGoogleスプレッドシートを操作 • (時間があれば) ChatGPTをJavascriptで操作
4. 環境構築 ・Code ServerのURLにアクセスし、パスワードを入力します ・ログインできたら「Yes, I trust the authors」を押します
5. 環境構築 ・.envファイルを作成して、DMで送られた内容をコピペしてく ださい GOOGLE_API_KEY=... GOOGLE_JSON=... … SPREADSHEET_ID=...
6. 環境構築 ・DMで送られてきたスプレッドシートのリンクを開いてくだ さい
7. デモ実行 ・Coder Serverに戻って作業！ ・ctrl + shift + p を押して create new terminal と入力します ※Macの人は ・node sample.js を入力してEnterを押したらすぐにスプレッ ドシートを開いてください！ スプシが勝手に編集されているのが確認できます node sample.js ctrl + shift + p create new terminal command + shift + p
8. 演習 ・ を開いて演習に取り組んでみてください！ ・コードは で実行できます main.js node main.js
9. 演習1 スプシを読み込んでみよう ・ のセルを読み込んでみよう 例) A1:C3 let cells = await sheet.readSheet("A1:B2") console.log(cells) 読み込みたいセルの 範囲 let xxx = … でxxxに...を代入 console.log(xxx) でxxxの内容を確認
10. 演習1 スプシを読み込んでみよう 答え: 出力: let cells = await sheet.readSheet("A1:C3") console.log(cells) [ [ 'Hello', 'World' ], [ 'Welcome', 'to', 'KMC' ], [ 'Try', 'Google', 'API' ] ] シングルクオート ’ ’か バッククオート ” ” で囲むと文字列を表す カギカッコ [ ] 配列(複数の値を格納)
11. 演習2 スプシを編集してみよう ・ のセルに[["私は", "xxxです"], ["学部は", "xxxです"], [" 趣味は", "xxxです"]]と書き込んでみましょう 例) await sheet.updateSheet("A4:B6", [ ["私は", "mikanです"], ["学部は", "工学部です"], ["趣味は", "プログラミングです"], ]) A1:C3 ここを書き換える
12. 演習3 変数を使ってスプシを編集 ・変数に値を代入して、その変数を使ってスプシを編集してみま しょう 例) let message = "こんにちは" await sheet.updateSheet("A6", [[message]]) カッコは2回囲む (2次元配列) ここを書き換える
13. 演習4 ChatGPTを操作してみよう ・ChatGPTに対する命令を自由に考えて送信してみましょう 例) let result = await openai.chat("教授に送るメールの 文章を考えてください。") console.log(result)
14. 演習5 ChatGPT + スプシ ・ChatGPTで英語の文章を作成してスプシのF1のセルに書き込 んでみましょう 例) let result5 = await openai.chat("日本語の文章を考 えてください。") await sheet.updateSheet("A8", [[result5]]) ChatGPTの返答を変数に代入 演習3が参考に なるかも
15. 演習6 DeepLを使ってみよう ・適当な日本語の文を英語に訳してみましょう 例) let result6 = await deepl.translate("こんにちは", "EN") console.log(result6) 和訳する場合は”JA”にする
16. 演習7 ChatGPT + DeepL ・ChatGPTで英語の文章を作成してDeepLで日本語に翻訳して みましょう ・ChatGPTで生成した文章とDeepLの翻訳結果の両方を確認し てみましょう 注意ポイント！ ・訳す対象”JA”を書き忘れてない？ ・awaitを書き忘れてない？ ・変数名はこれまでに使ったものは使 えません！
17. 演習7 ChatGPT + DeepL ・答え) let en = await openai.chat("英語の文章を作成してください") console.log(en) let result7 = await deepl.translate(en, 'JA') console.log(result7)
18. 演習8 ChatGPT + DeepL + スプシ ・ChatGPTで英語の文章を作成してDeepLで日本語に翻訳して スプシに書き込んでみましょう 注意ポイント！ ・訳す対象”JA”を書き忘れてない？ ・awaitを書き忘れてない？ ・変数名はこれまでに使ったものは使 えません！ ・鍵カッコは二重にしてる？
19. 演習8 ChatGPT + DeepL + スプシ 答え) let en = await openai.chat("英語の文章を作成してください") console.log(en) let result7 = await deepl.translate(en, 'JA') console.log(result7)
20. 告知！ • 明日 18:30 ~ • CNNモデルで画像分類 • 4共22
21. 出典 • 背景 著作者：starline／出典：Freepik