<p>AI関連のブログ記事を社内Slackでシェアしようということになりどうせなら自前で実装しようと思い、作りました。<br></p><h2 id="h0d376e5d4e">構成</h2><ul><li>GAS<ul><li>claspをさらにラップしたasideというのが最近でたので使ってみた</li><li>linter, test, 環境ごとのデプロイ設定などがclaspに組み込まれた感じになってた</li><li><a href="https://github.com/google/aside" target="_blank" rel="noopener noreferrer">aside(github)</a></li><li>ただしgoogle公式でサポートしているものでは無いので注意（<a href="https://github.com/google/aside#disclaimer" target="_blank" rel="noopener noreferrer">説明</a>）</li></ul></li><li>Feedly<ul><li>AI関連の記事のフィードを管理するように使った</li><li>RSS管理ツールで有名なのはFeedlyかInoreaderくらいだと思われる</li><li>APIも充実しているので使いやすい</li><li>ただし、無料プランだと30日に1回、tokenを手動で更新する必要がある</li><li>使用したAPI<ul><li><a href="https://developer.feedly.com/v3/mixes/" target="_blank" rel="noopener noreferrer">Mixes API</a>: 登録したフィードからFeedly側でおすすめ記事をチョイスしたものを取得する</li><li><a href="https://developer.feedly.com/v3/markers/" target="_blank" rel="noopener noreferrer">Marers API</a>: 既読処理</li></ul></li></ul></li><li>ChatGPT<ul><li>社内でAzureが好きにある程度使える環境があるのでそれを使用</li><li>Azure ChatGPTをデプロイし、パブリックAPIとして使えるように準備しておく</li></ul></li></ul><h2 id="hf13b660e68">フロー</h2><p>だいたいこんな感じです</p><ol><li>Feedly Mixes APIで記事を取得（複数件）</li><li>Feedlyデータ１件ごとの処理<ol><li>Feedlyデータからtitle, urlを取得</li><li>Feedlyデータの使用上、記事内容（content）が含まれていないパターンがあるらしい。その場合はurlをfetchして記事内容を取得する。</li><li>記事内容を元にChatGPTで記事要約</li><li>title, url, 記事要約をslack通知用に見やすく加工する</li></ol></li><li>Feedly Markers APIで取得したデータの既読処理を行う</li></ol><p><br></p><h2 id="ha2fafd9105">はまったポイント</h2><ul><li>GASでは通常外部パッケージが使えない<ul><li>以前も同じ問題に当たった気がする、すっかり忘れていた。</li><li>claspにwebpackだとかの設定をすればいける（以前はそうした）が、忘れてしまったので今回はやめる</li><li>使いたかったのがdayjsのみだったのでネイティブのDateクラスで頑張った</li></ul></li><li>GASのデバッグが止まることがある<ul><li>特に記事内容文字列からタグを削る処理等でステップ実行してるとき等</li><li>原因は分からないが、GAS上のメモリ問題？</li><li>始めはエラーになっていると勘違いして色々試したが、通常実行すると問題無かったので一旦無視することにした</li></ul></li><li>Feedlyで永遠に同じ記事を取得してしまう<ul><li>単純に既読処理をしていなかった</li><li>既読処理をしつつ、Mixes APIのパラメータに <code>unreadOnly</code>  をつけると未読のもののみ取得できる</li></ul></li></ul><p><br></p><h2 id="hf0e5a03576">出来上がり</h2><p>このような感じに。<br><img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/14fad72b7c1b4ebfb30e1ef729831362/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-08-04%2019.12.57.png" alt=""><br></p>

GAS, Feedly, ChatGPTでSlackに技術記事と要約をシェアするBotを作った

