TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML Google Apps Script をHTMLで活用する術を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

Google Apps Script をHTMLで活用する術を現役エンジニアが解説【初心者向け】

初心者向けにGoogle Apps Script とHTMLでの活用術について解説しています。Google Apps Script(GAS)はGoogleのサービスと連携したwebアプリケーションの作成と公開を行うことができるツールです。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Google Apps Script をHTMLで活用する術について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

Google Apps Script とHTMLでの活用術について詳しく説明していくね！

大石ゆかり

お願いします！

 

Google Apps Script(GAS) とは

GoogleAppsScriptとは、システム開発を行うためのGoogleの提供する総合的なプログラミング環境のことを指します。

Googleアカウントに登録した場合、Googleドキュメントやスプレッドシート、メール機能のGmailなど様々なGoogleのサービスを利用可能です。

無料で使用できるGoogle関連サービスをビジネス向けにしたものがGSuiteと呼ばれており、有料で提供されています。

更にビジネス向けのGSuiteなどをより使いやすくするために、自分で拡張したりカスタマイズすることができるものがGoogle Apps Script(GAS)です。

 

Google Apps Script(GAS) をHTMLのコーディングに活用する方法

GSuiteDeveloperHubに新しい空のプロジェクトを作成し、HTMLファイルにコードを記述することでWebアプリケーションとして出力することができます。

GASのプログラミングはJavaScriptをベースにしているため、同じように関数を使用可能です。

出力したいhtmlのコードを新しいプロジェクト内のhtmlファイルに記述しましょう。

その後、gsファイル（コード.gs）にJavaScriptを記述することで出力できます。

 

[PR] Webデザインで副業する方法とは

役に立つ主な機能の紹介など

GoogleAppsScriptには他にも様々な活用方法が存在しています。

HTMLを出力する場合にサーバーを用意しなくとも、HTMLファイルをWebアプリケーションとして出力することが可能であり、メールの自動化やエクセルのマクロをGoogleに置き換えることもできます。

また、マクロをGoogleサービスで使えるようにすることで、他のWebアプリケーションへの組み込みや連携が可能となり、GSuiteの管理をしやすくなるように拡張することも可能です。

ユーザー一覧を抜き出したり、各ユーザーの権限を変更をすることもできるため、汎用性は非常に高いといえます。

GoogleAppsScriptには、主にビジネス用として業務効率化の役に立つ機能が多くあるといえるでしょう。

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLで埋め込み動画の音声を消す方法を現役デザイナーが解説【初心者向け】

HTMLで埋め込み動画の音声を消す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
HTML

HTMLでvideo要素で動画が自動再生されない原因と対処法を現役エンジニアが解説【初心者向け】

HTMLでvideo要素で動画が自動再生されない原因と対処法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

HTMLで改行でずれるレイアウトの原因と対処法を現役エンジニアが解説【初心者向け】

HTMLで改行でずれるレイアウトの原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでテーブル内に日付を表す方法を現役エンジニアが解説【初心者向け】

HTMLでテーブル内に日付を表す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
HTML

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む...
HTML

HTMLでテーブルのセルを結合する方法を現役エンジニアが解説【初心者向け】

HTMLでテーブルのセルを結合する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nb...
HTML

あわせてよく読まれている記事

業務効率が上がる！Google Apps Scriptとは【初心者向け】

