今ではスマホアプリとして利用頻度が上がったサービスですが、WEBサイト上でも重要な役割を持ちます。
特に、店舗系HPではお店への地図を表示する際に利用されることが多いです。

地図を表示し、WEBサイトに埋め込む

HP内に地図を表示するにはHTMLファイルに地図の埋め込み処理をする必要があります。

では小松市役所をGOOGLEマップで表示し、埋め込んでみましょう。
手順は以下の通りです。

1. Googleで「小松市役所」を検索
2. 画像1　色枠の『地図』タブをクリック
3. 画像2　色枠の『小松市役所』をクリック
4. 画像3　色枠の『共有』をクリック
5. 画像4　色枠の『地図を埋め込む』タブをクリック後、『HTMLをコピー』をクリック
6. コピーした内容をテキストエディタに貼り付け

完成したページは以下のようになります。
ページ例

GOOGLEマップと同じように、埋め込み表示が可能なのがYOUTUBEです。
会社紹介動画をYOUTUBEにUPし、その動画をHP内に貼り付けたりと用途は様々です。

YOUTUBEの動画をWEBサイトに埋め込む

では以下の手順を行い、動画をWEBサイトに表示してみましょう。
表示する動画は、米津玄師 の「Lemon」にします。

1. Googleで「米津玄師 Lemon」を検索し、YOUTUBE動画を表示
2. 画像1　色枠の『共有』をクリック
3. 画像2　色枠の『埋め込む』をクリック
4. 画像3　色枠の『コピー』をクリック
5. コピーした内容をテキストエディタに貼り付け

完成したページは以下のようになります。
ページ例

PHPを利用して特定のチャンネルの動画を取得し一覧にする

GoogleのサービスではAPIと呼ばれるソフトウェアの機能を共有する仕組みをWEB上に公開しています。
その仕組みを利用し、好きなチャンネルの動画を一覧にしてみます。
※APIキーを取得する必要があり、PHP動作環境が必要なので、興味があったらやってみましょう。
YouTube Data API v3 で、特定チャンネルの最新の動画IDを取得するには？ │ スーパーハリネズミ

<?php
$part = 'snippet';
$channelId = 'UCUCeZaZeJbEYAAzvMgrKOPQ';
$key_id = 'XXXXX';/*APIキーを取得して代入*/
$type = 'video';
$url = 'https://www.googleapis.com/youtube/v3/search?part='.$part.'&channelId='.$channelId.'&type='.$type.'&order=date&key='.$key_id;
$json_str = @file_get_contents($url);
$json = json_decode($json_str,true);
$item = $json['items'];

foreach($item as $key => $val){
	$link = 'https://www.youtube.com/watch?v='.$val['id']['videoId'];
	$id =
	$title = $val['snippet']['title'];
	$description = $val['snippet']['description'];
	$img = $val['snippet']['thumbnails']['high']['url'];
$html = <<< EOM
<div>
<a href="{$link}" target="_blank"><img src="{$img}"></a>
<h2><a href="{$link}" target="_blank">{$title}</a></h2>
<p>{$description}</p>
</div>
<hr>
EOM;
	echo $html;
}
?>

完成したページは以下のようになります。
ページ例

自分が所持するWEBサイトのアクセスを解析するツールになります。
どんな人が見に来て、どのページを見たのかを詳細に知ることができます。
ほぼ全てのWEBサイトがこのサービスを導入していると言ってもいいでしょう。

解析コードをWEBサイトに埋め込む

アクセス解析を行うには、ページ内に解析コードを埋め込む必要があります。

現在、塾生の皆さんはWEBサイトを所持してない方の方が多いと思うので、以下の手順で先程用意したページに設置して見せます。
この先、サイトを持つことがあったら参考にしてください。

1. Googleアナリティクスページへ
2. 画像1　『無料で利用する』ボタンをクリック
3. 画像2　『登録』ボタンをクリック
4. 画像3　各入力枠に情報を入力し『トラッキングIDを取得』ボタンをクリック
5. 同意内容を確認し『同意』ボタンをクリック
6. 画像4　色枠のトラッキングコードをコピーし、HTMLの内の最初の要素として貼り付け

