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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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ブラウザのほとんどに搭載されています。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

1回答

6577閲覧

JSでGoogleカレンダーに予定を追加したい。(GoogleCalendarAPIからは追加できました)

DrqYuto

総合スコア432

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ブラウザのほとんどに搭載されています。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/06/05 12:11

JavaScript(以下JS)でGoogleカレンダーに予定を追加したいです。

ページ内のJSコードをデベロッパーツールに貼り付けて実行しました。

// Refer to the JavaScript quickstart on how to setup the environment: // https://developers.google.com/calendar/quickstart/js // Change the scope to 'https://www.googleapis.com/auth/calendar' and delete any // stored credentials. var event = { 'summary': 'Google I/O 2015', 'location': '800 Howard St., San Francisco, CA 94103', 'description': 'A chance to hear more about Google\'s developer products.', 'start': { 'dateTime': '2015-05-28T09:00:00-07:00', 'timeZone': 'America/Los_Angeles' }, 'end': { 'dateTime': '2015-05-28T17:00:00-07:00', 'timeZone': 'America/Los_Angeles' }, 'recurrence': [ 'RRULE:FREQ=DAILY;COUNT=2' ], 'attendees': [ {'email': 'lpage@example.com'}, {'email': 'sbrin@example.com'} ], 'reminders': { 'useDefault': false, 'overrides': [ {'method': 'email', 'minutes': 24 * 60}, {'method': 'popup', 'minutes': 10} ] } }; var request = gapi.client.calendar.events.insert({ 'calendarId': 'primary', 'resource': event }); request.execute(function(event) { appendPre('Event created: ' + event.htmlLink); });

エラーが出ました。
Uncaught TypeError: Cannot read property 'calendar' of undefined at <anonymous>:34:27

Uses the JavaScript client library.
とありましたが、Javascript Client libraryの使い方がよく分かりません。

下のページの
Try this API
の所に自分のGoogleカレンダーIDを入力して

{ "end": { "dateTime": "2020-06-05T22:00:00+09:00" }, "start": { "dateTime": "2020-06-05T21:00:00+09:00" }, "summary": "課題やる" }

としたら、Googleカレンダーに予定を追加できました。

参考

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

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

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

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

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

guest

回答1

0

コメントに書いてあるリンク先のセットアップを済ませていないからだと思います。
https://developers.google.com/calendar/quickstart/js

ここに書かれてあるコードはセットアップが済んでいる前提のものだと思われます。
quickstartを見る限り、少なくともClient IDとAPI Keyの2つを取得して、それらを基にインスタンスの初期化することは必須のようです。Try this APIの場合は、それを内部でよしなにやっているのでしょう。

まずは、quickstartを読んでみて概要を掴むところから始めるといいのではないかと思います。

投稿2020/06/05 12:30

markey

総合スコア355

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

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

DrqYuto

2020/06/05 12:55

ありがとうございます!今手元に環境が無いので、明日試してみます
DrqYuto

2020/06/06 02:28