<p>mofmofでは毎日オンライン朝会をしていて、２チームに別れてzoomの部屋に入りそれぞれの部屋で１人ずつ最近の出来事をしゃべるってことを15分程やっています。<br>ちょっと雑談しましょう的なノリです。<br><br>以前からgas(google app script)で朝会を管理していたのですが、<br></p><ul><li>コード管理とデプロイが面倒</li><li>環境変数にすべき値（スプレッドシートIDとかslackのhookURLなど）をハードコーディングする必要がある</li><li>gasはjsなので型が無い</li></ul><p><br>claspを使うとtypescriptで開発できたり、githubと連携してデプロイできそうだったり（※未検証）するので良さそうだなと思ってclaspで作り直しました。<br></p><h2 id="h466509ec71">やること</h2><ul><li>スプレッドシートからメンバーリストを取得</li><li>メンバーをシャッフルする</li><li>シャッフルしたメンバーを２チームに分ける</li><li>スプレッドシートからランダムでお題（話すことが思いつかない人用にお題を出す）を１つ取得</li><li>特別コンテンツ（おしゃべりじゃないことをする日、オンラインゲーム・瞑想・ヨガとか）をやるかどうか抽選する</li><li>↑情報をテキスト化する</li><li>テキストをslackに通知する</li></ul><p><br></p><h2 id="hd2a56d7ce9">セットアップ</h2><p>セットアップ等はこちらの記事を参考にしました。<br>https://dev.classmethod.jp/articles/ts2gas/<br><br>clasp自身がtypescriptを変換してくれるので特に何も考えることもなくtsがgsに変換された上でgasにデプロイされます。<br></p><h2 id="ha67f6d8258">ファイル分割</h2><p><br>typescriptが使えるので、てっきりモジュール化(ESM)・ファイル分割もいけるんだろうと思っていたのですができませんでした。<br>デプロイしたら単純にimport文がコメントアウトされてるだけでした。<br></p><h3 id="h0123682dfe">webpack</h3><p>サードパーティのプラグイン等を使えばモジュール化もできそうな感じではあったのですが、webpackでローカルビルドしてjsに変換した上でアップする方式にしました。<br><br>こちらの記事を参考にしました。<br>https://zenn.dev/tacck/articles/20211218_gas#webpack-%E8%A8%AD%E5%AE%9A<br><br>やってることは<br></p><ul><li>webpackにgas-webpack-pluginを追加している<ul><li>gasが呼び出す関数をトップレベルに設定する</li><li>globalに設定した関数がgas上で選択可能になる</li><li>https://github.com/fossamagna/gas-webpack-plugin</li></ul></li><li>例：</li></ul><p>	</p><pre><code>$index.ts

import { main, timerMain } from "./modules/main";

declare const global: {
&nbsp;[x: string]: unknown;
};

global.main = main; // 処理の本体。本来はトップレベルにする必要ない（timeMainの中で呼び出される）が、デバッグ用に直接叩くこともあるので追加
global.timerMain = timerMain; // gasのタイマーから呼び出す関数</code></pre><p><br><br>ビルドしてclasp deployするとglobalに設定した関数がgas上で実行可能関数として選択できます。<br><img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/6d45469a7f1d4bd49b10e2996bc9842a/sc-gas-global.png" alt=""><br><br>参考記事のように、package.jsonで以下のようにしとくと便利でした<br></p><pre><code>&nbsp;"scripts": {
&nbsp;&nbsp;"build": "webpack",
&nbsp;&nbsp;"push": "npm run build &amp;&amp; clasp push"&nbsp;
&nbsp;},</code></pre><p><br></p><h2 id="h63ad3943f9">テスト</h2><p><br>ここまででアプリ自体はできました。<br>ついでなのでテストもしておこうと思いました。<br>と言っても最低限のところだけ、作成したメッセージが期待された文言が入っているかをテストしてみました。<br></p><h3 id="hb5f81a2f69">gas特有の関数</h3><p>spread操作とか環境変数操作等、gas特有の関数に依存しているのでテストするにあたってはスタブを作成する必要があります。<br>自前で作ると面倒で何かいい感じのものは無いかと調べたらありました。<br>https://github.com/dan-kushnaryov/gas-mock-globals<br>一通りのスタブが揃ってるっぽいのでこれをテストコードでimportしてあげればOK<br></p><h2 id="hde965b176a">完成</h2><p><br>こんな感じでslackに通知されます。<br><img src="https://images.microcms-assets.io/assets/dd1ea25cf0d84f9591a440404eb96b35/c56b90ed6dc54b7f8f3613d6d61e921a/sc-slack-hook-img.png" alt=""><br></p><ul><li>Around: zoomみたいなオンライン会議用チャットツールです。ゲームなどもできます。リアクション機能多め。</li><li><code>アンゴラ</code>  <code>ウール</code> はオンライン会議室の名前です。羊からの連想です。 </li><li>マスクしている箇所にメンバーの名前がリスト表示されます。</li></ul><p><br>リポジトリはこちらです。<br>https://github.com/sugiii8/asakai-clasp</p>

Tag: gas

GAS, Feedly, ChatGPTでSlackに技術記事と要約をシェアするBotを作った

claspでgas(google app script)アプリをいい感じに改修した