というのが流れなわけですが、文字の説明で理解するにはとても難しいと言えます。
講義内にて詳しく手順を見せ、どのように解析データを確認するかまで説明します。

Googleドキュメントというサービスでは、複数のマイクロソフトOfficeと似たサービスが無料で使えます。
あくまで似たようなものなので、完全に同じ機能が使えるわけではありませんが、WEBブラウザ上で利用ができ、他者との共有も簡単なので重宝されているようです。

Googleドキュメントの利用

Googleドキュメント
上記のリンクから利用ができます。
難しい説明は省いて、要するに『Word』と同じです。
文章を扱う為のサービスになります。

上の画像のように、最初からこのようなテンプレートが用意されていたり、無料にしては豪勢なサービスといえます。

Googleスプレッドシートの利用

Googleスプレッドシート
上記のリンクから利用ができます。
難しい説明は省いて、要するに『Excel』と同じです。
データを扱う為のサービスになります。

上の画像のように、最初からこのようなテンプレートが用意されています。
何より、クラウド上の共有により、データの確認や情報共有の速度に関しては『Excel』よりも上なのではないかと言われているぐらいです。

例えば、当塾内でプロジェクトを企画したとして、そのプロジェクトのスケジュール管理はこのスプレッドシート上で行えば情報が共有しやすくなるということです。

Googleスライドの利用

Googleスライド
上記のリンクから利用ができます。
難しい説明は省いて、要するに『PowerPoint』と同じです。
プレゼン資料を扱う為のサービスになります。

上の画像のように、最初からこのようなテンプレートが用意されています。

Googleフォームの利用

Googleフォーム
上記のリンクから利用ができます。
アンケートからお申し込みフォームまで、多種多様な利用方法のあるGoogleフォーム。
実は、これがあればHP内にお問い合わせフォームを作る必要がなくなってしまうわけです。
データ集計も自動で行ってくれる優れものなので、一度使ってみてください。

上の画像のように、最初からこのようなテンプレートが用意されています。

上記サービス群の利点

ドキュメント、スプレッドシート、スライド、フォームと紹介しましたが、これらはまず無料である点で何よりの魅力でしょう。
office製品ほどの機能の充実はなくとも、我々のような簡易的な利用者には十分ですし、塾生になった時点でGoogleアカウントを取得しているので、すぐ利用できるという点もあります。

これらのサービスが利用できる状態であれば、データの共有もできますし、受け渡しから閲覧までに時間がかかりません。
さらに言うと、スマホアプリを入れなくともブラウザで確認できるので、スマホでの閲覧までもスピーディーだと言えます。

今後、受講していくうえで利用していくサービスになりますので、日ごろから触れていくようにしましょう。

Dropboxから知名度が広まったクラウド型オンラインストレージサービスは、Googleにも備わっています。
主な用途として他人とフォルダを共有してファイルを渡しあう、見せ合う事ができるというのがあります。
無料で15GB使えるので、それだけで十分といえます。

Googleドライブ

Googleドライブ
上記のリンクから利用ができます。

画像を見てもらうとわかるとおり、フォルダを操作する感覚で扱う事が出来ます。
便利な機能として、指定したフォルダを他人と共有機能があるので
「このフォルダはAの人と、こっちのフォルダはBの人と」といった感じで人によって共有するフォルダを使い分けることができます。

このサービスは便利であるとともに、一つ間違えると自分の個人情報が一瞬で世界中に広まる事もありえるので、扱いには気をつけましょう。

Google Search Consoleとは、Googleの検索結果でサイトパフォーマンスの監視や、管理ができる無料ツールです。

利用する目的は？

WEBサイトを公開した際、暫く日数がたつとそのWEBサイトがGoogleの検索結果に表示されます。
しかし、運営者としてはすぐに検索結果に出てほしいですし、早く複数の訪問者が来てくれることを望むはずです。
そんな時に、その手助けをしてくれるのがこの『Google Search Console』です。

上記の目的以外にも、ユーザーがサイトに訪れる前の貴重なデータを取得し、SEO対策を行う際の参考にできます。

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを”SEO対策”と呼びます。

