GAS
GoogleAppScriptの略で、クラウド上で動作するVBAみたいな感じです。
無料で利用でき、一回の動作に6分(!)という制限が付きますが、
かなり高度なWebベースの処理開発が可能です。
この記事では、Qiitaの記事をOpenAIに読み込ませ、要約とおすすめポイントを生成AIから引き出し、スプレッドシートに保存します。
スクレイピングといいつつ、QiitaAPIで手抜きをしています。ご容赦ください。
*CodeForGifu GASハンズオンの資料としてこの記事は作成されました。
材料
- OpenAIのAPIキー
OpenAIからはAPIキーを取得する必要があり、今回はmodel=gpt-4oを利用します。 - Googleアカウント
アカウントがあれば無料で十分です。
--
APIキーの取得方法はこちらの記事を参考にしてください。
https://qiita.com/IshigiwaKenichiro/items/c84bc5288854abb277a6
＊ハンズオンでは一緒に作成します。モデル制限などが難しいので。
つくりかた
GASのプロジェクトを作成する。
下記URLへアクセスします。
https://script.google.com/home/start
あたらしいプロジェクトを選択します。
- プロジェクト名を新しくしておきます
- 最初のコードを書きます
function myFunction() {
console.log('hello');
}
Ctrl+Sで保存できます。
おわったら、▷実行ボタンを押します。
実行ログではconsoleに出力されたログを見ることができます。
実行中にこのようなエラー画面が出ることがあります。
詳細をクリック。
安全ではないページに移動します。
許可を促されるのでOKしてください。
QiitaAPIからデータを取得する。
/api/v2/items?page=1&per_page=5
qiitaの検索は、そのままqueryパラメータに使えるようです。
Qiitaからデータを取得する関数と実行結果はこのようになります。
/**
* Qiitaのデータを取得する（JavaScript,TypeScriptをタグにもつ）
*/
function getQiitaLinks() {
const now = new Date();
now.setDate(now.getDate() - 1);
//日付のフォーマット
const dateStr = Utilities.formatDate(now, 'Asia/Tokyo', 'yyyy-MM-dd')
//クエリにURLエンコードが必要な文字があるよ
const result = UrlFetchApp.fetch(encodeURI(
`https://qiita.com/api/v2/items?query=tag:JavaScript,TypeScript created:>=${dateStr}`
));
const json = JSON.parse(result.getContentText('utf-8'));
//title, url, tags, rendered_bodyのみ抽出
return json.map(({ title, url, tags ,rendered_body }) => ({ title, url, tags,rendered_body }))
}
GASでは非同期処理を考えなくてもよいのがいいですね。
但し利用できる関数やクラスはブラウザやNodeで利用するものとは異なってきます。
OpenAIにデータを投げる。
👇こちらのガイドを参考にします。
https://platform.openai.com/docs/guides/text-generation
curlで投げるとこんな感じです。methodがなんでもいいみたいですね。おもしろい。
curl https://api.openai.com/v1/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer $OPENAI_API_KEY" \
-d '{
"model": "gpt-3.5-turbo",
"messages": [
{
"role": "user",
"content": "Where was it played?"
}
]
}'
GASで実装するとこうなります。
- Bodyが必要なので、content-typeをヘッダに指定すること
- Bodyが必要なので、メソッドをGETではなくPOSTにする
- payload部がBodyになるので、特定の形式のJSONを作成する
- APITokenはauthorizationヘッダーにBearerで指定する
以上がポイントになります。
/**
* OpenAIに挨拶する。
*/
function hello(apiToken){
const resp = UrlFetchApp.fetch(
`https://api.openai.com/v1/chat/completions`, {
method : 'post',
headers : {
'content-type' : 'application/json',
'authorization' : `Bearer ${apiToken}`
},
payload : JSON.stringify({
model : 'gpt-4o',
messages : [
{
role : 'user',
content : 'hello'
}
]
})
}
)
return JSON.parse(resp.getContentText('utf-8'))
}
Qiitaの内容をOpenAIに食べさせる
OpenAIにqiitaの内容を食べさせるコードは下記のようになります。
プロンプトをいろいろ凝ってみるのもいいですね。
/**
* 読んでもらう。
*/
function thought(apiToken, content) {
const prompt = [];
prompt.push(`# 指令`)
prompt.push(`あなたはプログラマです。URLを渡すので、要約と感想をお願いします。`);
prompt.push(`#入力`)
prompt.push(content);
const resp = UrlFetchApp.fetch(
`https://api.openai.com/v1/chat/completions`, {
method: 'post',
headers: {
'content-type': 'application/json',
'authorization': `Bearer ${apiToken}`
},
payload: JSON.stringify({
model: 'gpt-4o',
messages: [
{
role: 'user',
content: prompt.join('\n')
}
]
})
}
)
return JSON.parse(resp.getContentText('utf-8'))
}
ここまでで、Qiitaのデータを取得してOpenAIに評価させられるようになりました。
さっそく試してみましょう。
function myFunction() {
// console.log(getQiitaLinks());
// console.log(hello(APITOKEN));
const links = getQiitaLinks().filter((d, idx) => idx < 5);
console.log(`qiita items retrieved.${links.length} items`);
for (let { url, title, rendered_body } of links) {
const result = thought(APITOKEN, url);
console.log({ title, url });
console.log(result.choices[0]);
}
}
GoogleSpreadSheetに結果を書き込む
consoleに置いておいてもしょうがないので、GoogleSpreadSheetに書き込んで保存したいですよね。
/**
* スプレッドシートのURLに配列を書き込みます。
* @param {string} url
* @param {any[][]} aoo
*/
function writeSpreadSheet(url, aoo) {
if (0 == aoo.length) return;
const book = SpreadsheetApp.openByUrl(url);
const sheetName = Utilities.formatDate(new Date, 'Asia/Tokyo', 'yyyy-MM-dd');
//シート名で取得。とれなかったら、新しく作る。
const sheet = book.getSheetByName(sheetName) ?? book.insertSheet();
sheet.setName(sheetName);
sheet.activate();
//全消し
sheet.clear();
const headers = Object.keys(aoo[0]);
//header
sheet.getRange(1, 1, 1, headers.length).setValues([headers])
//data
for (let r = 0; r < aoo.length; r++) {
const item = aoo[r];
for (let c = 0; c < headers.length; c++) {
sheet.getRange(r + 2, c + 1).setValue(item[headers[c]])
}
}
//行列の幅調整
sheet.autoResizeColumns(1, headers.length);
sheet.autoResizeRows(1, aoo.length + 1);
}
URLはスプレッドシートをGoogleDrive内で新しく作って、そのURLを指定すれば大丈夫です。（スプレッドシートを開いたときに、アドレスバーに出ているものでオッケー）
コード全文
さあ、結果をスプレッドシートに保存できるようになりました。
//OpenAIのAPIトークン
const APITOKEN = `sk-***`;
//SpreadSheetのURL
const SSURL = `https://docs.google.com/spreadsheets/d/***`;
function myFunction() {
// console.log(getQiitaLinks());
// console.log(hello(APITOKEN));
const links = getQiitaLinks().filter((d, idx) => idx < 5);
console.log(`qiita items retrieved.${links.length} items`);
const aoo = [];
for (let { url, title, tags, rendered_body } of links) {
const result = thought(APITOKEN, rendered_body);
console.log({ title, url });
console.log(result.choices[0]);
aoo.push({ url, title, tags: tags.map(tag => tag.name).join(','), openai: result.choices[0].message.content })
}
writeSpreadSheet(SSURL, aoo);
}
/**
* Qiitaのデータを取得する（JavaScript,TypeScriptをタグにもつ）
*/
function getQiitaLinks() {
const now = new Date();
now.setDate(now.getDate() - 1);
//日付のフォーマット
const dateStr = Utilities.formatDate(now, 'Asia/Tokyo', 'yyyy-MM-dd')
//クエリにURLエンコードが必要な文字があるよ
const result = UrlFetchApp.fetch(encodeURI(
`https://qiita.com/api/v2/items?query=tag:JavaScript,TypeScript created:>=${dateStr}`
));
const json = JSON.parse(result.getContentText('utf-8'));
//title, url, tags, rendered_bodyのみ抽出
return json.map(({ title, url, tags, rendered_body }) => ({ title, url, tags, rendered_body }))
}
/**
* OpenAIに挨拶する。
*/
function hello(apiToken) {
const resp = UrlFetchApp.fetch(
`https://api.openai.com/v1/chat/completions`, {
method: 'post',
headers: {
'content-type': 'application/json',
'authorization': `Bearer ${apiToken}`
},
payload: JSON.stringify({
model: 'gpt-4o',
messages: [
{
role: 'user',
content: 'hello'
}
]
})
}
)
return JSON.parse(resp.getContentText('utf-8'))
}
/**
* 読んでもらう。
*/
function thought(apiToken, content) {
const prompt = [];
prompt.push(`# 指令`)
prompt.push(`あなたはプログラマです。URLを渡すので、要約と感想をお願いします。`);
prompt.push(`#入力`)
prompt.push(content);
const resp = UrlFetchApp.fetch(
`https://api.openai.com/v1/chat/completions`, {
method: 'post',
headers: {
'content-type': 'application/json',
'authorization': `Bearer ${apiToken}`
},
payload: JSON.stringify({
model: 'gpt-4o',
messages: [
{
role: 'user',
content: prompt.join('\n')
}
]
})
}
)
return JSON.parse(resp.getContentText('utf-8'))
}
/**
* スプレッドシートのURLに配列を書き込みます。
* @param {string} url
* @param {any[][]} aoo
*/
function writeSpreadSheet(url, aoo) {
if (0 == aoo.length) return;
const book = SpreadsheetApp.openByUrl(url);
const sheetName = Utilities.formatDate(new Date, 'Asia/Tokyo', 'yyyy-MM-dd');
//シート名で取得。とれなかったら、新しく作る。
const sheet = book.getSheetByName(sheetName) ?? book.insertSheet();
sheet.setName(sheetName);
//全消し
sheet.clear();
const headers = Object.keys(aoo[0]);
//header
sheet.getRange(1, 1, 1, headers.length).setValues([headers])
//data
for (let r = 0; r < aoo.length; r++) {
const item = aoo[r];
for (let c = 0; c < headers.length; c++) {
sheet.getRange(r + 2, c + 1).setValue(item[headers[c]])
}
}
//行列の幅調整
sheet.autoResizeColumns(1, headers.length);
sheet.autoResizeRows(1, aoo.length + 1);
}
スケジューリング
ここまでで、昨日書かれた記事の要約が取れましたので、このプログラムを毎日動かしたい。
トリガー機能を利用します。左のペインから選択。
トリガーを追加
時間ベースのトリガーを「日付ベースのタイマー」に
時刻の選択を「０時~１時」に設定します。
すべての実行ログは「実行数」から確認できます。トリガーの下にあります。
まとめ
結果がどうなるか、この記事では載せていません。試してみてね！
エラーハンドリングやロギングなどを省いて、さくっとGASとOpenAIのAPIを試す目的で書きました。OpenAIがURLをいつも読んでくれるわけではなく、500エラーも出ますのでリトライは必要ですね。
このあと時間があれば、claspによるプロジェクト管理とGmailでのメール送付についてもやってみたいと思います。
またTypeScriptにて@types/google-app-scriptを利用しての開発なども時間があれば・・・。