Open11

読者コミュニティ|VueとGASでつくる!サーバーレス家計簿📔

本の感想や質問をお気軽にコメントしてください。

コードの全量がサンプルにしてはかなり長く、全体の構成やAPI連携を把握しながら作成するのが難しかった。
初級者向けではなく、Vue,GASについてある程度知見があり、かつ簡単なアプリくらいは作成したことのある人向けだと思った。

コード量多いですよね…。分割して見やすくできないか、検討してみます。
また、基礎文法についても省略している箇所は追記したいと思います。

コメントありがとうございます!頂いた内容を参考にさせていただきます。

全般的な初心者なのですが、見やすく整理されているように感じたため1から真似しながら勉強させていただきました。ありがとうございます。
APIの作成までは順調だったのですが肝心の最後の通信で動かなくなってしまい、ソース全コピーしたのですが結局変わらず…
CORSのエラーが出ており、調べるとGASではdoPostのみではblockされてしまうという記事が出てきました。
実際にそのせいなのか分からないのですが、知識が足りず結局解決に至りませんでした。
なにかわかりましたら教えていただけると嬉しいです。

コメントありがとうございます!
こちら同様のエラーが発生していました。この記事を読み進めて頂いたのに申し訳ないです🙇
gasApi.js を次のように書き換えていただくと、動くようになると思います!

 const gasApi = axios.create({
-  headers: { 'content-type': 'application/x-www-form-urlencoded' }
+  headers: { 'content-type': 'text/plain' }
 })

一旦こちらの内容をお試し頂けますでしょうか?よろしくお願いします!

早々のお返事ありがとうございます!
変更してみたのですが、状況変わらずでした。
私がなにか変なことをしてしまっているのかもしれないので、改めて1から試してみようと思います🙇‍♀️
ちなみに、スナックバーにはprovided config url is not validと出ており、curlで叩いたときには問題なくデータが返ってきます。

お待たせしました🙇
こちら axios のバージョン違いで起きる問題でした!(記事のコードは古いバージョンでしか動かない状態です…)
度々すみませんが、gasApi.js を次のように書き換えて頂けますでしょうか!

  // 1. setUrlを修正
+ let apiUrl = ''
  const setUrl = url => {
-  gasApi.defaults.baseURL = url
+  apiUrl = url
  }
  // 2. fetch, add, $delete, updateの4箇所を
  // gasApi.post(apiUrl, {...}) の形に修正
  const fetch = yearMonth => {
-   return gasApi.post('', {
+   return gasApi.post(apiUrl, {
      method: 'GET',

ご対応ありがとうございます!
変更してみたところGASが無事に動き、実行されるようになりました!
ですが、スナックバーの表示はNetwork Errorに代わり、ステータスがすべて失敗(Block)になってしまい、データの取得はまだできていない状態です。
Chromeデベロッパーでは、Access-Control-Allow-Originが不足しているというふうに表示されています。
これはこちら側の設定か何かなのでしょうか…たびたび申し訳ありません😢よろしくお願いします。

確認遅くなり申し訳ないです🙇
GASの実行でエラーがある場合にも Access-Control-Allow-Origin のエラーがログとして表示されるようです。
api.gs の下の方にある log 関数に次のように書き換えて、再度デプロイを試して頂けますでしょうか?
(「API が叩かれたときのログを出力する」の内容に問題がありました…)

 function log(level, message) {
+  if (logSheet === null) return
   logSheet.appendRow([new Date(), level.toUpperCase(), message])

上記内容で直らない場合は

  • GAS上でコードを編集したら保存→デプロイをしてるか
    • ↑コードだけ編集してもデプロイするまで反映されないです!
  • GASのデプロイしたときに発行されるURLを使い回していないか
    • ↑毎回新しいURLが発行されるので、古いURLになってるかもです!
  • 設定画面の「API URL」が /exec で終わっているか

こちら3点も確認して頂けますでしょうか。よろしくお願いいたします!🙇

お返事ありがとうございます!
api.gsに一文追加したところ、読み込み、書き込み、編集すべてできるようになりました!
動くようになって感動しています😭
完全に頼ってしまいましたが、自身でも理解していけるよう勉強していこうと思います。本当にありがとうございました🙇‍♀️

動くようになって良かったです!
記事にこちらの内容追記させて頂こうと思います
コメントありがとうございました〜!🙏

ログインするとコメントできます