``` <!-- Copyright 2018 Google LLC Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at https://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <!-- [START calendar_quickstart] --> <!DOCTYPE html> <html> <head> <title>Google Calendar API Quickstart</title> <meta charset="utf-8" /> </head> <body> <p>Google Calendar API Quickstart</p> <!--Add buttons to initiate auth sequence and sign out--> <button id="authorize_button" style="display: none;">Authorize</button> <button id="signout_button" style="display: none;">Sign Out</button> <pre id="content" style="white-space: pre-wrap;"></pre> <script type="text/javascript"> // Client ID and API key from the Developer Console var CLIENT_ID = '略'; var API_KEY = '略'; // Array of API discovery doc URLs for APIs used by the quickstart var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]; // Authorization scopes required by the API; multiple scopes can be // included, separated by spaces. var SCOPES = "https://www.googleapis.com/auth/calendar.readonly"; var authorizeButton = document.getElementById('authorize_button'); var signoutButton = document.getElementById('signout_button'); /** * On load, called to load the auth2 library and API client library. */ function handleClientLoad() { gapi.load('client:auth2', initClient); } /** * Initializes the API client library and sets up sign-in state * listeners. */ function initClient() { gapi.client.init({ apiKey: API_KEY, clientId: CLIENT_ID, discoveryDocs: DISCOVERY_DOCS, scope: SCOPES }).then(function () { // Listen for sign-in state changes. gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus); // Handle the initial sign-in state. updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); authorizeButton.onclick = handleAuthClick; signoutButton.onclick = handleSignoutClick; }, function(error) { appendPre(JSON.stringify(error, null, 2)); }); } /** * Called when the signed in status changes, to update the UI * appropriately. After a sign-in, the API is called. */ function updateSigninStatus(isSignedIn) { if (isSignedIn) { authorizeButton.style.display = 'none'; signoutButton.style.display = 'block'; listUpcomingEvents(); } else { authorizeButton.style.display = 'block'; signoutButton.style.display = 'none'; } } /** * Sign in the user upon button click. */ function handleAuthClick(event) { gapi.auth2.getAuthInstance().signIn(); } /** * Sign out the user upon button click. */ function handleSignoutClick(event) { gapi.auth2.getAuthInstance().signOut(); } /** * Append a pre element to the body containing the given message * as its text node. Used to display the results of the API call. * * @param {string} message Text to be placed in pre element. */ function appendPre(message) { var pre = document.getElementById('content'); var textContent = document.createTextNode(message + '\n'); pre.appendChild(textContent); } /** * Print the summary and start datetime/date of the next ten events in * the authorized user's calendar. If no events are found an * appropriate message is printed. */ function listUpcomingEvents() { gapi.client.calendar.events.list({ 'calendarId': 'primary', 'timeMin': (new Date()).toISOString(), 'showDeleted': false, 'singleEvents': true, 'maxResults': 10, 'orderBy': 'startTime' }).then(function(response) { var events = response.result.items; appendPre('Upcoming events:'); if (events.length > 0) { for (i = 0; i < events.length; i++) { var event = events[i]; var when = event.start.dateTime; if (!when) { when = event.start.date; } appendPre(event.summary + ' (' + when + ')') } } else { appendPre('No upcoming events found.'); } }); } </script> <script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()"> </script> <script> // Refer to the JavaScript quickstart on how to setup the environment: // https://developers.google.com/calendar/quickstart/js // Change the scope to 'https://www.googleapis.com/auth/calendar' and delete any // stored credentials. var event = { 'summary': 'Google I/O 2015', 'location': '800 Howard St., San Francisco, CA 94103', 'description': 'A chance to hear more about Google\'s developer products.', 'start': { 'dateTime': '2015-05-28T09:00:00-07:00', 'timeZone': 'America/Los_Angeles' }, 'end': { 'dateTime': '2015-05-28T17:00:00-07:00', 'timeZone': 'America/Los_Angeles' }, 'recurrence': [ 'RRULE:FREQ=DAILY;COUNT=2' ], 'attendees': [ {'email': 'lpage@example.com'}, {'email': 'sbrin@example.com'} ], 'reminders': { 'useDefault': false, 'overrides': [ {'method': 'email', 'minutes': 24 * 60}, {'method': 'popup', 'minutes': 10} ] } }; var request = gapi.client.calendar.events.insert({ 'calendarId': 'primary', 'resource': event }); request.execute(function(event) { appendPre('Event created: ' + event.htmlLink); }); </script> </body> </html> <!-- [END calendar_quickstart] --> ``` と、<script>タグの中に入れました。 カレンダー取得はできたのですが、 エラーが出ました。 VM603:191 Uncaught ReferenceError: gapi is not defined at VM603:191 (anonymous) @ VM603:191 (index):1 Unchecked runtime.lastError: The message port closed before a response was received. 参考 browser-samples/index.html at master · gsuitedevs/browser-samples https://github.com/gsuitedevs/browser-samples/blob/master/calendar/quickstart/index.html
markey

2020/06/06 05:03

DrqYuto

2020/06/06 05:08

asyncは、よく分かってませんでした。読み込んだ後に、実行できるようにしたら良いということでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問