この記事では、Google Apps Scriptについて解説しています。 Google Apps Scriptとは何なのか、何ができるのか解説しています。普段の業務でGoogleスプレッドシートなどを利用している方は業務効率が上がるので、理解し使えるようになると便利でしょう。   田島悠介 今回は、Google Apps Scriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Google Apps Scriptの特徴、基本の書き方について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Google Apps Scriptとは Google Apps Scriptがあるサービス Google Apps Scriptでできること Google Apps Scriptのメリット Google Apps Scriptのデメリット 基本構文の書き方   Google Apps Scriptとは Google Apps ScriptとはGoogleが提供しているプログラミング環境です。GAS（ガス）という略称でも呼ばれています。 Googleのアカウントを持っていれば、利用する事ができるので、Webからファイルをダウンロードするといった事は行う必要がありません。 Google ChromeはもちろんFirefoxやInternetExplorerでも利用できます。 Googleスプレッドシートなどでも利用できるので、OfficeのExcelに備わっているVBA（Visual Basic for Applications）と似た言語と想像される方がいるかと思いますが、JavaScriptをベースしているため、違う点は多数あります。 ただ、スプレッドシートにのみではありますが、Officeの機能にある「マクロ機能」が追加されていますので、使い勝手は近しいものがあると思います。   [PR] Webデザインで副業する方法とはGoogle Apps Scriptがあるサービス 該当するサービスの一覧は以下の通りとなります。 ドキュメント スプレッドシート フォーム スライド ドライブ 仕事ではスプレッドシートをよく使用するのではないかと思いますが、特定の条件下（スプレッドシートを開いた時や特定の時間帯など）になった時に自動的に処理を実行させたり、メニューに自分で作成したプログラムを追加する事もできますので、作業の効率化に大きく貢献します。   Google Apps Scriptでできること 上記に「Google Apps Scriptがあるサービス」を記載しました。 上記を見た上でGmailやカレンダーではGoogle Apps Scriptは書けないのか？という疑問が浮かぶ方がいるかもしれません。 Gmailやカレンダーといったサービス上ではGoogle Apps Scriptを書く場所はありません。 ※設定画面やメニューなどで「マクロ」や「スクリプトエディタ」という項目はないと思います。 ただ、スプレッドシートやドライブ上でGmailやカレンダーに関連したGoogle Apps Scriptを書くことができ、自動的にメールを送信させたり、カレンダーにスケジュールを記載させる事も可能になります。 また、Web情報の取得や外部サービス（LINEやSlackなど）にメッセージを送信する事も可能です。   Google Apps Scriptのメリット まずは無料であることです。 いくつか制限が設けられていますが、その制限が作業上で大きく影響を与える事は少ないでしょう。 Quotas for Google Services Google Apps Script ダッシュボード また、上記でGoogle Chromeなどで利用できると書いた通り、Webにアクセスできる環境ならどこでも使える点で、Googleが提供しているサービスと連携している点もメリットの1つです。   Google Apps Scriptのデメリット Google Apps Scriptはサーバーサイドであるため、 ローカルに保存されているファイルなどと直接アクセスして利用するという事はできない点です。 また、リファレンスは英語で書かれているので、英語が分からないとメソッドなど理解するのに時間がかかることがあります。 最近では、Google Apps Scriptに関する書籍が複数あるので、初心者の方でも理解しやすくなっているはずです。 詳解!
Google Apps Script

WordPressでGoogle Analyticsを導入する方法【初心者向け】