WEBサイトを公開すれば、アクセス数を上げなければいけない
↓
Google検索結果の1ページ目に表示したい
↓
SEO対策をしなければいけない
↓
『Google Search Console』を参考にして対策を行う

というのが利用までの流れです。
WEBサイトというのは、公開して終わりではなく、人に見られてやっと価値が出るものですから、このようなサービスを利用する必要があるというわけです。

利用方法

最新の『Google Search Console』では、自動的に『Googleアナリティクス』との連携されるので、事前にアナリティクスを登録している場合、所有認証が省略できます。
『Googleアナリティクス』の登録方法がわからない場合、以下のページを参考にしてください。
第四回講義 Googleサービスを知り、WEBサイトに利用する

上記の登録手続きが完了したら、Googleアカウントにログインした状態で以下のページにアクセスします。
Google Search Console

アクセスが完了したら、公開サイトを登録してみましょう。
手順は以下の通りです。

1. 画像1　サイトURLを入力し、『プロパティを追加』をクリック
2. 画像2　所有権の自動確認が完了したら、『プロパティに移動』をクリック
3. サイトマップを作成し、ページを用意する
   サイトマップ作成方法（WordPressの場合）
4. 画像3　サイトマップのURLを入力し、『送信』をクリック

以上になります。
後日、『Google Search Console』ページにアクセスすると、解析情報が表示されているので、確認してください。
解析情報の有効利用は、以下の記事が参考になります。

Google Search Consoleを使って検索結果を改善する糸口を見つけよう | ワードプレステーマTCD
【初心者向け】Googleサーチコンソールとは？登録方法&使い方を画像で解説【2019年最新版】- サチコツール – 俺のSEO対策

Google検索で希望するキーワードを検索しているユーザーに広告を表示します。料金が発生するのは成果があった場合（例: ユーザーが広告経由でサイトにアクセスしたり電話をかけたりした場合）のみ。

利用する目的は？

前述したSEO対策というのは思った通りに行くわけではなく、なかなかいい位置に表示されることはありません。
そんな時に、1クリックいくらという広告を利用すれば、訪問ユーザーを増やすことができるというのが『Google広告』の利用目的といっていいでしょう。

広告表示例

Google検索結果の広告枠

狙った地域、キーワードの検索結果に表示されます。
画像では3ページ目のページ下部に表示されていますが、クリック単価を上げることにより、表示位置が変更させられます。

ディスプレイ広告（画像広告）

WEBページやスマホアプリ等、表示箇所は様々。
表示形式に応じた目を引くデザインを意識する必要があります。

利用方法

Googleアカウントにログインした状態で以下のページにアクセスします。
Google 広告

アクセスが完了したら、広告掲載の直前まで手続きを行います。
手順は以下の通りです。

1. 画像1　『今すぐ開始』をクリック
2. 画像2　広告の主な目標をクリックし、開かれたタブ内のを『目標を選択』をクリック
   ※今回は「ウェブサイトでの商品購入や申し込みを増やす」を選択します
3. 画像3　ビジネス名（WEBサイト名）とウエブサイトURLを入力後、『次へ』をクリック
4. 画像4　ターゲットとするユーザーの所在地を選択し、『次へ』をクリック
   ※今回は「拠点からの半径で指定」とし、日本、石川県小松市から半径25kmを選択（画像5）
5. 画像6　お客様の業種に広告内容を記入し候補を選択すると、『この広告で宣伝する商品やサービス』枠におすすめが表示されるので、クリックで選択、『次へ』をクリック
   ※ここの箇所は文字での説明が難しいので、触ってみて工夫しましょう
6. 画像7　広告を作成、各入力欄に必要な情報を入力後、『次へ』をクリック
7. 画像8　広告の予算を設定し、『次へ』をクリック
8. いままで入力してきた広告設定を確認し、問題がなければ『次へ』をクリック
9. 最後にお支払い情報を入力し、『送信』をクリック

広告の掲載後は、状況を見て予算を変更したり、地域を変えてみたり、文言を変更したりと調整して効果的な広告となるようにしましょう。
データを解析して上手に運用しないと、すぐに予算金額に達してしまい、広告の無駄打ちとなってしまいますので気をつけましょう。
Google広告の有効利用は、以下の記事が参考になります。

