質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
Google カレンダー

Google カレンダーは、Google社が提供する無料のスケジュール管理ツールです。パソコンやスマートフォン、タブレットなどからアクセスし、スケジュールの追加・変更が可能。Googleアカウントがあれば誰でも使用できます。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

7821閲覧

Google calendar apiで404になる

waribashi

総合スコア30

Google カレンダー

Google カレンダーは、Google社が提供する無料のスケジュール管理ツールです。パソコンやスマートフォン、タブレットなどからアクセスし、スケジュールの追加・変更が可能。Googleアカウントがあれば誰でも使用できます。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/11/12 05:23

編集2020/11/12 05:25

前提・実現したいこと

Googleカレンダーapiを使って、カレンダーから予定を取得したいです。

こちらを参考に、Monacaを使って作っており、このサイトに載っているサンプルコードは正常に動作しました。

しかし私がしたいことはカレンダーから予定を取得することなので、サンプルコードのカレンダーIDを日本の休日のものから、自分のカレンダーIDに変更したところ、404エラーを出すようになりました。
(カレンダーIDはGoogleカレンダートップ > マイカレンダー > テスト用に新しく作成したカレンダーのオーバーフローメニュー(三つの点のアイコン) > 設定と共有 > カレンダーの統合 > カレンダーIDの手順で取得しました)

404エラーを出さないようにするためにはどのようにすればいいでしょうか?

試したこと

・apiに渡しているURLにアクセスしてみると以下のような結果になったため、ページが存在していないわけでは無さそうでした。

{ "error": { "code": 403, "message": "The request is missing a valid API key.", "errors": [ { "message": "The request is missing a valid API key.", "domain": "global", "reason": "forbidden" } ], "status": "PERMISSION_DENIED" } }

apiのドキュメントの横にある「Try this API」の部分でソースコードで使用しているcalendarIDを使って試したところ、ちゃんと予定が取得できました。

エラー一覧の404の項目を確認しましたが、原因がよく分かりませんでした。

該当のソースコード

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="components/loader.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 <script src="https://apis.google.com/js/api.js"></script> 11 <script> 12 var calendar_api_key = 'xxxxxxxxxxxxxxxxx'; 13 var calendar_id = 'xxxxxxxxxxxxxxx@group.calendar.google.com'; 14 var event_url = 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(calendar_id) + '/events'; 15 16 function start() { 17 console.log(event_url); 18 gapi.client.init({ 19 'apiKey': calendar_api_key, 20 }).then(function() { 21 return gapi.client.request({ 22 'path': event_url 23 }) 24 }).then(function(response) { 25 let resultArea = document.getElementById('resultArea'); 26 let items = response.result.items; 27 for(let i = 0; i < items.length; i++){ 28 console.log(items[i].summary + ' ' + items[i].start.dateTime); 29 } 30 }, function(reason) { 31 console.log('reason: ' + reason.result.error.errors[0].reason); 32 console.log('ErrorCode: ' + reason.result.error.code); 33 console.log('Error: ' + reason.result.error.message); 34 }); 35 }; 36 gapi.load('client', start); 37 38 </script> 39</head> 40<body> 41 <div id='resultArea'></div> 42 43</body> 44</html> 45

出力結果
reason: notFound
ErrorCode: 404
Error: Not Found

環境

Monaca
使用言語:JavaScript

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

コメントで続けるよりも新しく回答を投稿して、こちらをベストアンサーにした方が結論を見やすい気がするので、新規投稿します。

色々探してみましたが、現状、

  • Monacaでは公開されているカレンダーのみ、Google calendar apiを利用することができる
  • 認証が必要な行為は一切できない。
  • 認証ができないため、参照するカレンダーはプログラム内で直接指定しなければならない

=ユーザがカレンダーIDを入力しない限り、ユーザが自由に参照するカレンダーを変更するのは不可能である

という結論に落ち着きました。

一つ目に関してですが、私が行き詰まっていた箇所(詳しくはもう一つの回答を参照)は認証で、認証部分はやはり、私が調べた限りでは現時点で実装する方法は無いようです。そのため、認証が必要になる非公開のカレンダーは利用できません。

ただ、Google calendarの設定からアクセス権限を「一般公開して誰でも利用できるようにする」にすると、最初の投稿で参考として挙げていたこちらのカレンダーIDを適宜変更する方法で、利用できるようでした。
つまり、カレンダーを一般公開にすれば、最初の投稿に掲載しているソースコードで利用できました。

同じことをしている同志は少ないとは思いますが、Monacaで認証が必要なGoogle apiを利用する方の参考になれば幸いです。

投稿2020/11/13 14:18

waribashi

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

start関数のgapi.client.initの部分にclient ID(Google APIsのAPIとサービス > 認証情報 > OAuth2.0クライアントIDに表示されているもの)を追加すると、エラー文が以下のように変わりました。
client_id and scope must both be provided to initialize OAuth.

そこで、以下のようにgapi.client.init部分を以下のように変更

JS

1gapi.client.init({ 2 apiKey: calendarApiKey, 3 clientId: clientId, 4 scope: 'https://www.googleapis.com/auth/calendar.readonly' 5})

そうすると以下のようにエラーメッセージが変わりました。
Uncaught gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy

このエラーに対する解決策は色々とネットに上がっているようですが、まだ全ては調べ切れていません。今回の投稿は、とりあえずの経過報告です。
こうなった推測ですが、個人のカレンダーを参照しようとすると、スコープとクライアントIDを渡さないといけないのだと思います。参考元では、個人のサイトではなく、日本の祝日という公開されたカレンダーだったので不要だったのかと。

また、上のエラーとは別件になりますが、MonacaでGoogle apiを利用しようとした同志はどのようにこの問題を解決したのか探している最中にこのような質問を見つけました。

Communityによって上がってきたので現状の回答を……

GooglePlusを用いたAPIサービスは、2019年3月7日を以って終了いたしました。
https://developers.google.com/+/api-shutdown?hl=ja

ですので、現在の回答としては実装は出来ないということになります。

Monacaを利用してGoogle apiを利用する時、認証の際にこのGooglePlusを用いたものが多く、それ以外の記事はあまり見当たりませんでした。もしかするとMonacaでGoogle apiを利用できないかもしれません。絶望しています。
まだ解決済みにはしないため、解決策をご存知の方がいらっしゃれば教えていただければ嬉しいです。

投稿2020/11/12 12:42

編集2020/11/12 12:48
waribashi

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

waribashi

2020/11/13 14:25 編集

こちらの Uncaught gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy というエラーに関してですが、ネットに書いている解決法は「HTTPサーバで実行すれば解決する」でした。 しかしMonacaはそもそもがローカルではなくHTTPサーバで実行されている(デフォルトであればhttp://localhost:8080で動かしていると表示されていた)ようなので、この方法で解決できなさそうでした。それ以外の解決策は、私が調べた範囲では出てきませんでした。 そのため、MonacaでGoogle apiの認証を使うことは不可能であると結論づけました。
waribashi

2020/11/17 03:19

ありがとうございます、調べてみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Google カレンダー

Google カレンダーは、Google社が提供する無料のスケジュール管理ツールです。パソコンやスマートフォン、タブレットなどからアクセスし、スケジュールの追加・変更が可能。Googleアカウントがあれば誰でも使用できます。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。