Googleアナリティクスとは、Googleが提供する無料のアクセス解析ツールです。 WordPressのサイトにも導入することができます。 Google Analyticsを使えば、サイトの訪問者数（セッション数）、離脱数、流入経路、滞在期間など多くの情報を計測できるようになります。   今回は、WordPressにGoogle Analyticsを導入する方法を解説します。 導入には、テーマを編集する方法とプラグインを使う方法があるので、それぞれ説明していきます。 目次Google Apps Script(GAS) とはGoogle Apps Script(GAS) をHTMLのコーディングに活用する方法役に立つ主な機能の紹介など執筆してくれたメンター   大石ゆかり 田島メンター！！Google AnalyticsでWordPressのサイトを解析したいんですけど、どうやったらいいんですか？ 田島悠介 Google Analyticsのタグを発行して、テーマに挿入するんだ。一緒にやってみようか。   Google Analyticsのタグを発行する まず事前準備としてGoogle Analyticsのタグの発行が必要です。 Google Analyticsのサイトにアクセスし、「お申し込みはこちら」を押してください。 必要項目を記入しアカウントを発行します。   入力画面では、主に下記の項目を入力します。 【アカウント名】：任意の名前を入力 【ウェブサイトのURL】：Google Analyticsを設定するサイトのアドレス 【タイムゾーン】：日本を選択 【職業】：登録するウェブサイトの内容と関連する業種を選択   入力が完了すると、「アナリティクス設定」のタブからトラッキングIDとトラッキングコードが取得できます。 この情報はあとで使いますので、どこかにコピーしておくと便利です。 ここまでできたらWordPressを操作していきます。     WordPressのテーマを編集する まずはWordPressのテーマを編集する方法です。   まず、ダッシュボード>外観>テーマ編集をクリックします。   右側にたくさんテーマ用のファイルが羅列してあるので、その中の「ヘッダー(header.php)」をクリックします。   ソースコードが表示されたら、</head>を探してください。 見つかりにくい時はCtrlキー＋F（Macの場合は⌘+F）を押すと、ページ内検索ができるので、使ってみてください。   見つかったら、先ほど発行したGoogle Analyticsのトラッキングコードを貼り付けます。 最後に、「ファイルを更新」ボタンを押せば、設定完了です。 間違って他のコードを変えないようにご注意ください。   大石ゆかり できましたけど、少し複雑ですね・・・。 田島悠介 そうだね。あ、でも手軽にプラグインでも使えるよ！ 大石ゆかり プラグインの使い方も教えてください！！！   [PR] Webデザインで副業する方法とはプラグインを使ってGoogle Analyticsを導入する ここでは、プラグインを利用したGoogle Analyticsの導入方法を３つ解説します。 1. Google Analytics for WordPress 2. All in One SEO Pack 3. Site Kit これら3つの役割と利用例を記載します。 まずはテーマを編集する方法を説明しましたが、初心者の方にとっては多少面倒かもしれません。 WordPressのプラグインを使えばもっと簡単に導入することができます。 Google Analytics for WordPress ここでは「Google Analytics for WordPress」というプラグインで説明します。 まずは、Google Analytics for WordPressをインストールしましょう。 やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。 インストールが完了すると、管理画面＞設定＞Google Analytics にプラグインが表示されます。 管理画面は全て英語ですが、操作はとても簡単なので大丈夫です。 少し小さい字で書いてある、「Manually enter your UA code」にチェックを入れてください。 チェックを入れると、UAコードを入力するテキストボックスが表示されるので、そこへトラッキングIDを入力します。 ※UAコードとは、トラッキングコードのページに大きく記載されている「UA-XXXXXXX-XX」というコードです。   最後に、「Update Google Analytics Settings」を押せば入力完了です。  All in One SEO Pack ここでは、 All in One SEO Packについて解説します。  All
WordPress

JavaScriptで別ファイルの関数を呼び出す方法を現役エンジニアが解説【初心者向け】