リニューアルしたばかりのGoogle広告の使い方　～設定をしないと、無駄に広告予算が消えてしまう可能性も！～ | 毎日マーケティング
初心者必見！Google AdWordsの基本の使い方を分かりやすく紹介 | アドリス

大好きなことを収益に。
『Google AdSense』は、自分のウェブサイトに広告を掲載するだけで収益が得られる無料のサービスです。

利用する目的は？

端的に表すとアフィリエイト目的に利用するサービスになります。

成功報酬型広告（せいこうほうしゅうがたこうこく）、アフィリエイト・マーケティング、アフィニティ・プログラム、アソシエイト・プログラム、アフィリエイト・プログラムとは、特にインターネットのWWW上における広告形態をさし、ある広告媒体のウェブサイトに設置された広告によってウェブサイトの閲覧者が広告主の商品あるいはサービス等を購入し、生じた利益に応じて広告媒体に客引きの成功報酬を与える一連の形態をさす用語。単にアフィリエイト (affiliate)、縮めた形でアフィリ、アフィと呼ばれることが多い。

要するに、自分のWEBサイトに広告枠を設置してあげるので、クリックされたり効果があれば、見返りとして報酬をください、というのがアフィリエイトです。
最近でわかりやすいものというと、YOUTUBEの動画再生時に見られる広告動画もアフィリエイトになります。
あの広告動画があるから、Youtuberは利益を得られるわけです。

そのアフィリエイトを利用するうえで最も一般的なのがこの『Google AdSense』になります。

アフィリエイトの表示例

実は、当サイトでもアフィリエイト広告は表示されています。
以下の画像がその表示例です。

このように表示された画像をクリックすることにより、当塾の収益が少しずつ増えるという事です。

利用方法

Googleアカウントにログインした状態で以下のページにアクセスします。
Google AdSence

アクセスが完了したら、広告掲載の直前まで手続きを行います。
手順は以下の通りです。

1. 画像1　『お申込みはこちら』をクリック
2. 画像2　お申込内容を入力し、『保存して次へ』をクリック
   ※メールアドレスは現在ログインしているGoogleアカウントのアドレスを入力しましょう
3. 画像3　国を「日本」で選択し、利用規約に同意して『次へ』をクリック
4. 画像4　支払先住所の詳細を入力し、『送信』をクリック
5. 画像5　電話番号を入力し、『確認コードを取得』
   ※電話番号が「090-1234-5678」であれば、「+819012345678」と入力する必要があります
6. 画像6　受信した確認コードを入力後、『送信』をクリック
7. 画像7　書かれた指示通り、コードを張り付け、『サイトにコードを貼り付けました』にチェックを入れ、『完了』をクリック
8. 画像8　コードが問題なく確認されると画像の表示になるので、『閉じる』をクリック
9. 画像9　この画面になったら登録完了です。審査が終わってアカウントが有効化されるまで待ちましょう

審査完了までどれぐらいかかるかは不明な点があり、サイトとして体裁をなしていない（ブログとして記事数が少ない、サイトとして情報が少ない等）場合には審査が下りないこともあるので、気をつけましょう。
これについて詳しい記事があるので参考にしてください。

Google Adsenseの攻略ガイド！アドセンス申請方法と審査基準のまとめ｜WordPressテーマ「JIN」の設定マニュアル
グーグルアドセンスの審査に通らない！厳しくなった審査基準のための対応策はこれだ！ | インターネットビジネスで自由に生きる！会社を辞めて海外移住したJINのブログ

本講義では、これから皆さんがやっていくであろう、WEB制作をしていく上で便利なサービスを紹介しました。
講義内で説明した通り、中には利用必須のサービスもあり、Googleの存在の大きさを感じずにはいられません。

そして、これらはすべて無料なわけですから、まずは使ってみることだと思います。
いずれは淘汰されるサービスもありますが、今は重要なものばかり。
いつでも使えるように慣れておきましょう。

前回に引き続き『HTMLとCSS』の項目にあるリンクを開いて、その中にあるすべてを学習してみましょう。
物足りない方は『JavaScript』までさらに進めてみましょう。