JavaScriptで別ファイルの関数を呼び出す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptで別ファイルの関数を呼び出すことができれば、用途ごとにJavaScriptの関数をまとめることができます。 実務でも、複数のライブラリを使用する際、複数のJavaScriptファイルから関数を呼び出すので、ぜひ学習してみてください。 目次Google Apps Script(GAS) とはGoogle Apps Script(GAS) をHTMLのコーディングに活用する方法役に立つ主な機能の紹介など執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 別ファイルの関数を呼び出す方法について詳しく説明していくね！ 大石ゆかり お願いします！   別ファイルを読み込む方法 HTMLからJavaScriptを読み込む場合、scriptタグを利用して読み込みます。 scriptタグを実装する位置は2種類あります。 headタグに実装する場合 bodyタグの終了タグの直前に実装する場合   headタグに実装する場合 headタグに実装する場合は、JavaScriptをbodyタグ内で実行する場合です。 ここでは、jQueryをheadタグ内で読み込むことで、bodyタグ内のJavaScriptでjQueryを利用した処理を可能にしています。 Vue.jsなどのフロントエンドフレームワークを利用する際には、headタグ内でVueファイルを読み込み、body内でVueの処理を呼び出す実装行うこともあります。 注意点として、headタグに読み込み実装すると、headタグ内のJavaScriptを読み込み終わってからHTMLの表示が始まるため、表示速度が遅くなるというデメリットもあります。 <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script type="text/javascript"> // スクリプトを<body>内で実行する </script>   bodyタグの終了タグの直前に実装する場合 現在主流な方法としては、bodyタグの終了タグの直前にscriptタグを実装する方法です。 bodyタグの終了タグの直前にscriptタグを実装する際、複数のファイルを利用することがあります。 複数のJavaScriptファイルを呼び出す場合、先にjQueryなどのライブラリを読み込んでおくことで、他のファイルでjQueryが利用されていたときに、エラーなく処理できます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </body> </html>   別ファイルの関数を呼び出す方法 head内でJavaScriptファイルを2つ呼び出して、関数を呼び出してみます。 HTMLサンプルコード <html> <head> <meta charset="utf-8" /> <title></title> <script src="sample1.js"></script> <script src="sample2.js"></script> </head> <body> <input type="button" id="b1" value="ボタン1" onclick="sample1()"> </body> </html> sample1.jsサンプルコード function
JavaScript

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。 linkタグとscriptタグは、リッチなサイトを作りたいときに必要になるタグなので、ぜひ参考にしてください。   目次 linkタグとscriptタグ linkタグの使い方 scriptタグ   【動画での解説はこちら！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   linkタグとscriptタグ Webサイトは、htmlとcssで書かれた多くのページによって構成されています。 また、より動きのあるサイトを作るには、それに加えてJavaScriptというプログラミング言語を使ってページを作ります。   一つのプログラムファイルにhtml・css・JavaScriptを記述するのは不可能ではありません。 しかし、プログラムファイルのコードが長くなり、どこに何が書かれているかがわかりづらくなってしまいます。 つまり、プログラムファイルに対するコードの可読性が失われるため、一つのプログラムファイルに記述するのはおすすめできません。   さらに、htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるといったそれぞれの異なる役割を持ちます。 多くのページでサイトが構成される場合、htmlとcssを分割すれば、cssの特定箇所を修正するだけでサイトページを変更できます。 例）サイトのイメージカラーを変えたとき、CSSのカラーを一括すると、サイトの全ページのイメージカラーを変更できる こうした理由からWeb製作の現場では、html・css・JavaScriptのファイルはそれぞれ別ファイルに分けて作ることが一般的です。   その別々に編集したファイルを紐付けて、一つのページとしてまとめるためにlinkタグとscriptタグがあります。   linkタグ linkタグは、他のファイルをリンクしてhtmlファイルに読み込ませます。 rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。 （※スタイルシート(stylesheet)やファビコン(favicon)など） scriptタグ scriptタグは、JavaScriptを読み込むときに使います。   [PR] Webデザインで副業する方法とはlinkタグの使い方 ここからは具体的な使い方について例をみていきます。 まず、htmlファイルとcssファイルの2種類を用意します。 htmlファイルには<body>の部分に<h1>タグで「linkタグの使い方を学ぼう」と入力してみます。 cssのファイルには下記のように記述してみましょう。 ※「font-size: 60px;」は<h1>で書かれた文字のサイズが60px、「color: red;」は<h1>で書かれた文字色が赤 という意味です。 h1  { font-size: 60px;  color: red; } htmlファイルをブラウザで読み込んでみると、<h1>で囲んだ文字が表示されました。 htmlファイルとcssファイルが繋がっていないため、この状態ではまだcssファイルで指定した文字の大きさや色は適用されません。   そこでlinkタグを使って、cssで書いた内容をhtmlファイルに繋げましょう。 rel属性でリンクタイプを指定し、type属性によってどのようなテキストであるか、またhref属性でリンク先のURLを指定します。 linkタグは<head>タグ内に記述しましょう。 <link rel="stylesheet" type="text/css" href="style.css"> すると、<link>タグで指定したファイル（”style.css”）が読み込まれ、文字の大きさと色が変わりました！   続いて、ファビコンの例も見てみましょう。 ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。   実際のWebサイトでは下のように設定されています。   スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。   大石ゆかり CSSは外部ファイルとして読み込んだほうがいいんですか？ 田島悠介 たくさんのページで共通して使う場合は、もちろんHTMLと分けたほうがソースコードも見やすくなるからね。 大石ゆかり タグに直接CSSを適用したら、どちらが優先されるんでしたっけ？ 田島悠介 タグに直接適用したCSSの方が優先されるよ。 大石ゆかり OK！linkタグ覚えました！   scriptタグ 続いてscriptタグです。 Webページには2種類のページがあります。 １つ目は、html・cssだけで書かれた文書のようなページ（静的なページといいます）です。 2つ目は、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすと、それに伴って何か変化が起こる動的なページです。 動的なページには、JavaScriptなどのプログラム言語が使われており、演算機能やループ処理など様々な機能が利用できます。 このJavaScriptを記述する際に利用するタグが、scriptタグです。   scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。 <script type="text/javascript">（JavaScriptのコード）</script> ここでは、JavaScriptで「『JavaScriptでループ処理』という文を1から100までループさせる」というコードを書いてみます。 <script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。 JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。 このhtmlファイルを読み込むと、ブラウザ上で<script>タグ内で書いた処理が実行されました。   今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせて、htmlファイルに読み込ませてみましょう。 htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptのコードをjavascriptのファイルに記述します。（保存する際には「.js」という拡張子を使いましょう） type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル（ここでは”javascript.js”）を読み込みます。 「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。 <script type="text/javascript" src="javascript.js"></script> htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。   このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。 <link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や場所はどこなのかといった情報を指定します。 外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますので、ぜひ覚えておきましょう。   今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。   執筆してくれたメンター メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり HTMLは文書構造、CSSはデザイン・装飾。JavaScriptは何でしたっけ？ 田島悠介 JavaScriptはブラウザ上で動作する、HTMLファイルの中に書けるプログラミング言語で、Webサイトと親和性が高いんだよ。 大石ゆかり プログラミング言語って何だか難しそう。 田島悠介 コツをつかめば簡単だよ。習い事と同じで、教わればあっと言う間に出来るようになるよ。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

jQueryのclickメソッドを使ってクリック時の処理を設定する方法

JavaScriptのライブラリであるjQueryのclickメソッドを使った処理の書き方を解説しています。 ボタンを押した時などclickメソッドはjQueryの中でもよく使うものなので、今のうちに習得しておきましょう。 jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   clickメソッドとは jqueryのメソッドは通常以下のようなfunction内に記述されていきます。 $(function(){ 　　//処理の内容　 }); しかしこのプログラムだと、ページがリロードした瞬間にコードが実行（発火とも言います）されてしまうため、jQueryの本来の目的である、ページを動的に変更するという目的が達成できません。 そのためjQueryには発火するタイミングを指定するメソッドが用意されています。clickメソッドは、指定したボタンが押された時に呼び出される処理を作ることができます。   大石ゆかり 田島メンター！jQueryで要素を取得できるようになったので、取得した要素にイベントを設定したいのですが、jQueryで出来ますか？ 田島悠介 もちろん！とりあえずclickイベントを設定してみよう！ 大石ゆかり ボタンクリックなど、クリックイベントは基本ですよね。 田島悠介 clickメソッドを使って書くんだよ。さっそく見てみよう！   clickメソッドの書き方 clickメソッドの書き方は以下の通りです。 $(function(){ $(“セレクタ”).click(function(){ //処理の内容 }); }); セレクタでボタンを指定した後に、clickメソッドを呼びだします。 clickメソッドの引数でfunctionを呼び出し、functionの中身が実行されます。   [PR] Webデザインで副業する方法とは実際に書いてみよう それではclickメソッドを使用して簡単な処理を書いていきましょう。 ボタンをクリックすると文字が大きくなる 今回はボタンをクリックすると、文字が大きくなるというプログラムを書いていきます。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(function() { $("button").click(function() { $(".big").css("font-size", "50px");
JavaScript

JavaScriptでGoogle Calendar APIを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでGoogle Calendar APIを実装する方法についてTechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせて見てみましょう。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでGoogle Calendar APIを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Google Calendar APIとは Googleカレンダーとは、クラウドのカレンダー画面で予定を管理するサービスの名前です。 APIとは、Application Programming Interface)の略です。 APIはアプリなどのサービスの機能を画面を通さずに直接呼び出して使うもので、画面を通さずに直接呼び出すことで一部の機能だけを利用し、自分のサイトやサービスに追加することができます。 そして、今回は公開されているGoogleカレンダーの「日本の祝日」から、APIを使って祝日名と日付を取得していきましょう。 JavaScriptでGoogle Calendar APIを実装する方法 下記の3つの手順でJavaScriptを書く前の準備が必要です。 Googleアカウントを用意する APIの操作に必要なキーを用意する APIで操作するカレンダーのIDを用意する 準備ができたらGoogleから提供されているJavaScriptのライブラリを使ってAPIを呼び出します。 それでは、それぞれの手順の具体的な方法を確認していきましょう。   Googleアカウントを用意する すでにGmailやGoogleカレンダーなどのGoogleのサービスを利用している方は、すでにアカウントがあるため用意する必要はありません。 アカウントが無い方は、Googleアカウントの作成ページからアカウントを作成します。   APIの操作に必要なキーを用意する APIを最小限の手間で動かすためにクイックスタートのページからGoogleカレンダーの設定とキーの取得を行います。 次の3つのステップをおこなってください。 1.Google Calendar APIのページにアクセスします。2.「Enable the Google Calendar API」ボタンを押します。これでGoogleカレンダーのAPIが有効に設定されます。開いた画面は今回は使わないので、なにもせず右下の「DONE」を押して閉じてください。 3.「Create API key」ボタンを押します。ボタンを押した後に開いた画面に「YOUR API KEY」と書かれた文字がAPIを呼び出す際に必要になるためコピーし、右下の「DONE」を押して閉じましょう。   APIで操作するカレンダーのIDを用意する Googleカレンダーのページにアクセスして、Googleのアカウントでログインします。 カレンダーの画面が表示されたら、左メニューの下の方にある「他のカレンダー」の横の「＋」を押してみましょう。 表示されたメニューから「関心のあるカレンダーを探す」を選択してください。 カレンダーの一覧から「日本の祝日」を見つけたら選択することで日本の祝日が自分のカレンダーに追加されます。 日本の祝日の「＋」横にあるメニューから「設定」を選択します。 設定の画面にカレンダーIDが記載されているのでこれをコピーしておいてください。 これで準備完了です。 では、JavaScriptでAPIの呼び出しです。 Googleから提供されているライブラリを下記のように読み込みます。 <script src="https://apis.google.com/js/api.js"></script> 後は、APIのリファレンスに合わせて、準備したIDやキーを渡せば呼び出すことが可能です。   [PR] Webデザインで副業する方法とは実際に書いてみよう 今回はHTMLソースの中にscriptタグでJavaScriptを書いていきましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <div id='resultArea'></div> </body> <script src="https://apis.google.com/js/api.js"></script> <script> const API_KEY
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML Google Apps Script をHTMLで活用する術を現役エンジニアが解説【初心者向け】